/* Datenimport (Platzhalter-Oberfläche, js/import-dialog.js) */
#panel header { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: start; }
#btn-import { grid-column: 2; grid-row: 1 / 3; font-size: 12px; padding: 5px 9px; }

#import {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}
#import::backdrop { background: rgba(0, 0, 0, 0.55); }
#import form { display: grid; gap: 16px; padding: 18px 20px 20px; }
#import header { display: flex; align-items: center; justify-content: space-between; }
#import h2 { font-size: 16px; font-weight: 600; margin: 0; }
#import h3, #import legend {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 8px;
  padding: 0;
}
#import .close { border: 0; background: none; color: var(--muted); font-size: 16px; padding: 2px 6px; }
#import .close:hover { color: var(--text); }
#import fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
#import input { accent-color: var(--accent); }

#import .formate label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
#import .formate label:has(:checked) { border-color: var(--accent); background: rgba(79, 163, 217, 0.08); }
#import .formate input { margin-top: 3px; }
#import .formate span { display: grid; gap: 1px; }
#import .formate small { color: var(--muted); font-size: 12px; }

#import .drop {
  display: grid;
  gap: 8px;
  place-items: center;
  min-height: 96px;
  padding: 14px;
  border: 1.5px dashed #3c444b;
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
}
#import .drop:hover, #import .drop:focus-visible, #import .drop.over { border-color: var(--accent); color: var(--text); outline: none; }
#import .drop u { color: var(--accent); text-decoration: none; }
#import .files { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 4px; }
#import .files li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 9px;
  background: #22262a;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  text-align: left;
}
#import .files li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#import .files small { color: var(--muted); flex: none; }

#import .optionen > label:not(.field) { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
#import .optionen input[type=checkbox] { margin-top: 3px; }

#import .vorschau dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
#import .vorschau dt { grid-row: 2; color: var(--muted); font-size: 12px; }
#import .vorschau dd { grid-row: 1; margin: 0; font: 20px 'Share Tech Mono', monospace; color: var(--muted); }

#import footer { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
#import .hinweis { flex: 1; color: var(--muted); font-size: 12px; }
#import .primary { background: var(--accent); border-color: var(--accent); color: #0b1620; font-weight: 600; }
#import .primary:disabled { opacity: 0.45; cursor: not-allowed; }