/* Project hub owns the project library; canvas-authority owns node geometry. */
.project-hub-card { width: min(1080px, calc(100vw - 48px)); max-height: 86dvh; padding: 30px; }
.project-hub-card .modal-head { align-items: flex-start; margin-bottom: 28px; }
.project-hub-eyebrow { display: block; color: var(--sws-accent); font-size: 10px; letter-spacing: 1.8px; margin-bottom: 10px; }
.project-hub-card .muted { margin: 10px 0 0; color: var(--sws-text-muted); font-size: 12px; line-height: 1.7; }
.project-hub-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--sws-line); margin-bottom: 22px; }
.project-hub-toolbar input { margin-left: auto; width: 280px; max-width: 100%; height: 40px; border-radius: 11px; border: 1px solid var(--sws-line); background: rgba(255,255,255,.025); color: var(--sws-text); padding: 0 14px; font-size: 12px; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(232px,1fr)); gap: 18px; }
.project-card { min-width: 0; border: 1px solid var(--sws-line); border-radius: 16px; background: rgba(255,255,255,.022); overflow: hidden; transition: border-color var(--sws-motion-fast), background-color var(--sws-motion-fast); }
.project-card:hover { border-color: var(--sws-line-strong); background: rgba(255,255,255,.04); }
.project-cover { display: grid; place-items: center; border: 0; border-bottom: 1px solid var(--sws-line); width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(ellipse at 70% 20%,rgba(245,173,118,.07),transparent 65%),#0b1018; color: var(--sws-text-muted); font-size: 11px; }
.project-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sws-motion-panel); }
.project-cover:hover img { transform: scale(1.035); }
.project-cover-placeholder { display: grid; gap: 10px; place-items: center; }
.project-cover-placeholder::before { content: ""; width: 36px; height: 28px; border: 1px solid var(--sws-line-strong); border-radius: 6px; box-shadow: 6px -6px 0 -1px #0b1018,6px -6px 0 0 var(--sws-line); }
.project-info { padding: 18px; }
.project-info > strong { display: block; font-size: 14px; font-weight: 550; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.project-info > span { display: block; margin: 8px 0 16px; font-size: 11px; line-height: 1.8; color: var(--sws-text-muted); }
.project-actions { display: flex; gap: 7px; }
.project-actions button { height: 32px; border: 1px solid var(--sws-line); border-radius: 8px; padding: 0 11px; color: var(--sws-text-soft); background: transparent; font-size: 11px; transition: background-color var(--sws-motion-fast),color var(--sws-motion-fast); }
.project-actions button:first-child { margin-right: auto; color: var(--sws-text); background: rgba(255,255,255,.06); }
.project-actions button:hover { color: var(--sws-text); background: var(--sws-surface-raised); }
.project-actions [data-project-delete]:hover { color: var(--sws-danger); }
.project-empty { grid-column: 1 / -1; min-height: 220px; display: grid; place-content: center; gap: 12px; text-align: center; border: 1px dashed var(--sws-line-strong); border-radius: 18px; color: var(--sws-text-soft); font-size: 15px; }
.project-empty p { color: var(--sws-text-muted); font-size: 12px; margin: 0; }
@media (max-width: 640px) {
  .project-hub-card { width: 100%; max-height: 91dvh; padding: 20px; }
  .project-hub-card .modal-head { margin-bottom: 20px; }
  .project-hub-toolbar input { flex-basis: 100%; width: 100%; }
  .project-grid { grid-template-columns: 1fr; gap: 14px; }
  .project-cover { aspect-ratio: 2 / 1; }
}
@media (prefers-reduced-motion: reduce) {
  .project-cover:hover img { transform: none; }
}