/* PRE drop zone (assets/js/drop-zone.js). Dark only. Motion uses transform and opacity alone:
   colour states are carried by wash layers that fade in, never by animated colours. */
.pre-dropzone {
  --dz-surface: #0e1014;
  --dz-raised: #17191c;
  --dz-hover: #242931;
  --dz-line: var(--glass-border, rgba(255, 255, 255, .12));
  --dz-accent: var(--accent, #9fd8ff);
  --dz-muted: var(--muted-color, #d6dce4);
  --dz-quiet: #9aa3ad;
  --dz-ok: #8fe3b4;
  --dz-error: #ffd2c9;
  --dz-ease: cubic-bezier(.23, 1, .32, 1);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 24rem;
  min-height: 16rem;
  padding: .5rem;
  overflow: hidden;
  border: 0;
  border-radius: calc(var(--radius, 12px) + 4px);
  background: var(--dz-surface);
  box-shadow: inset 0 0 0 1px var(--dz-line), 0 18px 40px -24px rgba(0, 0, 0, .8);
  color: #fff;
  font-family: var(--font-main, 'Manrope', sans-serif);
  text-align: center;
  transform-origin: 50% 50%;
  transition: transform 420ms var(--dz-ease);
}
.pre-dropzone[data-state="near"], .pre-dropzone[data-state="over"] { will-change: transform; }
.pre-dropzone [hidden] { display: none !important; }

.pre-dropzone__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms var(--dz-ease);
}
.pre-dropzone__wash--near {
  background: rgba(159, 216, 255, .05);
  background: color-mix(in srgb, var(--dz-accent) 5%, transparent);
  box-shadow: inset 0 0 0 1px rgba(159, 216, 255, .5);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dz-accent) 50%, transparent);
}
.pre-dropzone__wash--over {
  background: rgba(159, 216, 255, .11);
  background: color-mix(in srgb, var(--dz-accent) 11%, transparent);
  box-shadow: inset 0 0 0 1px var(--dz-accent), inset 0 0 28px rgba(159, 216, 255, .12);
}
.pre-dropzone[data-state="near"] .pre-dropzone__wash--near,
.pre-dropzone[data-state="over"] .pre-dropzone__wash--near,
.pre-dropzone[data-state="over"] .pre-dropzone__wash--over { opacity: 1; }

.pre-dropzone__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 18rem;
  height: 18rem;
  margin: -9rem 0 0 -9rem;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(159, 216, 255, .28), rgba(159, 216, 255, 0));
  background: radial-gradient(closest-side, color-mix(in srgb, var(--dz-accent) 28%, transparent), transparent);
  opacity: 0;
  transition: opacity 200ms var(--dz-ease), transform 420ms var(--dz-ease);
}
.pre-dropzone[data-state="near"] .pre-dropzone__glow,
.pre-dropzone[data-state="over"] .pre-dropzone__glow { opacity: 1; }

.pre-dropzone__pick {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 14rem;
  padding: 1.5rem 1.25rem;
  border: 0;
  border-radius: var(--radius, 12px);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.pre-dropzone__pick:focus-visible { outline: 2px solid var(--dz-accent); outline-offset: -2px; }

.pre-dropzone__tile {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: var(--radius, 12px);
  background: var(--dz-raised);
  box-shadow: inset 0 0 0 1px var(--dz-line), 0 6px 16px -8px rgba(0, 0, 0, .9);
  color: var(--dz-muted);
}
.pre-dropzone[data-state="near"] .pre-dropzone__pick .pre-dropzone__tile { color: var(--dz-accent); }
.pre-dropzone[data-state="over"] .pre-dropzone__pick .pre-dropzone__tile,
.pre-dropzone__tile--file {
  color: var(--dz-accent);
  background: #1a232c;
  background: color-mix(in srgb, var(--dz-accent) 12%, var(--dz-raised));
  box-shadow: inset 0 0 0 1px rgba(159, 216, 255, .55);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dz-accent) 55%, transparent);
}
.pre-dropzone__title {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-heading, 'Syne', sans-serif);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.pre-dropzone__hint {
  display: block;
  margin-top: .35rem;
  color: var(--dz-quiet);
  font-size: .75rem;
  line-height: 1.6;
}

.pre-dropzone__ready {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  padding: 1.5rem 1.25rem;
}
.pre-dropzone__ready p { margin: 0; }
.pre-dropzone__ready .pre-dropzone__status {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
  font-size: .88rem;
  font-weight: 600;
}
.pre-dropzone__status svg { color: var(--dz-ok); }
.pre-dropzone__ready .pre-dropzone__name {
  max-width: 100%;
  margin-top: .25rem;
  overflow: hidden;
  color: var(--dz-muted);
  font-size: .85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pre-dropzone__ready .pre-dropzone__size {
  margin-top: .15rem;
  color: var(--dz-quiet);
  font: 500 .65rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pre-dropzone__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
.pre-dropzone__button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: 0 .95rem;
  border: 0;
  border-radius: calc(var(--radius, 12px) - 4px);
  background: var(--dz-raised);
  box-shadow: inset 0 0 0 1px var(--dz-line);
  color: #fff;
  font: 600 .76rem/1 var(--font-main, 'Manrope', sans-serif);
  cursor: pointer;
  transition: transform 150ms var(--dz-ease);
}
.pre-dropzone__button svg { color: var(--dz-muted); }
.pre-dropzone__button:active { transform: scale(.97); }
.pre-dropzone__button:focus-visible { outline: 2px solid var(--dz-accent); outline-offset: 2px; }
@media (hover: hover) {
  .pre-dropzone__button:hover { background: var(--dz-hover); box-shadow: inset 0 0 0 1px var(--dz-accent); }
  .pre-dropzone__pick:hover .pre-dropzone__tile { color: #fff; }
}

.pre-dropzone__error {
  margin: 0 1rem .9rem;
  color: var(--dz-error);
  font-size: .75rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.pre-dropzone__error:empty { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .pre-dropzone { transform: none !important; transition: none; }
  .pre-dropzone__glow { display: none; }
  .pre-dropzone__wash, .pre-dropzone__button { transition: none; }
}
body[data-motion="paused"] .pre-dropzone { transform: none !important; }
body[data-motion="paused"] .pre-dropzone__glow { display: none; }