@charset "UTF-8";
/* Apple-like Dark Mode – komplette stylesheet-Datei (mit runden Header-Ecken & getrenntem Downloadbereich) */

:root{
  --bg: #0b0c0f;
  --bg2: radial-gradient(1200px 800px at 15% -10%, rgba(20,30,50,.55), transparent 60%),
         radial-gradient(1000px 700px at 100% 120%, rgba(0,40,110,.35), transparent 60%);

  --text: #F5F5F7;
  --muted:#B3B7C2;

  --accent:#0A84FF;
  --accent-2:#3EA0FF;
  --ring: rgba(10,132,255,.55);

  --glass: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.12);
  --separator: rgba(255,255,255,.08);

  --shadow: 0 10px 30px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.06);
  --radius-xl: 20px;
  --radius: 14px;
}

html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
       Segoe UI,Roboto,Inter,Helvetica,Arial,system-ui,sans-serif;
  letter-spacing:-.01em;
  background: var(--bg2), linear-gradient(180deg, #0a0b0e 0%, #0b0c0f 40%, #0b0c0f 100%);
}

.wrap{ max-width:1200px; margin:36px auto; padding:0 20px; }
h1{ font-size:clamp(22px,3.2vw,28px); margin:0 0 18px; letter-spacing:.1px; }

.grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:22px; }
@media (max-width: 980px){ .grid{ grid-template-columns:1fr; } }

.card{
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:18px;
  box-shadow:var(--shadow);
}
.sub{
  background:var(--glass-2);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border:1px solid var(--separator);
  border-radius:var(--radius);
  padding:14px;
}

.footer-card{
  margin-top:22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.footer-title{ font-weight:800; }
.footer-meta{ color:var(--muted); }

.row{ display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; }
.mt{ margin-top:.75rem; }
.hint{ font-size:.92rem; color:var(--muted); }
.badge{
  display:inline-block; padding:.22rem .6rem; border-radius:999px;
  border:1px solid var(--separator); color:var(--muted); font-size:.8rem;
  background:rgba(255,255,255,.03);
}
.err{ color:#ffb4b4; font-weight:700; }
.label.over-links{ margin-bottom:.4rem; font-weight:700; color:var(--muted); }

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.8rem 1rem; border-radius:12px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#fff; font-weight:700; text-decoration:none; cursor:pointer;
  border:1px solid rgba(10,132,255,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 8px 18px rgba(10,132,255,.30);
  transition: transform .06s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{ filter:brightness(1.05); box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 10px 22px rgba(10,132,255,.38); }
.btn:active{ transform:scale(.99) translateY(1px); box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 4px 12px rgba(10,132,255,.28); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring), 0 1px 0 rgba(255,255,255,.10) inset; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.btn.secondary{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--text);
  box-shadow:none;
}
.btn.secondary:hover{ background:rgba(255,255,255,.09); }
.btn.secondary:focus-visible{ box-shadow:0 0 0 3px var(--ring); }

.field{ margin:14px 0 0; }
.label{ font-weight:700; font-size:.95rem; margin:0 0 8px; color:var(--muted); }

.file-row{ width:100%; max-width: 840px; }
input[type=file]{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--muted);
}
input[type=file]::file-selector-button{
  margin-right:12px; padding:8px 12px;
  border-radius:10px; border:1px solid var(--separator);
  background:rgba(255,255,255,.10); color:#fff; cursor:pointer;
  transition: background .18s ease, transform .06s ease;
}
input[type=file]::file-selector-button:hover{ background:rgba(255,255,255,.14); }
input[type=file]::file-selector-button:active{ transform:scale(.98); }
input[type=file]:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--ring);
  border-color:rgba(10,132,255,.45);
}
input[type=checkbox]{ accent-color: var(--accent); }

/* ========= Tabelle ========= */
.table-wrap{
  max-height: 480px;
  overflow: auto;                 /* nur die Tabelle scrollt */
  border-radius: var(--radius);   /* runde Ecken für Kopf/Kanten */
  border: 1px solid var(--separator);
}

/* Wichtig: separate border model, damit die Header-Ecken rund sein können */
.table-wrap table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.95rem; }

/* Zellen */
.table-wrap th, .table-wrap td{
  padding:10px 12px;
  border-bottom:1px solid var(--separator);
  vertical-align:top;
}

/* Glossy Header + runde Ecken */
.table-wrap thead th{
  position: sticky; top: 0; text-align:left;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
  z-index: 1;
}
.table-wrap thead th:first-child{
  border-top-left-radius: var(--radius);
}
.table-wrap thead th:last-child{
  border-top-right-radius: var(--radius);
}

/* Hover */
.table-wrap tbody tr:hover{ background:rgba(255,255,255,.035); }

/* Scrollbar */
*::-webkit-scrollbar{ height:10px; width:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.15);
  border:2px solid transparent; border-radius:999px;
  background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.25); border:2px solid transparent; }

@media (prefers-reduced-motion: reduce){
  .btn{ transition:none }
}

/* Ausklappbare Info-Box (Details) */
details.card-details { border-radius: 12px; }
details.card-details > summary { cursor: pointer; list-style: none; }
details.card-details > summary::-webkit-details-marker { display: none; }

/* Kleine Utility für vertikale Abstände, falls noch nicht vorhanden */
.mt-0 { margin-top: 0 !important; }

/* Datei-Upload: Badge neben dem Button */
.file-row.file-inline {
  display: flex;          /* neben dem Button */
  align-items: center;
  gap: .65rem;
  flex-wrap: nowrap;      /* nicht umbrechen */
}

/* Standard-Input soll Platz bekommen, aber Badge daneben bleiben */
.file-row.file-inline input[type=file]{
  flex: 1 1 auto;         /* wächst, damit Dateiname sichtbar bleibt */
  width: auto;            /* überschreibt das globale width:100% */
}

/* Kompakte Pill-Badge "Max.: 2,0 MB" */
.max-badge{
  display:inline-block;
  padding:.28rem .55rem;
  border-radius:10px;
  border:1px solid var(--separator);
  background:rgba(255,255,255,.06);
  color:var(--muted);
  font-size:.85rem;
  white-space:nowrap;
}