/* ══════════════════════════════════════════════════════════
   cloud.css — Ergänzungen der Mediathek für Kinkstar Cloud:
   Shared Header oben, Ordner-Ansicht, Upload-Panel, Drop-Fläche.
   ══════════════════════════════════════════════════════════ */

/* Header + App teilen sich die Höhe; nur .main scrollt. */
body.kc{ display:flex; flex-direction:column; height:100%; overflow:hidden; }
body.kc > .ks-header{ flex:0 0 auto; }
body.kc > .app{ flex:1 1 auto; min-height:0; height:auto; }
body.kc > .gate{ position:relative; inset:auto; flex:1 1 auto; }
.ks-brand-tag #who{ color:#fff; }

/* Overlays müssen über dem Header (z-index 500) liegen. */
.lb{ z-index:800; }
.result{ z-index:850; }
.modal{ z-index:700; }
.ac{ z-index:760; }
.blackout{ z-index:9500; }
.toasts{ z-index:900; }

/* ─── Filter-Selects ─── */
.fsel{
  background:var(--panel-2); color:var(--text); border:1px solid var(--line-hi);
  border-radius:var(--r); padding:4px 8px; font:inherit; font-size:12.5px; max-width:220px;
}
.fsel-wrap{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; }
.fsel-wrap .eyebrow{ margin:0; }

/* ─── Ordner-Ansicht ─── */
.fold-tools{ display:flex; gap:8px; align-items:flex-end; }
.fold-lead{ color:var(--dim); font-size:13px; max-width:78ch; margin:0 0 22px; }
.fold-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.fold-card{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ink-2);
  padding:16px 18px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s;
}
.fold-card:hover{ border-color:var(--line-hi); }
.drop-veil:not([hidden]) ~ * .fold-card,
body.is-dragging .fold-card{ border-style:dashed; }
.fold-top{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.fold-name{ margin:2px 0 0; font-size:19px; font-weight:600; word-break:break-word; }
.fold-perm{ font-size:11px; padding:3px 8px; border-radius:99px; border:1px solid var(--line-hi); color:var(--dim); white-space:nowrap; }
.fold-perm.perm-owner{ color:var(--brass); border-color:var(--brass); }
.fold-perm.perm-full{ color:var(--garnet); border-color:var(--garnet); }
.fold-perm.perm-upload{ color:var(--steel); border-color:var(--steel); }
.fold-meta{ margin:0; color:var(--dim); font-size:12.5px; font-family:var(--mono); }
.fold-actions{ display:flex; flex-wrap:wrap; gap:6px; }
.fold-drop{ margin:2px 0 0; font-size:11.5px; color:var(--dimmer); border-top:1px dashed var(--line); padding-top:8px; }
.btn.danger{ color:var(--garnet); }
.fold-pick{ display:flex; flex-direction:column; gap:6px; }
.fold-pick .btn{ justify-content:flex-start; }

/* ─── Teilen ─── */
.share-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 0; border-bottom:1px solid var(--line); }
.share-row span{ font-size:13.5px; }

/* ─── Drop-Fläche ─── */
.drop-veil{
  position:fixed; inset:0; z-index:650; background:#0A0A0CDD; display:grid; place-items:center;
  pointer-events:none; animation:fade .12s var(--ease);
}
.drop-box{ border:2px dashed var(--cord); border-radius:var(--r-lg); padding:48px 64px; text-align:center; }
.drop-box .eyebrow{ font-size:15px; color:var(--text); }
.drop-hint{ color:var(--dim); font-size:13px; margin:6px 0 0; }

/* ─── Upload-Panel ─── */
.up-panel{
  position:fixed; left:calc(var(--rail) + 18px); bottom:18px; z-index:640; width:min(460px,calc(100vw - 120px));
  background:var(--panel-2); border:1px solid var(--line-hi); border-radius:var(--r-lg);
  box-shadow:0 18px 44px #000a; max-height:46vh; display:flex; flex-direction:column;
}
.up-head{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); }
.up-head .up-sum{ flex:1; color:var(--dim); font-size:12px; font-family:var(--mono); }
.up-list{ overflow-y:auto; padding:4px 12px 10px; }
.up-row{ display:grid; grid-template-columns:1fr auto auto; gap:2px 10px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line); }
.up-row .up-name{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; direction:rtl; text-align:left; font-size:12.5px; }
.up-row .up-info{ font-size:11.5px; color:var(--dim); font-family:var(--mono); }
.up-row .up-bar{ grid-column:1 / -1; height:3px; background:var(--line); border-radius:2px; overflow:hidden; }
.up-row .up-bar i{ display:block; height:100%; background:var(--cord); transition:width .2s; }
.up-row.is-done .up-bar i{ background:var(--steel); }
.up-row.is-error .up-info{ color:var(--garnet); }
.up-row .icon-btn{ grid-row:1; grid-column:3; }

/* ─── Lightbox: Download-Link ─── */
.lb-dl{ color:var(--cord); text-decoration:none; font-size:12px; }
.lb-dl:hover{ text-decoration:underline; }

@media (max-width:760px){
  .up-panel{ left:10px; right:10px; width:auto; }
  .fold-grid{ grid-template-columns:1fr; }
}