.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.catalog-intro{
  position:relative;
  z-index:2;
  padding:calc(var(--header-h) + 56px) 0 26px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(215,193,139,.08), transparent 58%),
    rgba(255,255,255,.01);
}
.catalog-intro-inner{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
}
.catalog-intro h1{
  margin:14px 0 0;
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(3rem, 7vw, 5.8rem);
  line-height:.9;
  font-weight:600;
}

.catalog-hero{
  position:relative;
  min-height:72svh;
  display:grid;
  align-items:end;
  padding-top:var(--header-h);
  overflow:hidden;
  z-index:2;
}
.catalog-hero-media{position:absolute; inset:0; overflow:hidden}
.catalog-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.72) brightness(.34) contrast(1.08);
  transform:scale(1.04);
}
.catalog-hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(7,8,8,.16) 0%, rgba(7,8,8,.74) 62%, rgba(7,8,8,.98) 100%),
    radial-gradient(circle at 22% 28%, rgba(215,193,139,.18), transparent 32%),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.06), transparent 28%);
}
.catalog-hero-copy{
  position:relative;
  z-index:2;
  max-width:980px;
  padding-bottom:84px;
}
.catalog-hero h1{
  margin:18px 0 18px;
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(3rem, 8vw, 6rem);
  font-weight:600;
  line-height:.92;
  letter-spacing:-.03em;
  max-width:920px;
}
.catalog-hero-text{
  max-width:720px;
  color:#ddd5c8;
  line-height:1.85;
}
.catalog-highlights{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:34px;
}
.highlight-pill{
  min-width:170px;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter:blur(8px);
}
.highlight-pill strong{
  display:block;
  font-family:"Cormorant Garamond", serif;
  font-size:2rem;
  color:var(--gold-strong);
  line-height:1;
}
.highlight-pill span{color:var(--muted); font-size:.88rem}

.catalog-shell{padding-top:38px}
.catalog-shell .container{width:min(calc(100% - 28px), 1560px)}
.catalog-heading{
  margin-bottom:22px;
}
.catalog-layout{
  display:grid;
  grid-template-columns:320px minmax(0, 1fr);
  gap:24px;
  align-items:start;
}

.filters-panel{
  position:sticky;
  top:104px;
  padding:28px;
  border-radius:30px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(215,193,139,.08), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
  box-shadow:var(--shadow);
}
.filters-panel-head h2{
  margin:16px 0 14px;
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(2rem, 3vw, 3rem);
  font-weight:600;
  line-height:.95;
}
.filters-panel-head p{margin:0 0 28px; color:var(--muted); line-height:1.8}
.search-box,
.filter-group{display:grid; gap:10px; margin-bottom:18px}
.search-box label,
.filter-group label,
.filter-title{font-size:.84rem; color:var(--gold); letter-spacing:.08em; text-transform:uppercase}
.search-box input,
.filter-group select{
  width:100%;
  min-height:54px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  padding:0 16px;
  outline:none;
}
.search-box input::placeholder{color:#9d968b}
.filter-group select option{background:#111515; color:var(--text)}
.range-pair{
  position:relative;
  height:24px;
}
.range-pair::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:5px;
  transform:translateY(-50%);
  border-radius:999px;
  background:rgba(255,255,255,.08);
}
.range-pair input{
  position:absolute;
  inset:0;
  width:100%;
  margin:0;
  background:transparent;
  pointer-events:none;
  -webkit-appearance:none;
  appearance:none;
}
.range-pair input::-webkit-slider-runnable-track{
  height:5px;
  background:transparent;
}
.range-pair input::-moz-range-track{
  height:5px;
  background:transparent;
  border:0;
}
.range-pair input::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  pointer-events:auto;
  width:14px;
  height:14px;
  border-radius:999px;
  border:1px solid rgba(215,193,139,.65);
  background:#e8d5a9;
  margin-top:-4px;
  cursor:pointer;
}
.range-pair input::-moz-range-thumb{
  pointer-events:auto;
  width:14px;
  height:14px;
  border-radius:999px;
  border:1px solid rgba(215,193,139,.65);
  background:#e8d5a9;
  cursor:pointer;
}
.range-value{color:var(--muted); font-size:.92rem}
.range-value strong{color:var(--gold-strong)}
.chip-row{display:flex; gap:8px; flex-wrap:wrap}
.filter-chip{
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  color:var(--muted);
  cursor:pointer;
  transition:.25s ease;
}
.filter-chip:hover,
.filter-chip.is-active{
  border-color:rgba(215,193,139,.3);
  background:rgba(215,193,139,.1);
  color:var(--gold-strong);
}
.filter-actions{margin:26px 0 22px}
.filter-actions{
  display:grid;
  gap:14px;
}
.filter-actions .btn{width:100%}
.filter-count{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:52px;
  padding:0 16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
}
.filter-count span{
  color:var(--muted);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.filter-count strong{
  color:var(--gold-strong);
  font-size:1.15rem;
}
.filter-group.is-disabled{
  opacity:.58;
}
.filter-group.is-disabled input{
  cursor:not-allowed;
}

.catalog-main{display:grid; gap:22px}
.advanced-search-panel{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:14px;
  align-items:start;
  padding:22px;
  border-radius:26px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018)),
    rgba(7,8,8,.72);
  box-shadow:0 18px 70px rgba(0,0,0,.32);
}
.advanced-search-box{
  display:grid;
  gap:11px;
}
.advanced-search-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 260px;
  gap:14px;
  align-items:end;
}
.advanced-search-input{
  display:grid;
  gap:11px;
}
.advanced-query-input-wrap{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:10px;
}
.advanced-search-box label{
  color:var(--gold);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.advanced-search-box input,
.advanced-sort-box select{
  width:100%;
  min-height:58px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:0 18px;
  outline:none;
}
.sort-view-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:10px;
}
.query-copy-btn,
.view-toggle-btn{
  min-height:58px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#fff7df;
  padding:0 14px;
  font-size:.8rem;
  cursor:pointer;
}
.query-copy-btn.is-copied{
  border-color:rgba(117,211,157,.55);
  color:#baf2d2;
}
.view-toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.view-toggle-btn{
  min-width:96px;
}
.view-toggle-btn.is-active{
  border-color:rgba(215,193,139,.45);
  background:rgba(215,193,139,.14);
  color:var(--gold-strong);
}
.advanced-search-box input::placeholder{color:#a79f92}
.advanced-sort-box{
  display:grid;
  gap:11px;
}
.advanced-sort-box select option{
  background:#111515;
  color:var(--text);
}
.query-legend{
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}
.query-legend--wide{
  width:100%;
}
.query-legend strong{
  display:block;
  color:#fff7df;
  margin-bottom:8px;
}
.query-help{
  margin:10px 0 0;
  color:#f0d99b;
  font-size:.72rem;
}
.query-help::before{
  content:"*";
  color:#ff6b6b;
  font-weight:700;
  margin-right:5px;
}
.query-legend ul{
  display:grid;
  grid-template-columns:repeat(8, minmax(0, 1fr));
  gap:6px 10px;
  padding:0;
  margin:0;
  list-style:none;
}
.query-legend li{
  display:flex;
  gap:7px;
  align-items:center;
  min-width:0;
  color:var(--muted);
  font-size:.75rem;
}
.query-legend code{
  color:var(--gold-strong);
  font-size:.75rem;
}
.query-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.query-suggestion{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(215,193,139,.26);
  background:rgba(215,193,139,.1);
  color:#fff7df;
  font-size:.75rem;
  cursor:pointer;
  transition:.2s ease;
}
.query-suggestion:hover{
  background:rgba(215,193,139,.2);
  border-color:rgba(215,193,139,.45);
}
.query-suggestion.is-active{
  background:rgba(215,193,139,.28);
  border-color:rgba(215,193,139,.58);
}
.catalog-tools{
  display:grid;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.catalog-tools-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.catalog-tools-summary{
  display:grid;
  gap:10px;
  min-width:min(420px, 100%);
}
.catalog-tools-controls{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.catalog-tools-control{
  display:grid;
  gap:8px;
}
.catalog-tools-control label{
  color:var(--gold);
  font-size:.72rem;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.catalog-tools-control select{
  min-height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:0 12px;
}
.catalog-tools-control select option{
  background:#111515;
  color:var(--text);
}
.catalog-tools .view-toggle-btn{
  min-height:38px;
  min-width:88px;
  border-radius:12px;
}
.results-count{
  color:#fff7df;
  font-size:.92rem;
}
.results-count strong{
  display:block;
  margin-bottom:4px;
  font-family:"Cormorant Garamond", serif;
  font-size:1.35rem;
  font-weight:600;
  color:#fff7df;
}
.results-count span{
  display:block;
  color:#cbc2b2;
  font-size:.9rem;
  line-height:1.55;
}
.active-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.active-filter-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(215,193,139,.25);
  background:rgba(215,193,139,.1);
  color:#efe2c5;
  font-size:.75rem;
}
.active-filter-chip button{
  width:18px;
  height:18px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#fff7df;
  cursor:pointer;
  line-height:1;
  font-size:.78rem;
}
.active-filter-clear{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:#f3e8ce;
  font-size:.75rem;
  cursor:pointer;
  transition:.2s ease;
}
.active-filter-clear:hover{
  background:rgba(215,193,139,.13);
  border-color:rgba(215,193,139,.35);
}
.pagination-shell{
  border-radius:28px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:20px;
  align-items:start;
}
.cards-grid.is-compact{
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:14px;
}
.card-entry{
  position:relative;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(5,6,6,.82);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card-entry-button{
  display:block;
  width:100%;
  padding:0;
  color:inherit;
  text-align:left;
  appearance:none;
  cursor:pointer;
}
.card-entry:hover,
.card-entry:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(215,193,139,.26);
  box-shadow:0 26px 90px rgba(0,0,0,.5);
}
.card-entry-media{
  position:relative;
  aspect-ratio: 744 / 1039;
  overflow:hidden;
  display:block;
  padding:0;
  background:#050606;
}
.card-entry-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  filter:none;
}
.hover-preview{
  position:fixed;
  z-index:45;
  width:min(300px, 34vw);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(8,9,9,.9);
  backdrop-filter:blur(6px);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transform:translate3d(0, 0, 0) scale(.98);
  transition:opacity .14s ease, transform .14s ease;
}
.hover-preview.is-visible{
  opacity:1;
  transform:translate3d(0, 0, 0) scale(1);
}
.hover-preview img{
  width:100%;
  aspect-ratio:744 / 1039;
  object-fit:cover;
  display:block;
}
.hover-preview-meta{
  display:grid;
  gap:2px;
  padding:10px 12px 12px;
}
.hover-preview-meta strong{
  color:#fff7df;
  font-size:.82rem;
}
.hover-preview-meta span{
  color:var(--muted);
  font-size:.72rem;
}
.card-tag{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:var(--muted);
  font-size:.78rem;
}
.card-tag--type{color:#f0e7d7; border-color:rgba(215,193,139,.18)}
.card-tag--subtype{color:#cfd9ff; border-color:rgba(143,168,255,.18)}
.card-tag--function{color:#c9f0df; border-color:rgba(110,213,161,.18)}
.card-tag--virtue{color:#ffd7ef; border-color:rgba(255,130,204,.2)}
.ui-icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.usage-panel{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin:14px 0 18px;
}
.usage-stat{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px 8px;
  align-items:center;
  min-height:54px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
}
.usage-stat .ui-icon{
  grid-row:1 / span 2;
  color:var(--gold);
}
.usage-stat span{
  color:var(--muted);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.usage-stat strong{
  color:#fff7df;
  font-size:1rem;
}
.usage-bar{
  grid-column:1 / -1;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.usage-bar span{
  display:block;
  width:var(--usage);
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #75d39d, var(--gold-strong));
}
.usage-archetypes{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.usage-archetypes span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 9px;
  border-radius:12px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  color:#ddd5c8;
  font-size:.78rem;
}

.empty-state{
  grid-column:1 / -1;
  padding:30px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 16% 0%, rgba(215,193,139,.1), transparent 36%),
    rgba(255,255,255,.02);
}
.empty-state h3{
  margin:0 0 8px;
  font-family:"Cormorant Garamond", serif;
  font-size:1.65rem;
  color:#fff7df;
}
.empty-state p{
  margin:0;
  color:#cbc2b2;
  line-height:1.65;
  font-size:.92rem;
}
.pagination-shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 22px;
}
.pagination-info{color:var(--muted)}
.pagination-controls{display:flex; gap:8px; flex-wrap:wrap}
.page-btn{
  min-width:42px;
  height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  color:var(--muted);
  cursor:pointer;
  transition:.25s ease;
}
.page-btn:hover,
.page-btn.is-active{
  color:var(--gold-strong);
  border-color:rgba(215,193,139,.3);
  background:rgba(215,193,139,.1);
}
.page-btn:disabled{opacity:.45; cursor:not-allowed}

.card-drawer{
  position:fixed;
  inset:0;
  z-index:40;
  display:block;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.card-drawer.is-open{opacity:1; visibility:visible}
.drawer-backdrop{
  position:absolute;
  inset:0;
  background:rgba(6,7,7,.6);
  backdrop-filter:blur(8px);
}
.drawer-panel{
  position:absolute;
  inset:18px;
  width:auto;
  height:auto;
  --drawer-bg:none;
  background:linear-gradient(180deg, rgba(10,11,11,.98), rgba(8,9,9,.98));
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:0 28px 100px rgba(0,0,0,.58);
  transform:translateY(16px) scale(.98);
  transition:transform .28s ease;
  overflow:hidden;
}
.drawer-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:var(--drawer-bg);
  background-size:cover;
  background-position:center 14%;
  opacity:.24;
  filter:saturate(.78) brightness(1.35) blur(1px);
  transform:scale(1.02);
}
.drawer-panel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 12%, rgba(240,215,159,.11), transparent 32%),
    linear-gradient(180deg, rgba(8,9,9,.72), rgba(8,9,9,.94));
}
.card-drawer.is-open .drawer-panel{transform:translateY(0) scale(1)}
.drawer-close{
  position:absolute;
  top:14px;
  right:14px;
  width:50px;
  height:50px;
  border-radius:999px;
  border:1px solid rgba(240,215,159,.72);
  background:rgba(8,9,9,.88);
  color:#fff4d0;
  cursor:pointer;
  font-size:1.9rem;
  z-index:50;
  box-shadow:0 10px 30px rgba(0,0,0,.52), 0 0 0 3px rgba(240,215,159,.12);
}
.drawer-inner{
  position:relative;
  z-index:2;
  height:100%;
  overflow:hidden;
  padding:28px;
}
.detail-layout{
  height:100%;
  display:grid;
  grid-template-columns:minmax(280px, 34%) minmax(360px, 1fr) minmax(260px, 28%);
  gap:24px;
  align-items:stretch;
}
.detail-art{
  min-height:0;
  display:grid;
  place-items:center;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 10%, rgba(215,193,139,.14), transparent 34%),
    rgba(255,255,255,.02);
  overflow:hidden;
}
.detail-art img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:14px;
  display:block;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.42));
}
.detail-main,
.detail-side{
  min-height:0;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
  padding:24px;
  overflow:auto;
}
.detail-side h3{
  margin:0 0 12px;
  font-family:"Cormorant Garamond", serif;
  font-size:1.55rem;
  font-weight:600;
}
.drawer-card-copy p,
.drawer-section p{color:var(--muted); line-height:1.7}
.drawer-reference{
  color:#e8dcc7;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.drawer-reference-text{
  font-style:italic;
}
.drawer-meta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin:0 0 16px;
}
.drawer-meta-card{
  padding:16px;
  border-radius:20px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
}
.drawer-meta-card span{display:block; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em}
.drawer-meta-card strong{display:block; margin-top:8px; color:var(--gold-strong)}
.drawer-meta-card--status strong{
  display:block;
  white-space:normal;
  overflow:visible;
}
.drawer-section{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.drawer-section--compact{
  margin-top:14px;
  padding-top:14px;
}
.drawer-section h3{
  margin:0 0 10px;
  font-family:"Cormorant Garamond", serif;
  font-size:1.7rem;
  font-weight:600;
}
.drawer-list{display:grid; gap:10px; padding:0; margin:0; list-style:none}
.drawer-list li{
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  color:#ddd5c8;
}
.drawer-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.drawer-feature-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.drawer-feature-grid .drawer-section{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
.virtue-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:8px;
}
.virtue-mark{
  display:grid;
  place-items:center;
  min-height:64px;
  margin:0;
  padding:9px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
}
.virtue-mark img{
  width:min(42px, 100%);
  height:42px;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.32));
}
.card-tag--empty{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  color:var(--muted);
}
.virtue-grid .card-tag--empty{grid-column:1 / -1}
.ruling-groups{
  display:grid;
  gap:14px;
}
.ruling-group{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
}
.ruling-group strong{
  display:block;
  color:#fff7df;
  margin-bottom:10px;
  text-transform:uppercase;
}
.ruling-group ul{
  display:grid;
  gap:8px;
  margin:0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.65;
}
.usage-panel--large{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  margin:0 0 22px;
}
.usage-panel--large .usage-stat{
  min-height:66px;
}
.detail-mini-chart{
  height:180px;
  display:flex;
  align-items:end;
  gap:12px;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}
.detail-mini-chart span{
  flex:1;
  height:var(--h);
  min-height:18px;
  border-radius:999px 999px 6px 6px;
  background:linear-gradient(180deg, var(--gold-strong), #75d39d);
  opacity:.85;
}

@media (max-width: 1180px){
  .catalog-layout{grid-template-columns:1fr}
  .advanced-search-panel{grid-template-columns:1fr}
  .advanced-search-row{grid-template-columns:1fr}
  .filters-panel{position:relative; top:auto}
  .detail-layout{
    grid-template-columns:minmax(260px, 38%) 1fr;
  }
  .detail-side{
    grid-column:1 / -1;
  }
  .detail-mini-chart{
    height:120px;
  }
}

@media (max-width: 920px){
  .cards-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .cards-grid.is-compact{grid-template-columns:repeat(4, minmax(0, 1fr))}
}

@media (max-width: 760px){
  .pagination-shell{padding:20px}
  .advanced-search-panel{padding:16px}
  .query-legend ul{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .query-legend li{min-width:0}
  .advanced-query-input-wrap,
  .sort-view-row{
    grid-template-columns:1fr;
  }
  .view-toggle{
    grid-template-columns:1fr 1fr;
  }
  .cards-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px}
  .cards-grid.is-compact{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .drawer-panel{inset:8px; border-radius:20px}
  .drawer-inner{padding:16px; overflow:auto}
  .detail-layout{height:auto; grid-template-columns:1fr}
  .detail-art{min-height:520px}
  .detail-main,
  .detail-side{padding:18px; overflow:visible}
  .drawer-meta{grid-template-columns:1fr}
  .drawer-feature-grid{grid-template-columns:1fr}
  .usage-panel--large{grid-template-columns:1fr}
  .hover-preview{display:none}
}
@media (max-width: 460px){
  .cards-grid{grid-template-columns:1fr}
}