.studio-archive-header { display: flex; align-items: flex-start; gap: 20px; margin: 8px 0 24px; padding: 20px 22px; background: var(--color-surface-alt, #212121); border: 1px solid var(--color-border, #444); border-radius: var(--radius-md, 8px); } .studio-archive-avatar { flex: 0 0 auto; width: 120px; height: 120px; border-radius: 14px; overflow: hidden; background: #111; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .studio-archive-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .studio-archive-copy { min-width: 0; flex: 1 1 auto; } .studio-archive-label { display: inline-block; margin-bottom: 6px; font-size: var(--fs-xs, 0.75rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-dim, #999); } .studio-archive-title { margin: 0 0 8px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; color: var(--color-text, #fdfdfd); } .studio-archive-description { margin: 0 0 10px; color: var(--color-text-muted, #c4c4c4); font-size: var(--fs-base, 0.9rem); line-height: 1.5; } .studio-archive-meta { margin: 0 0 12px; color: var(--color-text-dim, #999); font-size: var(--fs-sm, 0.8rem); } .tdx-studio-filters { margin: 0 0 18px; } .tdx-studio-filters .tdx-find-filters__right { margin-left: auto; } .tdx-studio-filters__reset { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--color-text-dim, #999); font-size: 13px; cursor: pointer; } .tdx-studio-filters__reset:hover { color: var(--color-text, #fff); background: rgba(255, 255, 255, 0.05); } .tdx-studio-filters__reset[hidden] { display: none; } .tdx-studio-filters__reset svg { width: 14px; height: 14px; } .tdx-listing-grid { transition: opacity 150ms ease; } .tdx-studio-empty { grid-column: 1 / -1; margin: 0; padding: 48px 16px; color: var(--color-text-muted, #c4c4c4); text-align: center; } @media (max-width: 640px) { .studio-archive-header { gap: 14px; padding: 16px; } .studio-archive-avatar { width: 88px; height: 88px; border-radius: 12px; } .tdx-studio-filters .tdx-find-filters__bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 6px; } .tdx-studio-filters .tdx-find-filters__left, .tdx-studio-filters .tdx-find-filters__right { width: auto; min-width: 0; overflow: visible; flex-wrap: nowrap; } .tdx-studio-filters .tdx-find-filters__right { margin-left: 0; } .tdx-studio-filters .tdx-find-filter { min-width: 0; flex: 1 1 auto; } .tdx-studio-filters .tdx-find-filter__btn { width: 100%; min-width: 0; justify-content: flex-start; padding-inline: 10px; } .tdx-studio-filters .tdx-find-filter__btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .tdx-studio-filters .tdx-find-filter__chevron { margin-left: auto; flex: 0 0 auto; } .tdx-studio-filters__reset { flex: 0 0 auto; padding-inline: 8px; } .tdx-studio-filters__reset span { display: none; } }