.file-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.breadcrumb{display:flex;align-items:center;gap:6px;font-size:.73rem;color:var(--muted)}.dropzone{border:1px dashed color-mix(in srgb,var(--gold) 35%,var(--hair2));border-radius:18px;padding:18px;text-align:center;color:var(--muted);font-size:.73rem;margin-bottom:14px;transition:background .18s ease,border-color .18s ease}.dropzone.dragover{background:rgba(197,161,90,.08);border-color:var(--gold)}.file-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.file-card{padding:14px}.file-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(74,141,255,.10);color:var(--info);font-size:.69rem;font-weight:700}.file-name{font-size:.75rem;font-weight:630;margin-top:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-meta{font-size:.64rem;color:var(--muted);margin-top:4px}.file-actions{display:flex;justify-content:flex-end;margin-top:8px}.files-list{display:none}.view-list .file-grid{display:none}.view-list .files-list{display:block}@media(max-width:1100px){.file-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.file-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:460px){.file-grid{grid-template-columns:1fr}}

/* Files v2 - folders, selection and storage */

.folder-card{
  cursor:pointer;
}

.folder-icon{
  background:rgba(197,161,90,.12);
  color:var(--gold);
  font-size:1.15rem;
}

.folder-row-link{
  border:0;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  padding:0;
  font:inherit;
  font-weight:650;
}

.folder-row-link:hover{
  color:var(--gold);
}

.breadcrumb-link{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:3px 5px;
  border-radius:7px;
  font:inherit;
  cursor:pointer;
}

.breadcrumb-link:hover{
  color:var(--text);
  background:rgba(255,255,255,.06);
}

.breadcrumb-link.current{
  color:var(--text);
  font-weight:700;
}


/* Selection toolbar */

.file-selection-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
  padding:10px 12px;
  border:1px solid
    color-mix(
      in srgb,
      var(--gold) 24%,
      var(--hair2)
    );
  border-radius:14px;
  background:
    color-mix(
      in srgb,
      var(--gold) 6%,
      transparent
    );
}

.file-selection-bar[hidden]{
  display:none !important;
}

.file-selection-count{
  font-size:.72rem;
  color:var(--muted);
}

.file-selection-count b{
  color:var(--text);
}

.file-selection-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:7px;
}


/* File selection */

.file-select-control{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
  font-size:.61rem;
  color:var(--muted);
  cursor:pointer;
}

.file-select-control input,
.file-row-select input{
  accent-color:var(--gold);
}

.file-selected{
  border-color:
    color-mix(
      in srgb,
      var(--gold) 55%,
      var(--hair2)
    );
  background:
    color-mix(
      in srgb,
      var(--gold) 6%,
      transparent
    );
}

.file-row-selected{
  background:
    color-mix(
      in srgb,
      var(--gold) 5%,
      transparent
    );
}

.file-row-select{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}


/* Storage status */

.storage-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  margin-top:7px;
  padding:4px 8px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:.61rem;
  font-weight:700;
  line-height:1;
}

.storage-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  flex:0 0 auto;
}

.storage-local{
  color:#d7a93b;
  background:rgba(215,169,59,.09);
  border-color:rgba(215,169,59,.22);
}

.storage-local .storage-dot{
  background:#d7a93b;
}

.storage-synced{
  color:#50c878;
  background:rgba(80,200,120,.09);
  border-color:rgba(80,200,120,.22);
}

.storage-synced .storage-dot{
  background:#50c878;
}

.storage-nas{
  color:#65a6ff;
  background:rgba(101,166,255,.09);
  border-color:rgba(101,166,255,.22);
}

.storage-nas .storage-dot{
  background:#65a6ff;
}

.storage-detail{
  margin-top:5px;
}


/* Storage policy */

.storage-policy-badge{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin-top:6px;
  padding:3px 7px;
  border-radius:999px;
  font-size:.59rem;
  font-weight:650;
}

.policy-auto{
  color:var(--muted);
  background:rgba(255,255,255,.05);
}

.policy-local{
  color:#e6c36a;
  background:rgba(197,161,90,.10);
}

.policy-nas{
  color:#82b6ff;
  background:rgba(101,166,255,.10);
}


@media(max-width:760px){
  .file-selection-bar{
    align-items:flex-start;
    flex-direction:column;
  }

  .file-selection-actions{
    justify-content:flex-start;
  }
}


/* Files v4 - move + drag & drop */

.file-dragging{
  opacity:.48;
}

.folder-drop-active{
  outline:2px solid var(--gold);
  outline-offset:-2px;
  background:
    color-mix(
      in srgb,
      var(--gold) 12%,
      transparent
    ) !important;
}

.folder-actions,
.file-row-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}



/* folder storage summary v1 */

.folder-storage-badge,
.folder-storage-list{
  transition:
    color .16s ease,
    background .16s ease,
    border-color .16s ease;
}

.folder-storage-badge[data-tier="empty"],
.folder-storage-list[data-tier="empty"]{
  opacity:.68;
}

.folder-storage-badge[data-tier="mixed"],
.folder-storage-list[data-tier="mixed"]{
  color:#d6a84b;
}

.folder-storage-badge[data-tier="nas"],
.folder-storage-list[data-tier="nas"]{
  color:#78b7ff;
}

.folder-storage-badge[data-tier="local+nas"],
.folder-storage-list[data-tier="local+nas"]{
  color:#74d7a4;
}

