.media-import-dialog {
  width: min(820px, calc(100% - 28px));
  max-height: 92vh;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 18px;
  background: #f7faf8;
  box-shadow: 0 32px 100px rgba(9, 28, 21, .38);
}

.media-import-dialog::backdrop { background: rgba(13, 31, 24, .72); }

.media-import-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid #dfe8e3;
  background: #fff;
}

.media-import-head span { color: #177354; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.media-import-head h2 { margin: 5px 0; font-size: 21px; }
.media-import-head p { margin: 0; color: #718078; font-size: 12px; }

.media-import-batch-zone {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  margin: 20px 24px 0;
  padding: 18px;
  border: 2px dashed #8dbda9;
  border-radius: 15px;
  outline: 0;
  background: #eff9f5;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.media-import-batch-zone.dragging,
.media-import-batch-zone:focus { border-color: #147353; background: #e3f5ed; transform: translateY(-1px); }
.media-import-batch-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 15px; background: #147353; color: #fff; }
.media-import-batch-icon svg { width: 27px; }
.media-import-batch-zone h3 { margin: 0 0 5px; font-size: 15px; }
.media-import-batch-zone p { margin: 0; color: #65766e; font-size: 11px; line-height: 1.45; }
.media-import-batch-zone kbd { padding: 2px 5px; border: 1px solid #bdcbc5; border-bottom-width: 2px; border-radius: 4px; background: #fff; color: #32443d; font: 10px inherit; }

.media-import-queue-panel { margin: 16px 24px; overflow: hidden; border: 1px solid #dce5e1; border-radius: 14px; background: #fff; }
.media-import-queue { display: grid; gap: 7px; max-height: 235px; padding: 12px; overflow-y: auto; }
.media-import-queue-empty { display: grid; place-items: center; min-height: 58px; color: #8b9791; font-size: 11px; }
.media-import-queue-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid #e5ebe8; border-radius: 9px; background: #fbfcfb; }
.media-import-queue-row > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #edf2ef; color: #6c7a73; }
.media-import-queue-row > span:first-child svg { width: 17px; }
.media-import-queue-row.processing { border-color: #bdc7ed; background: #f5f6ff; }
.media-import-queue-row.processing > span:first-child { background: #e6e8fb; color: #5958a8; }
.media-import-queue-row.success { border-color: #cce5d8; background: #f2faf6; }
.media-import-queue-row.success > span:first-child { background: #dff2e8; color: #147353; }
.media-import-queue-row.error { border-color: #eccccc; background: #fff5f5; }
.media-import-queue-row.error > span:first-child { background: #f8dfdf; color: #a73a3a; }
.media-import-queue-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.media-import-queue-copy b { overflow: hidden; color: #293c34; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.media-import-queue-copy small { color: #7b8982; font-size: 9px; }
.media-import-queue-state { padding: 4px 7px; border-radius: 999px; background: #edf1ef; color: #66736d; font-size: 9px; font-style: normal; font-weight: 800; }
.media-import-queue-row.processing .media-import-queue-state { background: #e4e6fa; color: #54539d; }
.media-import-queue-row.success .media-import-queue-state { background: #dbf0e5; color: #147353; }
.media-import-queue-row.error .media-import-queue-state { background: #f7dede; color: #a73a3a; }

.media-import-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  padding: 20px 24px 0;
}

.media-import-method {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-height: 94px;
  padding: 14px;
  border: 1px solid #d8e3de;
  border-radius: 13px;
  background: #fff;
  color: #18382c;
  text-align: left;
}

.media-import-method:hover { border-color: #7eb89f; box-shadow: 0 9px 24px rgba(25, 84, 62, .09); }
.media-import-method:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
.media-import-method > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #e8f5ef; color: #147353; }
.media-import-method.iphone > span { background: #eef0ff; color: #5856a6; }
.media-import-method > span svg { width: 22px; }
.media-import-method > svg { width: 17px; color: #8b9892; }
.media-import-method div { display: flex; flex-direction: column; gap: 4px; }
.media-import-method b { font-size: 13px; }
.media-import-method small { color: #74827b; font-size: 11px; line-height: 1.35; }

.media-import-selection { margin: 16px 24px; overflow: hidden; border: 1px solid #dce5e1; border-radius: 14px; background: #fff; }
.media-import-selection-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #e4ebe7; }
.media-import-selection-head h3 { margin: 0 0 3px; font-size: 14px; }
.media-import-selection-head p { margin: 0; color: #7a8881; font-size: 11px; }
.media-import-selection-head strong { padding: 6px 10px; border-radius: 999px; background: #e9f5ef; color: #147353; font-size: 12px; }

.media-import-review { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; min-height: 145px; padding: 14px; }
.media-import-thumb { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 9px; background: #edf2ef; }
.media-import-thumb img, .media-import-thumb video { width: 100%; height: 100%; object-fit: cover; }
.media-import-thumb.saved::after { content: "Déjà enregistrée"; position: absolute; inset: auto 4px 4px; padding: 3px 5px; border-radius: 5px; background: rgba(17, 45, 34, .82); color: #fff; font-size: 8px; text-align: center; }
.media-import-thumb > button { position: absolute; top: 5px; right: 5px; width: 25px; height: 25px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(18, 36, 29, .86); color: #fff; }
.media-import-thumb > button svg { width: 14px; }
.media-import-thumb.is-primary { outline: 3px solid #e2a11b; outline-offset: 1px; }
.media-import-thumb > .media-primary-button { top: auto; right: 5px; bottom: 5px; left: 5px; width: auto; height: 25px; display: flex; gap: 4px; border-radius: 6px; background: rgba(255,255,255,.94); color: #51635a; font-size: 8px; font-weight: 800; }
.media-import-thumb > .media-primary-button.selected { background: #fff0c8; color: #8a5700; }
.media-import-thumb > .media-primary-button svg { width: 11px; fill: currentColor; }
.media-import-thumb > .media-import-remove { z-index: 3; }
.media-import-thumb.saved::after { bottom: 34px; }
.media-import-empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: #8b9791; font-size: 12px; }
.media-import-empty svg { width: 28px; }

.media-import-dialog > .form-error { margin: 0 24px 14px; }
.media-import-actions { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 15px 24px; border-top: 1px solid #dce5e1; background: rgba(255, 255, 255, .97); }
.media-import-actions > span { color: #697971; font-size: 11px; }

@media (max-width: 700px) {
  .media-import-methods { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; }
  .media-import-batch-zone { grid-template-columns: 48px minmax(0, 1fr); margin-left: 16px; margin-right: 16px; }
  .media-import-batch-zone .btn { grid-column: 1 / -1; }
  .media-import-batch-icon { width: 48px; height: 48px; }
  .media-import-queue-panel { margin-left: 16px; margin-right: 16px; }
  .media-import-selection { margin-left: 16px; margin-right: 16px; }
  .media-import-review { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .media-import-actions { padding-left: 16px; padding-right: 16px; flex-direction: column-reverse; }
  .media-import-actions .btn { width: 100%; }
}