.page-diablo-database {
    --db-ink: #202226;
    --db-muted: #70737a;
    --db-line: #d8d3ca;
    --db-paper: #f5f2ec;
    --db-surface: #fffdfa;
    --db-dark: #22252a;
    --db-red: #b74d36;
    margin: 0;
    color: var(--db-ink);
    background: var(--db-paper);
    font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
    line-height: 1.5;
}.page-diablo-database * { box-sizing: border-box; }.page-diablo-database a { color: inherit; text-decoration: none; }.page-diablo-database button,
.page-diablo-database input,
.page-diablo-database select { font: inherit; }.page-diablo-database img { max-width: 100%; }.page-diablo-database .db-shell { width: min(calc(100% - 48px), 1180px); margin-inline: auto; }.page-diablo-database .db-hero { color: #fff; background: #282427; border-bottom: 1px solid #3f393c; }.page-diablo-database .db-hero-inner { min-height: 184px; padding-block: 38px; display: flex; align-items: end; justify-content: space-between; gap: 50px; background: linear-gradient(90deg, rgba(40,36,39,.97), rgba(40,36,39,.74)), url("/assets/img/diablo4-pattern.svg") right 12% center / 360px auto no-repeat; }.page-diablo-database .db-hero p { margin: 0 0 8px; color: #df8d77; font: 800 9px/1 Arial, sans-serif; letter-spacing: .18em; }.page-diablo-database .db-hero h1 { margin: 0; font-size: clamp(29px, 4vw, 42px); line-height: 1.18; letter-spacing: -.055em; }.page-diablo-database .db-hero h1 + span { margin-top: 10px; display: block; color: #c7c3c4; font-size: 12px; }.page-diablo-database .db-hero dl { margin: 0; display: grid; grid-template-columns: repeat(3, 96px); border-top: 1px solid rgba(255,255,255,.28); border-bottom: 1px solid rgba(255,255,255,.28); }.page-diablo-database .db-hero dl div { padding: 14px 16px; border-right: 1px solid rgba(255,255,255,.17); }.page-diablo-database .db-hero dl div:last-child { border-right: 0; }.page-diablo-database .db-hero dt { color: #aaa7a9; font-size: 9px; }.page-diablo-database .db-hero dd { margin: 4px 0 0; font: 800 20px/1.2 Arial, sans-serif; }.page-diablo-database .db-content { min-height: 600px; padding-block: 34px 74px; }.page-diablo-database .db-tabs { display: flex; border-bottom: 1px solid #bbb6ad; }.page-diablo-database .db-tabs a { min-width: 116px; padding: 13px 22px; text-align: center; color: #73767b; border: 1px solid transparent; border-bottom: 0; font-size: 12px; font-weight: 750; }.page-diablo-database .db-tabs a.is-current { color: var(--db-ink); background: var(--db-surface); border-color: #bbb6ad; transform: translateY(1px); }.page-diablo-database .db-filter { padding: 18px; display: grid; grid-template-columns: 130px minmax(220px, 1fr) 145px 82px 50px; align-items: end; gap: 10px; background: var(--db-surface); border: 1px solid var(--db-line); border-top: 0; }.page-diablo-database .db-filter.has-slot { grid-template-columns: 130px minmax(220px, 1fr) 145px 145px 82px 50px; }.page-diablo-database .db-filter label { min-width: 0; display: grid; gap: 6px; }.page-diablo-database .db-filter label > span { color: #777a80; font-size: 9px; font-weight: 750; }.page-diablo-database .db-filter input,
.page-diablo-database .db-filter select { width: 100%; height: 39px; padding-inline: 11px; color: #303238; background: #fff; border: 1px solid #cbc6bd; border-radius: 0; outline: none; font-size: 11px; }.page-diablo-database .db-filter input:focus,
.page-diablo-database .db-filter select:focus { border-color: #4276af; box-shadow: 0 0 0 2px rgba(66,118,175,.15); }.page-diablo-database .db-filter button { height: 39px; color: #fff; background: var(--db-red); border: 0; cursor: pointer; font-size: 11px; font-weight: 750; }.page-diablo-database .db-filter > a { height: 39px; display: grid; place-items: center; color: #777a80; font-size: 10px; }.page-diablo-database .db-result-heading { min-height: 68px; display: flex; align-items: end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--db-line); }.page-diablo-database .db-result-heading div { padding-bottom: 13px; display: flex; align-items: baseline; gap: 5px; }.page-diablo-database .db-result-heading strong { color: var(--db-red); font: 800 20px/1 Arial, sans-serif; }.page-diablo-database .db-result-heading span { font-size: 11px; font-weight: 700; }.page-diablo-database .db-result-heading small { padding-bottom: 14px; color: #92949a; font: 9px/1 Arial, sans-serif; }.page-diablo-database .db-grid { padding-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.page-diablo-database .db-card { min-width: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); background: var(--db-surface); border: 1px solid var(--db-line); border-top: 3px solid #484b51; }.page-diablo-database .db-card.is-mythic { border-top-color: #987538; }.page-diablo-database .db-card-image { min-height: 148px; display: grid; place-items: center; background: #25282d; border-right: 1px solid var(--db-line); }.page-diablo-database .db-card-image img { width: 72px; height: 72px; object-fit: contain; image-rendering: auto; }.page-diablo-database .db-card-copy { min-width: 0; padding: 14px 14px 10px; }.page-diablo-database .db-card-copy > span { color: #9b573f; font-size: 9px; font-weight: 750; }.page-diablo-database .db-card-copy h2 { margin: 5px 0 8px; overflow: hidden; font-size: 14px; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }.page-diablo-database .db-card-copy p { margin: 0; display: -webkit-box; overflow: hidden; color: #75787e; font-size: 10px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.page-diablo-database .db-card footer { grid-column: 1 / -1; min-height: 41px; padding-inline: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #f1eee8; border-top: 1px solid var(--db-line); color: #777980; font-size: 9px; }.page-diablo-database .db-card footer a { color: #414449; font-weight: 750; }.page-diablo-database .db-card footer b { margin-left: 5px; color: var(--db-red); font-size: 14px; }.page-diablo-database .db-card a:focus-visible { outline: 3px solid #5f91c6; outline-offset: -2px; }.page-diablo-database .db-empty { margin-top: 14px; min-height: 240px; display: grid; place-content: center; text-align: center; background: var(--db-surface); border: 1px solid var(--db-line); }.page-diablo-database .db-empty strong { font-size: 18px; }.page-diablo-database .db-empty p { margin: 7px 0 0; color: var(--db-muted); font-size: 11px; }.page-diablo-database .db-pagination { margin-top: 28px; display: flex; justify-content: center; gap: 5px; }.page-diablo-database .db-pagination a { width: 36px; height: 36px; display: grid; place-items: center; color: #65686d; background: #fff; border: 1px solid var(--db-line); font: 11px/1 Arial, sans-serif; }.page-diablo-database .db-pagination a.is-current { color: #fff; background: var(--db-red); border-color: var(--db-red); }

@media (max-width: 980px) {.page-diablo-database .db-filter { grid-template-columns: 130px minmax(220px, 1fr) 145px 82px; }.page-diablo-database .db-filter.has-slot { grid-template-columns: 130px minmax(220px, 1fr) 145px 145px 82px; }.page-diablo-database .db-filter > a { display: none; }.page-diablo-database .db-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {.page-diablo-database .db-shell { width: min(calc(100% - 28px), 1180px); }.page-diablo-database .db-hero-inner { min-height: 210px; padding-block: 30px; display: grid; gap: 22px; }.page-diablo-database .db-hero dl { grid-template-columns: repeat(3, 1fr); width: 100%; }.page-diablo-database .db-filter { grid-template-columns: 1fr 1fr; }.page-diablo-database .db-filter .db-search { grid-column: 1 / -1; }.page-diablo-database .db-filter button { grid-column: 1 / -1; }.page-diablo-database .db-grid { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {.page-diablo-database .db-hero h1 { font-size: 30px; }.page-diablo-database .db-hero h1 + span { font-size: 10px; }.page-diablo-database .db-hero dl div { padding: 11px 9px; }.page-diablo-database .db-content { padding-top: 24px; }.page-diablo-database .db-tabs a { flex: 1; min-width: 0; }.page-diablo-database .db-filter { padding: 13px; grid-template-columns: 1fr; }.page-diablo-database .db-filter .db-search,
.page-diablo-database .db-filter button { grid-column: auto; }.page-diablo-database .db-result-heading small { display: none; }.page-diablo-database .db-card { grid-template-columns: 82px minmax(0, 1fr); }.page-diablo-database .db-card-image { min-height: 138px; }.page-diablo-database .db-card-image img { width: 64px; height: 64px; }
}


/* 2026-08-26 cool palette refresh: diablo database */
.page-diablo-database {
    --db-ink: #202633;
    --db-muted: #717a89;
    --db-line: #d8dfe8;
    --db-paper: #f3f5f8;
    --db-surface: #fbfcfe;
    --db-dark: #343c4d;
    --db-red: #eb6f70;
}
.page-diablo-database .db-hero {
    background: #31394c;
    border-bottom-color: #465066;
}
.page-diablo-database .db-hero-inner {
    background: linear-gradient(90deg, rgba(49,57,76,.97), rgba(49,57,76,.76)), url("/assets/img/diablo4-pattern.svg") right 12% center / 360px auto no-repeat;
}
.page-diablo-database .db-hero p,
.page-diablo-database .db-card-copy > span {
    color: #f08a88;
}
.page-diablo-database .db-tabs {
    border-bottom-color: #c9d2de;
}
.page-diablo-database .db-tabs a.is-current,
.page-diablo-database .db-filter,
.page-diablo-database .db-card,
.page-diablo-database .db-empty,
.page-diablo-database .db-pagination a {
    border-color: var(--db-line);
}
.page-diablo-database .db-card footer {
    background: #f2f5f9;
}

/* Database rarity colors + planner-identical hover item tooltip */
body.page-diablo-database .db-card-copy .db-rarity-line {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 9px;
    line-height: 1.25;
}
body.page-diablo-database .db-card-copy .db-rarity-line b,
body.page-diablo-database .db-card-copy .db-rarity-line i {
    font: inherit;
    font-style: normal;
    font-weight: 750;
}
body.page-diablo-database .db-card-copy .db-rarity-line i {
    overflow: hidden;
    color: #858991;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.page-diablo-database .db-card-copy .db-rarity-line i::before {
    content: "·";
    margin-right: 5px;
    color: #565a61;
}
body.page-diablo-database .db-card.rarity-mythic .db-card-copy .db-rarity-line b,
body.page-diablo-database .db-card.rarity-mythic .db-card-copy h2 a {
    color: #c69ad8 !important;
}
body.page-diablo-database .db-card.rarity-unique .db-card-copy .db-rarity-line b,
body.page-diablo-database .db-card.rarity-unique .db-card-copy h2 a {
    color: #d3aa78 !important;
}
body.page-diablo-database .db-card.rarity-aspect .db-card-copy .db-rarity-line b,
body.page-diablo-database .db-card.rarity-aspect .db-card-copy h2 a {
    color: #f0a31a !important;
}
body.page-diablo-database .db-card.rarity-mythic { border-top-color: #9d73b2 !important; }
body.page-diablo-database .db-card.rarity-unique { border-top-color: #8d6f4a !important; }
body.page-diablo-database .db-card.rarity-aspect { border-top-color: #9b6818 !important; }

body.page-diablo-database .db-pointer-tooltip {
    position: fixed;
    z-index: 2147483000;
    pointer-events: none;
}
body.page-diablo-database .db-pointer-tooltip[hidden] { display: none !important; }
body.page-diablo-database .db-card > template { display: none !important; }

/* Keep these values in sync with the build planner item tooltip. */
body.page-diablo-database .planner-item-tooltip {
    width: 340px !important;
    max-width: min(340px, calc(100vw - 24px)) !important;
    max-height: min(520px, calc(100vh - 24px)) !important;
    overflow: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    padding: 13px 13px 11px !important;
    border: 1px solid #454852 !important;
    border-radius: 0 !important;
    background: #1b1d22 !important;
    color: #c9cbd0 !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.55) !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
}
body.page-diablo-database .planner-item-tooltip-head {
    min-height: 76px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 66px !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #50535d !important;
}
body.page-diablo-database .planner-item-tooltip-titleblock {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}
body.page-diablo-database .planner-item-tooltip-titleblock strong {
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #d3aa78 !important;
}
body.page-diablo-database .planner-item-tooltip-titleblock em {
    margin-top: 4px !important;
    color: #d3aa78 !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 700 !important;
}
body.page-diablo-database .planner-item-tooltip.is-mythic .planner-item-tooltip-titleblock strong,
body.page-diablo-database .planner-item-tooltip.is-mythic .planner-item-tooltip-titleblock em {
    color: #c69ad8 !important;
}
body.page-diablo-database .planner-item-tooltip.is-aspect .planner-item-tooltip-titleblock strong,
body.page-diablo-database .planner-item-tooltip.is-aspect .planner-item-tooltip-titleblock em {
    color: #f0a31a !important;
}
body.page-diablo-database .planner-item-tooltip-titleblock small {
    margin-top: 2px !important;
    color: #9a9ca3 !important;
    font-size: 12px !important;
}
body.page-diablo-database .planner-item-tooltip-art {
    width: 58px !important;
    height: 58px !important;
    object-fit: contain !important;
    justify-self: end !important;
    background: transparent !important;
}
body.page-diablo-database .planner-tooltip-group,
body.page-diablo-database .planner-item-tooltip-effect {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    padding: 11px 0 !important;
    border-bottom: 1px solid #50535d !important;
}
body.page-diablo-database .planner-tooltip-group-title {
    color: #8c8f97 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}
body.page-diablo-database .planner-tooltip-group-lines {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}
body.page-diablo-database .planner-tooltip-option-line {
    display: grid !important;
    grid-template-columns: 18px minmax(0,1fr) !important;
    gap: 5px !important;
    align-items: start !important;
    color: #c7c9ce !important;
    font-size: 13px !important;
}
body.page-diablo-database .planner-tooltip-line-prefix {
    width: 18px !important;
    min-height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.page-diablo-database .planner-tooltip-line-bullet {
    color: #8f7448 !important;
    font-size: 18px !important;
    line-height: 12px !important;
}
body.page-diablo-database .planner-item-tooltip-effect.is-primary {
    color: #e5a91b !important;
}
body.page-diablo-database .planner-item-tooltip-effect-line {
    display: grid !important;
    grid-template-columns: 16px minmax(0,1fr) !important;
    gap: 4px !important;
    color: #d3aa78 !important;
    font-size: 13px !important;
}
body.page-diablo-database .planner-item-tooltip-effect-line b {
    color: #d8a72e !important;
    font-size: 14px !important;
}
body.page-diablo-database .planner-item-tooltip.is-mythic .planner-item-tooltip-effect-line {
    color: #c69ad8 !important;
}
body.page-diablo-database .planner-item-tooltip.is-mythic .planner-item-tooltip-effect-line b {
    color: #bc84d3 !important;
}
body.page-diablo-database .planner-item-tooltip.is-aspect .planner-item-tooltip-effect-line {
    color: #e5a91b !important;
}
body.page-diablo-database .planner-item-tooltip::-webkit-scrollbar { width: 7px !important; }
body.page-diablo-database .planner-item-tooltip::-webkit-scrollbar-track { background: #191a1f !important; }
body.page-diablo-database .planner-item-tooltip::-webkit-scrollbar-thumb { background: #50535a !important; border-radius: 6px !important; }

@media (max-width: 720px), (hover: none) {
    body.page-diablo-database .db-pointer-tooltip { display: none !important; }
}

/* Final parity with the current build-planner tooltip. */
body.page-diablo-database .planner-item-tooltip {
    width: 400px !important;
    max-width: min(400px, calc(100vw - 24px)) !important;
    max-height: min(600px, calc(100dvh - 28px)) !important;
    overflow-y: auto !important;
    padding: 14px 16px 12px !important;
    background: #18191e !important;
    border: 1px solid #474a52 !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.62) !important;
}
body.page-diablo-database .planner-item-tooltip-head {
    min-height: 64px !important;
    grid-template-columns: minmax(0,1fr) 58px !important;
    gap: 10px !important;
    padding-bottom: 10px !important;
    border-bottom-color: #44464e !important;
}
body.page-diablo-database .planner-item-tooltip-titleblock {
    display: grid !important;
    align-content: start !important;
    gap: 1px !important;
    min-width: 0 !important;
}
body.page-diablo-database .planner-item-tooltip-titleblock strong {
    margin: 0 !important;
    line-height: 1.22 !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}
body.page-diablo-database .planner-tooltip-group,
body.page-diablo-database .planner-item-tooltip-effect {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 9px 0 !important;
    margin: 0 !important;
    border-bottom-color: #44464e !important;
}
body.page-diablo-database .planner-tooltip-group-title {
    color: #777980 !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
}
body.page-diablo-database .planner-tooltip-group-lines {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
body.page-diablo-database .planner-tooltip-option-line {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.38 !important;
}
body.page-diablo-database .planner-tooltip-line-prefix {
    display: inline-flex !important;
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 18px !important;
    min-width: 17px !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 18px !important;
    overflow: visible !important;
}
body.page-diablo-database .planner-tooltip-line-prefix .planner-tooltip-line-bullet {
    display: inline-block !important;
    width: 17px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #b4b6bc !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    text-align: center !important;
}
body.page-diablo-database .planner-tooltip-line-text {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #d0d1d5 !important;
    line-height: 1.38 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}
body.page-diablo-database .planner-item-tooltip-effect-line {
    grid-template-columns: 17px minmax(0,1fr) !important;
    gap: 5px !important;
    line-height: 1.38 !important;
}
body.page-diablo-database .planner-item-tooltip-effect-line > span,
body.page-diablo-database .planner-item-tooltip-effect.is-primary > span {
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}