.character-image-import {
  width: min(880px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 1px solid #d8e0e8; border-radius: 16px;
  background: #fff; color: #172b40; box-shadow: 0 24px 72px #12243b38;
}
.character-image-import[open] { display: flex; flex-direction: column; }
.character-image-import::backdrop { background: #10243ba8; }
.image-import-header, .image-import-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; flex-shrink: 0; }
.image-import-header { border-bottom: 1px solid #e0e7ee; }
.image-import-header h2 { font-size: 20px; font-weight: 700; margin: 0; }
.image-import-footer { border-top: 1px solid #e0e7ee; background: #f6f9fc; }
.image-import-footer button { flex-shrink: 0; }
.image-import-body { padding: 24px; overflow: auto; overscroll-behavior: contain; min-height: 0; }
.image-import-intro { display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 24px; align-items: start; margin-bottom: 24px; }
.image-import-intro img { display: block; width: 104px; height: auto; border: 1px solid #cbd5e1; border-radius: 6px; }
.character-image-import p { margin: 0 0 12px; line-height: 1.7; overflow-wrap: anywhere; }
.character-image-import a { color: #075ea4; text-decoration: underline; }
.character-image-import label { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; }
.character-image-import select { width: 100%; min-width: 0; min-height: 38px; padding: 6px 24px 6px 10px; border: 1px solid #becbd7; border-radius: 7px; background: white; color: #172b40; font: inherit; }
.character-image-import input[type=file] { width: 100%; padding: 12px; border: 1px dashed #9badbf; border-radius: 8px; font: inherit; }
.character-image-import button { min-height: 40px; white-space: normal; }
.character-image-import button:disabled { opacity: .5; cursor: default; }
.image-import-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.image-import-muted { color: #52667a; font-size: 12px; }
.image-import-file { margin-bottom: 8px; }
.image-import-status { font-size: 14px; }
.image-import-card { border: 1px solid #cbd5e1; border-radius: 10px; padding: 16px; margin-top: 16px; }
.image-import-card-heading { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.image-import-card-heading h3, .image-import-card h3 { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; max-width: 100%; }
.image-import-card-heading label { flex-direction: row; align-items: center; }
.image-import-card input[type=checkbox] { width: 18px; height: 18px; }
.image-import-card details { margin-top: 16px; }
.image-import-card summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.image-import-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 12px; }
.image-import-equipment { border: 1px solid #dce4ec; border-radius: 8px; padding: 12px; margin-top: 12px; min-width: 0; }
.image-import-equipment legend { padding: 0 6px; font-weight: 700; }
.image-import-option { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 12px; margin-top: 10px; }
.image-import-warning, .image-import-validation { color: #795000; font-size: 12px; white-space: pre-line; }
.image-import-error { color: #ac2833; }
.image-import-success { color: #08754d; font-weight: 600; }
.character-image-import select.image-import-unknown { border-color: #b59036; background: #fffaf0; }
.character-image-import :focus-visible { outline: 3px solid #3f94d1; outline-offset: 3px; }
.character-image-import [hidden] { display: none !important; }
@media(max-width:600px) {
  .character-image-import { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
  .image-import-header, .image-import-footer, .image-import-body { padding: 14px; }
  .image-import-header h2 { font-size: 17px; }
  .image-import-intro { grid-template-columns: 64px minmax(0,1fr); gap: 12px; font-size: 13px; }
  .image-import-intro img { width: 64px; }
  .image-import-footer { flex-direction: column; align-items: stretch; gap: 6px; }
  .image-import-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .image-import-card { padding: 12px; }
}