.catalog-controls { display: grid; gap: 12px; margin-bottom: 16px; padding: clamp(14px, 2.4vw, 24px); border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.catalog-controls[hidden], #catalog-undated[hidden] { display: none; }
.catalog-search-sort { display: grid; grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr); gap: 12px; }
.catalog-search-sort label { display: grid; gap: 6px; min-width: 0; font-size: .9rem; color: var(--muted); }
.catalog-search-sort input, .catalog-search-sort select { width: 100%; min-height: 44px; padding: 7px 10px; background: var(--bg); color: var(--ink); border: 1px solid #70528b; border-radius: 8px; font: inherit; }
.catalog-panel > summary { color: var(--ink); font-weight: 700; padding-block: 6px; cursor: pointer; }
.catalog-dimensions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr)); align-items: start; gap: 7px; margin-top: 6px; }
.catalog-dimension { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.catalog-dimension summary { padding: 8px 10px; cursor: pointer; overflow-wrap: anywhere; }
.catalog-options { max-height: 240px; overflow: auto; padding: 2px 9px 8px; }
.catalog-options label { display: flex; gap: 8px; align-items: baseline; min-height: 36px; padding-block: 4px; cursor: pointer; font-size: .9rem; overflow-wrap: anywhere; }
.catalog-options input { accent-color: var(--accent); }
.catalog-active, #voice-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.catalog-active .button { margin: 0; min-height: 38px; padding: 4px 12px; font-size: .85rem; cursor: pointer; }
.catalog-chip { max-width: 100%; padding: 5px 9px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 100px; font: inherit; font-size: .85rem; overflow-wrap: anywhere; cursor: pointer; }
.model-card { background: linear-gradient(145deg, #21172f, var(--panel) 70%); }
.catalog-card-exit { position: fixed; z-index: 1; margin: 0; pointer-events: none; }
.model-cover { display: block; width: 100%; max-height: 420px; aspect-ratio: 16 / 9; object-fit: cover; }
.model-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; padding: 0; list-style: none; }
.model-badges li { padding: 2px 8px; color: var(--muted); background: #171021; border: 1px solid var(--line); border-radius: 100px; font-size: .78rem; line-height: 1.55; }
.model-badges .model-new { border-color: #ad77aa; background: #412846; color: #ffe3fa; }
.model-card h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 4px 0 10px; overflow-wrap: anywhere; }
.model-card .demo-preview { width: 100%; }
.model-description, .model-no-demo { color: var(--muted); font-size: .92rem; margin: 0 0 12px; }
.model-actions { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; padding-top: 7px; }
.model-actions .text-link { margin: 0; }
.model-card [data-compare-model] { margin-top: 10px; }
.model-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.model-breadcrumb { display: flex; flex-wrap: wrap; gap: 5px 10px; color: var(--muted); font-size: .9rem; margin: 0 0 22px; }
.model-breadcrumb a { color: var(--accent); }
.model-detail-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); align-items: start; gap: clamp(18px, 4vw, 56px); }
.model-detail-grid h1 { overflow-wrap: anywhere; }
.model-detail-preview { background: var(--panel); padding: clamp(14px, 2.5vw, 22px); border: 1px solid var(--line); border-radius: 12px; }
.model-detail-preview h2 { margin: 0 0 10px; font-size: 1.25rem; }
.model-detail-preview img { border-radius: 8px; margin-bottom: 12px; }
.model-specs { margin: 0 0 18px; }
.model-specs div { display: flex; flex-wrap: wrap; gap: 5px 10px; }
.model-specs dt { color: var(--muted); }
.model-specs dd { margin: 0; }
@media (max-width: 760px) {
  .catalog-search-sort, .model-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

.model-wave { height: 106px; color: #dcb2fc; --wave: #aa67da; background: radial-gradient(ellipse at center, #2a193c, #15101e 72%); }
.model-wave.kawaii { color: #ffc0dd; --wave: #cf75a8; }
.model-wave.velvet { color: #afa9ff; --wave: #8277dc; }

.model-wave.featured-wave { height: auto; background: revert-layer; }
.model-wave.featured-wave.kawaii { --wave: #f3a3ef; --cover: #311b39; }
.model-wave.featured-wave.gentle { --wave: #adf3d0; --cover: #182f32; }
.model-wave.featured-wave.velvet { --wave: #aebeff; --cover: #202341; }
.model-wave.featured-wave {
  color: var(--wave);
  background-color: var(--cover);
  background-image: radial-gradient(ellipse at center, var(--cover), transparent 70%), linear-gradient(90deg, #ffffff12 1px, transparent 1px), linear-gradient(#ffffff12 1px, transparent 1px);
  background-size: 100% 100%, 21px 21px, 21px 21px;
}

.model-detail-preview .model-wave + h2 { margin-top: .75rem; }
@media (max-width: 760px) {
  .model-detail-preview .model-wave { width: 100%; min-width: 0; }
  .model-detail-preview .model-wave + h2 { margin-top: clamp(1rem, 4vw, 1.5rem); }
}