/* База как рабочий атлас: происхождение данных видно так же ясно, как само название. */
#database .db-head { min-height: 188px; margin: 16px 0; border-color: #ad8bfa45; background: #110b20; box-shadow: inset 0 1px #ffffff20, 0 20px 55px #0005; }
#database .db-head > div { padding: 27px 32px; max-width: 620px; }
#database .db-head h1 { font-size: clamp(30px, 3vw, 42px); }
#database .db-head p:not(.eyebrow) { margin: 7px 0 0; font-size: 13px; line-height: 1.45; }
#database .db-head .eyebrow { margin-bottom: 6px; }
#database .db-head img { opacity: .82; object-position: 50% 34%; mask-image: linear-gradient(90deg, transparent 23%, #000 65%); }
#database .catalog-evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid #9f82d94d;
  border-left: 4px solid #a889ff;
  border-radius: 13px;
  background: #9f82d94d;
}
#database .catalog-evidence > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 72px;
  padding: 13px 18px;
  background: #140e22;
}
#database .catalog-evidence strong { font-size: 14px; font-weight: 700; color: #eee8fb; }
#database .catalog-evidence span { font-size: 12px; color: #b6acc9; }
#database .db-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }
#database .search-panel { border-color: #c1a7fa2d; background: linear-gradient(150deg, #211630a8, #120d1cbf); box-shadow: inset 0 1px #ffffff16; }
#database .db-category-rail { display: flex; gap: 9px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 15px 1px 5px; scrollbar-color: #8060bb #1a1228; scrollbar-width: thin; }
#database .db-category-rail[hidden] { display: none; }
#database .db-category { min-width: 106px; max-width: 106px; min-height: 104px; display: grid; grid-template-rows: 55px auto; grid-template-columns: 1fr auto; align-content: start; gap: 2px 4px; border: 1px solid #ffffff25; border-radius: 13px; background: #130e20; padding: 8px; color: #d7caec; text-align: left; transition: border-color .18s, background .18s, transform .18s; }
#database .db-category:hover, #database .db-category[aria-pressed="true"] { border-color: #b99aff; background: #352249; transform: translateY(-2px); }
#database .db-category-art { grid-column: 1/-1; display: flex; justify-content: center; }
#database .db-category-art .item-icon { width: 54px; height: 54px; border-radius: 9px; background: #20152e; border-color: #ffffff30; object-fit: cover; }
#database .db-category-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; font-weight: 700; }
#database .db-category small { align-self: center; color: #aa9bbd; font: 10px/1.3 Consolas, monospace; }
#database .db-filter-head { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; color: #e8ddfb; }
#database .db-filter-head button { border: 0; background: transparent; color: #c9acff; cursor: pointer; font: inherit; }
#database .db-filter-head button:hover { text-decoration: underline; }
#database .db-filters label { display: grid; gap: 6px; color: #b7aaca; font-size: 12px; }
#database .db-filters select, #database .db-filters input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #ffffff31; border-radius: 9px; padding: 9px 10px; background: #181124; color: #e9e2f8; }
#database .db-filters select:disabled { opacity: .5; }
#database .db-filter-note { margin: 9px 0 0; color: #9d8eb1; font-size: 11px; }
#database .results-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
#database .results-controls label { color: #b7aaca; font-size: 12px; }
#database .results-controls select {
  max-width: 195px;
  border: 1px solid #ffffff31;
  border-radius: 9px;
  padding: 7px 28px 7px 10px;
  background: #181124;
  color: #e9e2f8;
}
#database .results-controls #resultCount { min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
#database .result-proof { display: block; margin-top: 5px; color: #bba4e1; font-size: 11px; line-height: 1.35; }
#database .results { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#database .result { --quality: #8f7ab9; display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 13px; align-items: center; position: relative; min-height: 152px; padding: 15px; border-color: #ffffff22; border-radius: 17px; background: linear-gradient(140deg, #251932ae, #130e1cae 72%); box-shadow: inset 0 1px #ffffff10, 0 14px 30px #0003; overflow: hidden; }
#database .result::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--quality); opacity: .85; }
#database .result:hover { border-color: var(--quality); background: linear-gradient(140deg, #332047d9, #1b1128d9 72%); transform: translateY(-3px); box-shadow: 0 18px 36px #0007; }
#database .result[data-quality="Epic"], #database .detail-card[data-quality="Epic"] { --quality: #ba89ff; }
#database .result[data-quality="Rare"], #database .detail-card[data-quality="Rare"] { --quality: #78afff; }
#database .result[data-quality="Special"], #database .detail-card[data-quality="Special"] { --quality: #eac685; }
#database .result[data-quality="Common"], #database .detail-card[data-quality="Common"] { --quality: #afa9ba; }
#database .result-art { display: grid; place-items: center; width: 86px; height: 86px; padding: 4px; border: 1px solid var(--quality); border-radius: 14px; background: radial-gradient(circle at 50% 35%, #ffffff24, transparent 75%), #1a1227; box-shadow: 0 0 21px color-mix(in srgb, var(--quality) 23%, transparent), inset 0 1px #ffffff35; }
#database .result-art .item-icon { width: 76px; height: 76px; border: 0; border-radius: 10px; object-fit: cover; filter: saturate(1.16) brightness(1.1); }
#database .result-main { display: flex; flex-direction: column; align-self: stretch; justify-content: center; gap: 5px; min-width: 0; }
#database .result-overline { display: flex; gap: 7px; align-items: center; color: #b3a7c6; font-size: 10px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
#database .result-quality { color: var(--quality); border: 1px solid color-mix(in srgb, var(--quality) 55%, transparent); border-radius: 999px; padding: 1px 6px; letter-spacing: 0; text-transform: none; }
#database .result strong { font-size: 15px; font-weight: 750; color: #f7f2ff; line-height: 1.25; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#database .result-meta { color: #d3c5e7; font-size: 12px; }
#database .result-footer { color: #a89aba; font-size: 10px; line-height: 1.2; }
#database .result-id { position: absolute; right: 13px; bottom: 10px; color: #9383a7; font: 10px/1.2 Consolas, monospace; }
#database .item-icon.missing { display: grid; place-items: center; color: #b7a8ce; font-size: 22px; }
#database .db-pager { display: flex; justify-content: center; align-items: center; gap: 17px; margin: 25px 0 4px; color: #c1b4d3; font-size: 13px; }
#database .db-pager[hidden] { display: none; }
#database .db-pager button { border: 1px solid #ffffff35; border-radius: 9px; padding: 9px 13px; color: #eadfff; background: #20162f; }
#database .db-pager button:hover:not(:disabled) { border-color: #bea4ff; background: #392252; }
#database .db-pager button:disabled { opacity: .4; cursor: default; }
#database .detail { max-width: 960px; }
#database.detail-page .db-head { min-height: 0; margin: 12px 0 0; border: 0; background: transparent; box-shadow: none; }
#database.detail-page .db-head > div { padding: 3px 0; }
#database.detail-page .db-head h1 { font-size: 21px; }
#database.detail-page .db-head p, #database.detail-page .db-head img { display: none; }
#database.detail-page .detail { margin-top: 16px; }
#database .detail-card { --quality: #8f7ab9; align-items: flex-start; gap: 24px; padding: 31px; border-color: color-mix(in srgb, var(--quality) 40%, transparent); background: linear-gradient(140deg, #24172fa6, #100b1a); box-shadow: inset 0 1px #ffffff22; }
#database .detail-card > .item-icon { width: 112px; height: 112px; border: 2px solid var(--quality); border-radius: 16px; object-fit: cover; filter: saturate(1.14) brightness(1.08); box-shadow: 0 0 24px color-mix(in srgb, var(--quality) 20%, transparent); }
#database .detail-content { min-width: 0; flex: 1; }
#database .detail-title { padding-bottom: 18px; border-bottom: 1px solid #ffffff22; }
#database .detail-title .eyebrow { margin: 0 0 7px; color: #c0aaff; }
#database .detail-title h2 { overflow-wrap: anywhere; margin: 0 0 9px; }
#database .game-id { font: 12px/1.4 Consolas, 'Courier New', monospace; color: #c0b5d1; }
#database .detail-attribute { color: #dbd2ed; }
#database .detail-section { margin-top: 23px; }
#database .detail-section h3 { margin: 0 0 11px; font-size: 15px; font-weight: 750; color: #eee8fa; }
#database .detail-section .description-pending { max-width: 64ch; color: #beafcf; }
#database .detail-evidence { border-top: 1px solid #ffffff22; padding-top: 21px; }
#database .detail-evidence dl, #database .detail-properties dl { display: grid; grid-template-columns: minmax(115px, 1fr) 2.5fr; gap: 7px 12px; margin: 0; font-size: 13px; }
#database .detail-evidence dt, #database .detail-properties dt { color: #a99abf; }
#database .detail-evidence dd, #database .detail-properties dd { margin: 0; color: #d6cde5; }
#database .detail-properties { padding: 17px 19px; border: 1px solid #ffffff22; border-radius: 12px; background: #aa8dff0b; }
#database .detail-properties .field-context { margin: 14px 0 0; color: #ae9ec3; font-size: 12px; }
@media (max-width: 1100px) { #database .results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { #database .results { grid-template-columns: 1fr; } }
@media (max-width: 650px) {
  #database .db-head { min-height: 164px; }
  #database .db-head > div { padding: 18px 20px; }
  #database .db-head img { opacity: .33; mask-image: linear-gradient(90deg, transparent, #000); }
  #database .db-filters { grid-template-columns: 1fr; }
  #database .results-head { align-items: flex-start; flex-direction: column; }
  #database .results-controls { width: 100%; justify-content: space-between; gap: 8px; }
  #database .results-controls #resultCount { margin-left: auto; }
  #database .detail-card { gap: 14px; padding: 17px; }
  #database.detail-page .db-head { min-height: 0; }
  #database.detail-page .db-head > div { padding: 3px 0; }
  #database.detail-page .db-head h1 { font-size: 20px; }
  #database .detail-card > .item-icon { width: 70px; height: 70px; }
  #database .result { grid-template-columns: 72px minmax(0,1fr); min-height: 129px; padding: 12px; }
  #database .result-art { width: 72px; height: 72px; }
  #database .result-art .item-icon { width: 62px; height: 62px; }
  #database .result-id { bottom: 7px; right: 11px; }
  #database .detail-evidence dl, #database .detail-properties dl { grid-template-columns: 1fr; gap: 2px; }
  #database .detail-evidence dd, #database .detail-properties dd { margin-bottom: 10px; }
  #database .db-pager { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) { #database .result, #database .db-category { transition: none; } }

/* Композиция атласа: поиск сверху, игровые типы рядом, рабочая область с боковыми фильтрами. */
#database .db-head { min-height: 252px; margin: 16px 0 0; border: 1px solid #b499f543; background: radial-gradient(500px 300px at 85% 18%, #482f77a3, transparent), #120d20; }
#database .db-head::before { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, #120d20 0%, #120d20ed 32%, #120d2070 59%, transparent 88%), linear-gradient(0deg, #0d0917aa, transparent 55%); }
#database .db-head > div { z-index: 2; max-width: 625px; padding: 40px 44px; }
#database .db-head h1 { font-size: clamp(36px, 4.1vw, 55px); }
#database .db-head p:not(.eyebrow) { max-width: 410px; margin: 14px 0 0; color: #e2dced; font-size: 15px; line-height: 1.5; }
#database .db-head img { inset: -5% -5% -5% auto; width: 69%; height: 110%; opacity: .98; object-fit: cover; object-position: 48% 27%; mask-image: linear-gradient(90deg, transparent, #000 34%); }
#database .catalog-evidence { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 10px; margin: 0 0 23px; padding: 0; border: 0; border-radius: 0; background: none; }
#database .catalog-evidence > div { display: flex; flex-direction: column; align-items: flex-start; min-height: 103px; gap: 5px; padding: 17px 19px; border: 1px solid #9f82d94d; border-radius: 14px; background: radial-gradient(220px 110px at 0 0, #7d4dbe24, transparent), linear-gradient(145deg, #241832eb, #120e20eb); box-shadow: inset 0 1px #ffffff1b, 0 10px 24px #0003; }
#database .catalog-evidence > .evidence-primary { border-left: 3px solid #b18aff; }
#database .catalog-evidence > .evidence-detail { border-left: 3px solid #6e97ff; }
#database .catalog-evidence strong { color: #f4eaff; font-size: 15px; line-height: 1.25; }
#database .catalog-evidence .evidence-primary strong { font-family: Unbounded, Onest, sans-serif; font-size: clamp(20px, 2.1vw, 27px); font-weight: 600; letter-spacing: -.045em; }
#database .catalog-evidence span { color: #c2b5d3; font-size: 12px; line-height: 1.4; }
:root[data-faction="elyos"] #database .catalog-evidence > div { border-color: #719fe573; background: radial-gradient(230px 140px at 0 0, #568bc639, transparent), linear-gradient(145deg, #1b3153, #101e38); box-shadow: inset 0 1px #ffffff2b, 0 13px 25px #395c8a35; }
:root[data-faction="elyos"] #database .catalog-evidence strong { color: #f5f9ff; }
:root[data-faction="elyos"] #database .catalog-evidence span { color: #c6d8ed; }
#database .db-search { margin-bottom: 17px; }
#database .db-search > label { display: block; margin: 0 0 9px; color: #f4efff; font-size: 20px; font-weight: 650; }
#database .db-search .search-row { max-width: 950px; }
#database .db-search .search-row input { min-height: 55px; border-color: #c2a5f856; border-radius: 13px; padding: 13px 18px; background: #1a1229d9; font-size: 15px; }
#database .db-search .search-row input::placeholder { color: #897e9e; }
#database .db-search .search-row button { min-width: 118px; border-radius: 13px; background: #8b5cf6; }
#database .db-tabs { gap: 18px; margin: 18px 0 0; border-bottom: 1px solid #ffffff22; }
#database .db-tabs button { position: relative; border: 0; border-radius: 0; padding: 0 2px 13px; background: none; color: #a99cb8; font-size: 13px; font-weight: 650; }
#database .db-tabs button.active, #database .db-tabs button:hover { color: #f4ebff; background: none; }
#database .db-tabs button.active::after { content: ''; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 3px; background: #ad88ff; box-shadow: 0 0 12px #a374ff; }
#database .db-category-rail { gap: 8px; margin: 0 0 24px; padding: 2px 1px 9px; }
#database .db-category { display: flex; flex: 0 0 94px; flex-direction: column; align-items: center; min-width: 94px; max-width: 94px; min-height: 100px; padding: 8px 6px 7px; border-radius: 12px; background: #ffffff09; text-align: center; }
#database .db-category:hover, #database .db-category[aria-pressed="true"] { background: #8b5cf626; }
#database .db-category-art { display: grid; place-items: center; width: 53px; height: 53px; }
#database .db-category-art .item-icon { width: 51px; height: 51px; border-radius: 8px; }
#database .db-category-label { width: 100%; margin-top: 4px; font-size: 11px; }
#database .db-category small { margin-top: 1px; font: 10px/1.2 Onest, sans-serif; }
#database .db-workspace { display: grid; grid-template-columns: minmax(235px, 262px) minmax(0, 1fr); align-items: start; gap: 25px; }
#database .search-panel { position: sticky; top: 16px; padding: 21px 19px 23px; border-color: #ffffff1f; border-radius: 16px; background: linear-gradient(145deg, #ffffff0c, #ffffff05); }
#database .mobile-filter-summary { display: none; }
#database .db-filter-head { margin: 0 0 18px; }
#database .db-filter-head strong { font-size: 15px; }
#database .db-filters { grid-template-columns: 1fr; gap: 12px; margin-top: 0; }
#database .db-filters label { margin: 0; font-size: 11px; }
#database .db-filters select, #database .db-filters input { font-size: 12px; }
#database .db-filter-note { margin-top: 17px; padding-top: 13px; border-top: 1px solid #ffffff1a; line-height: 1.5; }
#database .db-results-area { min-width: 0; }
#database .results-head { align-items: baseline; margin: 0 0 14px; }
#database .results-head h2 { font-size: 21px; }
#database .results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#database .result { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; min-height: 110px; padding: 11px 12px; border-color: #ffffff1f; border-radius: 12px; background: #ffffff09; box-shadow: inset 0 1px #ffffff0b; }
#database .result::before { display: none; }
#database .result:hover { background: #ffffff11; transform: translateY(-2px); }
#database .result-art { width: 72px; height: 72px; border-radius: 11px; }
#database .result-art .item-icon { width: 64px; height: 64px; border-radius: 8px; }
#database .result-overline { color: #9184a6; font-size: 9px; }
#database .result-quality { border: 0; padding: 0; }
#database .result strong { overflow: hidden; margin-top: 3px; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; display: block; }
#database .result-meta { font-size: 12px; }
#database .result-footer { color: #867998; font-size: 10px; }
#database .result-id { right: 10px; bottom: 8px; color: #756886; font-size: 9px; }
#database.detail-page .db-head::before { display: none; }
@media (max-width: 1130px) { #database .results { grid-template-columns: 1fr; } }
@media (max-width: 760px) { #database .db-workspace { grid-template-columns: 1fr; gap: 18px; } #database .search-panel { position: static; padding: 0; } #database .mobile-filter-summary { display: flex; justify-content: space-between; padding: 15px 17px; color: #f0e9fb; font-weight: 700; cursor: pointer; list-style: none; } #database .mobile-filter-summary::-webkit-details-marker { display: none; } #database .mobile-filter-summary .filter-chevron { color: #c5aaff; } #database .search-panel[open] .mobile-filter-summary .filter-chevron { transform: rotate(180deg); } #database .db-filter-head, #database .db-filters, #database .db-filter-note { margin-right: 17px; margin-left: 17px; } #database .db-filter-note { margin-bottom: 17px; } #database .db-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } #database .results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { #database .db-head { min-height: 216px; } #database .db-head > div { padding: 24px 20px; } #database .db-head h1 { font-size: 35px; } #database .db-head p:not(.eyebrow) { max-width: 280px; font-size: 12px; } #database .db-head img { width: 100%; opacity: .52; mask-image: linear-gradient(90deg, transparent 5%, #000 80%); } #database .db-head::before { background: linear-gradient(90deg, #120d20 0%, #120d20dc 50%, #120d2066 100%); } #database .catalog-evidence { grid-template-columns: 1fr; gap: 6px; margin-bottom: 16px; } #database .catalog-evidence > div { min-height: 0; padding: 10px 13px; } #database .catalog-evidence .evidence-primary strong { font-size: 18px; } #database .catalog-evidence .evidence-detail strong { font-size: 12px; } #database .catalog-evidence span { font-size: 10px; } #database .db-search > label { font-size: 18px; } #database .db-search .search-row button { min-width: 80px; padding: 10px; } #database .db-filters { grid-template-columns: 1fr 1fr; } #database .results { grid-template-columns: 1fr; } #database .results-head { align-items: flex-start; flex-direction: column; gap: 6px; } #database .results-controls { justify-content: space-between; width: 100%; } }
@media (max-width: 385px) { #database .db-filters { grid-template-columns: 1fr; } }

/* У каждого предмета свой визуальный центр: фактическая иконка, качество и свойства. */
#database .detail { max-width: 1120px; }
#database.detail-page .db-head { display: none; }
#database.detail-page .detail { margin-top: 25px; }
#database .detail-card { display: grid; grid-template-columns: minmax(240px, 310px) minmax(0, 1fr); align-items: stretch; gap: 28px; padding: 25px; overflow: hidden; }
#database .detail-stage { display: flex; flex-direction: column; min-width: 0; }
#database .detail-visual { display: grid; place-items: center; min-height: 292px; border: 1px solid color-mix(in srgb, var(--quality) 38%, transparent); border-radius: 19px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--quality) 31%, transparent), transparent 57%), radial-gradient(circle at 50% 70%, #51406a52, transparent 75%), #120d1d; box-shadow: inset 0 1px #ffffff30, inset 0 -20px 60px #0004; }
#database .detail-visual .item-icon { width: 180px; height: 180px; border: 3px solid var(--quality); border-radius: 28px; object-fit: cover; image-rendering: auto; filter: saturate(1.12); box-shadow: 0 0 0 9px #ffffff0c, 0 15px 50px #0008, 0 0 50px color-mix(in srgb, var(--quality) 35%, transparent); }
#database .detail-stage-caption { margin: 12px 0 0; color: #ada1bd; font-size: 11px; text-align: center; }
#database .detail-content { padding: 8px 3px 4px 0; }
#database .detail-title { padding-bottom: 14px; }
#database .detail-title h1 { overflow-wrap: anywhere; margin: 0 0 9px; font-family: Unbounded, Onest, sans-serif; font-size: clamp(25px, 2.5vw, 37px); font-weight: 590; line-height: 1.2; letter-spacing: -.045em; }
#database .detail-attributes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
#database .detail-attributes .detail-attribute { display: flex; flex-direction: column; gap: 2px; min-width: 110px; margin: 0; padding: 9px 13px; border: 1px solid #ffffff24; border-radius: 10px; background: #ffffff09; }
#database .detail-attribute small { color: #a99bbb; font-size: 10px; }
#database .detail-attribute strong { color: #eee7fa; font-size: 13px; font-weight: 700; }
#database .detail-summary { margin-top: 22px; }
#database .detail-summary p { max-width: 66ch; margin: 0; color: #d5c9e3; font-size: 13px; line-height: 1.6; }
#database .detail-description { margin-top: 20px; padding: 18px 19px; border: 1px solid #ffffff1d; border-left: 3px solid var(--quality); border-radius: 10px; background: #ffffff08; }
#database .detail-description h3 { margin-bottom: 5px; }
#database .detail-description p { margin: 0; font-size: 12px; line-height: 1.55; }
#database .detail-description .desc { white-space: pre-line; }
#database .detail-description .description-context { display: block; margin-top: 12px; color: #aa9bbd; font-size: 11px; }
#database .detail-properties, #database .detail-evidence { margin-top: 20px; }
#database .detail-evidence { font-size: 12px; }
@media (max-width: 760px) { #database .detail-card { grid-template-columns: 1fr; gap: 20px; padding: 16px; } #database .detail-content { display: contents; } #database .detail-title { grid-row: 1; } #database .detail-stage { grid-row: 2; } #database .detail-visual { min-height: 225px; } #database .detail-visual .item-icon { width: 145px; height: 145px; border-radius: 22px; } #database .detail-appearance { margin-top: 13px; } #database .detail-attributes { margin-top: 0; } #database .detail-section { margin-top: 0; } }

/* Игровая витрина: арт занимает поверхность, данные лежат на отдельной приборной панели. */
#database { position: relative; isolation: isolate; }
#database::before { content: ''; position: absolute; z-index: -1; inset: 270px -42px auto; height: 960px; pointer-events: none; background: linear-gradient(180deg, #0c091600, #0c0916d9 78%, #0c0916), url('/img/art/w/atreia_broken_planet-800.webp') center top / cover no-repeat; opacity: .28; mask-image: linear-gradient(180deg, transparent, #000 12%, #000 76%, transparent); }
#database .db-head { min-height: 308px; border-radius: 12px; border-color: #bb8bff5c; }
#database .db-head > div { padding: 50px 54px; }
#database .db-head h1 { max-width: 500px; text-shadow: 0 5px 32px #080313b8; }
#database .db-search { position: relative; z-index: 2; max-width: 1030px; margin: -28px auto 23px; padding: 21px 25px 18px; border: 1px solid #a874fa70; border-radius: 14px; background: linear-gradient(120deg, #241535f5, #101021f7); box-shadow: 0 24px 60px #0008, inset 0 1px #ffffff27; }
#database .db-search > label { margin-bottom: 10px; font-size: 15px; letter-spacing: .03em; }
#database .db-tabs { margin-bottom: -18px; }
#database .db-category { flex-basis: 106px; min-width: 106px; max-width: 106px; min-height: 112px; border-color: #9867ce5e; background: linear-gradient(145deg, #39204bb8, #17101fe6); box-shadow: inset 0 1px #ffffff25, 0 9px 22px #0004; }
#database .db-category[aria-pressed="true"] { border-color: #df9cff; background: linear-gradient(145deg, #70419aa8, #261232); box-shadow: 0 0 0 1px #ce91fa66, 0 12px 28px #4c197b66; }
#database .db-category-art .item-icon { border-color: #c490ef90; box-shadow: 0 6px 17px #0008; }
#database .search-panel { border-color: #a471df6b; background: linear-gradient(160deg, #301c42ef, #151022f7 65%); box-shadow: inset 0 1px #ffffff1c, 0 20px 38px #0005; }
#database .result { min-height: 144px; grid-template-columns: 96px minmax(0,1fr); gap: 16px; padding: 16px; border-color: color-mix(in srgb, var(--quality) 58%, #22172f); border-radius: 12px; background: linear-gradient(115deg, color-mix(in srgb, var(--quality) 24%, #1b1328), #12101c 78%); box-shadow: inset 0 1px color-mix(in srgb, var(--quality) 27%, transparent), 0 16px 36px #0005; }
#database .result::before { display: block; width: 4px; opacity: 1; box-shadow: 0 0 20px var(--quality); }
#database .result:hover { border-color: var(--quality); background: linear-gradient(115deg, color-mix(in srgb, var(--quality) 35%, #231630), #17121e 78%); box-shadow: 0 0 30px color-mix(in srgb, var(--quality) 20%, transparent), 0 18px 38px #0007; }
#database .result-art { width: 96px; height: 96px; border-width: 2px; background: radial-gradient(circle, color-mix(in srgb, var(--quality) 32%, #120f1d), #100d19 72%); box-shadow: 0 0 26px color-mix(in srgb, var(--quality) 28%, transparent), inset 0 1px #ffffff5c; }
#database .result-art .item-icon { width: 84px; height: 84px; }
#database .result-overline { color: #d1bada; }
#database .result-quality { padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--quality) 75%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--quality) 24%, #080811); color: color-mix(in srgb, var(--quality) 75%, white); font-weight: 800; text-shadow: 0 0 12px var(--quality); }
#database .result strong { color: #fff6ff; font-size: 15px; }
#database .result-meta { color: #ded2eb; }
#database .result-footer { color: #b9a6c9; }
#database .detail-card { grid-template-columns: minmax(290px, 390px) minmax(0, 1fr); gap: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--quality) 65%, #3b2153); border-top: 4px solid var(--quality); border-radius: 12px; background: #10101e; box-shadow: 0 0 52px color-mix(in srgb, var(--quality) 16%, transparent), 0 30px 90px #0009; }
#database .detail-stage { position: relative; min-height: 740px; overflow: hidden; border-right: 1px solid color-mix(in srgb, var(--quality) 45%, transparent); background: linear-gradient(180deg, #11101ba6 0%, #160e28ae 50%, #120d1cf7 78%), url('/img/art/w/citadel_violet_sky-800.webp') center top / cover no-repeat; }
#database .detail-stage::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, #0d0b1700 30%, #120d1c99 55%, #120d1c 85%); }
#database .detail-class-art { position: absolute; z-index: 1; top: 0; left: -15%; width: 130%; height: 430px; object-fit: contain; object-position: center top; filter: drop-shadow(0 22px 28px #090611a8); }
#database .detail-art-label { position: relative; z-index: 2; display: block; width: fit-content; margin: 22px 0 0 23px; padding: 6px 9px; border: 1px solid #ffffff61; background: #0e0b1aab; color: #f0e8f9; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
#database .detail-visual { position: relative; z-index: 2; width: 170px; min-height: 170px; margin: 310px 0 0 27px; border: 0; border-radius: 0; background: none; box-shadow: none; }
#database .detail-visual .item-icon { width: 145px; height: 145px; border: 3px solid var(--quality); border-radius: 18px; box-shadow: 0 0 0 6px #151021db, 0 17px 45px #000b, 0 0 42px var(--quality); }
#database .detail-stage-caption { position: relative; z-index: 2; margin: 4px 28px 0; color: #e0cfe9; text-align: left; }
#database .detail-content { padding: 43px 43px 46px; background: radial-gradient(600px 400px at 95% 0%, color-mix(in srgb, var(--quality) 15%, transparent), transparent 70%), #10101e; }
#database .detail-heading-line { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 10px; }
#database .detail-title .eyebrow { color: color-mix(in srgb, var(--quality) 65%, white); }
#database .detail-heading-line .eyebrow { margin: 0; }
#database .detail-grade { padding: 3px 8px; border: 1px solid var(--quality); border-radius: 3px; background: color-mix(in srgb, var(--quality) 24%, #100c1c); color: color-mix(in srgb, var(--quality) 75%, white); font-size: 11px; font-weight: 800; line-height: 1.25; box-shadow: 0 0 16px color-mix(in srgb, var(--quality) 30%, transparent); }
#database .detail-title h1 { margin-bottom: 11px; font-size: clamp(31px, 3vw, 45px); }
#database .detail-attributes .detail-attribute { min-width: 115px; border-color: #ffffff29; background: #ffffff0c; }
#database .detail-attributes .is-quality { border-color: var(--quality); background: color-mix(in srgb, var(--quality) 19%, #141020); box-shadow: 0 0 21px color-mix(in srgb, var(--quality) 18%, transparent); }
#database .detail-attributes .is-quality strong { color: color-mix(in srgb, var(--quality) 70%, white); font-size: 17px; text-shadow: 0 0 15px var(--quality); }
#database .detail-description { border-color: color-mix(in srgb, var(--quality) 36%, transparent); border-left-width: 4px; background: linear-gradient(110deg, color-mix(in srgb, var(--quality) 13%, #121020), #121020); }
@media (max-width: 760px) { #database::before { inset-inline: 0; } #database .db-head { min-height: 230px; } #database .db-head > div { padding: 25px 22px; } #database .db-search { margin: -18px 0 22px; padding: 18px 15px 17px; } #database .db-category { flex-basis: 96px; min-width: 96px; max-width: 96px; } #database .detail-card { grid-template-columns: 1fr; } #database .detail-stage { grid-row: 2; min-height: 550px; border-right: 0; border-block: 1px solid color-mix(in srgb, var(--quality) 45%, transparent); } #database .detail-class-art { height: 330px; } #database .detail-art-label { margin-top: 16px; } #database .detail-visual { width: 140px; min-height: 140px; margin-top: 205px; } #database .detail-visual .item-icon { width: 128px; height: 128px; } #database .detail-title { grid-row: 1; padding: 22px 20px; } #database .detail-attributes, #database .detail-summary, #database .detail-description, #database .detail-properties, #database .detail-evidence { margin: 0 20px; } #database .detail-attributes { margin-top: 22px; } #database .detail-evidence { margin-bottom: 24px; } #database .result { grid-template-columns: 80px minmax(0,1fr); min-height: 126px; padding: 12px; } #database .result-art { width: 80px; height: 80px; } #database .result-art .item-icon { width: 70px; height: 70px; } }

/* Все восемь классов видны до фильтров; охват NC показан отдельно от состава игры. */
#database .db-class-section { position: relative; isolation: isolate; overflow: hidden; margin: 3px 0 17px; padding: 18px 19px 20px; border: 1px solid #9c73d27a; border-radius: 15px; background: linear-gradient(100deg, #100d1ee8, #231733d1), url('/img/art/w/citadel_violet_sky-800.webp') center 44% / cover no-repeat; box-shadow: inset 0 1px #ffffff22, 0 18px 44px #0006; }
#database .db-class-section[hidden] { display: none; }
#database .db-class-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 16px; }
#database .db-class-heading .eyebrow { margin-bottom: 2px; color: #c9a8ff; }
#database .db-class-heading h2 { margin: 0; font-family: Unbounded, Onest, sans-serif; font-size: clamp(17px, 2vw, 24px); font-weight: 600; letter-spacing: -.04em; }
#database .db-class-heading p:last-child { margin: 5px 0 0; color: #c8bbd8; font-size: 11px; }
#database #dbAllClasses { flex: none; padding: 8px 12px; border: 1px solid #c19df26b; border-radius: 7px; background: #25163bcf; color: #e9dcff; font-size: 11px; font-weight: 750; }
#database #dbAllClasses span { margin-left: 8px; }
#database #dbAllClasses:hover, #database #dbAllClasses[aria-pressed="true"] { border-color: #d0b6ff; background: #7045a4; color: #fff; box-shadow: 0 0 16px #985bca69; }
#database .db-class-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
#database .db-class-card { position: relative; isolation: isolate; display: block; height: 164px; min-width: 0; overflow: hidden; padding: 0; border: 1px solid #a18dba73; border-radius: 9px; background: radial-gradient(circle at 50% 23%, #7459909c, transparent 70%), linear-gradient(170deg, #251a37, #120c20); color: #fff; text-align: left; box-shadow: inset 0 1px #ffffff2b; transition: border-color .18s, transform .18s, box-shadow .18s; }
#database .db-class-card::after { content: ''; position: absolute; z-index: 1; inset: 25% 0 0; pointer-events: none; background: linear-gradient(0deg, #0e0a1af7 4%, #0e0a1ab6 34%, transparent 88%); }
#database .db-class-card img { position: absolute; top: -12px; left: -12%; width: 124%; height: 170px; object-fit: contain; object-position: center top; filter: drop-shadow(0 10px 13px #090611bd); transition: transform .2s; }
#database .db-class-card:hover { transform: translateY(-3px); border-color: #d5b2ff; box-shadow: 0 0 20px #9e6bec6e, inset 0 1px #ffffff4a; }
#database .db-class-card:hover img { transform: scale(1.06); }
#database .db-class-card[aria-pressed="true"] { border: 2px solid #e0bcff; box-shadow: 0 0 0 1px #7d54b0, 0 0 26px #a26dff9c; }
#database .db-class-copy { position: absolute; z-index: 2; right: 6px; bottom: 7px; left: 8px; display: grid; gap: 1px; min-width: 0; }
#database .db-class-copy strong { overflow: hidden; color: #fff; font-size: 12px; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 8px #000; }
#database .db-class-copy small { color: #d8c5ed; font-size: 9px; line-height: 1.2; white-space: nowrap; }
#database .db-class-unassigned { margin: 12px 0 0; padding: 10px 2px 0; border-top: 1px solid #ffffff2b; color: #d5c5e5; font-size: 11px; line-height: 1.45; }
#database .db-class-unassigned[hidden] { display: none; }
@media (max-width: 1100px) { #database .db-class-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } #database .db-class-card { height: 145px; } }
@media (max-width: 600px) { #database .db-class-section { padding: 14px 10px 12px; } #database .db-class-heading { align-items: start; gap: 7px; margin-bottom: 12px; } #database .db-class-heading h2 { font-size: 17px; } #database .db-class-heading p:last-child { max-width: 245px; font-size: 10px; line-height: 1.3; } #database #dbAllClasses { padding: 6px 7px; font-size: 10px; } #database #dbAllClasses span { display: none; } #database .db-class-grid { gap: 5px; } #database .db-class-card { height: 123px; } #database .db-class-card img { top: -5px; height: 129px; } #database .db-class-copy { right: 3px; bottom: 5px; left: 5px; } #database .db-class-copy strong { font-size: 9px; letter-spacing: -.025em; } #database .db-class-copy small { overflow: hidden; font-size: 8px; text-overflow: ellipsis; } }
@media (prefers-reduced-motion: reduce) { #database .db-class-card, #database .db-class-card img { transition: none; } }
#database .catalog-evidence > .evidence-detail { text-align: left; }
#database .item-icon.missing { display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid color-mix(in srgb, var(--quality, #9787ac) 45%, transparent); border-radius: inherit; background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--quality, #9787ac) 18%, transparent), transparent 66%), #1b1328; color: #c9b8da; font-size: 12px; font-weight: 900; letter-spacing: .16em; }
#database .detail-visual .item-icon.missing { width: 145px; height: 145px; border-width: 3px; font-size: 22px; }
@media (max-width: 760px) { #database .detail-visual .item-icon.missing { width: 128px; height: 128px; } }
#database .db-category-section { margin: 0 0 22px; }
#database .db-category-section[hidden] { display: none; }
#database .db-category-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 16px; padding: 0 2px; }
#database .db-category-heading strong { font-size: 15px; font-weight: 800; }
#database .db-category-heading span { font-size: 11px; opacity: .7; }
#database .db-category-section .db-category-rail { margin: 0; padding-top: 10px; }

/* Сравнение двух наблюдённых предметов: иконка и качество сохраняют связь с карточкой NC. */
#database .detail-compare-link { display: inline-flex; align-items: center; min-height: 38px; margin-top: 17px; padding: 7px 14px; border: 1px solid color-mix(in srgb, var(--quality) 70%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--quality) 17%, #110d1b); color: #f8efff; font-size: 12px; font-weight: 750; text-decoration: none; }
#database .detail-compare-link:hover { background: color-mix(in srgb, var(--quality) 30%, #110d1b); }
#database .compare { max-width: 1120px; margin: 26px auto 55px; }
#database .compare-head { position: relative; isolation: isolate; overflow: hidden; min-height: 180px; margin: 18px 0 20px; padding: 29px 34px; border: 1px solid #a77fda80; border-radius: 14px; background: linear-gradient(90deg, #150c25 0%, #150c25f2 40%, #150c25a8 72%, #150c2580), url('/img/art/w/atreia_broken_planet-800.webp') center / cover no-repeat; }
#database .compare-head h1 { margin: 0; color: #faf4ff; font: 600 clamp(25px, 3vw, 38px)/1.2 Unbounded, Onest, sans-serif; letter-spacing: -.04em; }
#database .compare-head > p:last-child { max-width: 680px; margin: 12px 0 0; color: #dfd3ea; font-size: 13px; line-height: 1.55; }
#database .compare-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#database .compare-card { --quality: #8f7ab9; display: flex; align-items: center; min-width: 0; min-height: 151px; gap: 17px; padding: 20px; border: 1px solid color-mix(in srgb, var(--quality) 65%, transparent); border-top: 3px solid var(--quality); border-radius: 11px; background: linear-gradient(115deg, color-mix(in srgb, var(--quality) 19%, #15101f), #100d1a 72%); color: #eee8f7; text-decoration: none; box-shadow: inset 0 1px #ffffff1c; }
#database a.compare-card:hover { border-color: var(--quality); box-shadow: 0 0 26px color-mix(in srgb, var(--quality) 20%, transparent); }
#database .compare-card[data-quality="Epic"], #database .compare-option[data-quality="Epic"] { --quality: #ba89ff; }
#database .compare-card[data-quality="Rare"], #database .compare-option[data-quality="Rare"] { --quality: #78afff; }
#database .compare-card[data-quality="Special"], #database .compare-option[data-quality="Special"] { --quality: #eac685; }
#database .compare-card[data-quality="Common"], #database .compare-option[data-quality="Common"] { --quality: #afa9ba; }
#database .compare-card-icon { display: grid; flex: none; place-items: center; width: 90px; height: 90px; border: 2px solid var(--quality); border-radius: 13px; background: radial-gradient(circle, color-mix(in srgb, var(--quality) 25%, #17111e), #17111e); box-shadow: 0 0 23px color-mix(in srgb, var(--quality) 30%, transparent); }
#database .compare-card-icon .item-icon { width: 78px; height: 78px; border: 0; border-radius: 9px; object-fit: cover; }
#database .compare-card-copy { display: grid; min-width: 0; gap: 6px; }
#database .compare-card-copy small { color: var(--quality); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
#database .compare-card-copy strong { overflow-wrap: anywhere; color: #faf6ff; font: 580 clamp(15px, 1.7vw, 21px)/1.28 Unbounded, Onest, sans-serif; letter-spacing: -.035em; }
#database .compare-card-copy span { color: #c5b6d0; font-size: 11px; line-height: 1.4; }
#database .compare-slot { justify-content: center; border-style: dashed; border-top-style: dashed; color: #b8a9c7; font-size: 13px; text-align: center; }
#database .compare-swap { display: inline-block; margin: 14px 0 0; color: #cdb3ff; font-size: 12px; font-weight: 700; text-decoration: none; }
#database .compare-swap:hover { text-decoration: underline; }
#database .compare-facts { margin-top: 24px; }
#database .compare-facts h2, #database .compare-picker h2 { margin: 0; color: #f3eafa; font: 600 20px/1.3 Unbounded, Onest, sans-serif; letter-spacing: -.035em; }
#database .compare-facts > p, #database .compare-picker-heading p, #database .compare-hint { margin: 8px 0 17px; color: #b7a8c5; font-size: 12px; line-height: 1.5; }
#database .compare-fact-list { overflow: hidden; border: 1px solid #b597d944; border-radius: 11px; }
#database .compare-fact { display: grid; grid-template-columns: minmax(180px, .88fr) repeat(2, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid #ffffff17; background: #150f20db; }
#database .compare-fact:last-child { border-bottom: 0; }
#database .compare-fact-heading { border-bottom-color: #b396db61; background: #3a244d; }
#database .compare-fact-heading .compare-fact-name, #database .compare-fact-heading .compare-fact-value { overflow-wrap: anywhere; color: #f6eafa; font-weight: 750; }
#database .compare-fact:nth-child(even) { background: #21172bc9; }
#database .compare-fact-heading:nth-child(even) { background: #3a244d; }
#database .compare-fact > * { min-width: 0; padding: 10px 15px; font-size: 12px; line-height: 1.45; }
#database .compare-fact-name { color: #baacd0; font-weight: 650; }
#database .compare-fact-value { overflow-wrap: anywhere; border-left: 1px solid #ffffff16; color: #eee5fa; }
#database .compare-fact.is-different .compare-fact-value:not(.is-missing) { color: #fff; background: #a480ee16; }
#database .compare-fact-value.is-missing { color: #988aa8; }
#database .compare-picker { margin-top: 29px; padding: 22px; border: 1px solid #a982dd54; border-radius: 12px; background: #171020e6; }
#database .compare-picker label { display: block; margin: 0 0 8px; color: #e6daf0; font-size: 12px; font-weight: 700; }
#database .compare-picker input { width: 100%; min-height: 45px; padding: 10px 13px; border: 1px solid #b798de77; border-radius: 8px; outline: 0; background: #0e0b17; color: #f5effc; }
#database .compare-picker input:focus-visible { outline: 2px solid #c39cff; outline-offset: 2px; }
#database .compare-picker-status { margin: 11px 0; color: #a99ab7; font-size: 11px; }
#database .compare-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 395px; overflow-y: auto; }
#database .compare-option { --quality: #8f7ab9; display: flex; align-items: center; min-width: 0; min-height: 70px; gap: 10px; padding: 8px 10px; border: 1px solid #ffffff24; border-radius: 8px; background: #ffffff08; text-decoration: none; }
#database .compare-option:hover { border-color: var(--quality); background: color-mix(in srgb, var(--quality) 15%, #171020); }
#database .compare-option-icon { display: grid; flex: none; place-items: center; width: 49px; height: 49px; border: 1px solid var(--quality); border-radius: 7px; }
#database .compare-option-icon .item-icon { width: 43px; height: 43px; border: 0; border-radius: 5px; object-fit: cover; }
#database .compare-option-copy { display: grid; min-width: 0; gap: 3px; }
#database .compare-option-copy strong { overflow: hidden; color: #f2ebfa; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
#database .compare-option-copy small { overflow: hidden; color: #a99abb; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#database .compare-option-arrow { margin-left: auto; color: var(--quality); }
@media (max-width: 720px) { #database .compare-cards { gap: 8px; } #database .compare-card { flex-direction: column; align-items: flex-start; min-height: 175px; gap: 10px; padding: 13px; } #database .compare-card-icon { width: 66px; height: 66px; } #database .compare-card-icon .item-icon { width: 56px; height: 56px; } #database .compare-card-copy strong { font-size: 13px; } #database .compare-card-copy span { font-size: 10px; } #database .compare-head { padding: 22px; } #database .compare-options { grid-template-columns: 1fr; } }
@media (max-width: 530px) { #database .compare-fact { grid-template-columns: repeat(2, minmax(0, 1fr)); } #database .compare-fact-name { grid-column: 1/-1; padding-bottom: 2px; font-size: 11px; } #database .compare-fact-value { padding-top: 4px; border-left: 0; font-size: 11px; } #database .compare-fact-value:last-child { border-left: 1px solid #ffffff16; } #database .compare-picker { padding: 16px; } }

/* Каталог начинается с поиска и настоящих записей. Декор не задерживает доступ к результатам. */
#database:not(.detail-page)::before { opacity: .1; }
#database:not(.detail-page) .db-head { min-height: 176px; margin: 12px 0 0; border-color: #ac8cdb51; border-radius: 18px; }
#database:not(.detail-page) .db-head > div { padding: 24px 29px; }
#database:not(.detail-page) .db-head h1 { font-size: clamp(27px, 3.2vw, 41px); }
#database:not(.detail-page) .db-head p:not(.eyebrow) { max-width: 430px; margin-top: 8px; font-size: 12px; }
#database:not(.detail-page) .db-head img { object-position: 50% 35%; }
#database:not(.detail-page) .db-search { max-width: none; margin: -16px 21px 0; padding: 13px 17px 12px; border-color: #a98be472; border-radius: 15px; background: #1b1329e8; backdrop-filter: blur(20px) saturate(135%); box-shadow: 0 14px 34px #0006, inset 0 1px #ffffff24; }
#database:not(.detail-page) .db-search > label { margin: 0 0 7px; font-size: 12px; letter-spacing: 0; }
#database:not(.detail-page) .db-search .search-row input { min-height: 44px; padding: 10px 14px; font-size: 13px; }
#database:not(.detail-page) .db-search .search-row button { min-width: 96px; }
#database:not(.detail-page) .db-tabs { gap: 18px; margin: 11px 0 0; }
#database:not(.detail-page) .db-tabs button { padding-bottom: 7px; font-size: 12px; }
#database:not(.detail-page) .catalog-evidence { margin: 12px 0 17px; }
#database:not(.detail-page) .db-class-section { margin: 0 0 12px; padding: 10px 11px; border-color: #ffffff25; border-radius: 12px; background: #ffffff07; box-shadow: inset 0 1px #ffffff0e; }
#database:not(.detail-page) .db-class-heading { align-items: center; margin: 0 0 8px; }
#database:not(.detail-page) .db-class-heading h2 { font-family: Onest, sans-serif; font-size: 14px; font-weight: 750; letter-spacing: 0; }
#database:not(.detail-page) .db-class-heading p:last-child { margin: 1px 0 0; font-size: 10px; }
#database:not(.detail-page) #dbAllClasses { padding: 5px 10px; border-radius: 8px; }
#database:not(.detail-page) .db-class-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
#database:not(.detail-page) .db-class-card { display: flex; align-items: center; height: 51px; min-height: 51px; border-color: #ffffff28; border-radius: 9px; background: #100d1bc9; box-shadow: none; }
#database:not(.detail-page) .db-class-card::after { inset: 0; background: linear-gradient(90deg, transparent 34px, #120e1be5 56px); }
#database:not(.detail-page) .db-class-card img { top: 0; left: -7px; width: 56px; height: 55px; object-position: center 18%; filter: none; }
#database:not(.detail-page) .db-class-copy { position: relative; right: auto; bottom: auto; left: auto; width: 100%; padding: 0 3px 0 45px; }
#database:not(.detail-page) .db-class-copy strong { font-size: 10px; }
#database:not(.detail-page) .db-class-copy small { color: #ab9abb; font-size: 9px; }
#database:not(.detail-page) .db-class-unassigned { margin-top: 7px; padding-top: 5px; font-size: 10px; }
#database:not(.detail-page) .db-category-section { margin-bottom: 9px; }
#database:not(.detail-page) .db-category-heading strong { font-size: 13px; }
#database:not(.detail-page) .db-category-section .db-category-rail { margin: 0; padding: 6px 1px 5px; }
#database:not(.detail-page) .db-category { display: grid; flex: 0 0 132px; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: 20px 15px; align-items: center; gap: 0 6px; min-width: 132px; max-width: 132px; min-height: 51px; padding: 6px; border-color: #ffffff25; border-radius: 9px; background: #ffffff07; box-shadow: none; text-align: left; }
#database:not(.detail-page) .db-category-art { grid-column: 1; grid-row: 1/3; width: 37px; height: 37px; }
#database:not(.detail-page) .db-category-art .item-icon { width: 35px; height: 35px; border-radius: 6px; }
#database:not(.detail-page) .db-category-label { grid-column: 2; grid-row: 1; overflow: hidden; width: 100%; margin: 0; color: #e9e1f3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#database:not(.detail-page) .db-category small { grid-column: 2; grid-row: 2; margin: 0; color: #ae9cbe; }
#database:not(.detail-page) .db-workspace { gap: 17px; }
#database:not(.detail-page) .search-panel { padding: 17px 15px; border-color: #ffffff25; border-radius: 12px; background: #ffffff08; box-shadow: inset 0 1px #ffffff13; }
#database:not(.detail-page) .results-head { margin: 0 0 10px; }
#database:not(.detail-page) .results-head h2 { font-size: 19px; }
#database:not(.detail-page) .result { min-height: 106px; grid-template-columns: 72px minmax(0,1fr); gap: 11px; padding: 11px; border-color: #ffffff26; border-radius: 10px; background: #1a1326d9; box-shadow: inset 0 1px #ffffff13; }
#database:not(.detail-page) .result::before { width: 3px; box-shadow: none; }
#database:not(.detail-page) .result:hover { background: #271a35; box-shadow: 0 10px 24px #0004; }
#database:not(.detail-page) .result-art { width: 72px; height: 72px; border-width: 1px; border-radius: 9px; box-shadow: none; }
#database:not(.detail-page) .result-art .item-icon { width: 64px; height: 64px; }
#database:not(.detail-page) .result-quality { padding: 2px 5px; border-radius: 4px; background: color-mix(in srgb, var(--quality) 12%, #150f1e); text-shadow: none; }
#database:not(.detail-page) .result strong { font-size: 14px; }
@media (max-width: 760px) { #database:not(.detail-page) .db-class-grid { display: flex; overflow-x: auto; scrollbar-width: thin; } #database:not(.detail-page) .db-class-card { flex: 0 0 123px; } #database:not(.detail-page) .db-class-heading p:last-child { display: none; } #database:not(.detail-page) .db-head { min-height: 150px; } #database:not(.detail-page) .db-head > div { padding: 19px 20px; } #database:not(.detail-page) .db-search { margin: -13px 10px 0; } #database:not(.detail-page) .db-workspace { gap: 10px; } }
@media (max-width: 600px) { #database:not(.detail-page) .catalog-evidence { margin: 8px 0 12px; } #database:not(.detail-page) .db-category-heading span { display: none; } #database:not(.detail-page) .db-search .search-row button { min-width: 72px; padding-inline: 10px; } #database:not(.detail-page) .db-head p:not(.eyebrow) { font-size: 11px; } #database:not(.detail-page) .result { grid-template-columns: 64px minmax(0,1fr); min-height: 92px; } #database:not(.detail-page) .result-art { width: 64px; height: 64px; } #database:not(.detail-page) .result-art .item-icon { width: 56px; height: 56px; } }

/* Таксономия живёт в навигационной колонке, а записи начинаются сразу после поиска. */
#database:not(.detail-page) .db-workspace { grid-template-columns: minmax(250px, 278px) minmax(0, 1fr); align-items: start; }
#database:not(.detail-page) .db-sidebar { display: grid; align-content: start; gap: 11px; min-width: 0; }
#database:not(.detail-page) .db-class-section { margin: 0; }
#database:not(.detail-page) .db-class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
#database:not(.detail-page) .db-class-card { height: 45px; min-height: 45px; }
#database:not(.detail-page) .db-class-card img { width: 50px; height: 50px; }
#database:not(.detail-page) .db-class-copy { padding-left: 39px; }
#database:not(.detail-page) .db-class-copy strong { font-size: 9px; }
#database:not(.detail-page) .db-class-copy small { font-size: 8px; }
#database:not(.detail-page) .db-category-section { min-width: 0; margin: 0; padding: 10px 11px; border: 1px solid #ffffff25; border-radius: 12px; background: #ffffff07; }
#database:not(.detail-page) .db-category-section .db-category-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; max-height: 173px; overflow-y: auto; overflow-x: hidden; padding: 7px 1px 1px; }
#database:not(.detail-page) .db-category { min-width: 0; max-width: none; width: 100%; grid-template-columns: 31px minmax(0, 1fr); grid-template-rows: 18px 13px; gap: 0 4px; min-height: 42px; padding: 4px; }
#database:not(.detail-page) .db-category-art { width: 30px; height: 30px; }
#database:not(.detail-page) .db-category-art .item-icon { width: 29px; height: 29px; }
#database:not(.detail-page) .db-category-label { font-size: 9px; }
#database:not(.detail-page) .db-category small { font-size: 9px; }
#database:not(.detail-page) .search-panel { position: static; }
@media (max-width: 760px) {
  #database:not(.detail-page) .db-workspace { grid-template-columns: 1fr; }
  #database:not(.detail-page) .db-sidebar { gap: 8px; }
  #database:not(.detail-page) .db-class-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  #database:not(.detail-page) .db-class-card { min-width: 0; height: 47px; }
  #database:not(.detail-page) .db-class-copy { padding-left: 36px; }
  #database:not(.detail-page) .db-category-section .db-category-rail { display: flex; max-height: none; overflow-x: auto; overflow-y: hidden; }
  #database:not(.detail-page) .db-category { flex: 0 0 126px; }
}
@media (max-width: 520px) {
  #database:not(.detail-page) .db-head { min-height: 126px; }
  #database:not(.detail-page) .db-head > div { padding: 15px 17px; }
  #database:not(.detail-page) .db-head h1 { font-size: 25px; }
  #database:not(.detail-page) .db-head p:not(.eyebrow) { max-width: 260px; margin-top: 4px; font-size: 10px; }
  #database:not(.detail-page) .db-search { margin: -9px 6px 0; padding: 10px 11px; }
  #database:not(.detail-page) .db-class-section, #database:not(.detail-page) .db-category-section { padding: 8px; }
  #database:not(.detail-page) .db-class-card { height: 42px; min-height: 42px; }
  #database:not(.detail-page) .db-class-card img { left: -11px; width: 48px; height: 46px; }
  #database:not(.detail-page) .db-class-card::after { background: linear-gradient(90deg, transparent 22px, #120e1be5 38px); }
  #database:not(.detail-page) .db-class-copy { padding-left: 27px; }
  #database:not(.detail-page) .db-class-copy strong { font-size: 8px; }
  #database:not(.detail-page) .db-class-copy small { display: none; }
}

/* Показатели наблюдённого незаточенного предмета NC, отдельно от свойств экземпляра. */
#database .db-base-stats { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; margin: 11px 0 0; overflow: hidden; border: 1px solid #b697e35e; border-radius: 10px; }
#database .db-base-stats dt, #database .db-base-stats dd { margin: 0; padding: 9px 12px; border-bottom: 1px solid #ffffff1c; font-size: 12px; line-height: 1.35; }
#database .db-base-stats dt:nth-last-of-type(1), #database .db-base-stats dd:nth-last-of-type(1) { border-bottom: 0; }
#database .db-base-stats dt { color: #d1bfdc; background: #ffffff0b; }
#database .db-base-stats dd { min-width: 82px; color: #f7ecff; font-weight: 800; text-align: right; background: #ffffff08; }
#database .detail-base-stats .field-context { margin: 11px 0 0; color: #ab9abe; font-size: 11px; line-height: 1.5; }
#database .db-preview-base-stats { border-top-color: #b18be86b; }
#database .result-stat { display: inline-flex; width: fit-content; max-width: 100%; margin-top: 7px; padding: 5px 8px; border: 1px solid #b18be86b; border-radius: 6px; color: #e7d6ff; background: #8e65bd2b; font-size: 10px; font-weight: 750; line-height: 1.3; }

/* Быстрый просмотр сохраняет место в каталоге и показывает только подтверждённые поля. */
#database .db-preview { position: fixed; inset: 0 0 0 auto; width: min(472px, 100vw); height: 100dvh; max-width: none; max-height: none; margin: 0 0 0 auto; padding: 29px 25px 35px; overflow-y: auto; border: 0; border-left: 1px solid #ad8fe38a; border-radius: 18px 0 0 18px; background: linear-gradient(150deg, #241631, #100b1b 60%); color: #f6efff; box-shadow: -22px 0 70px #0009; }
#database .db-preview::backdrop { background: #070411bd; backdrop-filter: blur(5px); }
#database .db-preview-close { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 0 24px auto; border: 1px solid #ffffff52; border-radius: 9px; background: #ffffff12; color: #f6efff; cursor: pointer; }
#database .db-preview-close:hover { background: #ffffff28; }
#database .db-preview-card { --quality: #a29bab; }
#database .db-preview-card[data-quality="Epic"] { --quality: #c28bff; }
#database .db-preview-card[data-quality="Rare"] { --quality: #7dbfff; }
#database .db-preview-card[data-quality="Special"] { --quality: #edc879; }
#database .db-preview-card[data-quality="Common"] { --quality: #b9b0c0; }
#database .db-preview-head { display: flex; align-items: center; gap: 17px; }
#database .db-preview-art { display: grid; flex: none; place-items: center; width: 92px; height: 92px; border: 2px solid var(--quality); border-radius: 14px; background: radial-gradient(circle, color-mix(in srgb, var(--quality) 25%, #160f24), #160f24); box-shadow: 0 0 27px color-mix(in srgb, var(--quality) 24%, transparent); }
#database .db-preview-art .item-icon { width: 79px; height: 79px; border-radius: 9px; }
#database .db-preview-title { min-width: 0; }
#database .db-preview-kicker { color: #b5a5ca; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#database .db-preview-title h2 { overflow-wrap: anywhere; margin: 6px 0 8px; color: #f7f1ff; font: 600 clamp(17px, 2vw, 23px)/1.3 Unbounded, Onest, sans-serif; letter-spacing: -.035em; }
#database .db-preview-grade { display: inline-flex; padding: 3px 8px; border: 1px solid var(--quality); border-radius: 5px; color: var(--quality); font-size: 11px; font-weight: 800; }
#database .db-preview-context { margin: 18px 0 0; padding: 11px 13px; border: 1px solid #b498cf38; border-radius: 8px; background: #ffffff0b; color: #d0c3dc; font-size: 11px; line-height: 1.5; }
#database .db-preview-section { margin-top: 23px; padding-top: 20px; border-top: 1px solid #ffffff24; }
#database .db-preview-section h3 { margin: 0 0 13px; color: #f6edff; font-size: 14px; font-weight: 800; }
#database .db-preview-facts { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; margin: 0; border: 1px solid #ffffff24; border-radius: 9px; overflow: hidden; }
#database .db-preview-facts dt, #database .db-preview-facts dd { min-width: 0; margin: 0; padding: 9px 10px; border-bottom: 1px solid #ffffff18; font-size: 11px; line-height: 1.35; }
#database .db-preview-facts dt:nth-last-of-type(1), #database .db-preview-facts dd:nth-last-of-type(1) { border-bottom: 0; }
#database .db-preview-facts dt { color: #b4a3c5; background: #ffffff07; }
#database .db-preview-facts dd { color: #f0e7f9; font-weight: 650; }
#database .db-preview-note, #database .db-preview-pending, #database .db-preview-description, #database .db-preview-source { color: #c1b3d0; font-size: 11px; line-height: 1.55; }
#database .db-preview-note { margin: 12px 0 0; }
#database .db-preview-description { white-space: pre-line; }
#database .db-preview-source { margin: 19px 0 0; color: #9e8bb2; }
#database .db-preview-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
#database .db-preview-full, #database .db-preview-compare { display: inline-flex; align-items: center; justify-content: center; min-height: 41px; padding: 9px 13px; border: 1px solid #ad86ef; border-radius: 8px; background: #8652d7; color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; }
#database .db-preview-full:hover { background: #9a69e7; }
#database .db-preview-compare { border-color: #a894bd; background: #ffffff0b; }
#database .db-preview-loading { margin-top: 30px; color: #d5c6e5; font-size: 13px; }
#database .result[aria-haspopup="dialog"] { cursor: pointer; }
@media (max-width: 520px) { body:has(#database) { min-width: 0; } #database .db-preview { width: 100%; padding: 18px 17px 30px; border-radius: 0; } #database .db-preview-art { width: 75px; height: 75px; } #database .db-preview-art .item-icon { width: 63px; height: 63px; } }
@media (max-width: 760px) {
  #database:not(.detail-page) .search-panel { position: fixed; z-index: 25; top: auto; right: 12px; bottom: 12px; left: auto; width: min(430px, calc(100vw - 24px)); max-height: min(75dvh, 650px); margin: 0; padding: 0; overflow-y: auto; border-color: #ae8ee6; background: #21152fed; backdrop-filter: blur(20px); box-shadow: 0 12px 38px #0008; }
  #database:not(.detail-page) .search-panel:not([open]) { width: auto; min-width: 164px; }
  #database:not(.detail-page) .mobile-filter-summary { padding: 10px 14px; font-size: 11px; }
  #database:not(.detail-page) .db-class-unassigned { font-size: 9px; line-height: 1.25; }
}
@media (max-width: 520px) {
  #database:not(.detail-page) .db-head { min-height: 112px; }
  #database:not(.detail-page) .db-head p:not(.eyebrow) { display: none; }
  #database:not(.detail-page) .catalog-evidence .evidence-detail span { display: block; }
  #database:not(.detail-page) .results-head { align-items: center; flex-direction: row; gap: 6px; }
  #database:not(.detail-page) .results-head h2 { font-size: 16px; }
  #database:not(.detail-page) .results-controls { width: auto; gap: 5px; }
  #database:not(.detail-page) .results-controls label { display: none; }
  #database:not(.detail-page) .results-controls select { max-width: 144px; font-size: 10px; }
  #database:not(.detail-page) #resultCount { font-size: 9px; white-space: nowrap; }
}

/* В быстром просмотре действия доступны при длинном списке свойств. */
#database .db-preview { padding-bottom: 104px; }
#database .db-preview-actions {
  position: fixed;
  z-index: 4;
  inset: auto 0 0 auto;
  width: min(472px, 100vw);
  justify-content: stretch;
  margin: 0;
  padding: 13px 25px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid #b89ad44d;
  background: linear-gradient(180deg, #21152ff2, #130d1ffb);
  box-shadow: 0 -16px 28px #0a0714a8;
  backdrop-filter: blur(18px);
}
#database .db-preview-actions a { min-width: 0; flex: 1; text-align: center; }

/* Витрина и заголовок делят только верх карточки; длинные свойства идут во всю ширину. */
#database .detail-card {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  align-items: start;
  gap: 0 28px;
  padding: 28px;
}
#database .detail-content { display: contents; }
#database .detail-stage {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  padding: 17px 15px 16px;
  border: 1px solid color-mix(in srgb, var(--quality) 48%, transparent);
  border-radius: 15px;
}
#database .detail-stage.has-class-art { padding-top: 45px; }
#database .detail-stage::after { border-radius: inherit; }
#database .detail-class-art {
  top: auto;
  right: -12%;
  bottom: 0;
  left: auto;
  width: 75%;
  height: 180px;
  opacity: .17;
  filter: saturate(.7) drop-shadow(0 16px 25px #0906118c);
}
#database .detail-art-label { position: absolute; top: 10px; left: 10px; margin: 0; }
#database .detail-visual {
  width: min(100%, 210px);
  min-height: 210px;
  margin: 0 auto;
  border: 1px solid color-mix(in srgb, var(--quality) 75%, transparent);
  border-radius: 22px;
  background: radial-gradient(circle, color-mix(in srgb, var(--quality) 30%, #241a31), #140f21 76%);
  box-shadow: inset 0 1px #ffffff45, 0 0 40px color-mix(in srgb, var(--quality) 25%, transparent), 0 17px 35px #0007;
}
#database .detail-visual .item-icon {
  width: 162px;
  height: 162px;
  border-radius: 18px;
  box-shadow: 0 0 0 6px #151021a8, 0 15px 32px #0009, 0 0 28px color-mix(in srgb, var(--quality) 48%, transparent);
}
#database .detail-visual .item-icon.missing { width: 162px; height: 162px; }
#database .detail-stage-caption { align-self: center; margin: 12px 2px 0; text-align: center; line-height: 1.45; }
#database .detail-title { grid-column: 2; grid-row: 1; min-width: 0; padding: 0 0 14px; }
#database .detail-compare-link { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 16px; }
#database .detail-attributes { grid-column: 2; grid-row: 3; align-self: start; margin-top: 16px; }
#database .detail-section { grid-column: 1 / -1; min-width: 0; margin-top: 23px; }
#database .detail-summary { margin-top: 27px; padding-top: 22px; border-top: 1px solid #ffffff24; }
@media (max-width: 760px) {
  #database .detail-card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 18px; }
  #database .detail-title { grid-column: 1; grid-row: 1; padding: 0 0 14px; }
  #database .detail-stage {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    grid-column: 1;
    grid-row: 2;
    align-items: center;
    gap: 12px;
    min-height: 0;
    margin-top: 17px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--quality) 48%, transparent);
  }
  #database .detail-stage.has-class-art { padding-top: 36px; }
  #database .detail-class-art { right: -10%; bottom: 0; height: 130px; }
  #database .detail-visual { grid-column: 1; width: 108px; min-height: 108px; margin: 0; border-radius: 14px; }
  #database .detail-visual .item-icon { width: 82px; height: 82px; border-radius: 11px; }
  #database .detail-visual .item-icon.missing { width: 82px; height: 82px; }
  #database .detail-stage-caption { grid-column: 2; grid-row: 1; margin: 0; text-align: left; }
  #database .detail-compare-link { grid-column: 1; grid-row: 3; margin-top: 17px; }
  #database .detail-attributes { grid-column: 1; grid-row: 4; margin-top: 17px; }
  #database .detail-section { grid-column: 1; margin: 23px 0 0; }
  #database .detail-summary { margin-top: 23px; }
}
@media (max-width: 390px) {
  #database .detail-card { padding: 14px; }
  #database .detail-stage { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 10px; }
  #database .detail-visual { width: 92px; min-height: 92px; }
  #database .detail-visual .item-icon { width: 72px; height: 72px; }
  #database .detail-visual .item-icon.missing { width: 72px; height: 72px; }
  #database .detail-stage-caption { font-size: 10px; }
}
@media (max-width: 520px) {
  #database .db-preview-actions { padding-inline: 17px; }
  #database .db-preview-actions a { padding-inline: 9px; }
}

/* Восемь классов остаются доступными; на телефоне атлас занимает два ряда. */
#database:not(.detail-page) .db-class-section { padding: 9px 10px 10px; }
#database:not(.detail-page) .db-class-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 7px;
  margin-bottom: 7px;
}
#database:not(.detail-page) .db-class-heading > div { display: contents; }
#database:not(.detail-page) .db-class-heading h2 { grid-column: 1; grid-row: 1; font-size: 14px; }
#database:not(.detail-page) .db-class-heading p:last-child {
  display: block;
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: none;
  margin: 0;
  font-size: 9px;
  line-height: 1.25;
}
#database:not(.detail-page) #dbAllClasses { grid-column: 2; grid-row: 1; padding: 5px 7px; font-size: 10px; }
#database:not(.detail-page) #dbAllClasses span { display: none; }
#database:not(.detail-page) .db-class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
#database:not(.detail-page) .db-class-card {
  height: 44px;
  min-height: 44px;
  border-radius: 9px;
  background: radial-gradient(circle at 27% 17%, #704d9080, transparent 66%), #130e1e;
}
#database:not(.detail-page) .db-class-card::after {
  inset: 0;
  background: linear-gradient(180deg, #100b1b00 20%, #100b1b55 52%, #100b1bf0 89%);
}
#database:not(.detail-page) .db-class-card img {
  top: -2px;
  left: -19px;
  width: 100px;
  height: 74px;
  object-fit: contain;
  object-position: left top;
  opacity: .92;
  filter: drop-shadow(0 5px 9px #070410b5);
}
#database:not(.detail-page) .db-class-copy { position: static; width: auto; padding: 0; }
#database:not(.detail-page) .db-class-copy strong {
  position: absolute;
  z-index: 2;
  right: 4px;
  bottom: 4px;
  left: 4px;
  display: -webkit-box;
  max-height: 2.2em;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.1;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#database:not(.detail-page) .db-class-copy small {
  position: absolute;
  z-index: 2;
  top: 3px;
  right: 3px;
  width: auto;
  min-width: 25px;
  max-width: calc(100% - 6px);
  height: 17px;
  overflow: hidden;
  padding: 1px 3px;
  border: 1px solid #bca1e183;
  border-radius: 5px;
  background: #130d20de;
  color: #f2e8ff;
  font-size: 10px;
  font-weight: 800;
  line-height: 13px;
  text-align: left;
  white-space: nowrap;
}
#database:not(.detail-page) .db-class-card[data-observed="false"] img { opacity: .7; filter: saturate(.75); }
#database:not(.detail-page) .db-class-card[data-observed="false"] .db-class-copy small { color: #e2d2f4; }
#database:not(.detail-page) .db-class-card:focus-visible { outline: 2px solid #f1d7ff; outline-offset: 2px; }
#database:not(.detail-page) .db-class-unassigned { margin-top: 7px; padding-top: 6px; font-size: 9px; line-height: 1.3; }

@media (max-width: 760px) {
  #database:not(.detail-page) .db-class-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  #database:not(.detail-page) .db-class-card { height: 50px; min-height: 50px; }
  #database:not(.detail-page) .db-class-card img { top: -4px; left: -14px; width: 114px; height: 82px; }
}
@media (max-width: 520px) {
  #database:not(.detail-page) .db-class-section { padding: 8px; }
  #database:not(.detail-page) .db-class-card { height: 48px; min-height: 48px; }
  #database:not(.detail-page) .db-class-card img { left: -13px; width: 111px; height: 79px; }
  #database:not(.detail-page) .db-class-copy strong { font-size: 9px; }
  #database:not(.detail-page) .db-class-copy small { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  #database:not(.detail-page) .db-class-card:hover { transform: none; }
  #database:not(.detail-page) .db-class-card:hover img { transform: none; }
}

/* В выдаче видны реальные показатели NC; полный набор остаётся в быстром просмотре. */
#database:not(.detail-page) .results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#database:not(.detail-page) .result { min-height: 156px; grid-template-columns: 82px minmax(0, 1fr); align-items: start; gap: 14px; }
#database:not(.detail-page) .result-art { width: 82px; height: 82px; }
#database:not(.detail-page) .result-art .item-icon { width: 74px; height: 74px; }
#database:not(.detail-page) .result-main { justify-content: start; gap: 4px; padding-bottom: 11px; }
#database:not(.detail-page) .result-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
#database:not(.detail-page) .result-stat { display: grid; align-content: center; width: 100%; max-width: none; min-width: 0; min-height: 39px; gap: 1px; margin: 0; padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--quality) 44%, transparent); border-left: 2px solid var(--quality); border-radius: 5px; background: color-mix(in srgb, var(--quality) 10%, #17101f); line-height: 1.15; }
#database:not(.detail-page) .result-stat-label { overflow: hidden; color: #cbbdd8; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
#database:not(.detail-page) .result-stat b { overflow-wrap: anywhere; color: #f7f0ff; font-size: 13px; font-variant-numeric: tabular-nums; }
#database:not(.detail-page) .result-stat-source { color: #a992bc; font-size: 10px; line-height: 1.3; }
#database:not(.detail-page) .result-id { bottom: 7px; }
@media (max-width: 1130px) { #database:not(.detail-page) .results { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  #database:not(.detail-page) .result { grid-template-columns: 64px minmax(0, 1fr); min-height: 150px; gap: 10px; }
  #database:not(.detail-page) .result-art { width: 64px; height: 64px; }
  #database:not(.detail-page) .result-art .item-icon { width: 56px; height: 56px; }
  #database:not(.detail-page) .result-stat { min-height: 39px; padding: 5px 6px; }
  #database:not(.detail-page) .result-stat-label { font-size: 10px; }
  #database:not(.detail-page) .result-stat b { font-size: 13px; }
}

#database .results-sort-note:not([hidden]) { margin: -5px 0 12px; color: var(--ink-3); font-size: 11px; line-height: 1.4; }