.project-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.55rem; margin: 0.75rem 0; } .project-type-card { border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 12px; padding: 0.65rem; text-align: center; cursor: pointer; background: rgba(0, 0, 0, 0.25); transition: border-color 0.2s, box-shadow 0.2s; } .project-type-card:hover { border-color: rgba(56, 189, 248, 0.4); } .project-type-card.selected { border-color: #38bdf8; box-shadow: 0 0 16px rgba(56, 189, 248, 0.15); background: rgba(56, 189, 248, 0.08); } .project-type-card .icon { font-size: 1.5rem; display: block; margin-bottom: 0.25rem; } .project-type-card .label { font-size: 0.72rem; color: #cbd5e1; line-height: 1.3; } .nas-path-box { font-family: var(--font-mono, monospace); font-size: 0.72rem; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 8px; padding: 0.5rem 0.65rem; color: #7dd3fc; word-break: break-all; margin: 0.5rem 0; } .asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.65rem; } .asset-card { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 10px; padding: 0.65rem; } .asset-card .type { font-size: 0.65rem; text-transform: uppercase; color: #64748b; } .photo-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.4rem; max-height: 200px; overflow-y: auto; } .photo-pick-item { aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: #111; } .photo-pick-item.selected { border-color: #38bdf8; } .photo-pick-item img { width: 100%; height: 100%; object-fit: cover; }