/* croppy.css — themable via --croppy-accent / --croppy-accent-soft on .cy-root. */

.cy-root {
  --croppy-accent:      #0284c7;
  --croppy-accent-soft: rgba(2, 132, 199, 0.10);
  --cy-bg:              #ffffff;
  --cy-surface:         #fafafa;
  --cy-fg:              #18181b;
  --cy-fg-muted:        #71717a;
  --cy-border:          #e4e4e7;
  --cy-radius:          12px;
  --cy-radius-sm:       8px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--cy-fg);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: 100%;
}

@media (prefers-color-scheme: dark) {
  .cy-root {
    --croppy-accent:      #38bdf8;
    --croppy-accent-soft: rgba(56, 189, 248, 0.16);
    --cy-bg:              #0a0a0b;
    --cy-surface:         #18181b;
    --cy-fg:              #fafafa;
    --cy-fg-muted:        #a1a1aa;
    --cy-border:          #27272a;
  }
}

.cy-input--hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cy-stage {
  position: relative;
  background: var(--cy-surface);
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius);
  overflow: hidden;
  min-height: 280px;
  padding: 1.25rem;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}

.cy-root--ui-button .cy-stage {
  min-height: 0;
  padding: 0.75rem;
  background: transparent;
  border: 0;
}

.cy-drop {
  flex: 1 1 auto;
  border: 2px dashed var(--cy-border);
  border-radius: var(--cy-radius-sm);
  padding: 2.25rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms, background 160ms;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cy-drop:hover,
.cy-drop.is-over {
  border-color: var(--croppy-accent);
  background: var(--croppy-accent-soft);
}
.cy-drop__icon {
  width: 40px; height: 40px;
  margin: 0 auto 0.875rem;
  color: var(--cy-fg-muted);
  display: flex; align-items: center; justify-content: center;
}
.cy-drop__icon svg { width: 100%; height: 100%; }
.cy-drop:hover .cy-drop__icon,
.cy-drop.is-over .cy-drop__icon { color: var(--croppy-accent); }
.cy-drop__primary { margin: 0 0 0.25rem; font-size: 0.9375rem; color: var(--cy-fg); }
.cy-drop__hint    { margin: 0; font-size: 0.75rem; color: var(--cy-fg-muted); letter-spacing: 0.04em; }
.cy-drop__pick {
  appearance: none;
  background: none; border: 0;
  color: var(--croppy-accent);
  font: inherit; cursor: pointer;
  padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
}

.cy-button-wrap { display: flex; align-items: center; }
.cy-button {
  appearance: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--croppy-accent);
  color: #ffffff;
  border: 0;
  font: 600 0.9rem -apple-system, system-ui, sans-serif;
  padding: 0.625rem 1.125rem;
  border-radius: var(--cy-radius-sm);
  cursor: pointer;
  transition: filter 120ms;
}
@media (prefers-color-scheme: dark) { .cy-button { color: #0a0a0b; } }
.cy-button:hover { filter: brightness(0.95); }

.cy-workspace {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}
.cy-workspace--interactive {
  flex-direction: row;
  gap: 1.25rem;
  align-items: flex-start;
}
@media (max-width: 720px) {
  .cy-workspace--interactive { flex-direction: column; align-items: center; }
}

.cy-preview { display: flex; align-items: center; justify-content: center; width: 100%; }
.cy-preview__frame {
  max-width: 100%;
  max-height: 60vh;
  display: block;
  border-radius: var(--cy-radius-sm);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.cy-preview__frame img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}
.cy-root--fit .cy-preview__frame { background: var(--croppy-accent); }

.cy-preview--small {
  flex: 0 0 180px;
  max-width: 180px;
}
.cy-preview--small .cy-preview__frame { max-height: 200px; }

.cy-source {
  position: relative;
  flex: 1 1 auto;
  background: var(--cy-bg);
  border-radius: var(--cy-radius-sm);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 280px;
  max-height: 60vh;
}
.cy-source canvas {
  display: block;
  max-width: 100%; max-height: 100%;
  cursor: default;
}
.cy-cropframe {
  position: absolute;
  border: 2px solid var(--croppy-accent);
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  cursor: move;
  touch-action: none;
}
@media (prefers-color-scheme: light) {
  .cy-cropframe { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255,255,255,0.7); }
}
.cy-handle {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--croppy-accent);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  touch-action: none;
}
.cy-handle--nw { top: -8px;    left:  -8px;    cursor: nwse-resize; }
.cy-handle--ne { top: -8px;    right: -8px;    cursor: nesw-resize; }
.cy-handle--sw { bottom: -8px; left:  -8px;    cursor: nesw-resize; }
.cy-handle--se { bottom: -8px; right: -8px;    cursor: nwse-resize; }

.cy-samples {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cy-samples__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cy-fg-muted);
}
.cy-samples__row {
  display: flex; flex-wrap: wrap;
  gap: 0.625rem;
}
.cy-sample {
  appearance: none;
  background: var(--cy-surface);
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius-sm);
  padding: 0;
  cursor: pointer;
  width: 92px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 120ms, transform 120ms;
}
.cy-sample:hover { border-color: var(--croppy-accent); transform: translateY(-1px); }
.cy-sample img {
  display: block;
  width: 100%;
  height: 60px;
  object-fit: cover;
}
.cy-sample__name {
  font: 500 0.6875rem -apple-system, system-ui, sans-serif;
  color: var(--cy-fg-muted);
  padding: 0.25rem 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cy-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
}
.cy-group { display: flex; align-items: center; gap: 0.5rem; }
.cy-group--push { margin-left: auto; }
.cy-group__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cy-fg-muted);
}

.cy-chips {
  display: inline-flex;
  background: var(--cy-surface);
  border: 1px solid var(--cy-border);
  border-radius: 999px;
  padding: 2px;
}
.cy-chip {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--cy-fg-muted);
  font: 500 0.8125rem -apple-system, system-ui, sans-serif;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  cursor: pointer;
  text-transform: capitalize;
  transition: background 120ms, color 120ms;
}
.cy-chip:hover { color: var(--cy-fg); }
.cy-chip.is-active { background: var(--croppy-accent); color: #ffffff; }
@media (prefers-color-scheme: dark) { .cy-chip.is-active { color: #0a0a0b; } }

.cy-coords { display: flex; gap: 0.375rem; }
.cy-coord {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font: 500 0.6875rem ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--cy-fg-muted);
}
.cy-coord span { text-transform: uppercase; letter-spacing: 0.06em; }
.cy-coord input {
  width: 56px;
  background: var(--cy-bg);
  border: 1px solid var(--cy-border);
  border-radius: 6px;
  padding: 0.2rem 0.4rem;
  font: inherit;
  color: var(--cy-fg);
  text-align: right;
}
.cy-coord input:focus {
  outline: 0;
  border-color: var(--croppy-accent);
  box-shadow: 0 0 0 2px var(--croppy-accent-soft);
}

.cy-range {
  -webkit-appearance: none; appearance: none;
  width: 110px; height: 4px;
  background: var(--cy-border);
  border-radius: 999px; outline: none;
}
.cy-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--croppy-accent);
  border: 2px solid var(--cy-bg);
  cursor: grab;
}
.cy-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--croppy-accent);
  border: 2px solid var(--cy-bg);
  cursor: grab;
}
.cy-quality-val {
  font: 500 0.75rem ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--cy-fg-muted);
  min-width: 1.5em;
}

.cy-meta {
  font: 500 0.75rem ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--cy-fg-muted);
  padding: 0.25rem 0.5rem;
  background: var(--cy-surface);
  border: 1px solid var(--cy-border);
  border-radius: 6px;
}

.cy-btn {
  appearance: none;
  border: 1px solid var(--cy-border);
  background: var(--cy-bg);
  color: var(--cy-fg);
  font: 500 0.8125rem -apple-system, system-ui, sans-serif;
  padding: 0.4rem 0.875rem;
  border-radius: 8px;
  cursor: pointer;
}
.cy-btn:hover { border-color: var(--croppy-accent); color: var(--croppy-accent); }
.cy-btn--ghost { background: transparent; }