.project-catalog { background: #f4f7f8; }
.project-banner { padding-top: 24px; }
.project-banner img { width: 100%; height: auto; display: block; aspect-ratio: 96 / 19; object-fit: cover; border-radius: 6px; background: #eaf5ff; }
.project-catalog-section { padding: 42px 0 76px; }
.project-catalog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 28px; align-items: start; }
.project-catalog-main { min-width: 0; }
.project-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.project-tabs { display: flex; align-self: stretch; gap: 32px; }
.project-tab { position: relative; padding: 0 2px 10px; border: 0; color: #4f5b60; font-size: 16px; font-weight: 500; background: transparent; transition: color .2s ease; }
.project-tab::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; content: ""; background: transparent; }
.project-tab:hover, .project-tab.is-active { color: var(--brand); }
.project-tab.is-active::after { background: var(--brand); }
.project-tab:focus-visible, .project-filters select:focus-visible, .catalog-page:focus-visible, .project-favorite:focus-visible { outline: 2px solid rgba(8, 185, 104, .38); outline-offset: 2px; }
.project-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.project-filters select { min-width: 72px; height: 34px; padding: 0 28px 0 10px; border: 1px solid #e4e9ec; border-radius: 4px; color: #657177; font-size: 12px; background-color: #fff; }
.project-filters select:last-child { min-width: 96px; }
.project-result-count { min-height: 20px; margin: 0 0 12px; color: #89949a; font-size: 12px; }
.project-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.project-card-grid > .state-panel { grid-column: 1 / -1; }
.catalog-project-card { min-width: 0; overflow: hidden; border: 1px solid #e3e9ec; border-radius: 6px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.catalog-project-card:hover { border-color: #b9ddca; box-shadow: 0 10px 24px rgba(28, 70, 50, .08); transform: translateY(-2px); }
.catalog-project-cover { display: block; overflow: hidden; background: #e8edef; }
.catalog-project-cover img { width: 100%; aspect-ratio: 16 / 8.3; display: block; object-fit: cover; transition: transform .35s ease; }
.catalog-project-card:hover .catalog-project-cover img { transform: scale(1.025); }
.catalog-project-body { padding: 15px 14px 12px; }
.catalog-project-body h2 { min-height: 44px; margin: 0 0 8px; display: -webkit-box; overflow: hidden; color: #202d33; font-size: 15px; font-weight: 600; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.catalog-project-body h2 a { color: inherit; text-decoration: none; }
.catalog-project-tags, .sidebar-my-tags { min-height: 23px; display: flex; flex-wrap: wrap; gap: 5px; overflow: hidden; }
.catalog-project-tags span, .sidebar-my-tags span { max-width: 92px; padding: 3px 7px; overflow: hidden; color: #0b9a61; font-size: 11px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; background: #e9faf2; border-radius: 3px; }
.catalog-project-tags span:nth-child(2), .sidebar-my-tags span:nth-child(2) { color: #3180c4; background: #edf6ff; }
.catalog-project-tags span:nth-child(3) { color: #b77814; background: #fff5df; }
.catalog-project-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 16px 0 12px; }
.catalog-project-metric { min-width: 0; text-align: center; }
.catalog-project-metric span { min-height: 30px; display: grid; place-items: end center; overflow: hidden; color: #929ca1; font-size: 10px; line-height: 1.35; }
.catalog-project-metric strong { margin-top: 3px; display: block; overflow: hidden; color: #28353a; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.catalog-project-footer { min-height: 34px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #edf1f2; padding-top: 10px; }
.catalog-project-detail { color: var(--brand); font-size: 12px; text-decoration: none; }
.catalog-project-detail:hover { color: var(--brand-dark); }
.project-favorite { min-width: 56px; height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid #e3e8eb; border-radius: 4px; color: #8b969b; font-size: 11px; background: #fff; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.project-favorite:hover, .project-favorite.is-active { border-color: #a8dabe; color: var(--brand-dark); background: #f0fbf5; }
.my-project-column { position: sticky; top: 92px; }
.my-project-panel { padding: 20px; border: 1px solid #e2e8eb; border-radius: 6px; background: #fff; }
.my-project-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.my-project-heading h2 { margin: 0; padding-left: 11px; border-left: 3px solid var(--brand); color: #1b2930; font-size: 18px; font-weight: 650; }
.my-project-heading a { color: var(--brand); font-size: 11px; text-decoration: none; }
.sidebar-my-project > a:first-child { display: block; }
.sidebar-my-project img { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; border-radius: 4px; background: #e8edef; }
.sidebar-my-project h3 { min-height: 43px; margin: 12px 0 8px; color: #202d33; font-size: 15px; font-weight: 600; line-height: 1.45; }
.sidebar-my-tags { margin-bottom: 12px; }
.sidebar-my-tags .is-approved { color: #0b9a61; background: #e9faf2; }
.sidebar-my-tags .is-pending { color: #c45d5d; background: #fff0f0; }
.sidebar-my-action { width: 100%; min-height: 36px; display: grid; place-items: center; border: 0; border-radius: 4px; color: #fff; font-size: 13px; background: var(--brand); text-decoration: none; transition: background .2s ease, transform .2s ease; }
.sidebar-my-action:hover { color: #fff; background: var(--brand-dark); }
.sidebar-my-action:active { transform: translateY(1px); }
.sidebar-my-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 14px; background: #fff; }
.sidebar-my-metrics .catalog-project-metric { min-height: 72px; display: grid; place-content: center; padding: 8px; background: #f6f8f8; }
.sidebar-my-metrics .catalog-project-metric span { min-height: auto; color: #8b969b; font-size: 10px; }
.sidebar-my-metrics .catalog-project-metric strong { color: var(--brand); font-size: 18px; font-weight: 600; }
.my-project-empty { min-height: 310px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #89949a; text-align: center; }
.my-project-empty i { margin-bottom: 12px; color: #b9c4c8; font-size: 34px; }
.my-project-empty p { margin-bottom: 18px; font-size: 13px; }
.pagination-wrap { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 34px; }
.catalog-page { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid #dde5e8; border-radius: 4px; color: #657177; font-size: 12px; background: #fff; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.catalog-page:hover:not(:disabled), .catalog-page.is-active { border-color: var(--brand); color: #fff; background: var(--brand); }
.catalog-page:disabled { cursor: not-allowed; opacity: .45; }
.page-gap { color: #89949a; font-size: 13px; }

@media (max-width: 1199px) {
  .project-catalog-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; }
  .project-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-toolbar { align-items: flex-start; flex-direction: column; }
  .project-filters { justify-content: flex-start; }
}

@media (max-width: 899px) {
  .project-banner { padding-top: 16px; }
  .project-catalog-section { padding-top: 30px; }
  .project-catalog-layout { grid-template-columns: 1fr; }
  .my-project-column { position: static; grid-row: 1; }
  .my-project-panel { padding: 18px; }
  .sidebar-my-project { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 16px; }
  .sidebar-my-project > a:first-child { grid-row: 1 / span 4; }
  .sidebar-my-project h3 { margin-top: 0; }
  .sidebar-my-metrics { grid-column: 1 / -1; }
  .my-project-empty { min-height: 170px; }
}

@media (max-width: 575px) {
  .project-banner { width: 100%; padding: 0; }
  .project-banner img { border-radius: 0; }
  .project-catalog-section { padding: 24px 0 52px; }
  .project-tabs { gap: 24px; }
  .project-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .project-filters select, .project-filters select:last-child { min-width: 0; width: 100%; }
  .project-card-grid { grid-template-columns: 1fr; }
  .sidebar-my-project { display: block; }
  .sidebar-my-project h3 { margin-top: 12px; }
  .catalog-project-cover img { aspect-ratio: 16 / 9; }
}