@layer components {
  /* Overlay-Grundstil */
#galUpModal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.55);
  display: none;                 /* geschlossen */
  padding: 16px;
}

/* offen => mittig zentrieren */
#galUpModal[aria-hidden="false"]{
  display: flex !important;      /* statt grid */
  align-items: center;           /* vertikal zentriert */
  justify-content: center;       /* horizontal zentriert */
}

/* Der Dialog selbst bleibt kompakt und scrollbar */
#galUpModal .galup-dialog{
  width: min(92vw, 860px);
  max-height: 88vh;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  display: grid;
  grid-template-rows: auto 1fr auto;
  margin: 0;                     /* wichtig gegen eventuelle Erbschaften */
  overflow: hidden;
}

/* Inhalt des Dialogs */
#galUpModal .galup-body{
  padding: 16px 18px;
  overflow: auto;
}
  .galup-dialog{
    width:min(92vw,860px); max-height:88vh; border-radius:16px; background:#fff; border:1px solid var(--border);
    box-shadow:var(--shadow-3); display:grid; grid-template-rows:auto 1fr auto; padding:18px;
  }
  .galup-header{ padding:14px 18px; border-bottom:1px solid var(--border); font-weight:600; font-size:18px; }
  .galup-body{ padding:16px 18px; overflow:auto; display:grid; gap:14px; }
  .galup-footer{ padding:12px 18px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }

  .galup-drop{
    display:flex; align-items:center; justify-content:center; text-align:center;
    min-height:180px; border:2px dashed var(--border-strong); border-radius:14px; background:#f8fafc; padding:24px 16px;
    transition:border-color .15s, background-color .15s, box-shadow .15s;
  }
  .galup-drop.is-over{ border-color:var(--accent-blue); background:#eef2ff; box-shadow:0 0 0 4px rgba(37,99,235,.08) inset; }

  #galUpList{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  @media (max-width:980px){ #galUpList{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:680px){ #galUpList{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:420px){ #galUpList{ grid-template-columns:1fr; } }

  .galup-item{
    position:relative; display:flex; flex-direction:column; min-width:0;
    padding:10px; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:var(--shadow-1);
  }
  .galup-thumb{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center; border-radius:10px; background:#edf2f7; }
  .galup-remove{ position:absolute; right:8px; top:8px; width:28px; height:28px; border-radius:999px; border:0; background:rgba(15,23,42,.65); color:#fff; cursor:pointer; }
  .galup-remove:hover{ background:rgba(15,23,42,.78); }

  .galup-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; min-height:22px; }
  .galup-name{ font-size:.9rem; color:var(--text); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .galup-ok{ color:#16a34a; font-weight:700; font-size:.85rem; opacity:0; transition:opacity .2s; }
  .galup-item.is-ok .galup-ok{ opacity:1; }

  .galup-progress{ height:6px; margin-top:8px; background:#eef2f7; border-radius:999px; overflow:hidden; display:none; }
  .galup-item.is-uploading .galup-progress{ display:block; }
  .galup-progress > *{ display:block; height:100%; width:0; background:linear-gradient(90deg,#a78bfa,#6366f1); transition:width .2s; }
}