/* SugarCube Gemini Watermark Remover page styles */

.wm-hidden,
.wm-hidden.sc-button {
  display: none;
}

.wm-upload-area {
  background: var(--sc-color-canvas, var(--sc-color-surface));
  border: 2px dashed var(--sc-color-border-strong);
  border-radius: var(--sc-radius-md, 0.75rem);
}

.wm-step-item {
  background: var(--sc-color-surface);
  border: 1px solid var(--sc-color-border);
}

.wm-checker-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='10' height='10' fill='%23f9fdfd'/%3E%3Crect x='10' y='10' width='10' height='10' fill='%23f2f2f2'/%3E%3C/svg%3E");
}

.wm-comparison-container {
  max-height: 60vh;
}

.wm-overlay-shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.wm-slider-handle {
  left: 50%;
}

.step-arrow::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid var(--sc-color-border);
  z-index: 10;
}

@media (min-width: 768px) {
  .step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -24px;
    top: 0;
    bottom: 0;
    width: 24px;
    background-color: inherit;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    z-index: 20;
  }
  .step-item:not(:first-child) {
    clip-path: polygon(0% 0%, 200% 0%, 100% 100%, 0% 100%, 24px 50%);
  }
}

.medium-zoom-overlay,
.medium-zoom-image--opened {
  z-index: 999;
}
.medium-zoom-overlay {
  backdrop-filter: blur(4px);
}

.related-tool-link {
  min-height: 44px;
}

#uploadArea {
  min-height: 280px !important;
  transition: border-color var(--sc-motion-fast), background var(--sc-motion-fast) !important;
}
#uploadArea:hover {
  border-color: var(--sc-color-brand-700) !important;
}
#uploadArea:focus-visible {
  outline: 2px solid var(--sc-color-focus);
  outline-offset: var(--sc-space-1);
}
#uploadArea.drag-highlight,
#uploadArea.border-primary {
  border-color: var(--sc-color-brand-700);
  background: var(--sc-color-selected);
}

.paste-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.625rem;
  padding: 0.3rem 0.7rem;
  background: rgba(244, 84, 35, 0.1);
  border: 1px solid rgba(244, 84, 35, 0.3);
  color: var(--sc-color-brand-700);
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.paste-hint kbd {
  background: rgba(244, 84, 35, 0.18);
  color: var(--sc-color-brand-700);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
}

@media (max-width: 768px) {
  #sliderHandle {
    width: 64px !important;
    margin-left: -32px !important;
  }
  #sliderHandle > div:last-child {
    width: 42px !important;
    height: 42px !important;
  }
}

@media (min-width: 768px) {
  #imageList {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  #imageList > * { margin: 0 !important; }
}
@media (min-width: 1280px) {
  #imageList {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  #singlePreview .sticky { position: static !important; }
}

input, textarea { font-size: 16px; }


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

#fileInput.hidden {
  opacity: 0 !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

[data-i18n].i18n-pending { visibility: hidden; }

/* Select a supported source, inspect the corner, then save. */
.wm-entry { padding-top: var(--sc-space-6); padding-bottom: var(--sc-space-6); }
.wm-entry h1 { margin-bottom: var(--sc-space-3); font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: var(--sc-leading-tight); }
.wm-entry > p:not(.wm-purpose-scope) { display: none; }
.wm-upload-shell { max-width: var(--sc-composer-width); margin-inline: auto; }
.wm-purpose-scope { color: var(--sc-color-muted); font-size: 16px; line-height: var(--sc-leading-copy); }
.wm-purpose-scope { max-width: var(--sc-composer-width); margin: var(--sc-space-4) auto 0; text-align: left; }
.wm-entry #uploadArea { min-height: 13rem !important; height: auto; border-radius: var(--sc-radius-lg); background: var(--sc-color-surface-muted); }
.wm-entry #uploadArea > div { padding: var(--sc-space-5); gap: var(--sc-space-2); }
.wm-entry #uploadArea > div > div { display: none; }
.wm-review-heading { margin-bottom: var(--sc-space-4); }
.wm-review-heading h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--sc-space-2); }
.wm-review-heading p { color: var(--sc-color-muted); font-size: .875rem; line-height: var(--sc-leading-copy); }
.wm-compare-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sc-space-2); margin-bottom: var(--sc-space-4); }
.wm-compare-controls [aria-pressed="true"] { border-color: var(--sc-color-brand-500); background: var(--sc-color-brand-50); }
.wm-compare-range { display: grid; gap: var(--sc-space-2); flex: 1 1 15rem; padding-inline: var(--sc-space-3); }
.wm-compare-range span { font-size: .8125rem; color: var(--sc-color-muted); }
.wm-compare-range input { width: 100%; min-height: var(--sc-control-height); accent-color: var(--sc-color-brand-600); }
body:is([data-watermark-view="single"], [data-watermark-view="batch"]) .wm-entry > p,
body:is([data-watermark-view="single"], [data-watermark-view="batch"]) .wm-entry > div { display: none; }
#singlePreview { padding-bottom: var(--sc-space-8); }
#singlePreview .sticky { position: static; padding: var(--sc-space-5); }
#singlePreview .sticky h2 { display: none; }
#singlePreview #downloadBtn { order: -1; background: var(--sc-color-brand-600); }
#singlePreview .sticky .space-y-3 { display: flex; flex-direction: column; gap: var(--sc-space-3); }
#singlePreview .sticky .space-y-3 > * { margin: 0; min-height: var(--sc-control-height); }
#singlePreview .wm-comparison-container, #singlePreview #originalImage { max-height: 65vh; }
@media (max-width: 1023px) {
 #singlePreview > .flex { flex-direction: column; gap: var(--sc-space-4); }
 #singlePreview .sticky .space-y-3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
 #singlePreview #downloadBtn { grid-column: 1 / -1; }
 #singlePreview > div > .flex-1 { min-width: 0; }
 .wm-entry { padding-top: var(--sc-space-4); }
 .wm-compare-controls .sc-button { flex: 1 1 auto; }
 .wm-compare-range { padding-inline: 0; }
}

/* Keep labels outside the image so even small originals remain unobstructed. */
.wm-preview-labels { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sc-space-2); padding: var(--sc-space-2) var(--sc-space-4); color: var(--sc-color-muted); font-size: .75rem; }
.wm-preview-heading, .wm-preview-metadata { min-width: 0; }
.wm-preview-metadata > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .wm-preview-heading { flex-direction: column; align-items: stretch; gap: var(--sc-space-3); padding: var(--sc-space-4); }
  .wm-preview-metadata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-space-4); }
  #singlePreview .sticky .space-y-3 { grid-template-columns: minmax(0, 1fr); }
}

.wm-status { width: min(72rem, calc(100% - var(--sc-space-8))); margin: 0 auto var(--sc-space-4); color: var(--sc-color-muted); font-size: .875rem; line-height: var(--sc-leading-copy); }
.wm-status:empty { display: none; }
.wm-status.text-warn { color: var(--sc-color-warning); }
.wm-status.text-success { color: var(--sc-color-success); }

/* Batch results use the same controls and neutral surfaces as single results. */
#multiPreview:focus { outline: 1px solid var(--sc-color-border); outline-offset: var(--sc-space-2); border-radius: var(--sc-radius-lg); }
.wm-batch-card { min-width: 0; overflow: hidden; background: var(--sc-color-surface); border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-lg); }
.wm-batch-card > .flex, .wm-batch-card > .flex > div { height: auto; }
.wm-batch-card .border-b { border-color: var(--sc-color-border); }
.wm-batch-card .sc-button.hidden { display: none; }
@media (max-width: 767px) {
  #multiPreview > .flex { flex-wrap: wrap; gap: var(--sc-space-3); }
}

#watermarkRetry { display: block; margin: var(--sc-space-4) auto; }
#watermarkRetry[hidden] { display: none !important; }

/* Supplied v5b 29: source selection, local processing, corner comparison and batch. */
.wm-entry .wm-upload-shell { width:min(100%,var(--sc-composer-width)); margin-inline:auto; }
.wm-entry #uploadArea { min-height:200px!important; height:200px; border:1.5px dashed var(--sc-color-border-strong); border-radius:var(--sc-radius-lg); background:var(--sc-color-well); }
.wm-entry #uploadArea>div { padding:24px 20px; gap:12px; }
.wm-entry #uploadArea>div>div { display:flex; width:44px; height:44px; margin:0; border-radius:50%; box-shadow:none; background:var(--sc-color-brand-50); color:var(--sc-color-brand-500); }
.wm-entry #uploadArea svg.w-8 { width:22px; height:22px; }
#watermarkUploadTitle { margin:0; font-size:17px; font-weight:600; }
.wm-entry .paste-hint { position:absolute; top:100%; margin-top:14px; height:30px; padding:0 12px; background:var(--sc-color-brand-50); border-color:var(--sc-color-brand-200); border-radius:var(--sc-radius-pill); color:var(--sc-color-brand-700); }
.wm-entry .wm-upload-shell { padding-bottom:44px; }
.wm-ready-actions { display:none; justify-content:center; align-items:center; flex-wrap:wrap; gap:18px; padding:16px; margin-top:20px; }
.wm-ready-actions p { color:var(--sc-color-muted); font-size:14px; }
body[data-watermark-state="ready"] .wm-ready-actions { display:flex; }
.wm-selection { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:60px; }
.wm-selection[hidden] { display:none; }
.wm-selection figure { max-width:180px; margin:0; padding:8px; border-radius:14px; background:var(--sc-color-well); box-shadow:var(--sc-shadow-hairline); }
.wm-selection img { width:160px; height:90px; object-fit:contain; border-radius:10px; }
.wm-selection figcaption { color:var(--sc-color-muted); overflow-wrap:anywhere; font-size:12px; margin-top:8px; }
.wm-processing { display:none; width:min(var(--sc-container),calc(100% - 32px)); margin:0 auto 24px; padding:40px 24px; border-radius:var(--sc-radius-lg); background:var(--sc-color-well); box-shadow:var(--sc-shadow-hairline); text-align:center; }
body[data-watermark-state="processing"] .wm-processing { display:grid; gap:12px; justify-items:center; }
.wm-processing-spinner { display:block; width:34px; height:34px; border:3px solid var(--sc-color-brand-500); border-right-color:transparent; border-radius:50%; animation:watermark-spin .7s linear infinite; }
.wm-processing progress { width:min(460px,100%); height:8px; accent-color:var(--sc-color-brand-500); }
.wm-processing p { color:var(--sc-color-muted); font-size:13px; }
body[data-watermark-state="processing"] #singlePreview { display:none!important; }
body[data-watermark-state="processing"] .wm-entry .wm-upload-shell { display:none!important; }
body[data-watermark-state="error"] .wm-entry .wm-upload-shell { display:block!important; }
body:is([data-watermark-view="single"],[data-watermark-view="batch"]) .wm-entry>.sc-tool-hero { display:block!important; }
#singlePreview { width:min(var(--sc-container),calc(100% - 32px)); padding:0; margin:0 auto 24px; }
.wm-review-heading h2 { font:600 20px/1.3 var(--sc-font-display); }
.wm-review-heading p { margin-top:6px; font-size:16px; }
.wm-compare-controls { position:relative; display:flex; gap:6px; align-items:end; margin-top:20px; margin-bottom:20px; }
.wm-compare-controls::before { content:""; position:absolute; bottom:0; left:0; width:308px; height:46px; border-radius:14px; background:var(--sc-color-well); box-shadow:var(--sc-shadow-hairline); }
.wm-compare-controls>[data-wm-view] { position:relative; flex:0 0 96px; min-width:96px; min-height:38px; margin-bottom:4px; padding:8px 12px; border:0; box-shadow:none; border-radius:10px; background:transparent; font-size:13px; }
.wm-compare-controls>[data-wm-view]:first-child { margin-left:4px; }
.wm-compare-controls>[data-wm-view][aria-pressed="true"] { background:var(--sc-color-brand-50); color:var(--sc-color-ink); box-shadow:inset 0 0 0 1px var(--sc-color-brand-500); }
.wm-compare-range { flex:1; min-width:0; display:grid; gap:8px; margin-left:18px; padding:0; color:var(--sc-color-muted); font-size:13px; }
.wm-compare-range input { width:100%; height:6px; min-height:6px; margin:11px 0; appearance:none; border-radius:6px; background:linear-gradient(90deg,var(--sc-color-brand-500) var(--wm-reveal,50%),var(--sc-color-well) var(--wm-reveal,50%)); box-shadow:var(--sc-shadow-hairline); }
.wm-compare-range input::-webkit-slider-thumb { appearance:none; width:20px; height:20px; border-radius:50%; background:var(--sc-color-ink); box-shadow:0 0 0 4px var(--sc-color-brand-200); cursor:pointer; }
.wm-compare-range input::-moz-range-thumb { width:20px; height:20px; border:0; border-radius:50%; background:var(--sc-color-ink); box-shadow:0 0 0 4px var(--sc-color-brand-200); cursor:pointer; }
#singlePreview>.flex { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:20px; align-items:start; }
#singlePreview>.flex>.w-full { width:auto; }
#singlePreview .wm-preview-heading { padding:16px 20px; gap:24px; }
#singlePreview .wm-preview-heading h2 { flex:1; font-size:15.5px; }
#singlePreview .wm-preview-heading h2>span:first-child { background:var(--sc-color-brand-500); }
.wm-preview-metadata { font:11.5px/1.5 var(--sc-font-mono); color:var(--sc-color-subtle); gap:16px; }
.wm-preview-metadata p { margin:0; }
#processedInfo { color:var(--sc-color-warning); }
.wm-preview-labels { padding:8px 16px; font-size:12.5px; background:var(--sc-color-canvas-deep); }
.wm-checker-bg { background:var(--sc-color-canvas-deep); }
#singlePreview .sticky { padding:18px; border:0; border-radius:var(--sc-radius-xl); background:var(--sc-color-surface); box-shadow:var(--sc-shadow-hairline); }
#singlePreview .sticky .space-y-3 { display:flex; gap:10px; }
#singlePreview #downloadBtn { order:0; }
#singlePreview #copyBtn { order:1; }
#singlePreview #resetBtn { order:2; }
#singlePreview .sticky .sc-button { width:100%; min-height:48px; }
#singlePreview .sticky :is(#copyBtn,#resetBtn) { background:transparent; color:var(--sc-color-ink); box-shadow:var(--sc-shadow-hairline); }
#singlePreview .sticky #resetBtn { min-height:42px; }
#singlePreview>.flex>.flex-1>div { border-radius:28px; }
#sliderHandle>div.absolute { width:40px; height:40px; background:var(--sc-color-ink)!important; border:0; }
#sliderHandle>div.absolute svg { color:var(--sc-color-canvas-deep)!important; }
#multiPreview { width:min(var(--sc-container),calc(100% - 32px)); margin:0 auto 24px; padding:24px; border-radius:var(--sc-radius-xl); background:var(--sc-color-surface); box-shadow:var(--sc-shadow-hairline); }
#multiPreview>#imageList { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
#imageList>.wm-batch-card { margin:0!important; padding:12px; border:0; border-radius:18px; background:var(--sc-color-well); }
.wm-batch-card>.flex { display:flex; flex-direction:column; }
.wm-batch-card>.flex>.border-b { width:100%; padding-bottom:12px; gap:18px; }
.wm-batch-card>.flex>.border-b>div:first-child { width:152px; height:86px; padding:0; background:transparent; }
.wm-batch-card>.flex>.border-b>div:first-child img { width:100%; height:100%; max-height:100%; object-fit:contain; border-radius:10px; }
.wm-batch-card>.flex>.border-b>.flex-1 { padding:0; }
.wm-batch-card>.flex>.border-b h4 { white-space:normal; overflow-wrap:anywhere; }
.wm-batch-card>.flex>div:last-child { width:100%; padding:12px 0 0; flex-direction:row; justify-content:flex-end; gap:10px; }
.wm-status.text-warn { padding:18px 20px; border:1px solid var(--sc-color-danger); border-radius:var(--sc-radius-lg); color:var(--sc-color-danger-ink); background:var(--sc-color-danger-soft); }
@keyframes watermark-spin { to { transform:rotate(360deg); } }
@media(max-width:767px) {
  #singlePreview>.flex { grid-template-columns:minmax(0,1fr); }
  .wm-compare-controls { flex-wrap:wrap; }
  .wm-compare-controls::before { bottom:auto; top:0; width:100%; }
  .wm-compare-controls>[data-wm-view] { min-width:0; flex:1; margin-top:4px; }
  .wm-compare-controls>[data-wm-view]:nth-child(3) { margin-right:4px; }
  .wm-compare-range { flex:1 1 100%; margin:16px 0 0; }
  #singlePreview .wm-preview-heading { flex-wrap:wrap; gap:10px 18px; }
  #singlePreview .wm-preview-heading h2 { flex:1 1 100%; }
  #multiPreview { padding:18px 16px; }
  #multiPreview>#imageList { grid-template-columns:minmax(0,1fr); }
  .wm-batch-card>.flex>.border-b>div:first-child { width:110px; height:62px; }
  #multiPreview .text-xl { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) { .wm-processing-spinner { animation:none; } }
.wm-entry .sc-tool-hero h1 { text-wrap:balance!important; }
.wm-entry .sc-tool-hero__lead { text-wrap:balance; }
.wm-entry>.sc-hero-backdrop { display:block!important; }
.wm-entry #watermarkUploadTitle { color:var(--sc-color-ink)!important; }
.wm-entry #uploadArea p:last-of-type { color:var(--sc-color-muted)!important; }
.wm-entry #uploadArea svg.w-8 { color:var(--sc-color-brand-500)!important; }
body:has(.wm-entry) .landing-sections--teaching { margin-top:64px; padding-top:0; }
body:has(.wm-entry) .landing-sections--teaching h2 { font-size:var(--sc-content-title-size); }
body:has(.wm-entry) .landing-sections__steps { gap:16px; margin-top:20px; }
body:has(.wm-entry) .landing-sections__step { padding:22px; background:var(--sc-color-well); border:0; border-radius:20px; box-shadow:var(--sc-shadow-hairline); }
body:has(.wm-entry) .landing-sections__step .landing-sections__copy { display:block; padding:0; }
body:has(.wm-entry) .landing-sections__number { display:grid; width:28px; height:28px; margin:0 0 14px; border:0; background:var(--sc-color-brand-50); color:var(--sc-color-brand-500); font:600 12px var(--sc-font-mono); }
body:has(.wm-entry) .landing-sections__step h3 { font-size:22px; margin:0; }
body:has(.wm-entry) .landing-sections__step p { font-size:var(--sc-content-small-size); line-height:1.8; margin-top:6px; }
@media(max-width:767px) { .wm-preview-metadata { grid-template-columns:minmax(0,1fr); } }
#comparisonContainer { width:100%; max-width:none; aspect-ratio:604/157; max-height:none; }
#originalImage { display:block; width:100%; height:100%; max-height:none; object-fit:cover; object-position:right bottom; }
#processedImage { height:100%; object-fit:cover; object-position:right bottom; }