/* Panel-only additions. The design system — colors, card, button, badge —
comes from style.css; nothing here introduces a new color. */
.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 48px 24px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.drop:hover, .drop:focus-visible { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.05); outline: none; }
.drop.dragging { border-color: var(--white); border-style: solid; background: rgba(255, 255, 255, 0.09); }
.drop.busy { cursor: progress; opacity: 0.6; }
.drop-icon { width: 40px; height: 40px; stroke: var(--text-faint); stroke-width: 1.4; margin-bottom: 8px; }
.drop-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--white); }
.drop-hint { margin: 0; font-size: 13px; color: var(--text-faint); }
#status { font-size: 13px; color: var(--text-muted); margin: 14px 0 0; min-height: 18px; }
#status:empty { margin: 0; min-height: 0; }
.button-link {
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  background: var(--white);
  border-radius: 8px;
  text-decoration: none;
}
.button-link:hover { color: var(--black); filter: brightness(0.92); }
.settings summary { font-weight: 600; color: var(--text-muted); margin-bottom: 0; }
.settings[open] summary { margin-bottom: 18px; }
.settings .hint { display: block; font-size: 12px; line-height: 1.5; }
a.badge { text-decoration: none; }
a.badge:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.3); }