/* Upload page - upload-specific rules only. All shared theme tokens,
   type, panels, buttons, and inputs come from view.css (loaded via
   view/base_view.html). Do not duplicate tokens here. */

#ff-key-panel .ff-hint { margin: 0.25rem 0 0.75rem; }

.ff-password-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.ff-password-row input {
  flex: 1 1 16rem;
  font-family: monospace;
}

/* Drop zone */
#ff-dropzone {
  border: 2px dashed rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 2.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

#ff-dropzone:hover,
#ff-dropzone:focus-visible,
#ff-dropzone.ff-dragover {
  border-color: var(--ff-accent, #c8a951);
  background: var(--ff-surface-2, #16181d);
}

#ff-dropzone.ff-dragover { background: #1c1f27; }

.ff-drop-big {
  color: var(--ff-accent-bright, #f0d98c);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}

/* Progress */
.ff-progress-track {
  background: var(--ff-bg, #0d0e12);
  border: 1px solid var(--ff-border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  height: 0.75rem;
  overflow: hidden;
}

#ff-progress-bar {
  background: linear-gradient(90deg, #c8a951, #f0d98c);
  height: 100%;
  width: 0;
  transition: width 0.2s;
}

/* Result states (colors are global in view.css; only the borders differ) */
.ff-result[data-state="success"] { border-color: rgba(126, 201, 126, 0.35); }
.ff-result[data-state="error"] { border-color: rgba(255, 123, 114, 0.35); }

/* Explainer path line */
#ff-explainer code {
  display: inline-block;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
}