.cc-upload,
.file-upload,
.media-upload {
  display: grid;
  gap: 12px;
}

.cc-upload input[type="file"],
.file-upload input[type="file"],
.media-upload input[type="file"],
[data-file-upload] input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cc-upload__dropzone,
.file-upload__dropzone,
.upload-dropzone,
[data-upload-dropzone] {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 180px;
  border: 1.5px dashed var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: clamp(20px, 4vw, 36px);
  background: color-mix(in srgb, var(--cc-panel) 82%, var(--cc-bg-soft));
  color: var(--cc-ink-soft);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--cc-transition), background var(--cc-transition), transform var(--cc-transition);
}

.cc-upload__dropzone:hover,
.file-upload__dropzone:hover,
.upload-dropzone:hover,
[data-upload-dropzone].is-dragover {
  border-color: var(--cc-green);
  background: color-mix(in srgb, var(--cc-green-soft) 34%, var(--cc-panel));
}

.cc-upload__icon,
.media-picker__icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: 18px;
  background: var(--cc-green-soft);
  color: var(--cc-green-deep);
  font-weight: 900;
}

.cc-file-list,
.file-list {
  display: grid;
  gap: 8px;
}

.cc-file-chip,
.file-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  padding: 10px 12px;
  background: var(--cc-panel);
  color: var(--cc-ink-soft);
}

.cc-progress,
.upload-progress {
  overflow: hidden;
  height: 8px;
  border-radius: var(--cc-radius-pill);
  background: color-mix(in srgb, var(--cc-border) 52%, transparent);
}

.cc-progress > span,
.upload-progress > span {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  border-radius: inherit;
  background: var(--cc-green);
}

.cc-media-grid,
.media-grid,
.media-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.cc-media-card,
.media-card {
  overflow: hidden;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-panel);
  color: var(--cc-ink);
}

.cc-media-card__thumb,
.media-card__thumb {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--cc-bg-soft);
  color: var(--cc-muted);
}

.cc-media-card__body,
.media-card__body {
  display: grid;
  gap: 6px;
  padding: 12px;
}

.cc-picker,
.image-picker,
.video-picker,
.document-picker,
.media-picker {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  background: color-mix(in srgb, var(--cc-panel) 94%, transparent);
  padding: clamp(16px, 3vw, 24px);
}

.cc-picker__toolbar,
.media-picker__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 16px;
}

[data-theme="dark"] .cc-upload__dropzone,
[data-theme="dark"] .file-upload__dropzone,
[data-theme="dark"] .upload-dropzone,
[data-theme="dark"] [data-upload-dropzone],
[data-theme="dark"] .cc-media-card,
[data-theme="dark"] .media-card,
[data-theme="dark"] .cc-picker,
[data-theme="dark"] .image-picker,
[data-theme="dark"] .video-picker,
[data-theme="dark"] .document-picker,
[data-theme="dark"] .media-picker,
[data-theme="dark"] .cc-file-chip,
[data-theme="dark"] .file-chip {
  background: rgba(19, 25, 34, 0.86);
  border-color: rgba(255, 255, 255, 0.10);
}