/* Item library: scoped to preserve the shared site layout. */
.itemLibrary { color: #dce4f0; }
.itemLibraryHeading { margin-bottom: 22px; }
.itemLibraryHeading h1, .itemDetailHeading h1 { margin: 6px 0 10px; }
.itemLibraryHeading p, .itemHelp, .itemDetailHeading p { color: #aeb9ca; }
.itemCategory { color: #83cfe5; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.itemArtifactBadge { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; padding: 4px 8px; border: 1px solid #796294; border-radius: 5px; background: #30253f; color: #e0c5ff; font-size: 11px; font-weight: 700; line-height: 1.2; }
.itemCardBody > .itemArtifactBadge { margin-bottom: 5px; padding: 3px 6px; }
.itemLibrary .itemFilters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 18px; margin-bottom: 14px; }
.itemFilters > div { min-width: 160px; }
.itemFilters .itemSearchField { flex: 1; min-width: 180px; }
.itemFilters label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; }
.itemLibrary .itemFilters input[type="search"] { width: 100%; min-height: 44px; margin: 0; box-sizing: border-box; }
#itemSearchResults { transition: opacity .12s ease; }
#itemSearchResults[aria-busy="true"] { opacity: .55; }
.itemLibrary .itemSearchStatus { margin: 0; color: #aeb9ca; font-size: 12px; }
.itemSearchStatus:empty { display: none; }
.itemSearchStatus.isAnnouncement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.itemSortControls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.itemSortControls > span { color: #aeb9ca; font-size: 12px; margin-right: 3px; }
.itemLibrary .itemSortForm { display: inline-block; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.itemLibrary .itemSortForm button { margin: 0; padding: 8px 12px; min-height: 36px; border: 1px solid #37495d; border-radius: 6px; background: #192635; color: #dce4f0; font-size: 12px; text-transform: none; }
.itemLibrary .itemSortForm button:hover, .itemLibrary .itemSortForm button[aria-pressed="true"] { background: #234353; border-color: #61bad4; color: #c9f1ff; }
.itemLibrary .itemSortHelp { margin: 9px 0 0; color: #aeb9ca; font-size: 11px; }
.itemSortValue { display: block; color: #95d5ec; margin: 0 0 5px; }
.itemCategoryPanel, .itemResultsPanel { padding: 16px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 10px; background: rgba(8,14,23,.6); }
.itemPanelHeading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.itemLibrary .itemPanelHeading h2 { margin: 0; font-size: 17px; }
.itemPanelHeading > span { color: #99adbf; font-size: 11px; }
.itemCategoryGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 8px; }
.itemCategoryTile { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid #2c3a4b; border-radius: 7px; background: linear-gradient(145deg, #1b2634, #121b26); color: #dce4f0; transition: border-color .15s, background .15s; }
.itemCategoryTile:hover, .itemCategoryTile[aria-current] { border-color: #61bad4; background: #203c4b; color: #d3f5ff; }
.itemCategoryTile[aria-current] { box-shadow: inset 0 0 0 1px #3c7183; }
.itemCategoryTile > span:last-child { min-width: 0; }
.itemCategoryTile strong { display: block; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.itemCategoryTile small { display: block; margin-top: 3px; color: #96aabd; font-size: 10px; }
.itemResultsPanel .itemFilters { padding: 0; }
.itemSourceLabel { color: #acbdd1; font-size: 12px; }
.itemLibrary .itemQuestOnly { color: #e1c585; }
.itemGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.itemViewControls { display: flex; gap: 4px; margin-left: auto; }
.itemLibrary .itemViewControls a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #37495d; border-radius: 6px; background: #192635; color: #dce4f0; font-size: 12px; }
.itemLibrary .itemViewControls a:hover, .itemLibrary .itemViewControls a[aria-current] { background: #234353; border-color: #61bad4; color: #c9f1ff; }
.itemCardBody { min-width: 0; }
.itemLibrary .itemCardDescription { margin: 4px 0 0; color: #a9bace; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.itemGrid.itemList { grid-template-columns: minmax(0, 1fr); }
.itemList .itemCard { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.itemList .itemCardTop { justify-content: flex-start; }
.itemList .itemCardTop .itemCategory { text-align: left; font-size: 9px; overflow-wrap: anywhere; }
.itemLibrary .itemList h2 { margin: 0; }
.itemList .itemCardValue { margin-top: 0; white-space: nowrap; }
html[data-color-mode='beige'] .itemLibrary .itemCardDescription, html[data-color-mode='beige'] .itemCardInlineStats { color: var(--text-muted); }
.itemCard { display: flex; flex-direction: column; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: linear-gradient(145deg, #1c2633, #111720); transition: border-color .15s, transform .15s; }
.itemCard:hover { border-color: #5b9bb2; transform: translateY(-2px); }
.itemLibrary a:focus-visible { outline: 2px solid #8bdefa; outline-offset: 3px; }
.itemCardTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.itemCardTop .itemCategory { text-align: right; font-size: 10px; }
.itemLibraryIcon { position: relative; display: inline-block; flex: 0 0 32px; width: 32px; height: 32px; overflow: hidden; vertical-align: middle; color: #91bcd1; }
.itemLibraryIcon img { position: absolute; left: 0; top: 0; max-width: none; height: 32px; image-rendering: pixelated; }
.itemLibraryIcon i { font-size: 26px; }
.itemLibrary .itemCard h2 { margin: 6px 0 4px; color: #e1eaf5; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.itemCardInlineStats { color: #a9bace; font-size: 12px; font-weight: 400; }
.itemLibrary .itemCard .itemCardStats { margin: 0 0 6px; color: #a9bace; font-size: 12px; }
.itemCardValue { margin-top: auto; color: #e6c57b; font-size: 11px; }
.itemCardDrops { display: block; margin-top: 4px; color: #99a8bc; font-size: 11px; }
.itemDetailHeading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 10px; }
.itemLibrary .itemDetailHeading h1 { margin: 0; font-size: 22px; }
.itemLook { display: flex; align-items: center; gap: 18px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 7px; background: rgba(0,0,0,.2); }
.itemLook .itemLibraryIcon { margin: 4px; }
.itemLibrary .itemLook p { margin: 0; color: #83ef72; font: 600 13px/1.45 Verdana, sans-serif; text-shadow: 1px 1px 1px #000; overflow-wrap: anywhere; }
.itemLibrary .itemValueLine { margin: 10px 0 18px; font-size: 13px; }
.itemValueLine strong { color: #f0cf7d; margin-left: 4px; }
.itemLibrary .itemSectionTitle { margin: 18px 0 9px; font-size: 17px; }
.itemTradeTable { max-height: 280px; overflow: auto; }
.itemTradeTable table { width: 100%; margin: 0; }
.itemTradeTable th { text-align: left; position: sticky; top: 0; z-index: 1; background: #1c293b; }
.itemLibrary .itemTradeTable th, .itemLibrary .itemTradeTable td { padding: 8px 10px; font-size: 12px; }
.itemTradeNote { display: block; margin-top: 2px; font-size: 10px; color: #aeb9ca; }
.itemLibrary .itemDropLegend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; color: #aeb9ca; font-size: 11px; }
.itemDropKind { display: inline-block; width: 18px; margin-right: 5px; text-align: center; }
.itemBossIcon { color: #f0c465; }
.itemMonsterIcon { color: #8ca7ba; }
.itemCount { font-size: 13px; color: #83cfe5; }
.itemDropTable { overflow-x: auto; }
.itemDropTable table { width: 100%; }
.itemDropTable th { text-align: left; }
.itemEmpty { padding: 25px; border: 1px solid var(--border); border-radius: 8px; text-align: center; }
@media (max-width: 1100px) { .itemGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .itemCategoryPanel, .itemResultsPanel { padding: 10px; }
    .itemCategoryGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .itemCategoryTile { padding: 8px; gap: 7px; }
    .itemGrid { grid-template-columns: 1fr; }
    .itemList .itemCard { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
    .itemList .itemCardTop { grid-column: 1 / -1; }
    .itemLibrary .itemFilters { padding: 12px; }
    .itemFilters > div { width: 100%; }
    .itemDetailHeading { gap: 12px; }
    .itemLook { padding: 12px 10px; gap: 10px; }
    .itemLibrary .itemLook p { font-size: 12px; }
}