/* Bounded home layout; keep desktop navigation and artwork from stretching. */
.sidebar {
  width: 240px;
  flex-basis: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #3c3c3c transparent;
}
.brand-row, .primary-nav, .sidebar-bottom { flex-shrink: 0; }
#page-create .hero-create {
  min-height: 410px;
  padding: 32px 32px 24px;
}
#page-create .composer-wrap { width: min(1200px, 100%); margin-top: 28px; }
#page-create .content-section {
  width: 100%;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}
#page-create .feature-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: clamp(180px, 13vw, 240px);
  gap: 12px;
  background: transparent;
  border-radius: 0;
}
#page-create .feature-card { border: 0; border-radius: 12px; }
#page-create .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

@media (min-width: 761px) and (max-width: 1080px) {
  .sidebar { width: 200px; flex-basis: 200px; }
  #page-create .content-section { padding-left: 24px; padding-right: 24px; }
  #page-create .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #page-create .feature-strip { grid-template-columns: repeat(4, 220px); overflow-x: auto; scrollbar-width: thin; }
}
@media (max-width: 760px) {
  .sidebar { width: 62px; flex-basis: 62px; }
  #page-create .hero-create { min-height: 0; padding: 20px 14px 24px; }
  #page-create .composer-wrap { width: 100%; margin-top: 24px; }
  #page-create .content-section { padding-left: 17px; padding-right: 17px; }
  #page-create .feature-strip { grid-template-columns: repeat(4, 220px); height: 180px; gap: 10px; overflow-x: auto; scrollbar-width: thin; }
  #page-create .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

#page-create .view-list .gallery-grid { grid-template-columns: 1fr; }

/* Keep the primary rail aligned with JiMeng's full-height workspace; no extra promo chrome above it. */
.promo-bar{display:none}
.main-area{padding-top:0}
.sidebar{padding-top:12px}
.app-footer{display:none}
/* Category labels must remain horizontal inside the mobile scrolling rail. */
#page-create .category-tabs { min-width:0; }
#page-create .category { flex-shrink:0; white-space:nowrap; }
@media (max-width:760px) {
  #page-create .category-tabs { flex-wrap:nowrap; overflow-x:auto; gap:8px; }
  #page-create .category-tabs .gallery-search { flex:0 0 210px; }
}
