/* AI Vocal Cleaner — namespaced so it doesn't leak into the host theme, and kept
   visually consistent with the AI Mastering Engine plugin (dark, red accent,
   Noto Sans KR) since both may run on the same site. */

.avc-vocal-cleaner, .avc-vocal-cleaner * {
  font-family: 'Noto Sans KR', 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.avc-vocal-cleaner {
  color-scheme: dark;
  max-width: 760px;
  margin: 40px auto;
  padding: 0 20px;
  line-height: 1.5;
}

.avc-vocal-cleaner .avc-panel {
  background: radial-gradient(120% 140% at 50% -10%, #2a1414 0%, #170f0f 55%, #0d0908 100%);
  border: 1px solid #3a2323;
  border-radius: 28px;
  padding: 40px 32px 32px;
  color: #e5e7eb;
}

.avc-vocal-cleaner .avc-hero { text-align: center; margin-bottom: 28px; }
.avc-vocal-cleaner .avc-h1 { font-size: 1.5rem; margin: 0 0 10px; color: #f8fafc; }
.avc-vocal-cleaner .avc-intro { margin: 0 auto; max-width: 46em; color: #9ca3af; font-size: 0.92rem; }

/* --- Dropzone (shared visual language with the mastering plugin) ------- */
.avc-vocal-cleaner .avc-dropzone {
  position: relative;
  width: min(340px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto 28px;
  border-radius: 50%;
  border: 2px dashed #a3433f;
  background: radial-gradient(circle at 50% 40%, #2c1616 0%, #1a1010 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.avc-vocal-cleaner .avc-dropzone.avc-dropzone-active {
  border-color: #f87171;
  border-style: solid;
  transform: scale(1.015);
}
.avc-vocal-cleaner .avc-dropzone-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.avc-vocal-cleaner .avc-dropzone-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 28px;
}
.avc-vocal-cleaner .avc-dropzone-icon { width: 40px; height: 40px; color: #f87171; margin-bottom: 14px; }
.avc-vocal-cleaner .avc-dropzone-icon svg { width: 100%; height: 100%; }
.avc-vocal-cleaner .avc-dropzone-title { font-weight: 600; color: #f1f5f9; margin-bottom: 6px; font-size: 1.02rem; }
.avc-vocal-cleaner .avc-dropzone-sub { color: #a08787; font-size: 0.85rem; margin-bottom: 12px; }
.avc-vocal-cleaner .avc-upload-btn {
  padding: 9px 22px; font-size: 0.9rem; font-weight: 600;
  border: none; border-radius: 999px; color: white; cursor: pointer;
  background: linear-gradient(135deg, #dc2626, #f87171);
  box-shadow: 0 8px 20px -8px rgba(220, 38, 38, 0.7);
}
.avc-vocal-cleaner .avc-upload-btn:hover { filter: brightness(1.08); }
.avc-vocal-cleaner .avc-dropzone-filename {
  margin-top: 12px; font-size: 0.78rem; color: #6b7280; word-break: break-all; max-width: 220px;
}

/* --- Options (toggle + strength slider) --------------------------------- */
.avc-vocal-cleaner .avc-options {
  background: #170f0f; border: 1px solid #3a2323; border-radius: 16px;
  padding: 8px 20px; margin-bottom: 24px;
}
.avc-vocal-cleaner .avc-option { padding: 16px 0; }
.avc-vocal-cleaner .avc-option + .avc-option { border-top: 1px solid #2a1c1c; }
.avc-vocal-cleaner .avc-option-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.avc-vocal-cleaner .avc-option-label { font-weight: 600; color: #f1f5f9; font-size: 0.95rem; margin: 0; }

.avc-vocal-cleaner .avc-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; }
.avc-vocal-cleaner .avc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.avc-vocal-cleaner .avc-switch-track {
  position: absolute; inset: 0; border-radius: 999px; background: #3a2c2c;
  transition: background-color 0.15s ease;
}
.avc-vocal-cleaner .avc-switch-thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #e5e7eb; transition: transform 0.15s ease;
}
.avc-vocal-cleaner .avc-switch input:checked + .avc-switch-track { background: linear-gradient(135deg, #dc2626, #f87171); }
.avc-vocal-cleaner .avc-switch input:checked + .avc-switch-track .avc-switch-thumb { transform: translateX(20px); }
.avc-vocal-cleaner .avc-switch input:focus-visible + .avc-switch-track { outline: 2px solid #f87171; outline-offset: 2px; }

.avc-vocal-cleaner .avc-strength-row {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
  transition: opacity 0.15s ease;
}
.avc-vocal-cleaner .avc-strength-row.avc-disabled { opacity: 0.35; pointer-events: none; }
.avc-vocal-cleaner .avc-strength-row label { color: #a08787; font-size: 0.82rem; margin: 0; flex-shrink: 0; }

/* 7-step slider: a real draggable range input (min=1 max=7 step=1, snaps as you
   drag). 7 tick dots sit in their own row just below the track/thumb -- placed
   below rather than overlaid so the thumb never visually covers them. The 9px
   side inset matches the thumb's radius, so the dots line up with the 7 actual
   positions the thumb can stop at (browsers keep a range thumb fully inside the
   track box, so its center travels from radius..width-radius, not edge to edge). */
.avc-vocal-cleaner .avc-step-slider { position: relative; flex: 1; height: 38px; }
.avc-vocal-cleaner .avc-step-slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  position: absolute; top: 15px; left: 0; width: 100%; height: 4px; border-radius: 999px;
  background: #3a2626; accent-color: #ef4444; cursor: pointer; margin: 0;
}
.avc-vocal-cleaner .avc-step-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #f5f5f5; border: 3px solid #ef4444; cursor: grab; margin-top: 0;
}
.avc-vocal-cleaner .avc-step-slider input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.avc-vocal-cleaner .avc-step-slider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #f5f5f5; border: 3px solid #ef4444; cursor: grab;
}
.avc-vocal-cleaner .avc-step-slider input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 999px; background: #3a2626;
}
.avc-vocal-cleaner .avc-step-dots {
  position: absolute; left: 9px; right: 9px; top: 29px;
  display: flex; justify-content: space-between; pointer-events: none;
}
.avc-vocal-cleaner .avc-step-dots span { width: 4px; height: 4px; border-radius: 50%; background: #6b5252; }

/* --- Form fields ------------------------------------------------------ */
.avc-vocal-cleaner .avc-field { margin-bottom: 20px; }
.avc-vocal-cleaner label { display: block; font-weight: 600; margin-bottom: 6px; color: #cbd5e1; font-size: 0.9rem; }
.avc-vocal-cleaner select {
  padding: 8px 10px; font-size: 0.92rem; width: 100%;
  background: #1d1414; color: #e5e7eb; border: 1px solid #3a2626; border-radius: 8px;
}
.avc-vocal-cleaner .avc-row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.avc-vocal-cleaner .avc-row .avc-field { margin-bottom: 0; flex: 1 1 140px; }

/* --- Buttons / status / result ----------------------------------------- */
.avc-vocal-cleaner button {
  padding: 11px 22px; font-size: 1rem; font-weight: 600;
  border: none; border-radius: 999px; color: white;
  cursor: pointer;
  background: linear-gradient(135deg, #dc2626, #f87171);
  box-shadow: 0 8px 20px -8px rgba(220, 38, 38, 0.7);
}
.avc-vocal-cleaner button.avc-secondary { background: #2a1c1c; box-shadow: none; }
.avc-vocal-cleaner button:disabled { background: #3a2c2c; box-shadow: none; cursor: not-allowed; color: #6b7280; }
.avc-vocal-cleaner .avc-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.avc-vocal-cleaner .avc-result { margin-top: 28px; padding-top: 20px; border-top: 1px solid #3a2323; }
.avc-vocal-cleaner .avc-result label { color: #cbd5e1; }
.avc-vocal-cleaner audio { width: 100%; margin-top: 6px; }
.avc-vocal-cleaner .avc-error { color: #f87171; margin-top: 14px; white-space: pre-wrap; text-align: center; }
.avc-vocal-cleaner .avc-status { color: #9ca3af; margin-top: 14px; text-align: center; }
.avc-vocal-cleaner a.avc-download { display: inline-block; margin-top: 10px; color: #f87171; }

/* --- Info cards ---------------------------------------------------------- */
.avc-vocal-cleaner .avc-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }
.avc-vocal-cleaner .avc-info-card { background: #170f0f; border: 1px solid #3a2323; border-radius: 14px; padding: 16px; }
.avc-vocal-cleaner .avc-info-label { color: #a08787; font-size: 0.78rem; font-weight: 600; margin-bottom: 8px; }
.avc-vocal-cleaner .avc-info-value { color: #e5e7eb; font-size: 0.85rem; }

@media (max-width: 560px) {
  .avc-vocal-cleaner .avc-info-grid { grid-template-columns: 1fr; }
  .avc-vocal-cleaner .avc-panel { padding: 28px 18px 24px; border-radius: 20px; }
}

/* --- Full-bleed mode -------------------------------------------------------
   Applied when the page uses this plugin's own fullscreen template
   (body.avc-fullscreen-page). Also responds to body.ame-fullscreen-page /
   body.avh-fullscreen-page / body.aar-fullscreen-page (the AI Mastering Engine
   / AI Vocal Harmony / AI AR Maker plugins' fullscreen templates) so any
   combination of the four tools can share one page/template and all still go
   full-bleed. */
body.avc-fullscreen-page, body.ame-fullscreen-page, body.avh-fullscreen-page, body.aar-fullscreen-page {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(120% 90% at 50% -10%, #2a1414 0%, #170f0f 45%, #0d0908 100%);
}
body.avc-fullscreen-page .avc-vocal-cleaner, body.ame-fullscreen-page .avc-vocal-cleaner, body.avh-fullscreen-page .avc-vocal-cleaner, body.aar-fullscreen-page .avc-vocal-cleaner {
  max-width: 720px; margin: 0 auto; padding: 72px 20px;
}
body.avc-fullscreen-page .avc-panel, body.ame-fullscreen-page .avc-panel, body.avh-fullscreen-page .avc-panel, body.aar-fullscreen-page .avc-panel {
  background: none; border: none; padding: 0;
}