/* ════════════════════════════════════════════════════════════════
   UI KIT — the studio's shared UI primitives
   ════════════════════════════════════════════════════════════════

   WHY THIS FILE EXISTS
   These rules were only ever defined in tools/resize-static-banners/resize.css, which is
   loaded behind `dl_tool_on('resize-static-banners')`. That tool is NOT on the neutral
   brand's allow-list, so on studiopreviewworld.com the stylesheet never loads — yet the
   class names it base-defines are used by many other tools that DO render there
   (.upload-zone ×15, .btn-outline ×16, .upload-icon/.upload-title/.upload-sub ×13 each in
   studio-tools/index.php).

   Measured on the live neutral host before this file existed:
       .btn-outline  ->  border: outset 2px, border-radius: 0, font-weight: 400
                         (i.e. the raw browser default button)
       .upload-icon  ->  0 x 0 (the 46px circle collapsed entirely)
       .pdk-drop     ->  no border at all, where the vendor shows 2px dashed
   This is the same dependency class that left Name & Rename unstyled: a tool renders, but
   the CSS it inherits is gated behind a slug that is not neutral.

   ⚠ LOAD ORDER IS LOAD-BEARING. This file is linked UNGATED, immediately BEFORE the gated
   resize.css link. On the VENDOR, resize.css therefore still loads afterwards and re-declares
   every one of these values at equal specificity, so it wins and the vendor's computed style
   cannot move — verified by byte-comparing the rendered page. On the NEUTRAL brand this file
   is the only definition, which is the point.
   ⚠ Do NOT edit resize.css to "deduplicate" these — the duplication is what guarantees the
   vendor is untouched.

   ⚠ DELIBERATELY EXCLUDED
     · .btn-indigo   — already defined in tools/backup-jpg-generator/backup.css, which DOES
                       load on the neutral brand. Adding it here would be a second definition
                       with no benefit and a real risk of drift.
     · .btn-amber, .experts-banner, .eb-*  — only used by the agency "experts" banners, and
                       both of those are now marketing-gated, so they never render on neutral.
     · everything else in resize.css — it is that tool's own styling, not shared.

   Variables used below (--indigo, --indigo-soft, --line, --muted) are confirmed to resolve on
   the neutral brand: #1159da, #eef3fe, #e3e7ef, #6b7280.
   ════════════════════════════════════════════════════════════════ */

/* ── Upload / drop zones ── */
.upload-zone {
  flex: 1;
  min-height: 200px;
  border: 2px dashed #c8cfe0;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  cursor: pointer;
  transition: .18s;
  background: #fcfdff;
}
.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--indigo, #1159da);
  background: var(--indigo-soft, #eef3fe);
}

.upload-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--indigo-soft, #eef3fe);
  color: var(--indigo, #1159da);
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 9px;
}

.upload-title { font-weight: 700; font-size: 17px; }
.upload-sub   { color: var(--muted, #6b7280); margin-top: 6px; font-size: 13px; }
.upload-mini  { color: #9aa3b2; margin-top: 10px; font-size: 12px; }

.upload-title .step-badge {
  width: 21px;
  height: 21px;
  font-size: 11px;
  margin-right: 7px;
}

/* ── Outline button ──
   Without this it falls back to the UA default: outset 2px, square corners, weight 400. */
.btn-outline {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #fff;
  border: 1.5px solid var(--line, #e3e7ef);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: border-color .16s, background .16s, color .16s, box-shadow .16s;
}
.btn-outline:hover {
  border-color: var(--indigo, #1159da);
  background: var(--indigo-soft, #eef3fe);
  color: var(--indigo, #1159da);
  box-shadow: 0 2px 10px rgba(17, 89, 218, .12);
}