:root { --bg:#0f1115; --panel:#171923; --muted:#a0aec0; --acc:#5eead4; --text:#e2e8f0; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.header h1{font-size:24px;margin:0}
.auth input{padding:8px 10px;border-radius:10px;border:1px solid #2d3748;background:#0b0d13;color:var(--text)}
.auth button{margin-left:8px;padding:8px 12px;border:0;border-radius:12px;background:var(--acc)}
/* Neues 2x-Layout: oben 2 Spalten, unten Files über volle Breite */
.grid{
  display:grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    "left upload"
    "files files";
  gap:16px;
}

/* Panels den Areas zuordnen */
.panel-left   { grid-area:left; }
.panel-upload { grid-area:upload; }
.panel-files  { grid-area:files; }

/* Dateiliste: jetzt eine Spalte */
.panel-files .list {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Abstand zwischen den Zeilen */
  padding: 0;
  margin: 0;
  list-style: none;
  max-height: 70vh; /* scrollbar wenn zu lang */
  overflow: auto;
}

/* Einzelne File-Zeile als Row */
.panel-files .list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #22283a;
  border-radius: 12px;
  background: #11151f;
}


/* Rest wie gehabt, leicht justiert */
.file-item span{ margin-right:auto; padding-left:4px; }
.list button{ padding:6px 12px; border:0; border-radius:10px; background:#2d3748; color:#fff; }
.list button:hover{ filter:brightness(1.1); }

/* Mobile Fallback: untereinander stapeln */
@media (max-width: 900px){
  .grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "upload"
      "files";
  }
}

.card{background:var(--panel);border:1px solid #2a2f3a;border-radius:16px;padding:16px;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.row{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}
.dropzone{border:1px dashed #3b4252;border-radius:12px;padding:24px;text-align:center;cursor:pointer;background:#10131b}
.dropzone.drag{outline:2px dashed var(--acc)}
.status{margin-top:8px;color:var(--muted)}
.list{list-style:none;padding-left:0;margin:0}
.list li {
  display: flex;
  gap: 10px; /* Mehr Abstand zwischen den Elementen */
  justify-content: flex-end;
  align-items: center;
  padding: 8px 0; /* Mehr vertikaler Abstand */
  border-bottom: 1px solid #22283a;
}

.list li:last-child {
  border-bottom: none; /* letzte Zeile ohne Linie */
}

.file-item span {
  margin-right: auto;
  padding-left: 4px;
}

.list button {
  padding: 6px 12px; /* Buttons leicht größer */
}

.file-item span{margin-right:auto}
.list button,.user-table button{padding:6px 10px;border:0;border-radius:10px;background:#2d3748;color:white}
.list button:hover,.user-table button:hover{filter:brightness(1.1)}
.meta{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.meta-row{display:flex;gap:8px;align-items:center}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}
.footer{opacity:.6;margin-top:24px;font-size:14px}
.user-table{width:100%;border-collapse:collapse;margin-top:12px}
.user-table th,.user-table td{border-bottom:1px solid #22283a;padding:6px 4px;text-align:left}

.toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1b2230;
  border: 1px solid #2a3142;
  border-radius: 999px;
  padding: 4px 8px;
}

.toggle-wrap input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #5eead4; /* schöner Haken */
  cursor: pointer;
}

.toggle-label { font-size: 12px; color: #cbd5e1; }


.filters{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin:8px 0 10px 0;
}
.filters input, .filters select, .filters button{
  padding:8px 10px; border-radius:10px; border:1px solid #2a2f3a;
  background:#10131b; color:#e2e8f0;
}
.filters .chk{ display:inline-flex; gap:6px; align-items:center; }