.cosmos-projects__boot {
  display: grid;
  min-height: 100vh;
  margin: 0;
  place-items: center;
  color: var(--cosmos-text-muted);
  font: 500 14px/1.5 var(--cosmos-font)
}
.cosmos-shell__content--projects {
  width: 100%;
  max-width: 1640px;
  padding: 28px clamp(20px,3vw,54px) 48px
}
.projects-hub {
  font-family: var(--cosmos-font);
  display: grid;
  gap: var(--cosmos-space-6);
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
  min-width: 0
}
.projects-hub__title-row {
  display: flex;
  align-items: center;
  gap: 16px
}
.projects-hub__new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  gap: 8px;
  min-height: 46px
}
.projects-hub__filters {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--cosmos-border);
  border-radius: 11px
}
.projects-hub__filter {
  min-height: 38px;
  padding: 0 18px;
  color: var(--cosmos-text);
  background: #131923;
  border: 1px solid var(--cosmos-border);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 13px
}
.projects-hub__filter[aria-pressed=true] {
  color: #fff;
  background: linear-gradient(135deg,#1689ff,#0055ed);
  border-color: #448eff;
  box-shadow: inset 0 1px 6px #ffffff26,0 3px 14px #0062ff26
}
.projects-hub__summary {
  margin: 0;
  color: var(--cosmos-text-muted);
  font-size: 12px
}
.projects-hub :is(a,button,input):focus-visible {
  outline: 2px solid #58b7ff;
  outline-offset: 3px
}
.projects-hub__heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cosmos-space-5)
}
.projects-hub__kicker {
  margin: 0 0 var(--cosmos-space-2);
  color: #84a3ff;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase
}
.projects-hub__title {
  margin: 0;
  font-size: clamp(30px, 3vw, 38px);
  letter-spacing: -.035em
}
.projects-hub__description {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--cosmos-text-muted);
  font-size: 16px;
  line-height: 1.6
}
.projects-hub__count {
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid var(--cosmos-border);
  border-radius: 9px;
  background: var(--cosmos-surface-soft);
  color: var(--cosmos-text-muted);
  font-size: 13px
}
.projects-hub__toolbar {
  display: flex;
  align-items: center;
  gap: var(--cosmos-space-2);
  padding: 0;
  border: 0;
  border-radius: var(--cosmos-radius-md);
  background: 0 0;
  flex-wrap: wrap
}
.projects-hub__search {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
  gap: var(--cosmos-space-2)
}
.projects-hub__search-input {
  min-width: 0;
  min-height: 46px;
  flex: 1;
  padding: 0 16px 0 48px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--cosmos-border-strong);
  border-radius: 9px;
  background: var(--cosmos-bg);
  color: var(--cosmos-text)
}
.projects-hub__search-submit {
  position: absolute;
  left: 6px;
  top: 4px;
  width: 38px;
  height: 38px;
  padding: 9px;
  border: 0;
  background: 0 0;
  color: #c4d4ee;
  cursor: pointer
}
.projects-hub__search-submit svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.6
}
.projects-hub__sort {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border: 1px solid var(--cosmos-border-strong);
  border-radius: 9px;
  color: var(--cosmos-text);
  font-size: 13px;
  white-space: nowrap
}
.projects-hub__sort::before {
  content: "☷";
  font-size: 20px;
  color: #b9c9e4
}
.projects-hub__refresh {
  width: 46px;
  font-size: 23px
}
.projects-hub__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px
}
.projects-hub__search-input::placeholder {
  color: var(--cosmos-text-soft)
}
.projects-hub__button {
  min-height: 40px;
  padding: 0 var(--cosmos-space-4);
  border: 1px solid var(--cosmos-border-strong);
  border-radius: 9px;
  background: var(--cosmos-surface-soft);
  color: var(--cosmos-text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 650
}
.projects-hub__button:hover:not(:disabled) {
  border-color: rgba(116,150,255,.52)
}
.projects-hub__button:disabled {
  cursor: not-allowed;
  opacity: .45
}
.projects-hub__button--primary {
  border-color: var(--cosmos-accent-strong);
  background: linear-gradient(135deg,#1689ff,#0055ed);
  box-shadow: inset 0 1px 5px #ffffff26,0 6px 20px #0055ed20
}
.projects-hub__clear[hidden] {
  display: none
}
.projects-hub__state {
  display: grid;
  min-height: 300px;
  place-items: center;
  padding: var(--cosmos-space-8);
  border: 1px dashed var(--cosmos-border-strong);
  border-radius: var(--cosmos-radius-lg);
  color: var(--cosmos-text-muted);
  text-align: center
}
.projects-hub__state-card {
  max-width: 430px
}
.projects-hub__state-mark {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--cosmos-space-4);
  place-items: center;
  border-radius: 14px;
  background: var(--cosmos-accent-soft);
  color: #a8bbff;
  font-weight: 750
}
.projects-hub__state-title {
  margin: 0;
  color: var(--cosmos-text);
  font-size: 17px
}
.projects-hub__state-message {
  margin: var(--cosmos-space-2) 0 var(--cosmos-space-5);
  font-size: 12px;
  line-height: 1.6
}
.projects-hub__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px
}
.project-card {
  display: flex;
  min-height: 0;
  min-width: 0;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--cosmos-border);
  border-radius: var(--cosmos-radius-md);
  background: linear-gradient(145deg,rgba(27,32,43,.9),rgba(15,18,25,.94));
  transition: border-color 160ms ease,transform 160ms ease
}
.project-card__preview {
  position: relative;
  aspect-ratio: 2.45;
  min-height: 170px;
  overflow: hidden;
  border-bottom: 1px solid var(--cosmos-border);
  background: radial-gradient(ellipse at 50% 90%,#697684,#1c2430 85%)
}
.project-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  color: #adbed3;
  font-size: 10px
}
.project-card__placeholder svg {
  width: 38%;
  height: 70%;
  max-height: 112px;
  opacity: .65
}
.project-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #202833
}
.project-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 18px;
  min-width: 0
}
.project-card__avatar {
  display: grid;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #91b7ff66;
  border-radius: 50%;
  background: linear-gradient(135deg,#7b9aff,#294bb8);
  color: #fff;
  font-size: 9px;
  font-weight: 700
}
.project-card:hover {
  border-color: rgba(113,145,242,.38);
  transform: translateY(-2px)
}
.project-card__top {
  position: absolute;
  inset: 12px 12px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cosmos-space-3)
}
.project-card__mark {
  display: grid;
  width: 32px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: #1b3153e6;
  color: #9fb5ff;
  font-size: 12px;
  font-weight: 750
}
.project-card__status {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(240,184,101,.1);
  color: var(--cosmos-warning);
  border: 1px solid currentColor;
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0
}
.project-card__status[data-status=SHARED] {
  background: #071e48d9;
  color: #81bcff
}
.project-card__status[data-status=APPROVED] {
  background: rgba(83,213,160,.1);
  color: var(--cosmos-success)
}
.project-card__status[data-status=REJECTED] {
  background: rgba(255,125,134,.1);
  color: var(--cosmos-danger)
}
.project-card__status[data-status=ARCHIVED] {
  background: rgba(154,165,187,.1);
  color: var(--cosmos-text-soft)
}
.project-card__name {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
  font-size: 18px
}
.project-card__client {
  margin: 0;
  color: var(--cosmos-text-muted);
  font-size: 14px
}
.project-card__client::before {
  content: "";
  display: inline-block;
  vertical-align: -2px;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M4 21V6l9-3v18M13 9h7v12M8 7v2m0 3v2m0 3v2m9-7v2m0 3v2M2 21h20'/%3E%3C/svg%3E") center/contain no-repeat
}
.project-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0;
  color: var(--cosmos-text-soft);
  font-size: 12px
}
.project-card__action {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(99,137,255,.42);
  border-radius: 9px;
  background: var(--cosmos-accent-soft);
  color: #dce5ff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none
}
.project-card__actions > .project-card__action {
  background: linear-gradient(135deg,#165edb,#1041ac);
  border-color: #458bff;
  box-shadow: inset 0 1px 5px #ffffff20;
  padding: 0 8px
}
.project-card__actions {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: var(--cosmos-space-2);
  margin-top: auto
}
.project-card__artifacts-button {
  min-height: 42px;
  padding: 0 var(--cosmos-space-3);
  border: 1px solid var(--cosmos-border-strong);
  border-radius: 9px;
  background: var(--cosmos-surface-soft);
  color: var(--cosmos-text-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700
}
.project-card__actions > .project-card__action::before {
  content: "";
  width: 17px;
  height: 17px;
  margin-right: 9px;
  flex-shrink: 0;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M14 3h7v7m0-7L10 14M10 4H4v16h16v-6'/%3E%3C/svg%3E") center/contain no-repeat
}
.project-card__artifacts-button::before {
  content: "";
  display: inline-block;
  vertical-align: -3px;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3 7V4h7l3 3h8v13H3Z'/%3E%3C/svg%3E") center/contain no-repeat
}
.project-card__artifacts-button:hover:not(:disabled) {
  border-color: rgba(113,145,242,.46);
  color: var(--cosmos-text)
}
.project-card__artifacts-button:disabled {
  cursor: wait;
  opacity: .6
}
.project-card__artifacts {
  margin-top: var(--cosmos-space-3);
  padding-top: var(--cosmos-space-3);
  border-top: 1px solid var(--cosmos-border)
}
.project-card__artifacts[hidden] {
  display: none
}
.project-card__artifacts-list {
  display: grid;
  gap: 7px;
  max-height: 190px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none
}
.project-artifact {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  align-items: center;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--cosmos-border);
  border-radius: 8px;
  background: rgba(10,13,19,.48)
}
.project-artifact__preview {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--cosmos-border);
  border-radius: 7px;
  background: rgba(28,35,49,.78)
}
.project-artifact__image {
  width: 100%;
  height: 100%;
  object-fit: contain
}
.project-artifact__preview-fallback {
  color: var(--cosmos-text-soft);
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .08em
}
.project-artifact__content {
  display: grid;
  min-width: 0;
  gap: 4px
}
.project-artifact__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cosmos-space-2)
}
.project-artifact__name {
  color: var(--cosmos-text);
  font-size: 10px
}
.project-artifact__revision {
  color: #9fb5ff;
  font-size: 9px;
  font-weight: 750
}
.project-artifact__details,
.project-card__artifacts-state {
  margin: 0;
  color: var(--cosmos-text-soft);
  font-size: 9px;
  line-height: 1.5
}
.project-artifact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}
.project-artifact__action {
  color: #9fb5ff;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none
}
.project-artifact__action:hover {
  color: #dce5ff;
  text-decoration: underline
}
.project-card__artifacts-state {
  padding: 8px 2px
}
.project-card__artifacts-state--error {
  color: var(--cosmos-danger)
}
.project-card__action:hover {
  background: rgba(75,124,255,.22)
}
.projects-hub__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cosmos-space-3)
}
.projects-hub__pagination[hidden] {
  display: none
}
.projects-hub__page-label {
  min-width: 92px;
  color: var(--cosmos-text-muted);
  font-size: 11px;
  text-align: center
}
@media (max-width:1060px) {
  .projects-hub__search {
    flex-basis: 100%
  }
  .projects-hub__grid {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
  .projects-hub__filters {
    flex: 1
  }
  .projects-hub__filter {
    flex: 1
  }
}
@media (max-width:680px) {
  .projects-hub__heading-row {
    align-items: start;
    flex-direction: column
  }
  .projects-hub__search,
  .projects-hub__toolbar {
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap
  }
  .projects-hub__search {
    flex: 0 0 auto;
    width: 100%
  }
  .projects-hub__grid {
    grid-template-columns: 1fr
  }
  .projects-hub__filters {
    width: 100%
  }
  .projects-hub__filter {
    flex: 1;
    padding-inline: 8px
  }
  .projects-hub__sort {
    display: none
  }
  .projects-hub__refresh {
    width: 100%
  }
  .projects-hub__search-input {
    min-height: 46px
  }
  .projects-hub__footer {
    align-items: flex-start;
    flex-direction: column
  }
  .project-card__preview {
    aspect-ratio: 2
  }
  .project-card__actions {
    grid-template-columns: 1fr
  }
}