/* Каталог работает с классами и источниками; портреты — игровой арт, не иконки умений. */
.build-catalog-page [hidden],.guide-detail-page [hidden]{display:none!important}
.build-catalog-page .intro { min-height: 148px; padding: 24px 30px; margin-bottom: 16px; border-radius: 18px; }
.build-catalog-page h1 { font-size: clamp(28px, 3vw, 42px); margin: 10px 0; }
.build-catalog-page .intro p { font-size: 14px; }
.build-catalog-page .filters { padding: 15px 18px; border-radius: 13px; }
.build-catalog-page .filters label { min-width: 125px; }
.build-catalog-page .filters input, .build-catalog-page .filters select { height: 41px; }
.build-catalog-page .filters .search { min-width: 185px; }
.build-class-nav { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; margin-bottom: 15px; }
.build-class-button { position: relative; display: flex; align-items: center; gap: 6px; min-height: 51px; padding: 6px 9px; border: 1px solid #ffffff20; border-radius: 11px; background: #ffffff06; color: #d7cbe8; font-size: 12px; text-align: left; }
.build-class-button img { width: 31px; height: 36px; border-radius: 6px; object-fit: cover; object-position: center 20%; }
.build-class-button:hover, .build-class-button[aria-pressed="true"] { border-color: #b59ada; background: #9375c929; color: #fff; }
.build-catalog-page .count { margin: 16px 0 11px; }
.catalog-retry { border: 0; background: none; padding: 0; color: #cdb5f1; text-decoration: underline; }
.build-catalog-page .cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.build-catalog-page .card { min-height: 220px; border-radius: 14px; padding: 19px; }
.build-catalog-page .card h2 { font-size: 18px; }
.build-catalog-page .tag.guide-tag { color: #f0dcc0; background: #554336b8; }
.guide-card-purpose { margin: 3px 0 11px; font-size: 13px; color: #dbd2e7; line-height: 1.4; }
.guide-source-label { font-size: 12px; color: #afa0bf; }
.guide-detail-page main { max-width: 1250px; }
.guide-detail-page .back { margin: 12px 0 16px; font-size: 13px; }
.guide-hero { position: relative; min-height: 184px; padding: 24px 30px; border: 1px solid #ffffff25; border-radius: 17px; background: #181026; overflow: hidden; isolation: isolate; }
.guide-heading { position: relative; z-index: 1; max-width: 73%; }
.guide-heading h1 { margin: 10px 0 12px; font-size: clamp(28px, 3.2vw, 43px); }
.guide-heading p { max-width: 540px; font-size: 14px; color: #c9bed8; margin: 0; }
.guide-hero-art { position: absolute; right: 0; top: 0; height: 100%; width: 39%; object-fit: cover; object-position: center 22%; mask-image: linear-gradient(90deg, transparent, #000 34%); opacity: .72; }
.guide-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 20px 0 0; }
.guide-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin: 17px 0; }
.guide-actions .button { text-decoration: none; }
.guide-secondary { font-size: 13px; color: #c6b4df; }
.guide-action { font-size: 15px; line-height: 1.55; color: #e4ddef; max-width: 850px; margin: 19px 0 25px; }
.guide-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.guide-target-group { min-width: 0; border: 1px solid #ffffff1d; border-radius: 14px; background: #ffffff04; padding: 17px 19px 8px; }
.guide-target-group:first-child { grid-column: 1 / -1; }
.guide-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.guide-group-head h2 { margin: 0; font-family: Onest, Arial, sans-serif; font-size: 18px; letter-spacing: -.02em; }
.guide-group-head > span { font-size: 12px; color: #ad9bbd; }
.guide-target-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.guide-target-table th { color: #a899b7; font-weight: 500; font-size: 11px; text-align: left; padding: 6px 0 10px; }
.guide-target-table th:nth-child(n+2) { width: 64px; text-align: right; }
.guide-target-table td { padding: 12px 0; border-top: 1px solid #ffffff13; }
.guide-target-table .guide-skill { display: flex; align-items: center; gap: 11px; min-height: 51px; }
.guide-skill > img { width: 42px; height: 42px; border-radius: 7px; object-fit: cover; border: 1px solid #ffffff25; flex-shrink: 0; }
.guide-skill-copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.guide-skill-copy > b, .guide-skill-copy > a { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; text-decoration: none; }
.guide-skill-copy > a:hover { color: #ceb5fc; text-decoration: underline; }
.guide-skill-copy > small { font-size: 11px; color: #aaa0b8; overflow-wrap: anywhere; }
.guide-skill-copy > .guide-match { font-size: 10px; color: #b5a8c7; }
.guide-level, .guide-source-level { text-align: right; font-variant-numeric: tabular-nums; vertical-align: middle; }
.guide-level strong { font-size: 19px; color: #ece3fb; }
.guide-level small { display: block; font-size: 10px; color: #9a8ba8; }
.guide-source-level { font-size: 13px; color: #9d90af; }
.guide-target-changed .guide-level strong { color: #a8dfd3; }
.guide-limits { font-size: 12px; color: #a99bb9; line-height: 1.5; margin: 22px 0; max-width: 840px; }
.guide-provenance { border-top: 1px solid #ffffff20; padding: 15px 0; font-size: 13px; color: #b7a9c7; }
.guide-provenance summary { cursor: pointer; font-weight: 600; color: #d8cbe7; }
.guide-provenance p { max-width: 950px; line-height: 1.6; }
.guide-provenance a { color: #c2a9ec; }
.guide-phase-comparison { margin: 20px 0; border: 1px solid #ffffff20; border-radius: 14px; padding: 15px 19px; background: #ffffff04; }
.guide-phase-comparison > summary { cursor: pointer; font-weight: 600; font-size: 15px; color: #ded1ee; }
.guide-phase-intro, .guide-phase-note { font-size: 12px; line-height: 1.55; color: #afa0bf; max-width: 860px; }
.guide-phase-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 17px 0; }
.guide-phase-table th { text-align: left; padding: 8px 0; font-size: 11px; font-weight: 500; color: #ac9abf; }
.guide-phase-table th:nth-child(2), .guide-phase-table th:nth-child(3) { width: 70px; text-align: center; }
.guide-phase-table th:last-child { width: 120px; }
.guide-phase-table td { padding: 11px 0; border-top: 1px solid #ffffff16; vertical-align: middle; }
.guide-phase-name b, .guide-phase-name small { display: block; overflow-wrap: anywhere; }
.guide-phase-name b { font-size: 13px; }
.guide-phase-name small { color: #a99bb9; font-size: 10px; margin-top: 3px; }
.guide-phase-level { text-align: center; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.guide-phase-change { font-size: 12px; color: #b0a1c1; overflow-wrap: anywhere; }
.guide-phase-change.raised, .guide-phase-change.added { color: #a8dfd3; }
.guide-phase-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; padding-top: 13px; border-top: 1px solid #ffffff16; }
.guide-phase-sources > div { display: flex; flex-direction: column; gap: 6px; }
.guide-phase-sources a { font-size: 13px; color: #c7adee; text-decoration: none; }
.guide-phase-sources a:hover { text-decoration: underline; }
.guide-phase-sources small, .guide-phase-sources .guide-phase-original { font-size: 11px; color: #a99bb9; }
.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; }
html[data-faction="elyos"] .build-class-button { border-color: #567a9940; background: #ffffffa8; color: #415e76; }
html[data-faction="elyos"] .build-class-button:hover, html[data-faction="elyos"] .build-class-button[aria-pressed="true"] { border-color: #4d8cb9; background: #deedf8; color: #173d5b; }
html[data-faction="elyos"] .guide-hero { background: #e7eff7; border-color: #668cab4d; }
html[data-faction="elyos"] .guide-heading h1 { color: #173953; }
html[data-faction="elyos"] .guide-heading p, html[data-faction="elyos"] .guide-action { color: #476079; }
html[data-faction="elyos"] .guide-source-label, html[data-faction="elyos"] .guide-limits, html[data-faction="elyos"] .guide-provenance { color: #61748a; }
html[data-faction="elyos"] .guide-target-group { border-color: #476d8c2b; background: #ffffffb5; }
html[data-faction="elyos"] .guide-target-table td { border-color: #476d8c1b; }
html[data-faction="elyos"] .guide-target-table th, html[data-faction="elyos"] .guide-group-head > span, html[data-faction="elyos"] .guide-skill-copy > small, html[data-faction="elyos"] .guide-source-level { color: #60788d; }
html[data-faction="elyos"] .guide-group-head h2, html[data-faction="elyos"] .guide-skill-copy > a, html[data-faction="elyos"] .guide-skill-copy > b, html[data-faction="elyos"] .guide-level strong { color: #24435d; }
html[data-faction="elyos"] .guide-target-changed .guide-level strong { color: #1d7a69; }
html[data-faction="elyos"] .guide-provenance { border-color: #476d8c2b; }
html[data-faction="elyos"] .guide-provenance summary, html[data-faction="elyos"] .guide-secondary, html[data-faction="elyos"] .guide-provenance a { color: #286791; }
html[data-faction="elyos"] .catalog-retry { color: #286791; }
html[data-faction="elyos"] .guide-phase-comparison { border-color: #476d8c2b; background: #ffffffb5; }
html[data-faction="elyos"] .guide-phase-comparison > summary, html[data-faction="elyos"] .guide-phase-level, html[data-faction="elyos"] .guide-phase-name b { color: #24435d; }
html[data-faction="elyos"] .guide-phase-table td, html[data-faction="elyos"] .guide-phase-sources { border-color: #476d8c1b; }
html[data-faction="elyos"] .guide-phase-intro, html[data-faction="elyos"] .guide-phase-note, html[data-faction="elyos"] .guide-phase-table th, html[data-faction="elyos"] .guide-phase-name small, html[data-faction="elyos"] .guide-phase-change, html[data-faction="elyos"] .guide-phase-sources small, html[data-faction="elyos"] .guide-phase-sources .guide-phase-original { color: #60788d; }
html[data-faction="elyos"] .guide-phase-change.raised, html[data-faction="elyos"] .guide-phase-change.added { color: #1d7a69; }
html[data-faction="elyos"] .guide-phase-sources a { color: #286791; }
@media (max-width: 950px) { .build-class-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 650px) {
  .build-catalog-page .intro { min-height: 144px; padding: 22px; }
  .build-class-nav { gap: 5px; margin-bottom: 12px; }
  .build-class-button { flex-direction: column; gap: 3px; padding: 5px 3px; font-size: 10px; min-width: 0; }
  .build-class-button img { width: 29px; height: 30px; }
  .build-catalog-page .filters { padding: 12px; }
  .build-catalog-page .filters label { min-width: 115px; }
  .build-catalog-page .count { font-size: 12px; }
  .guide-hero { min-height: 170px; padding: 21px; }
  .guide-heading { max-width: 100%; }
  .guide-heading h1 { font-size: 27px; max-width: 90%; }
  .guide-heading p { font-size: 13px; }
  .guide-hero-art { width: 58%; opacity: .18; }
  .guide-action { font-size: 14px; margin: 19px 0; }
  .guide-actions { gap: 14px; }
  .guide-actions .button { font-size: 13px; padding: 12px 14px; }
  .guide-groups { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .guide-target-group { padding: 14px 12px 5px; }
  .guide-target-table th:nth-child(n+2) { width: 50px; }
  .guide-target-table .guide-skill { gap: 8px; }
  .guide-skill > img { width: 33px; height: 33px; }
  .guide-skill-copy > b, .guide-skill-copy > a { font-size: 12px; }
  .guide-skill-copy > small { font-size: 10px; }
  .guide-skill-copy > .guide-match { font-size: 9px; }
  .guide-phase-comparison { padding: 14px 12px; }
  .guide-phase-table th:nth-child(2), .guide-phase-table th:nth-child(3) { width: 42px; }
  .guide-phase-table th:last-child { width: 78px; }
  .guide-phase-name b { font-size: 12px; }
  .guide-phase-table .guide-phase-change { font-size: 10px; padding-left: 5px; }
  .guide-phase-level { font-size: 14px; }
  .guide-phase-sources { gap: 10px; }
}