.catalog-page { max-width: 1480px; margin: 0 auto; padding: 32px 36px 80px; color: var(--text-main); }
.catalog-page h1 { margin: 0 0 12px; font-size: 34px; color: var(--color-primary); }
.catalog-note { margin: 0 0 22px; font-size: 15px; line-height: 1.7; color: var(--text-secondary); }
.catalog-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) 140px 140px 190px; gap: 12px; margin-bottom: 20px; }
.catalog-toolbar input, .catalog-toolbar select { width: 100%; min-width: 0; height: 48px; padding: 10px 14px; border: 1px solid var(--border-light, #cad0e5); border-radius: 10px; background: var(--bg-card); color: var(--text-main); font: inherit; font-size: 15px; }
.catalog-layout { display: grid; grid-template-columns: minmax(240px, 32%) minmax(0, 1fr); gap: 18px; align-items: start; }
.catalog-results, .catalog-detail { background: var(--bg-card); border: 1px solid var(--border-light, #cad0e5); border-radius: 14px; overflow: hidden; }
.catalog-results header { padding: 16px 20px; border-bottom: 1px solid var(--border-light, #cad0e5); color: var(--text-secondary); }
.catalog-list { max-height: 72vh; overflow: auto; }
.catalog-row { display: block; width: 100%; text-align: left; padding: 18px 20px; min-height: 78px; border: 0; border-left: 3px solid transparent; border-bottom: 1px solid var(--border-light, #cad0e5); background: transparent; color: var(--text-main); font: inherit; cursor: pointer; }
.catalog-row strong { display: block; font-size: 17px; line-height: 1.6; }
.catalog-row small { display: block; font-size: 13px; line-height: 1.7; color: var(--text-secondary); }
.catalog-row[aria-pressed="true"] { border-left-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.catalog-row:hover { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.catalog-detail { padding: 26px; overflow-wrap: anywhere; }
.catalog-detail h2 { font-size: 26px; line-height: 1.4; margin: 0 0 10px; color: var(--text-main); }
.catalog-detail h3 { margin: 24px 0 12px; font-size: 18px; }
.catalog-detail .item-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--text-secondary); font-size: 14px; }
.catalog-description { line-height: 1.9; white-space: pre-line; font-size: 15px; }
.catalog-stats { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border-light, #cad0e5); border-radius: 8px; overflow: hidden; }
.catalog-stats > div { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 12px; border-bottom: 1px solid var(--border-light, #cad0e5); gap: 10px; font-size: 14px; }
.catalog-stats dt { color: var(--text-secondary); }.catalog-stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.catalog-empty { padding: 24px; line-height: 1.8; }
.catalog-source { font-size: 13px; line-height: 1.7; color: var(--text-secondary); margin-top: 22px; }
.spell-block, .raw-xml, .pet-extra { margin: 12px 0; border: 1px solid var(--border-light, #cad0e5); border-radius: 8px; background: color-mix(in srgb, var(--bg-card) 70%, transparent); }
.spell-block > summary, .raw-xml > summary, .pet-extra > summary { padding: 12px; min-height: 44px; cursor: pointer; color: var(--color-primary); font-size: 15px; font-weight: 600; }
.spell-block small { color: var(--text-secondary); font-weight: 400; }
.spell-body, .pet-extra > p { padding: 0 12px 12px; font-size: 14px; line-height: 1.7; }
.spell-transfer { padding-left: 12px; border-left: 2px solid var(--border-light, #cad0e5); }
.spell-transfer > p { color: var(--text-secondary); font-size: 13px; }
.xml-fields { margin: 8px 0; padding: 0 12px; font-size: 13px; }
.xml-fields > div { display: grid; grid-template-columns: minmax(100px, 36%) 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-light, #cad0e5); }
.xml-fields dt { color: var(--text-secondary); }.xml-fields dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.stats-scroll { overflow-x: auto; padding: 8px 12px; }.stats-scroll table { width: 100%; border-collapse: collapse; font-size: 14px; }.stats-scroll th, .stats-scroll td { text-align: left; padding: 8px; border-bottom: 1px solid var(--border-light, #cad0e5); }
.update-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0; }
.update-controls select, .update-controls button, .update-controls a { min-height: 44px; padding: 10px 14px; font: inherit; font-size: 15px; border: 1px solid var(--border-light, #cad0e5); border-radius: 10px; color: var(--text-main); background: var(--bg-card); }
.pet-card { min-width: 0; }.pet-card .skill-row { display: block; }
.pet-card button.pet-link { min-height: 44px; font: inherit; color: var(--color-primary); cursor: pointer; background: transparent; border: 1px solid var(--border-light, #cad0e5); border-radius: 8px; padding: 8px; }
.new-pet-marker { color: var(--color-primary); font-weight: 700; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
@media(max-width:1100px) { .catalog-page { padding: 24px 20px 80px; }.catalog-toolbar { grid-template-columns: 1fr 1fr; }.catalog-layout { grid-template-columns: minmax(210px, 34%) minmax(0,1fr); }.catalog-detail { padding: 20px; }.catalog-stats { grid-template-columns: 1fr; } }
@media(max-width:768px) { .catalog-page { padding: 24px 16px 90px; }.catalog-page h1 { font-size: 28px; }.catalog-toolbar input, .catalog-toolbar select { font-size: 16px; }.catalog-toolbar input { grid-column: 1/-1; }.catalog-toolbar select:last-child { grid-column: 1/-1; }.catalog-layout { display: block; }.catalog-list { max-height: 280px; }.catalog-detail { margin-top: 20px; padding: 18px; scroll-margin-top: 12px; }.catalog-detail h2 { font-size: 23px; }.xml-fields > div { grid-template-columns: minmax(85px, 40%) 1fr; gap: 8px; }.update-controls { gap: 8px; }.update-controls select { max-width:100%; }.toolbar input { font-size:16px !important; }.pet-card { padding: 18px; } }

/* Shared shell integration and complete pet result browsing. */
.catalog-toolbar { grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(120px, 150px)) minmax(170px, 210px); }
.pet-load-more { grid-column: 1 / -1; justify-self: center; margin: 16px; }
.toolbar input, .toolbar select { min-width: 0; }
.spell-body > p { white-space: pre-line; }
@media(max-width:1100px) { .catalog-toolbar { grid-template-columns: 1fr 1fr; } }
@media(max-width:768px) { .catalog-toolbar input, .catalog-toolbar select:last-child { grid-column: 1 / -1; } }