/* Project navigation and library presentation; generation and deletion contracts stay shared. */
#vjtop-ref .sidebar-project-name {
  display:flex; align-items:center; gap:10px; min-height:48px;
  padding:6px 6px 6px 12px; color:#e7e8e9; font-size:16px; font-weight:500; text-decoration:none;
}
#vjtop-ref .sidebar-project-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#vjtop-ref .sidebar-project-thumbnail {
  display:grid; flex:0 0 32px; width:32px; height:32px; overflow:hidden;
  place-items:center; border-radius:8px; background:#292929;
}
#vjtop-ref .sidebar-project-thumbnail img { display:block; width:100%; height:100%; object-fit:cover; }
#vjtop-ref .sidebar-project-thumbnail[hidden] { display:none; }
#vjtop-ref .sidebar-project-name:focus-visible { outline:2px solid #b5def5; outline-offset:-2px; border-radius:9px; }
#vjtop-ref .sidebar-project-menu { border:1px solid #ffffff1c; background:#191919; border-radius:18px; }
#vjtop-ref .sidebar-project-menu [data-project-action="delete"],
#vjtop-ref .sidebar-project-menu [data-project-action="delete"] .ui-icon { color:#ff555c; }
#vjtop-ref .sidebar-project-menu [data-project-action="delete"]:disabled,
#vjtop-ref .sidebar-project-menu [data-project-action="delete"]:disabled .ui-icon { color:#777; }

#vjtop-ref #projectsView { padding:var(--library-page-top) var(--library-page-gutter) 58px; }
#vjtop-ref #projectsView .app-page-heading { align-items:center; margin-bottom:28px; text-align:left; }
#vjtop-ref #projectsView .app-page-heading h1 { margin:0; font-size:26px; letter-spacing:0; }
#vjtop-ref .projects-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
#vjtop-ref .projects-current-filter { flex:none; color:#f2f2f2; font-size:14px; font-weight:600; }
#vjtop-ref #projectsView .app-search { width:230px; height:36px; border-radius:999px; background:#222; }
#vjtop-ref #projectsView .app-search input { font-size:var(--library-control-font-size); }
#vjtop-ref #projectsView .app-page-tools select { border-radius:999px; background:#202020; font-size:var(--library-control-font-size); }
#vjtop-ref #projectsView .app-view-switch { border-radius:999px; }
#vjtop-ref #projectsView .app-view-switch button { border-radius:50%; }
#vjtop-ref #projectsView .projects-grid:not(.list-view) { grid-template-columns:repeat(var(--library-grid-columns),minmax(0,1fr)); gap:var(--library-grid-row-gap) var(--library-grid-column-gap); }
#vjtop-ref .project-create-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-width:0; width:100%; aspect-ratio:16/9; padding:16px; border:1px dashed #5d5d5d;
  border-radius:14px; background:linear-gradient(145deg,#191919,#242424); color:#eee;
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
}
#vjtop-ref .project-create-card .ui-icon { width:26px; height:26px; }
#vjtop-ref .project-create-card:hover { border-color:#a6a0b0; background:linear-gradient(145deg,#242127,#2b262f); }
#vjtop-ref .project-create-card:focus-visible { outline:2px solid #c89cf2; outline-offset:3px; }
#vjtop-ref .project-create-card:disabled { opacity:.55; cursor:wait; }
#vjtop-ref .project-card-open { position:relative; border-radius:14px; overflow:hidden; }
#vjtop-ref .project-card-preview { border-radius:14px; }
#vjtop-ref .project-card-open:hover .project-card-preview,
#vjtop-ref .project-card-open:focus-visible .project-card-preview { transform:none; }
#vjtop-ref .project-card-open:focus-visible { outline:2px solid #c89cf2; outline-offset:3px; }
#vjtop-ref .project-card-preview .project-default-logo { width:34%; height:55%; object-fit:contain; opacity:.3; }
#vjtop-ref .project-card-copy {
  position:absolute; inset:auto 1px 1px; display:block; padding:40px 14px 13px;
  border-radius:0 0 13px 13px; background:linear-gradient(transparent,rgba(0,0,0,.84)); pointer-events:none;
}
#vjtop-ref .project-card-copy strong { color:#f2f2f2; font-size:14px; font-weight:600; }
#vjtop-ref .project-card-copy small { color:#bababa; font-size:var(--library-meta-font-size); }
#vjtop-ref .project-card-more { top:9px; right:9px; width:32px; height:32px; border-radius:50%; color:#ddd; }
#vjtop-ref .project-card-menu { top:46px; right:8px; width:196px; max-width:calc(100vw - 32px); padding:8px; border-radius:18px; background:#191919; }
#vjtop-ref .project-card-menu button { gap:12px; min-height:42px; padding:10px 12px; font-size:14px; border-radius:10px; }
#vjtop-ref .project-card-menu button .ui-icon { flex:0 0 18px; width:18px; height:18px; }
#vjtop-ref .project-card-menu button[data-project-action="delete"],
#vjtop-ref .project-card-menu button[data-project-action="delete"] span,
#vjtop-ref .project-card-menu button[data-project-action="delete"] .ui-icon { color:#ff555c; }
#vjtop-ref .project-card-menu button[data-project-action="delete"]:hover,
#vjtop-ref .project-card-menu button[data-project-action="delete"]:hover span,
#vjtop-ref .project-card-menu button[data-project-action="delete"]:focus-visible,
#vjtop-ref .project-card-menu button[data-project-action="delete"]:focus-visible span { color:#ff7076; }
#vjtop-ref .project-card-menu button[data-project-action="delete"]:disabled,
#vjtop-ref .project-card-menu button[data-project-action="delete"]:disabled span,
#vjtop-ref .project-card-menu button[data-project-action="delete"]:disabled .ui-icon { color:#777; }
#vjtop-ref .project-preview-open .projects-toolbar { display:none; }
#vjtop-ref .projects-grid.list-view .project-create-card { aspect-ratio:auto; min-height:96px; flex-direction:row; }
#vjtop-ref .projects-grid.list-view .project-card-copy { position:static; padding:0; background:none; }
#vjtop-ref .projects-grid.list-view .project-card-open { overflow:visible; }

/* Project confirmations follow the asset dialog; repository confirmations retain their own presentation. */
#vjtop-ref .canvas-delete-modal.is-project-delete { background:rgba(5,7,9,.68); backdrop-filter:blur(9px); }
#vjtop-ref .canvas-delete-modal.is-project-delete .canvas-delete-card {
  width:min(440px,calc(100vw - 40px)); max-height:calc(100dvh - 32px); overflow-y:auto;
  padding:30px 28px; border:1px solid #303033; border-radius:30px; background:#1c1c1e;
  box-shadow:0 28px 72px rgba(0,0,0,.52); text-align:center;
}
#vjtop-ref .canvas-delete-modal.is-project-delete h3 { margin:0 0 14px; color:#f4f4f4; font-size:23px; }
#vjtop-ref .canvas-delete-modal.is-project-delete p { color:#a5a5a5; font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
#vjtop-ref .canvas-delete-modal.is-project-delete .canvas-delete-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:25px; }
#vjtop-ref .canvas-delete-modal.is-project-delete .canvas-delete-actions button {
  min-height:48px; border:0; border-radius:26px; padding:10px 18px;
  background:#363639; color:#fff; font-size:15px; font-weight:600;
}
#vjtop-ref .canvas-delete-modal.is-project-delete .canvas-delete-actions button:hover:not(:disabled) { background:#424245; }
#vjtop-ref .canvas-delete-modal.is-project-delete .canvas-delete-actions button[data-confirm-delete] { background:#ff494f; }
#vjtop-ref .canvas-delete-modal.is-project-delete .canvas-delete-actions button[data-confirm-delete]:hover:not(:disabled) { background:#ff6267; }
#vjtop-ref .canvas-delete-modal.is-project-delete .canvas-delete-actions button:focus-visible { outline:2px solid #e7e7e7; outline-offset:2px; }

@media (max-width:720px) {
  #vjtop-ref #projectsView .app-page-heading { align-items:stretch; }
  #vjtop-ref #projectsView .app-page-heading h1 { font-size:23px; }
  #vjtop-ref .projects-toolbar { align-items:stretch; flex-direction:column; gap:16px; }
  #vjtop-ref #projectsView .app-page-tools { flex-wrap:wrap; min-width:0; }
  #vjtop-ref #projectsView .app-search { flex:1 1 100%; width:100%; min-width:0; }
}
@media (max-width:480px) {
  #vjtop-ref .project-card-menu { right:0; width:min(196px,100%); min-width:0; }
  #vjtop-ref .project-card-copy { padding:26px 9px 10px; }
}
@media (max-width:430px) {
  #vjtop-ref .canvas-delete-modal.is-project-delete .canvas-delete-card { padding:24px 18px; border-radius:25px; }
}
@media (pointer:coarse) {
  #vjtop-ref .project-card-more { width:44px; height:44px; }
  #vjtop-ref .project-card-menu { top:58px; }
  #vjtop-ref .project-card-menu button { min-height:44px; }
  #vjtop-ref #projectsView .app-search input,
  #vjtop-ref .project-create-dialog input { font-size:16px; }
}