/* CleanMark — Watermark Remover v2 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

#cm-app{
  --c-bg:      #f8f9ff;
  --c-card:    #ffffff;
  --c-border:  #e2e4ef;
  --c-accent:  #6366f1;
  --c-accent2: #4f46e5;
  --c-green:   #10b981;
  --c-red:     #ef4444;
  --c-text:    #1e1f2e;
  --c-muted:   #6b7280;
  --c-mask:    rgba(99,102,241,.45);
  --c-mask-border: #6366f1;
  --c-shadow:  0 4px 24px rgba(99,102,241,.12);
  --c-radius:  14px;

  font-family:'Inter',system-ui,sans-serif;
  background:var(--c-bg);
  color:var(--c-text);
  border-radius:var(--c-radius);
  overflow:hidden;
  box-shadow:var(--c-shadow);
  min-height:500px;
  position:relative;
}

/* HEADER */
.cm-header{
  padding:1.25rem 2rem 1rem;
  background:var(--c-card);
  border-bottom:1px solid var(--c-border);
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
}
.cm-logo{
  display:flex;align-items:center;gap:.6rem;
  font-size:1.2rem;font-weight:700;color:var(--c-text);
}
.cm-sub{font-size:.78rem;color:var(--c-muted)}

/* UPLOAD */
#cm-upload-panel{padding:1.5rem}

.cm-dropzone{
  border:2px dashed var(--c-border);
  border-radius:var(--c-radius);
  background:var(--c-card);
  cursor:pointer;
  transition:border-color .2s,background .2s;
}
.cm-dropzone:hover,.cm-dropzone.over{
  border-color:var(--c-accent);
  background:rgba(99,102,241,.04);
}
.cm-drop-body{
  padding:3rem 2rem;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.cm-drop-icon{margin-bottom:.5rem}
.cm-drop-body h3{font-size:1.15rem;font-weight:600}
.cm-drop-body p{font-size:.88rem;color:var(--c-muted)}
.cm-link{color:var(--c-accent);cursor:pointer;text-decoration:underline;font-weight:500}
.cm-formats{font-size:.75rem!important;color:#9ca3af!important;letter-spacing:.05em}

/* Features strip */
.cm-features{
  display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem;
  justify-content:center;
}
.cm-feat{
  display:flex;align-items:center;gap:.4rem;
  background:var(--c-card);border:1px solid var(--c-border);
  border-radius:30px;padding:.38rem .9rem;
  font-size:.8rem;color:var(--c-muted);
}
.cm-feat-icon{font-size:.95rem}

/* TOOLBAR */
.cm-toolbar{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.75rem 1rem;
  background:var(--c-card);border-bottom:1px solid var(--c-border);
}
.cm-tools-left,.cm-tools-center,.cm-tools-right{display:flex;align-items:center;gap:.45rem}
.cm-tools-center{flex:1;justify-content:center}
.cm-tools-right{gap:.35rem}

.cm-tool{
  display:flex;align-items:center;gap:.35rem;
  padding:.4rem .85rem;font-size:.8rem;font-weight:500;
  background:var(--c-bg);border:1.5px solid var(--c-border);
  border-radius:8px;color:var(--c-muted);cursor:pointer;
  transition:all .15s;
}
.cm-tool:hover{border-color:var(--c-accent);color:var(--c-accent)}
.cm-tool.active{background:rgba(99,102,241,.1);border-color:var(--c-accent);color:var(--c-accent);font-weight:600}

.cm-brush-opts{
  display:none;align-items:center;gap:.5rem;
  font-size:.78rem;color:var(--c-muted);
  border-left:1px solid var(--c-border);padding-left:.75rem;margin-left:.15rem;
}
.cm-brush-opts input[type=range]{width:80px;accent-color:var(--c-accent);cursor:pointer}

/* Action buttons */
.cm-btn-action{
  display:flex;align-items:center;gap:.4rem;
  padding:.45rem 1rem;border-radius:8px;border:none;
  font-size:.8rem;font-weight:600;cursor:pointer;
  transition:all .15s;font-family:inherit;
}
.cm-btn-auto{background:#eff6ff;color:#2563eb;border:1.5px solid #bfdbfe}
.cm-btn-auto:hover{background:#dbeafe}
.cm-btn-remove{background:var(--c-accent);color:#fff;box-shadow:0 2px 8px rgba(99,102,241,.3)}
.cm-btn-remove:hover:not(:disabled){background:var(--c-accent2);box-shadow:0 4px 16px rgba(99,102,241,.4)}
.cm-btn-remove:disabled{opacity:.4;cursor:not-allowed}
.cm-btn-alpha{background:#f0fdf4;color:#059669;border:1.5px solid #a7f3d0}
.cm-btn-alpha:hover{background:#d1fae5}

/* Icon buttons */
.cm-icon-btn{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:var(--c-bg);border:1.5px solid var(--c-border);border-radius:7px;
  color:var(--c-muted);cursor:pointer;transition:all .15s;padding:0;
}
.cm-icon-btn:hover:not(:disabled){color:var(--c-text);border-color:var(--c-accent)}
.cm-icon-btn:disabled{opacity:.35;cursor:not-allowed}
.cm-sep{width:1px;height:22px;background:var(--c-border);margin:0 .15rem}

/* STAGE */
.cm-stage-wrap{
  flex:1;overflow:auto;
  background:repeating-conic-gradient(#e9eaf0 0% 25%,#f3f4fa 0% 50%) 0 0/20px 20px;
  display:flex;align-items:center;justify-content:center;
  padding:1.25rem;min-height:360px;position:relative;
}
.cm-stage{
  position:relative;display:inline-block;
  box-shadow:0 4px 24px rgba(0,0,0,.15);border-radius:4px;
  overflow:hidden;line-height:0;
}
.cm-stage canvas{display:block;max-width:100%}
#cm-canvas-mask{
  position:absolute;top:0;left:0;width:100%;height:100%;
  cursor:crosshair;
}
#cm-canvas-result{position:absolute;top:0;left:0}

/* Compare */
.cm-compare{
  position:absolute;inset:0;pointer-events:none;z-index:10;
}
.cm-compare-bar{
  position:absolute;top:0;bottom:0;left:50%;
  transform:translateX(-50%);
  pointer-events:all;cursor:ew-resize;
  width:40px;display:flex;flex-direction:column;align-items:center;
}
.cm-compare-line{
  position:absolute;top:0;bottom:0;left:50%;width:2px;
  background:var(--c-accent);transform:translateX(-50%);
  box-shadow:0 0 8px rgba(99,102,241,.5);
}
.cm-compare-knob{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;background:var(--c-accent);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(99,102,241,.4);z-index:1;
}
.cm-label-before,.cm-label-after{
  position:absolute;top:8px;
  background:rgba(0,0,0,.55);color:#fff;
  font-size:.7rem;font-weight:600;letter-spacing:.06em;
  padding:.2rem .55rem;border-radius:30px;pointer-events:none;
}
.cm-label-before{left:8px}
.cm-label-after{right:8px}

/* Progress */
.cm-progress-wrap{
  padding:.85rem 1.25rem;
  background:var(--c-card);border-top:1px solid var(--c-border);
}
.cm-progress-bar-bg{
  height:5px;background:var(--c-border);border-radius:3px;overflow:hidden;margin-bottom:.5rem;
}
.cm-progress-bar-fill{
  height:100%;width:0%;background:linear-gradient(90deg,var(--c-accent),#818cf8);
  transition:width .25s ease;border-radius:3px;
}
#cm-progress-msg{font-size:.78rem;color:var(--c-muted)}

/* Bottom */
.cm-bottom{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  padding:.65rem 1.25rem;
  background:var(--c-card);border-top:1px solid var(--c-border);
}
.cm-image-info{font-size:.75rem;color:var(--c-muted);font-family:monospace}
.cm-download-row{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--c-muted)}
.cm-dl-btn{
  padding:.35rem .85rem;font-size:.78rem;font-weight:600;
  background:var(--c-bg);border:1.5px solid var(--c-border);
  border-radius:7px;color:var(--c-text);cursor:pointer;
  transition:all .15s;font-family:inherit;
}
.cm-dl-btn:hover{border-color:var(--c-accent);color:var(--c-accent)}

/* BATCH */
#cm-batch-panel{padding:1.25rem}
.cm-batch-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1rem;flex-wrap:wrap;gap:.75rem;
}
.cm-batch-header h3{font-size:1rem;font-weight:600}
.cm-batch-actions{display:flex;gap:.5rem}
.cm-batch-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;
}
.cm-batch-card{
  background:var(--c-card);border:1px solid var(--c-border);border-radius:10px;
  overflow:hidden;transition:box-shadow .15s;
}
.cm-batch-card:hover{box-shadow:0 4px 16px rgba(99,102,241,.12)}
.cm-batch-thumb{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  background:#f3f4fa;
}
.cm-batch-info{padding:.6rem .75rem}
.cm-batch-name{font-size:.75rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-batch-status{font-size:.7rem;color:var(--c-muted);margin-top:.2rem}
.cm-batch-btns{padding:.5rem .75rem .75rem;display:flex;gap:.4rem}
.cm-batch-dl{
  flex:1;padding:.3rem 0;font-size:.72rem;font-weight:600;
  background:var(--c-accent);color:#fff;border:none;border-radius:6px;cursor:pointer;
  font-family:inherit;
}
.cm-batch-dl:disabled{opacity:.4;cursor:default;background:var(--c-border);color:var(--c-muted)}
.cm-status-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--c-muted);margin-right:.3rem;vertical-align:middle;
}
.cm-status-dot.done{background:var(--c-green)}
.cm-status-dot.error{background:var(--c-red)}
.cm-status-dot.working{background:var(--c-accent);animation:pulse-dot .8s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}

/* Toasts */
#cm-toasts{
  position:fixed;bottom:1.5rem;right:1.5rem;
  display:flex;flex-direction:column;gap:.5rem;z-index:9999;
}
.cm-toast{
  padding:.7rem 1.15rem;border-radius:8px;font-size:.82rem;
  background:#1e1f2e;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.3);
  animation:toast-pop .2s ease;max-width:300px;font-family:inherit;
}
.cm-toast.success{background:#065f46;border-left:3px solid var(--c-green)}
.cm-toast.error  {background:#7f1d1d;border-left:3px solid var(--c-red)}
.cm-toast.info   {background:#1e3a5f;border-left:3px solid #60a5fa}
@keyframes toast-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Responsive */
@media(max-width:600px){
  .cm-toolbar{gap:.4rem}
  .cm-tools-center{order:3;width:100%;justify-content:flex-start}
  .cm-header{padding:1rem}
  .cm-drop-body{padding:2rem 1rem}
  .cm-features{gap:.5rem}
}

#cm-editor-panel{display:flex;flex-direction:column}