html{height:100%;min-height:100%;margin:0;}
body{margin:12px;height:100%;min-height:520px;overflow:hidden;font-family:-apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;background:#f5f5f5;box-sizing:border-box;display:flex;flex-direction:column;min-height:0;}
.app{flex:1 1 auto;display:flex;flex-direction:column;gap:0;min-height:0;height:100%;max-height:100%;width:100%;box-sizing:border-box;overflow:hidden;padding:0 10px;}
.toolbar{flex-shrink:0;display:flex;gap:8px;align-items:center;margin-bottom:10px;}
.warehouse-search-form{display:flex;flex:1;gap:8px;align-items:center;min-width:0;margin:0;padding:0;border:none;background:transparent;}
.warehouse-search-form #q{flex:1;min-width:0;padding:8px 10px;border:1px solid #d0d0d0;border-radius:8px;box-sizing:border-box;font-size:13px;position:relative;z-index:1;}
.warehouse-search-form .icon-btn{flex-shrink:0;position:relative;z-index:2;}
.icon-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid #d0d0d0;border-radius:10px;background:#fff;cursor:pointer;}
.icon-btn:hover{background-color:#f6f6f6;}
.icon-btn:disabled{opacity:0.4;cursor:default;background-color:#f3f3f3;}
.icon{width:20px;height:20px;display:block;object-fit:contain;}
.warehouse-row-icon{width:15px;height:15px;display:block;object-fit:contain;pointer-events:none;}
.results-wrap{
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  width:100%;
  position:relative;
  margin-bottom:10px;
}
.results{
  width:100%;
  height:100%;
  overflow:auto;
  border:1px solid #ddd;
  border-radius:10px;
  padding:6px;
  background:#fff;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:8px;
  box-sizing:border-box;
}
#spinner{
  display:none;
  position:absolute;
  inset:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.92);
  border-radius:10px;
  border:1px solid #ddd;
}
.spinner-ring{
  width:36px;
  height:36px;
  animation:gg-spin 0.7s linear infinite;
}
.spinner-text{
  margin-top:10px;
  font-size:13px;
  color:#888;
}
.item{
  padding:6px 8px;
  border-radius:8px;
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:8px;
  border:1px solid transparent;
  align-items:center;
  box-sizing:border-box;
  width:calc(50% - 4px);
  position:relative;
}
.item:hover{background:#f4f6ff;border-color:#cfd8ff;cursor:pointer;}
.meta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.size{font-size:11px;color:#64748b;white-space:nowrap;font-variant-numeric:tabular-nums;}
.btn-delete{
  display:none;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border:none;
  border-radius:6px;
  background:transparent;
  color:#999;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
}
.btn-delete .warehouse-row-icon{width:15px;height:15px;pointer-events:none;}
.btn-delete:hover{background:#fee2e2;color:#dc2626;}
.item:hover .btn-delete{display:flex;}
.thumb{width:64px;height:64px;border:1px solid #ddd;border-radius:8px;background:#fff;object-fit:contain;}
.name{font-weight:600;}
.status-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;margin-left:6px;width:20px;height:20px;border:1px solid transparent;background-size:16px 16px;background-position:center;background-repeat:no-repeat;}
.status-badge-cloud{border-color:#bfdbfe;background-color:#dbeafe;background-image:url("{{ICON_BASE_URL}}CLOUD.svg");}
.status-badge-local{border-color:#e5e7eb;background-color:#f3f4f6;background-image:url("{{ICON_BASE_URL}}LOCAL.svg");}
.status-badge-oversize{border-color:#f97316;background-color:#ffedd5;color:#9a3412;font-size:11px;font-weight:700;font-family:system-ui,sans-serif;background-image:none;min-width:20px;}
.actions{display:flex;align-items:center;gap:4px;margin-left:auto;}
.icon-btn-small{width:20px;height:20px;border-radius:6px;font-size:0;padding:0;border-width:1px;background-color:#fff;background-size:16px 16px;background-position:center;background-repeat:no-repeat;}
.icon-btn-cloud-remove{background-image:url("{{ICON_BASE_URL}}CLOUD_REMOVE.svg");}
.icon-btn-delete-local{background-image:url("{{ICON_BASE_URL}}DELETE.svg");}
.icon-btn-small:disabled{opacity:1;background-color:#f3f3f3;}
.icon-btn-cloud-remove:disabled{background-image:url("{{ICON_BASE_URL}}DISABLED_CLOUD_REMOVE.svg")}
.icon-btn-delete-local:disabled{background-image:url("{{ICON_BASE_URL}}DISABLED_DELETE.svg")}
.icon-btn-cloud-remove.syncing{background-image:none;position:relative;}
.icon-btn-cloud-remove.syncing::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border:2px solid #bfdbfe;border-top-color:#2563eb;border-radius:50%;animation:gg-spin 0.65s linear infinite;}
.icon-btn-delete-local.syncing{background-image:none;position:relative;}
.icon-btn-delete-local.syncing::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border:2px solid #bfdbfe;border-top-color:#2563eb;border-radius:50%;animation:gg-spin 0.65s linear infinite;}
@keyframes gg-spin{to{transform:rotate(360deg);}}
.empty{text-align:center;padding:16px;color:#666;}
.dir-bar{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 20px 0;
  padding:4px 8px;
  min-width:0;
  border:1px solid #ddd;
  border-radius:8px;
  box-sizing:border-box;
}
.dir-label{font-size:8px;color:#64748b;white-space:nowrap;flex-shrink:0;font-weight:500;}
.dir-path{font-size:8px;line-height:1.2;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;max-width:12rem;cursor:default;}