.page-diablo-planner {
    --planner-ink: #202329;
    --planner-muted: #747a82;
    --planner-line: #d9d7d1;
    --planner-paper: #fff;
    --planner-canvas: #f4f2ed;
    --planner-blue: #315f91;
    --planner-red: #a94437;
    --planner-gold: #a77b2f;
    --planner-dark: #1d2025;
    background: var(--planner-canvas);
    color: var(--planner-ink);
}

.page-diablo-planner .planner-page {
    min-height: 760px;
    padding: 42px 24px 76px;
}

.page-diablo-planner .planner-shell {
    width: min(1220px, 100%);
    margin: 0 auto;
}

.page-diablo-planner .planner-titlebar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 25px;
}

.page-diablo-planner .planner-titlebar p,
.page-diablo-planner .planner-mechanic header p {
    margin: 0 0 6px;
    color: var(--planner-red);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .13em;
}

.page-diablo-planner .planner-titlebar h1 {
    margin: 0;
    font-size: clamp(30px, 4vw, 45px);
    line-height: 1.1;
    letter-spacing: -.055em;
}

.page-diablo-planner .planner-titlebar > div:first-child > span {
    display: block;
    margin-top: 9px;
    color: var(--planner-muted);
    font-size: 13px;
}

.page-diablo-planner .planner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.page-diablo-planner .planner-actions button {
    min-height: 38px;
    border: 1px solid #c9c7c1;
    background: #fff;
    padding: 0 14px;
    color: #4f555d;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.page-diablo-planner .planner-actions button:first-child {
    border-color: var(--planner-blue);
    background: var(--planner-blue);
    color: #fff;
}

.page-diablo-planner .planner-actions button:hover {
    border-color: #858a90;
}

.page-diablo-planner .planner-build-settings {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 190px 230px;
    gap: 10px;
    border: 1px solid var(--planner-line);
    background: #fff;
    padding: 14px;
}

.page-diablo-planner .planner-build-settings label {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.page-diablo-planner .planner-build-settings label > span {
    color: #6e747c;
    font-size: 13px;
    font-weight: 500;
}

.page-diablo-planner .planner-build-settings input,
.page-diablo-planner .planner-build-settings select {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    border: 1px solid #c8c6c0;
    border-radius: 0;
    background: #fff;
    padding: 0 11px;
    color: #333840;
    font: inherit;
    font-size: 14px;
}

.page-diablo-planner .planner-build-name input {
    border-color: #aaa69e;
    font-weight: 500;
}

.page-diablo-planner .planner-classbar {
    display: grid;
    grid-template-columns: repeat(8, minmax(110px, 1fr));
    overflow: hidden;
    border: 1px solid var(--planner-line);
    background: #fff;
}

.page-diablo-planner .planner-classbar button {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-right: 1px solid var(--planner-line);
    background: #fff;
    color: #545a62;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.page-diablo-planner .planner-classbar button:last-child {
    border-right: 0;
}

.page-diablo-planner .planner-classbar button > span {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 1px solid #c7c3ba;
    color: #777267;
    font-size: 13px;
}

.page-diablo-planner .planner-classbar button.is-current {
    background: var(--planner-dark);
    color: #fff;
}

.page-diablo-planner .planner-classbar button.is-current > span {
    border-color: #b57c70;
    background: var(--planner-red);
    color: #fff;
}

.page-diablo-planner .planner-status {
    min-height: 34px;
    padding: 9px 12px;
    color: #777d84;
    font-size: 13px;
}

.page-diablo-planner .planner-status[data-tone="success"] {
    color: #476c55;
}

.page-diablo-planner .planner-status[data-tone="error"] {
    color: #a33c37;
}

.page-diablo-planner .planner-build-card {
    border: 1px solid #cfcdc7;
    background: var(--planner-paper);
    box-shadow: 0 12px 32px rgba(31, 34, 39, .07);
}

.page-diablo-planner .planner-season {
    display: grid;
    min-width: 180px;
    gap: 5px;
}

.page-diablo-planner .planner-season > span {
    color: #777d84;
    font-size: 13px;
    font-weight: 500;
}

.page-diablo-planner .planner-build-settings select,
.page-diablo-planner .planner-mechanic select,
.page-diablo-planner .planner-item-dialog select,
.page-diablo-planner .planner-item-dialog input {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    border: 1px solid #c8c6c0;
    border-radius: 0;
    background: #fff;
    padding: 0 10px;
    color: #333840;
    font: inherit;
    font-size: 13px;
}

.page-diablo-planner .planner-section-tabs {
    display: flex;
    min-height: 45px;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--planner-line);
    border-bottom: 1px solid var(--planner-line);
    background: #f5f4f1;
    padding-right: 20px;
}

.page-diablo-planner .planner-section-tabs > div {
    display: flex;
    min-height: 44px;
}

.page-diablo-planner .planner-section-tabs button {
    align-self: stretch;
    border: 0;
    border-right: 1px solid var(--planner-line);
    border-bottom: 3px solid transparent;
    background: transparent;
    padding: 0 20px;
    color: #6d737a;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.page-diablo-planner .planner-section-tabs button span {
    margin-right: 5px;
    color: #92969b;
}

.page-diablo-planner .planner-section-tabs button.is-current {
    border-bottom-color: var(--planner-red);
    background: #fff;
    color: #2d3238;
}

.page-diablo-planner .planner-section-tabs button.is-current span {
    color: var(--planner-red);
}

.page-diablo-planner .planner-section-tabs > span {
    color: #868b91;
    font-size: 13px;
}

.page-diablo-planner .planner-equipment-board {
    display: grid;
    min-height: 590px;
    grid-template-columns: minmax(250px, 310px) minmax(300px, 1fr) minmax(250px, 310px);
    gap: 24px;
    align-items: center;
    border-bottom: 1px solid var(--planner-line);
    background: #f0eee9;
    padding: 28px 26px 30px;
}

.page-diablo-planner .planner-slot-column {
    display: grid;
    align-content: center;
    gap: 8px;
}

.page-diablo-planner .planner-gear-slot {
    position: relative;
    display: grid;
    min-height: 72px;
    grid-template-columns: 58px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 10px;
    border: 1px solid #d2d0ca;
    background: #fff;
    padding: 6px;
    color: #30353b;
    cursor: pointer;
    text-align: left;
}

.page-diablo-planner .planner-gear-slot:hover,
.page-diablo-planner .planner-gear-slot.is-current {
    z-index: 6;
    border-color: #a86a5f;
    background: #fffdf9;
}

.page-diablo-planner .planner-slot-tile {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid #c6c2ba;
    background: #eeece6;
    overflow: hidden;
}

.page-diablo-planner .planner-slot-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-diablo-planner .planner-slot-tile i {
    color: #8d8981;
    font-family: Georgia, serif;
    font-size: 20px;
    font-style: normal;
}

.page-diablo-planner .planner-gear-slot.is-legendary .planner-slot-tile {
    border-color: #8e6b2f;
}

.page-diablo-planner .planner-gear-slot.is-unique .planner-slot-tile {
    border-color: #a7803f;
    box-shadow: inset 0 0 0 2px rgba(167, 128, 63, .2);
}

.page-diablo-planner .planner-slot-copy {
    min-width: 0;
}

.page-diablo-planner .planner-slot-copy small,
.page-diablo-planner .planner-slot-copy strong,
.page-diablo-planner .planner-slot-copy em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-diablo-planner .planner-slot-copy small {
    color: #343940;
    font-size: 14px;
}

.page-diablo-planner .planner-slot-copy strong {
    margin-top: 4px;
    color: #898e94;
    font-size: 13px;
}

.page-diablo-planner .planner-gear-slot.is-legendary .planner-slot-copy strong {
    color: #d6b777;
}

.page-diablo-planner .planner-gear-slot.is-unique .planner-slot-copy strong {
    color: #d7a743;
}

.page-diablo-planner .planner-slot-copy em {
    margin-top: 2px;
    color: #818894;
    font-size: 12px;
    font-style: normal;
}

.page-diablo-planner .planner-slot-edit {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid #b9b6af;
    color: #777d84;
    font-size: 14px;
}

.page-diablo-planner .planner-gear-slot[data-side="right"] {
    grid-template-columns: 22px minmax(0, 1fr) 58px;
}

.page-diablo-planner .planner-gear-slot[data-side="right"] .planner-slot-tile {
    grid-column: 3;
    grid-row: 1;
}

.page-diablo-planner .planner-gear-slot[data-side="right"] .planner-slot-copy {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
}

.page-diablo-planner .planner-gear-slot[data-side="right"] .planner-slot-edit {
    grid-column: 1;
    grid-row: 1;
}

.page-diablo-planner .planner-slot-tooltip {
    position: absolute;
    z-index: 40;
    top: 50%;
    left: calc(100% + 12px);
    display: none;
    box-sizing: border-box;
    width: 310px;
    max-height: 390px;
    overflow: hidden;
    border: 1px solid #4a4f56;
    background: #24272c;
    padding: 13px;
    color: #e8eaed;
    box-shadow: 0 14px 34px rgba(32, 35, 41, .25);
    pointer-events: none;
    text-align: left;
    transform: translateY(-50%);
}

.page-diablo-planner .planner-gear-slot[data-side="right"] .planner-slot-tooltip {
    right: calc(100% + 12px);
    left: auto;
}

.page-diablo-planner .planner-gear-slot:hover .planner-slot-tooltip,
.page-diablo-planner .planner-gear-slot:focus-visible .planner-slot-tooltip {
    display: block;
}

.page-diablo-planner .planner-tooltip-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid #454a51;
    padding-bottom: 10px;
}

.page-diablo-planner .planner-tooltip-head img {
    width: 44px;
    height: 44px;
    border: 1px solid #a27d3c;
    background: #181a1e;
    object-fit: cover;
}

.page-diablo-planner .planner-tooltip-head small,
.page-diablo-planner .planner-tooltip-head strong,
.page-diablo-planner .planner-tooltip-head em {
    display: block;
}

.page-diablo-planner .planner-tooltip-head small {
    color: #9da3aa;
    font-size: 12px;
}

.page-diablo-planner .planner-tooltip-head strong {
    margin-top: 2px;
    color: #d8b46d;
    font-size: 14px;
}

.page-diablo-planner .planner-tooltip-head em {
    margin-top: 3px;
    color: #828992;
    font-size: 11px;
    font-style: normal;
}

.page-diablo-planner .planner-tooltip-effect {
    display: block;
    border-bottom: 1px solid #454a51;
    padding: 10px 0;
    color: #c7cbd0;
    font-size: 12px;
    line-height: 1.5;
}

.page-diablo-planner .planner-tooltip-options {
    display: grid;
    gap: 5px;
    padding-top: 10px;
}

.page-diablo-planner .planner-tooltip-options > span {
    display: block;
    border-left: 2px solid #7997b8;
    padding-left: 7px;
    color: #bfc4ca;
    font-size: 11px;
    line-height: 1.4;
}

.page-diablo-planner .planner-tooltip-empty {
    display: block;
    padding-top: 10px;
    color: #8e949c;
    font-size: 12px;
}

.page-diablo-planner .planner-board-center {
    display: grid;
    min-width: 0;
    place-items: center;
    align-content: center;
    color: #2f343a;
    text-align: center;
}

.page-diablo-planner .planner-board-orbit {
    position: relative;
    display: grid;
    width: min(280px, 100%);
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid #353941;
    border-radius: 50%;
    box-shadow: inset 0 0 0 38px #202329, inset 0 0 0 40px #2c3036;
}

.page-diablo-planner .planner-board-orbit::before,
.page-diablo-planner .planner-board-orbit::after {
    content: '';
    position: absolute;
    width: 64%;
    height: 64%;
    border: 1px solid #3a3e46;
    border-radius: 50%;
}

.page-diablo-planner .planner-board-orbit::after {
    width: 86%;
    height: 1px;
    border: 0;
    border-top: 1px solid #343840;
    border-radius: 0;
    transform: rotate(-35deg);
}

.page-diablo-planner .planner-board-orbit > span {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    border: 1px solid #85664a;
    background: #3d2528;
    color: #dbbc87;
    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 500;
}

.page-diablo-planner .planner-board-center p {
    margin: 0 0 7px;
    color: var(--planner-red);
    font-size: 13px;
    letter-spacing: .08em;
}

.page-diablo-planner .planner-board-center > strong {
    max-width: 280px;
    font-size: 18px;
    line-height: 1.35;
}

.page-diablo-planner .planner-board-center > small {
    margin-top: 14px;
    color: #7b8087;
    font-size: 13px;
}

.page-diablo-planner .planner-season-effects {
    display: grid;
    width: min(290px, 100%);
    gap: 7px;
    margin-top: 18px;
}

.page-diablo-planner .planner-season-effects > span:not(.planner-season-empty) {
    display: grid;
    min-height: 54px;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    border: 1px solid #d1cec7;
    background: #fff;
    padding: 7px 9px;
    text-align: left;
}

.page-diablo-planner .planner-season-effects i {
    display: grid;
    width: 27px;
    height: 27px;
    grid-row: 1 / 3;
    place-items: center;
    border: 1px solid #b98176;
    background: #f3e4df;
    color: var(--planner-red);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
}

.page-diablo-planner .planner-season-effects b {
    font-size: 13px;
}

.page-diablo-planner .planner-season-effects small {
    color: #92969b;
    font-size: 12px;
}

.page-diablo-planner .planner-season-empty {
    border: 1px solid #d1cec7;
    background: #fff;
    padding: 18px 12px;
    color: #7d8288;
    font-size: 13px;
}

.page-diablo-planner .planner-mechanic {
    padding: 22px;
}

.page-diablo-planner .planner-mechanic > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--planner-line);
    padding-bottom: 12px;
}

.page-diablo-planner .planner-mechanic h2 {
    margin: 0;
    font-size: 18px;
}

.page-diablo-planner .planner-mechanic > header > span {
    color: #888d94;
    font-size: 13px;
}

.page-diablo-planner .planner-mechanic-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding-top: 14px;
}

.page-diablo-planner .planner-mechanic-fields label {
    display: grid;
    gap: 5px;
}

.page-diablo-planner .planner-mechanic-fields label > span,
.page-diablo-planner .planner-mechanic-fields legend {
    color: #6e747c;
    font-size: 13px;
    font-weight: 500;
}

.page-diablo-planner .planner-mechanic-fields fieldset {
    margin: 0;
    border: 1px solid var(--planner-line);
    padding: 8px;
}

.page-diablo-planner .planner-mechanic-fields fieldset > div {
    display: flex;
    gap: 4px;
}

.page-diablo-planner .planner-mechanic-fields fieldset button {
    width: 28px;
    height: 28px;
    border: 1px solid #c9c6bf;
    background: #fff;
    color: #666d75;
}

.page-diablo-planner .planner-mechanic-fields fieldset button.is-selected {
    border-color: var(--planner-blue);
    background: var(--planner-blue);
    color: #fff;
}

.page-diablo-planner .planner-mechanic-empty {
    color: #888d94;
    font-size: 13px;
}

.page-diablo-planner .planner-pane[hidden] { display: none !important; }

.page-diablo-planner .planner-tool-header {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--planner-line);
    background: #fff;
    padding: 10px 12px;
}

.page-diablo-planner .planner-point-summary {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    border: 1px solid #d2d0ca;
    background: #f5f4f1;
    padding: 0 12px;
    color: #767c83;
    font-size: 13px;
    white-space: nowrap;
}

.page-diablo-planner .planner-point-summary strong { color: var(--planner-red); font-size: 14px; }
.page-diablo-planner .planner-point-summary i { color: #b7b4ad; font-style: normal; }

.page-diablo-planner .planner-tool-search input,
.page-diablo-planner .planner-glyph-header input,
.page-diablo-planner .planner-board-actions select,
.page-diablo-planner .planner-glyph-equipped input {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    border: 1px solid #cbc8c1;
    border-radius: 0;
    background: #fff;
    padding: 0 11px;
    color: #373c43;
    font: inherit;
    font-size: 13px;
}

.page-diablo-planner .planner-canvas-actions,
.page-diablo-planner .planner-board-actions { display: flex; align-items: center; gap: 6px; }

.page-diablo-planner .planner-canvas-actions button,
.page-diablo-planner .planner-board-actions button {
    min-height: 36px;
    border: 1px solid #c8c5be;
    background: #fff;
    padding: 0 11px;
    color: #50565d;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.page-diablo-planner .planner-canvas-actions button:hover,
.page-diablo-planner .planner-board-actions button:hover:not(:disabled) { border-color: var(--planner-blue); color: var(--planner-blue); }
.page-diablo-planner .planner-board-actions button:disabled { cursor: default; opacity: .35; }

.page-diablo-planner .planner-canvas-guide {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid #d4d1ca;
    background: #f5f3ee;
    padding: 0 13px;
    color: #7c8188;
    font-size: 12px;
}

.page-diablo-planner .planner-canvas-guide span::before { content: "·"; margin-right: 6px; color: var(--planner-blue); font-weight: 600; }
.page-diablo-planner .planner-canvas-guide strong { margin-left: auto; color: #4a5057; font-size: 13px; }

.page-diablo-planner .planner-canvas-viewport {
    position: relative;
    height: clamp(820px, 86vh, 1060px);
    overflow: hidden;
    background-color: #ece9e2;
    background-image: linear-gradient(rgba(74,80,87,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(74,80,87,.045) 1px, transparent 1px);
    background-size: 24px 24px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.page-diablo-planner .planner-canvas-viewport.is-panning { cursor: grabbing; }
.page-diablo-planner .planner-canvas-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.page-diablo-planner .planner-skill-stage { width: 1020px; height: 1430px; }
.page-diablo-planner .planner-skill-viewport {
    background-color: #1a1c20;
    background-image: radial-gradient(circle at center, rgba(255,255,255,.025), transparent 58%);
}

.page-diablo-planner .planner-skill-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.page-diablo-planner .planner-skill-lines line,
.page-diablo-planner .planner-skill-lines path { fill: none; }
.page-diablo-planner .planner-skill-line-base { stroke: #303238; stroke-width: 5; }
.page-diablo-planner .planner-skill-line-inner { stroke: #202227; stroke-width: 3; }
.page-diablo-planner .planner-skill-line-base.is-active { stroke: #620c13; stroke-width: 6; }
.page-diablo-planner .planner-skill-line-inner.is-active { stroke: #d10e1c; stroke-width: 3; }

.page-diablo-planner .planner-skill-node,
.page-diablo-planner .planner-skill-gate,
.page-diablo-planner .planner-skill-junction { position: absolute; z-index: 2; transform: translate(-50%, -50%); }

.page-diablo-planner .planner-skill-junction {
    box-sizing: border-box;
    width: 13px;
    height: 13px;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 1px solid #3b3e44;
    background: #202227;
    box-shadow: 0 0 0 1px #111318 inset;
}

.page-diablo-planner .planner-skill-junction::before {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid #303238;
    box-shadow: 0 0 0 1px #111318;
}

.page-diablo-planner .planner-skill-junction.is-active {
    border-color: #ef2834;
    background: #7d0b13;
    box-shadow: 0 0 0 1px #300307 inset, 0 0 7px rgba(209,14,28,.5);
}

.page-diablo-planner .planner-skill-junction.is-active::before {
    border-color: #a20e17;
    box-shadow: 0 0 0 1px #4b060b;
}

.page-diablo-planner .planner-skill-node {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    overflow: visible;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.page-diablo-planner .planner-skill-node::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #4b4e53;
    border-radius: 50%;
    background: #24262b;
    box-shadow: 0 0 0 2px #111318, inset 0 0 0 1px #17191d;
}

.page-diablo-planner .planner-skill-node img {
    position: relative;
    z-index: 1;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(.82) brightness(.52);
}

.page-diablo-planner .planner-skill-node.is-large,
.page-diablo-planner .planner-skill-node.is-large-circle { width: 64px; height: 64px; }
.page-diablo-planner .planner-skill-node.is-large::before { border-radius: 0; border-color: #62656a; box-shadow: 0 0 0 3px #111318, inset 0 0 0 2px #303238; }
.page-diablo-planner .planner-skill-node.is-large-circle::before { border-color: #62656a; box-shadow: 0 0 0 3px #111318, inset 0 0 0 2px #303238; }
.page-diablo-planner .planner-skill-node.is-large img,
.page-diablo-planner .planner-skill-node.is-large-circle img { width: 40px; height: 40px; border-radius: 0; }
.page-diablo-planner .planner-skill-node.is-large-circle img { border-radius: 50%; }

.page-diablo-planner .planner-skill-node.is-diamond { width: 48px; height: 48px; }
.page-diablo-planner .planner-skill-node.is-diamond::before {
    inset: 5px;
    border-radius: 0;
    transform: rotate(45deg);
}
.page-diablo-planner .planner-skill-node.is-diamond img {
    width: 31px;
    height: 31px;
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.page-diablo-planner .planner-skill-node.is-accessible::before { border-color: #8f7954; }
.page-diablo-planner .planner-skill-node.is-active::before {
    border-color: #b51c26;
    background: #2a1b1e;
    box-shadow: 0 0 0 3px #3f090d, inset 0 0 0 1px #de2530;
}
.page-diablo-planner .planner-skill-node.is-active img { filter: none; }

.page-diablo-planner .planner-skill-node > b {
    position: absolute;
    z-index: 4;
    right: auto;
    bottom: -14px;
    left: 50%;
    min-width: 22px;
    transform: translateX(-50%);
    border: 1px solid #566486;
    border-radius: 3px;
    background: #11141b;
    padding: 2px 3px;
    color: #f0f2f5;
    font-size: 11px;
    line-height: 1.15;
    white-space: nowrap;
}

.page-diablo-planner .planner-skill-node.is-active > b { border-color: #ff4b55; background: #d51621; color: #fff; }

.page-diablo-planner .planner-skill-gate {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    border: 0;
    background: transparent;
    color: #8f9399;
    font-size: 12px;
    font-weight: 600;
}

.page-diablo-planner .planner-skill-gate::before {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    border: 2px solid #474a50;
    background: #202227;
    box-shadow: 0 0 0 3px #111318, inset 0 0 0 1px #303238;
    transform: rotate(45deg);
}
.page-diablo-planner .planner-skill-gate span { position: relative; z-index: 1; }
.page-diablo-planner .planner-skill-gate.is-open { color: #e8c6c8; }
.page-diablo-planner .planner-skill-gate.is-open::before { border-color: #8f1b22; background: #291b1e; }
.page-diablo-planner .is-filtered { opacity: .16 !important; }

.page-diablo-planner .planner-node-tooltip {
    position: absolute;
    z-index: 30;
    top: calc(100% + 10px);
    left: 50%;
    display: none;
    width: 260px;
    transform: translateX(-50%);
    border: 1px solid #514d46;
    background: #fff;
    padding: 11px;
    color: #3c4147;
    box-shadow: 0 12px 30px rgba(0,0,0,.22);
    pointer-events: none;
    text-align: left;
}

.page-diablo-planner .planner-skill-node .planner-node-tooltip {
    top: calc(100% + 22px);
    box-sizing: border-box;
    width: 352px;
    max-height: 340px;
    overflow: auto;
    border-color: #44474e;
    background: #16181c;
    padding: 15px 16px;
    color: #eef0f3;
    box-shadow: 0 16px 40px rgba(0,0,0,.48);
    transform: translateX(-50%) scale(var(--planner-canvas-inverse-scale, 1));
    transform-origin: top center;
}

.page-diablo-planner .planner-skill-node:hover,
.page-diablo-planner .planner-paragon-node:hover { z-index: 20; }

.page-diablo-planner .planner-skill-node:hover .planner-node-tooltip,
.page-diablo-planner .planner-skill-node:focus-visible .planner-node-tooltip,
.page-diablo-planner .planner-paragon-node:hover .planner-node-tooltip,
.page-diablo-planner .planner-paragon-node:focus-visible .planner-node-tooltip { display: grid; gap: 4px; }

.page-diablo-planner .planner-node-tooltip strong { color: #773d35; font-size: 14px; }
.page-diablo-planner .planner-node-tooltip em,
.page-diablo-planner .planner-node-tooltip i { color: #35628e; font-size: 11px; font-style: normal; }
.page-diablo-planner .planner-node-tooltip small { color: #686e75; font-size: 12px; line-height: 1.5; }
.page-diablo-planner .planner-skill-node .planner-node-tooltip strong { color: #f2f3f5; font-size: 14px; }
.page-diablo-planner .planner-skill-node .planner-node-tooltip em {
    display: block;
    border-top: 1px solid #35383e;
    border-bottom: 1px solid #35383e;
    margin: 5px 0;
    padding: 7px 0;
    color: #bcae91;
    font-size: 12px;
    line-height: 1.45;
}
.page-diablo-planner .planner-skill-node .planner-node-tooltip small {
    display: block;
    color: #d6d9dd;
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-line;
}
.page-diablo-planner .planner-skill-node .planner-node-tooltip i {
    display: block;
    border-top: 1px solid #35383e;
    margin-top: 6px;
    padding-top: 8px;
    color: #83a9d1;
    font-size: 12px;
}

.page-diablo-planner .planner-paragon-controls {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--planner-line);
    background: #f8f7f4;
    padding: 8px 12px;
}

.page-diablo-planner .planner-board-tabs { display: flex; min-width: 0; gap: 5px; overflow-x: auto; }
.page-diablo-planner .planner-board-tabs button {
    display: grid;
    min-width: 120px;
    min-height: 42px;
    grid-template-columns: 25px 1fr;
    align-items: center;
    gap: 7px;
    border: 1px solid #cfccc5;
    background: #fff;
    padding: 5px 8px;
    color: #545a61;
    cursor: pointer;
    text-align: left;
}

.page-diablo-planner .planner-board-tabs button span { display: grid; width: 24px; height: 24px; place-items: center; background: #e9e6df; font-size: 12px; }
.page-diablo-planner .planner-board-tabs button strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.page-diablo-planner .planner-board-tabs button.is-current { border-color: var(--planner-red); background: #fff9f7; }
.page-diablo-planner .planner-board-actions label { display: grid; gap: 3px; }
.page-diablo-planner .planner-board-actions label span { color: #7b8087; font-size: 11px; }
.page-diablo-planner .planner-board-actions select { width: 165px; min-height: 34px; }

.page-diablo-planner .planner-paragon-viewport {
    background: #17191d;
}

.page-diablo-planner .planner-paragon-stage { width: 1381px; height: 1381px; }

.page-diablo-planner .planner-paragon-board-panel {
    position: absolute;
    box-sizing: border-box;
    border: 3px solid #8c3034;
    background-color: #111316;
    box-shadow: 0 0 0 1px #1c080a, inset 0 0 80px rgba(0,0,0,.65);
    overflow: visible;
}

.page-diablo-planner .planner-paragon-board-panel.is-current {
    border-color: #c24449;
    box-shadow: 0 0 0 1px #30090b, 0 0 22px rgba(150,29,35,.22), inset 0 0 80px rgba(0,0,0,.55);
}

.page-diablo-planner .planner-paragon-board-texture {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-image:
        radial-gradient(circle at 50% 47%, rgba(92,96,104,.16), transparent 50%),
        radial-gradient(circle at 25% 20%, rgba(152,156,164,.10) 0 1px, transparent 1.6px),
        radial-gradient(circle at 72% 68%, rgba(117,121,129,.09) 0 1px, transparent 1.8px),
        linear-gradient(135deg, rgba(255,255,255,.025), rgba(0,0,0,.18));
    background-position: center;
    background-size: auto, 13px 13px, 19px 19px, auto;
    opacity: .9;
    pointer-events: none;
}

.page-diablo-planner .planner-paragon-board-bridge {
    position: absolute;
    z-index: 8;
    left: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 3px solid #862e33;
    background: #17191d;
    box-shadow: 0 0 0 4px #08090b;
}

.page-diablo-planner .planner-paragon-board-title {
    position: absolute;
    z-index: 9;
    top: 8px;
    left: 8px;
    display: flex;
    min-width: 330px;
    min-height: 32px;
    align-items: center;
    gap: 9px;
    border: 1px solid #343840;
    background: rgba(22,24,29,.96);
    padding: 0 8px;
    color: #d8dbe0;
    cursor: pointer;
    text-align: left;
}

.page-diablo-planner .planner-paragon-board-title > span { display: grid; width: 27px; height: 22px; place-items: center; border: 1px solid #4d5563; background: #0e1116; color: #fff; font-size: 12px; }
.page-diablo-planner .planner-paragon-board-title strong { font-size: 13px; }
.page-diablo-planner .planner-paragon-board-title small { margin-left: auto; color: #949aa5; font-size: 12px; }
.page-diablo-planner .planner-paragon-board-panel.is-current .planner-paragon-board-title { border-color: #7d3034; }

.page-diablo-planner .planner-paragon-node {
    position: absolute;
    z-index: 3;
    display: grid;
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%);
    place-items: center;
    border: 1px solid #32363d;
    border-radius: 4px;
    background: #171a1f;
    padding: 5px;
    color: #858b94;
    cursor: pointer;
    box-shadow: inset 0 0 0 4px #0d0f12, 0 1px 5px rgba(0,0,0,.65);
}

.page-diablo-planner .planner-paragon-node img { width: 30px; height: 30px; border-radius: 2px; filter: grayscale(1) brightness(.38); object-fit: cover; }
.page-diablo-planner .planner-paragon-node.is-magic { border-color: #31597b; box-shadow: inset 0 0 0 4px #0b1118, 0 0 0 1px #152a3d; }
.page-diablo-planner .planner-paragon-node.is-rare { border-color: #8b6e20; box-shadow: inset 0 0 0 4px #151207, 0 0 0 1px #463812; }
.page-diablo-planner .planner-paragon-node.is-legendary { border-color: #82312a; box-shadow: inset 0 0 0 4px #190a09, 0 0 0 2px #451610; }
.page-diablo-planner .planner-paragon-node.is-gate { transform: translate(-50%, -50%) rotate(45deg); border-radius: 2px; }
.page-diablo-planner .planner-paragon-node.is-gate > img,
.page-diablo-planner .planner-paragon-node.is-gate > span { transform: rotate(-45deg); }
.page-diablo-planner .planner-paragon-node.is-gate .planner-node-tooltip { transform: translateX(-50%) rotate(-45deg); }
.page-diablo-planner .planner-paragon-node.is-socket { border-color: #79528a; background: #18121c; color: #bb8dcc; }
.page-diablo-planner .planner-paragon-node.is-active { border-color: #ed2631; background: #2b1013; box-shadow: inset 0 0 0 4px #28080b, 0 0 0 3px #8f1219, 0 0 12px rgba(220,18,29,.48); }
.page-diablo-planner .planner-paragon-node.is-active img { filter: none; }
.page-diablo-planner .planner-paragon-node.is-in-radius { box-shadow: inset 0 0 0 4px #152233, 0 0 0 4px rgba(58,118,166,.38); }
.page-diablo-planner .planner-paragon-node > i { position: absolute; top: 51px; left: 50%; width: 100px; transform: translateX(-50%); color: #d2a6df; font-size: 12px; font-style: normal; font-weight: 600; }
.page-diablo-planner .planner-paragon-node .planner-node-tooltip {
    width: 310px;
    border-color: #444850;
    background: #16181c;
    color: #eef0f3;
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
    transform: translateX(-50%) scale(var(--planner-canvas-inverse-scale, 1));
    transform-origin: top center;
}
.page-diablo-planner .planner-paragon-node .planner-node-tooltip strong { color: #f0d5ba; font-size: 13px; }
.page-diablo-planner .planner-paragon-node .planner-node-tooltip small { color: #d5d8dd; font-size: 13px; line-height: 1.6; }
.page-diablo-planner .planner-paragon-node.is-gate .planner-node-tooltip {
    transform: translateX(-50%) rotate(-45deg) scale(var(--planner-canvas-inverse-scale, 1));
}
.page-diablo-planner .planner-data-empty { display: grid; min-height: 220px; place-items: center; color: #7d8288; font-size: 13px; }

.page-diablo-planner .planner-glyph-pane { background: #f0eee9; padding: 20px; }
.page-diablo-planner .planner-glyph-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid #d4d1ca;
    background: #fff;
    padding: 16px;
}

.page-diablo-planner .planner-glyph-header p { margin: 0 0 4px; color: var(--planner-red); font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.page-diablo-planner .planner-glyph-header h2 { margin: 0; font-size: 20px; }
.page-diablo-planner .planner-glyph-header > div > span { display: block; margin-top: 5px; color: #777d84; font-size: 13px; }
.page-diablo-planner .planner-glyph-header > label { display: grid; width: min(320px, 42%); gap: 4px; color: #727880; font-size: 12px; }

.page-diablo-planner .planner-glyph-layout { display: grid; grid-template-columns: minmax(300px,.8fr) minmax(420px,1.2fr); gap: 12px; margin-top: 12px; }
.page-diablo-planner .planner-glyph-layout > section { min-width: 0; border: 1px solid #d4d1ca; background: #fff; }
.page-diablo-planner .planner-glyph-layout > section > header { display: flex; min-height: 43px; align-items: center; justify-content: space-between; border-bottom: 1px solid #d8d5ce; padding: 0 12px; }
.page-diablo-planner .planner-glyph-layout h3 { margin: 0; font-size: 14px; }
.page-diablo-planner .planner-glyph-layout header span { color: #81868c; font-size: 12px; }
.page-diablo-planner .planner-glyph-sockets > div,
.page-diablo-planner .planner-glyph-catalog > div { display: grid; max-height: 620px; gap: 7px; overflow-y: auto; padding: 10px; }

.page-diablo-planner .planner-glyph-socket { border: 1px solid #d8d5ce; background: #faf9f6; }
.page-diablo-planner .planner-glyph-socket.is-current { border-color: var(--planner-blue); }
.page-diablo-planner .planner-glyph-socket.is-locked { opacity: .56; }
.page-diablo-planner .planner-glyph-socket > button {
    display: grid;
    width: 100%;
    min-height: 52px;
    grid-template-columns: 32px minmax(0,1fr);
    align-items: center;
    gap: 9px;
    border: 0;
    background: transparent;
    padding: 7px;
    color: #3e444a;
    cursor: pointer;
    text-align: left;
}

.page-diablo-planner .planner-glyph-socket > button > span { display: grid; width: 30px; height: 30px; place-items: center; background: var(--planner-dark); color: #fff; font-size: 13px; }
.page-diablo-planner .planner-glyph-socket strong,
.page-diablo-planner .planner-glyph-socket small { display: block; }
.page-diablo-planner .planner-glyph-socket strong { font-size: 13px; }
.page-diablo-planner .planner-glyph-socket small { margin-top: 3px; color: #7b8087; font-size: 12px; }

.page-diablo-planner .planner-glyph-equipped { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: end; gap: 9px; border-top: 1px solid #ddd9d2; padding: 8px; }
.page-diablo-planner .planner-glyph-equipped img { width: 42px; height: 42px; border: 1px solid #775783; background: #29252c; object-fit: cover; }
.page-diablo-planner .planner-glyph-equipped label { display: grid; gap: 3px; color: #727880; font-size: 11px; }
.page-diablo-planner .planner-glyph-equipped button { min-height: 38px; border: 1px solid #d2ada7; background: #fff; color: #9b463d; cursor: pointer; font-size: 12px; }

.page-diablo-planner .planner-glyph-card {
    display: grid;
    min-height: 64px;
    grid-template-columns: 46px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #d8d5ce;
    background: #faf9f6;
    padding: 8px;
    color: #3d4249;
    cursor: pointer;
    text-align: left;
}

.page-diablo-planner .planner-glyph-card:hover:not(:disabled),
.page-diablo-planner .planner-glyph-card.is-equipped { border-color: #81618b; background: #fbf6fc; }
.page-diablo-planner .planner-glyph-card:disabled { cursor: default; opacity: .45; }
.page-diablo-planner .planner-glyph-card img { width: 46px; height: 46px; border: 1px solid #80608a; background: #29252c; object-fit: cover; }
.page-diablo-planner .planner-glyph-card strong,
.page-diablo-planner .planner-glyph-card small { display: block; }
.page-diablo-planner .planner-glyph-card strong { font-size: 13px; }
.page-diablo-planner .planner-glyph-card small { margin-top: 4px; color: #7b8087; font-size: 12px; }
.page-diablo-planner .planner-glyph-card > i { color: #73517d; font-size: 11px; font-style: normal; }

html.planner-modal-open:has(.page-diablo-planner) {
    overflow: hidden;
}

.page-diablo-planner .planner-item-dialog {
    width: clamp(760px, 66vw, 860px);
    height: clamp(540px, 72vh, 650px);
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #fff;
    padding: 0;
    color: var(--planner-ink);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .34);
}

.page-diablo-planner .planner-item-dialog::backdrop {
    background: rgba(12, 14, 17, .78);
}

.page-diablo-planner .planner-item-dialog > div {
    display: grid;
    height: 100%;
    max-height: 100%;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.page-diablo-planner .planner-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--planner-line);
    padding: 11px 15px 10px;
}

.page-diablo-planner .planner-dialog-head p {
    margin: 0 0 4px;
    color: var(--planner-red);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
}

.page-diablo-planner .planner-dialog-head h2 {
    margin: 0;
    font-size: 17px;
}

.page-diablo-planner .planner-dialog-head > button {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #676d74;
    cursor: pointer;
    font-size: 25px;
}

.page-diablo-planner .planner-dialog-mode {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--planner-line);
    background: #f5f4f1;
    padding: 4px 10px;
}

.page-diablo-planner .planner-dialog-mode > button {
    min-height: 33px;
    border: 1px solid transparent;
    background: transparent;
    padding: 0 15px;
    color: #686e75;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.page-diablo-planner .planner-dialog-mode > button.is-current {
    border-color: var(--planner-red);
    background: var(--planner-red);
    color: #fff;
}

.page-diablo-planner .planner-masterwork-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    color: #6f757c;
    font-size: 12px;
}

.page-diablo-planner .planner-masterwork-legend strong {
    color: #41464d;
    font-size: 13px;
}

.page-diablo-planner .planner-masterwork-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.page-diablo-planner .planner-masterwork-legend i,
.page-diablo-planner .planner-masterwork button {
    border-radius: 50%;
}

.page-diablo-planner .planner-masterwork-legend i {
    width: 8px;
    height: 8px;
}

.page-diablo-planner .stage-1 {
    background: #68b7dc;
}

.page-diablo-planner .stage-2 {
    background: #328cc5;
}

.page-diablo-planner .stage-3 {
    background: #e5a53b;
}

.page-diablo-planner .planner-dialog-body {
    display: grid;
    min-height: 0;
    grid-template-columns: 252px minmax(0, 1fr);
}

.page-diablo-planner .planner-choice-panel {
    display: grid;
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    border-right: 1px solid var(--planner-line);
    background: #f6f5f2;
    padding: 8px;
}

.page-diablo-planner .planner-choice-panel > label input {
    min-height: 39px;
    padding-left: 12px;
}

.page-diablo-planner .planner-choice-count {
    display: flex;
    justify-content: space-between;
    padding: 10px 2px 8px;
    color: #787e85;
    font-size: 12px;
}

.page-diablo-planner .planner-choice-count strong {
    color: #383d44;
    font-size: 13px;
}

.page-diablo-planner .planner-choice-list {
    min-height: 0;
    overflow: auto;
    border-top: 1px solid #d5d3cd;
    scrollbar-color: #a8abb0 #efeeea;
    scrollbar-width: thin;
}

.page-diablo-planner .planner-choice {
    display: grid;
    width: 100%;
    min-height: 54px;
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 9px;
    border: 0;
    border-bottom: 1px solid #d9d7d1;
    background: #fff;
    padding: 8px;
    color: #32373e;
    cursor: pointer;
    text-align: left;
}

.page-diablo-planner .planner-choice:hover,
.page-diablo-planner .planner-choice.is-selected {
    background: #e9ecef;
}

.page-diablo-planner .planner-choice.is-selected {
    box-shadow: inset 3px 0 var(--planner-blue);
}

.page-diablo-planner .planner-choice img {
    width: 38px;
    height: 38px;
    border: 1px solid #9f824a;
    background: #202329;
    object-fit: cover;
}

.page-diablo-planner .planner-choice strong,
.page-diablo-planner .planner-choice small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-diablo-planner .planner-choice small {
    margin-top: 3px;
    color: #858a91;
    font-size: 12px;
}

.page-diablo-planner .planner-choice i {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid #b4b1aa;
    color: #737981;
    font-size: 13px;
    font-style: normal;
}

.page-diablo-planner .planner-choice.is-selected i {
    border-color: var(--planner-blue);
    background: var(--planner-blue);
    color: #fff;
}

.page-diablo-planner .planner-choice-empty {
    margin: 20px 0;
    color: #888d94;
    font-size: 13px;
    text-align: center;
}

.page-diablo-planner .planner-config-panel {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 10px 20px;
    scrollbar-color: #a8abb0 #efeeea;
    scrollbar-width: thin;
}

.page-diablo-planner .planner-dialog-empty {
    display: grid;
    min-height: 210px;
    place-items: center;
    align-content: center;
    color: #777d84;
    text-align: center;
}

.page-diablo-planner .planner-dialog-empty > span {
    color: #b3b0aa;
    font-size: 46px;
}

.page-diablo-planner .planner-dialog-empty strong {
    margin-top: 8px;
    color: #42474e;
    font-size: 16px;
}

.page-diablo-planner .planner-dialog-empty p {
    max-width: 380px;
    margin: 7px 0 0;
    font-size: 13px;
    line-height: 1.6;
}

.page-diablo-planner .planner-selected-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border-bottom: 2px solid #282d33;
    padding-bottom: 16px;
}

.page-diablo-planner .planner-selected-item > img {
    width: 52px;
    height: 52px;
    border: 1px solid #a6813f;
    background: #202329;
    object-fit: cover;
}

.page-diablo-planner .planner-selected-item > div > span {
    color: var(--planner-blue);
    font-size: 12px;
    font-weight: 600;
}

.page-diablo-planner .planner-selected-item h3 {
    margin: 3px 0 4px;
    color: #805e1d;
    font-size: 18px;
}

.page-diablo-planner .planner-selected-item p {
    margin: 0;
    color: #777d84;
    font-size: 13px;
    line-height: 1.45;
}

.page-diablo-planner .planner-selected-item > label {
    display: grid;
    grid-column: 1 / -1;
    gap: 4px;
}

.page-diablo-planner .planner-selected-item > label span {
    color: #747a82;
    font-size: 12px;
    font-weight: 500;
}

.page-diablo-planner .planner-dialog-section {
    border-bottom: 1px solid var(--planner-line);
    padding: 12px 0;
}

.page-diablo-planner .planner-dialog-section > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
}

.page-diablo-planner .planner-dialog-section h3 {
    margin: 0;
    font-size: 14px;
}

.page-diablo-planner .planner-dialog-section header p {
    margin: 4px 0 0;
    color: #868b91;
    font-size: 12px;
}

.page-diablo-planner .planner-dialog-section header > span {
    color: #8a8f96;
    font-size: 12px;
}

.page-diablo-planner .planner-aspect-effect {
    border-left: 3px solid var(--planner-gold);
    background: #f5f0e4;
    padding: 12px;
}

.page-diablo-planner .planner-aspect-effect > label {
    display: grid;
    max-width: 220px;
    grid-template-columns: 1fr 90px;
    align-items: center;
    gap: 8px;
    color: #6d624b;
    font-size: 12px;
}

.page-diablo-planner .planner-option-list {
    display: grid;
    gap: 6px;
}

.page-diablo-planner .planner-option-row {
    display: grid;
    min-width: 0;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    border: 1px solid #dedcd6;
    background: #faf9f6;
    padding: 6px;
}

.page-diablo-planner .planner-greater-affix {
    width: 30px;
    height: 30px;
    border: 1px solid #c8c5be;
    background: #fff;
    color: #b0ada6;
    cursor: pointer;
    font-size: 15px;
}

.page-diablo-planner .planner-greater-affix.is-active {
    border-color: #d1a22e;
    background: #fff4cc;
    color: #d09913;
}

.page-diablo-planner .planner-greater-affix:disabled {
    cursor: default;
    opacity: .28;
}

.page-diablo-planner .planner-option-control {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(220px, 1fr) 148px;
    align-items: center;
    gap: 6px;
}

.page-diablo-planner .planner-option-control > strong {
    overflow: hidden;
    color: #41464d;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-diablo-planner .planner-option-control select {
    min-width: 0;
}

.page-diablo-planner .planner-roll {
    display: grid;
    width: 100%;
    grid-template-columns: 58px 84px;
    align-items: center;
    gap: 2px;
}

.page-diablo-planner .planner-roll > span {
    color: #8a8f96;
    font-size: 11px;
    text-align: right;
}

.page-diablo-planner .planner-roll input {
    min-height: 32px;
    text-align: right;
}

.page-diablo-planner .planner-masterwork {
    display: flex;
    align-items: center;
    grid-column: auto;
    justify-content: flex-end;
    gap: 5px;
}

.page-diablo-planner .planner-masterwork button {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: .35;
}

.page-diablo-planner .planner-masterwork button span {
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.page-diablo-planner .planner-masterwork button.is-active {
    border-color: #202329;
    box-shadow: 0 0 0 2px #fff inset;
    opacity: 1;
}

.page-diablo-planner .planner-masterwork button:disabled {
    cursor: default;
    filter: grayscale(1);
    opacity: .15;
}

.page-diablo-planner .planner-gem-section > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.page-diablo-planner .planner-dialog-footer {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-top: 1px solid var(--planner-line);
    background: #f5f4f1;
    padding: 7px 10px;
}

.page-diablo-planner .planner-dialog-footer > div {
    display: flex;
    gap: 7px;
}

.page-diablo-planner .planner-dialog-footer button {
    min-height: 36px;
    border: 1px solid #c5c2bb;
    background: #fff;
    padding: 0 17px;
    color: #4d535a;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.page-diablo-planner .planner-dialog-footer .planner-dialog-save {
    border-color: var(--planner-blue);
    background: var(--planner-blue);
    color: #fff;
}

.page-diablo-planner .planner-dialog-footer .planner-dialog-remove {
    border-color: #d4aaa4;
    color: #9f443b;
}

.page-diablo-planner .planner-dialog-footer button:disabled {
    cursor: default;
    opacity: .38;
}

.page-diablo-planner .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

@media (max-width: 1080px) {
    .page-diablo-planner .planner-classbar {
        display: flex;
        overflow-x: auto;
    }

    .page-diablo-planner .planner-classbar button {
        flex: 0 0 126px;
    }

    .page-diablo-planner .planner-equipment-board {
        grid-template-columns: 235px minmax(240px, 1fr) 235px;
        gap: 14px;
        padding-inline: 16px;
    }

    .page-diablo-planner .planner-board-orbit {
        width: min(220px, 100%);
    }

    .page-diablo-planner .planner-gear-slot {
        min-height: 66px;
        grid-template-columns: 52px minmax(0, 1fr) 18px;
        gap: 7px;
    }

    .page-diablo-planner .planner-gear-slot[data-side="right"] {
        grid-template-columns: 18px minmax(0, 1fr) 52px;
    }

    .page-diablo-planner .planner-slot-tile {
        width: 52px;
        height: 52px;
    }
}

@media (max-width: 820px) {
    .page-diablo-planner .planner-page {
        padding-inline: 16px;
    }

    .page-diablo-planner .planner-equipment-board {
        grid-template-areas: "center center" "left right";
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .page-diablo-planner .planner-slot-column-left {
        grid-area: left;
    }

    .page-diablo-planner .planner-slot-column-right {
        grid-area: right;
    }

    .page-diablo-planner .planner-board-center {
        grid-area: center;
        padding: 8px 0 22px;
    }

    .page-diablo-planner .planner-board-orbit {
        width: 180px;
    }

    .page-diablo-planner .planner-mechanic-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-diablo-planner .planner-tool-header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .page-diablo-planner .planner-canvas-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .page-diablo-planner .planner-paragon-controls {
        display: grid;
    }

    .page-diablo-planner .planner-board-actions {
        flex-wrap: wrap;
    }

    .page-diablo-planner .planner-canvas-viewport {
        height: 740px;
    }

    .page-diablo-planner .planner-glyph-layout {
        grid-template-columns: 1fr;
    }

    .page-diablo-planner .planner-item-dialog {
        width: calc(100vw - 20px);
        height: min(76dvh, 650px);
        max-width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
    }

    .page-diablo-planner .planner-item-dialog > div {
        height: 100%;
        max-height: 100%;
    }

    .page-diablo-planner .planner-dialog-body {
        grid-template-columns: 245px minmax(0, 1fr);
    }

    .page-diablo-planner .planner-option-row {
        grid-template-columns: 30px minmax(0, 1fr) auto;
    }

    .page-diablo-planner .planner-masterwork {
        grid-column: auto;
        justify-content: flex-end;
    }

    .page-diablo-planner .planner-option-control {
        grid-template-columns: minmax(180px, 1fr) 140px;
    }

    .page-diablo-planner .planner-selected-item {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .page-diablo-planner .planner-selected-item > img {
        width: 56px;
        height: 56px;
    }

    .page-diablo-planner .planner-selected-item > label {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .page-diablo-planner .planner-page {
        padding: 26px 10px 48px;
    }

    .page-diablo-planner .planner-titlebar {
        display: block;
    }

    .page-diablo-planner .planner-titlebar h1 {
        font-size: 31px;
    }

    .page-diablo-planner .planner-titlebar > div:first-child > span {
        font-size: 13px;
        line-height: 1.5;
    }

    .page-diablo-planner .planner-actions {
        display: grid;
        grid-template-columns: 1.3fr 1fr 1fr;
        margin-top: 17px;
    }

    .page-diablo-planner .planner-actions button {
        padding-inline: 5px;
    }

    .page-diablo-planner .planner-build-settings {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px;
    }

    .page-diablo-planner .planner-build-name {
        grid-column: 1 / -1;
    }

    .page-diablo-planner .planner-season {
        grid-column: 1 / -1;
    }

    .page-diablo-planner .planner-section-tabs {
        padding-right: 0;
    }

    .page-diablo-planner .planner-section-tabs > div {
        width: 100%;
        overflow-x: auto;
    }

    .page-diablo-planner .planner-section-tabs button {
        flex: 0 0 auto;
        min-height: 44px;
        padding-inline: 14px;
    }

    .page-diablo-planner .planner-section-tabs > span {
        display: none;
    }

    .page-diablo-planner .planner-equipment-board {
        grid-template-areas: "center" "left" "right";
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 18px 12px;
    }

    .page-diablo-planner .planner-board-center {
        padding-bottom: 17px;
    }

    .page-diablo-planner .planner-board-orbit {
        width: 150px;
        box-shadow: inset 0 0 0 28px #202329, inset 0 0 0 30px #2c3036;
    }

    .page-diablo-planner .planner-board-center p {
        margin-top: 0;
    }

    .page-diablo-planner .planner-gear-slot[data-side="right"] {
        grid-template-columns: 52px minmax(0, 1fr) 18px;
    }

    .page-diablo-planner .planner-gear-slot[data-side="right"] .planner-slot-tile {
        grid-column: 1;
    }

    .page-diablo-planner .planner-gear-slot[data-side="right"] .planner-slot-copy {
        grid-column: 2;
        text-align: left;
    }

    .page-diablo-planner .planner-gear-slot[data-side="right"] .planner-slot-edit {
        grid-column: 3;
    }

    .page-diablo-planner .planner-mechanic {
        padding: 16px 13px;
    }

    .page-diablo-planner .planner-mechanic-fields {
        grid-template-columns: 1fr;
    }

    .page-diablo-planner .planner-tool-header {
        grid-template-columns: 1fr;
    }

    .page-diablo-planner .planner-canvas-actions {
        grid-column: auto;
        justify-content: stretch;
    }

    .page-diablo-planner .planner-canvas-actions button {
        flex: 1;
    }

    .page-diablo-planner .planner-canvas-guide {
        gap: 8px;
    }

    .page-diablo-planner .planner-canvas-guide span:nth-child(2),
    .page-diablo-planner .planner-canvas-guide span:nth-child(3) {
        display: none;
    }

    .page-diablo-planner .planner-canvas-viewport {
        height: 620px;
    }

    .page-diablo-planner .planner-skill-node .planner-node-tooltip {
        width: 300px;
        max-height: 300px;
    }

    .page-diablo-planner .planner-board-actions label {
        width: 100%;
    }

    .page-diablo-planner .planner-board-actions select {
        width: 100%;
    }

    .page-diablo-planner .planner-glyph-pane {
        padding: 10px;
    }

    .page-diablo-planner .planner-glyph-header {
        display: block;
    }

    .page-diablo-planner .planner-glyph-header > label {
        width: 100%;
        margin-top: 13px;
    }

    .page-diablo-planner .planner-item-dialog {
        width: calc(100vw - 16px);
        height: min(84dvh, 650px);
        max-height: calc(100dvh - 16px);
        margin: auto;
    }

    .page-diablo-planner .planner-item-dialog > div {
        display: grid;
        height: 100%;
        max-height: 100%;
    }

    .page-diablo-planner .planner-dialog-head {
        padding: 13px 14px;
    }

    .page-diablo-planner .planner-dialog-head h2 {
        font-size: 17px;
    }

    .page-diablo-planner .planner-dialog-mode {
        position: sticky;
        z-index: 4;
        top: 0;
        flex-wrap: wrap;
        padding: 6px 9px;
    }

    .page-diablo-planner .planner-dialog-mode > button {
        flex: 1;
    }

    .page-diablo-planner .planner-masterwork-legend {
        width: 100%;
        justify-content: flex-end;
        padding: 3px 4px;
    }

    .page-diablo-planner .planner-dialog-body {
        display: block;
        min-height: 0;
        overflow-y: auto;
    }

    .page-diablo-planner .planner-choice-panel {
        display: block;
        border-right: 0;
        border-bottom: 1px solid var(--planner-line);
        padding: 10px;
    }

    .page-diablo-planner .planner-choice-list {
        max-height: 170px;
    }

    .page-diablo-planner .planner-config-panel {
        overflow: visible;
        padding: 15px 11px 25px;
    }

    .page-diablo-planner .planner-dialog-empty {
        min-height: 250px;
    }

    .page-diablo-planner .planner-option-control {
        grid-template-columns: 1fr;
    }

    .page-diablo-planner .planner-option-row {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .page-diablo-planner .planner-masterwork {
        grid-column: 2;
        justify-content: flex-start;
    }

    .page-diablo-planner .planner-roll {
        width: 100%;
        grid-template-columns: 1fr 90px;
        align-items: center;
    }

    .page-diablo-planner .planner-dialog-footer {
        position: sticky;
        z-index: 5;
        bottom: 0;
        padding: 8px;
    }

    .page-diablo-planner .planner-dialog-footer button {
        padding-inline: 11px;
    }

    .page-diablo-planner .planner-slot-tooltip {
        display: none !important;
    }
}

/* Compact equipment editor */
.page-diablo-planner .planner-config-panel {
    padding: 12px 16px 18px;
}

.page-diablo-planner .planner-config-heading {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 2px solid #2d3238;
    padding: 2px 0 10px;
}

.page-diablo-planner .planner-config-heading span {
    color: #858a91;
    font-size: 12px;
    font-weight: 500;
}

.page-diablo-planner .planner-config-heading strong {
    overflow: hidden;
    color: #5f4b28;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-diablo-planner .planner-compact-group {
    padding: 13px 0;
}

.page-diablo-planner .planner-compact-group > header {
    align-items: center;
    margin-bottom: 7px;
}

.page-diablo-planner .planner-compact-group > header h3 {
    font-size: 13px;
}

.page-diablo-planner .planner-compact-group > header p {
    margin-top: 3px;
    font-size: 11px;
}

.page-diablo-planner .planner-compact-option-list {
    display: grid;
    gap: 5px;
}

.page-diablo-planner .planner-compact-option-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
}

.page-diablo-planner .planner-compact-option-label {
    display: grid;
    width: 28px;
    height: 32px;
    place-items: center;
    border: 1px solid #d5d2cb;
    background: #f7f6f3;
    color: #777d84;
    font-size: 12px;
    font-weight: 600;
}

.page-diablo-planner .planner-search-select {
    position: relative;
    min-width: 0;
}

.page-diablo-planner .planner-search-select > input {
    width: 100%;
    min-height: 34px;
    border: 1px solid #cac7c0;
    background: #fff;
    padding: 0 38px 0 10px;
    color: #353a40;
    font-size: 13px;
    outline: none;
}

.page-diablo-planner .planner-search-select > input:focus {
    border-color: #73879d;
    box-shadow: 0 0 0 2px rgba(70, 105, 140, .11);
}

.page-diablo-planner .planner-option-clear {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 5px;
    width: 26px;
    height: 26px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #92979d;
    cursor: pointer;
    font-size: 17px;
}

.page-diablo-planner .planner-option-clear:hover {
    color: #43484f;
}

.page-diablo-planner .planner-option-suggestions {
    position: absolute;
    z-index: 30;
    top: calc(100% + 3px);
    right: 0;
    left: 0;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #bab7b0;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}

.page-diablo-planner .planner-compact-group:last-child .planner-option-suggestions {
    top: auto;
    bottom: calc(100% + 3px);
}

.page-diablo-planner .planner-option-suggestions[hidden] {
    display: none !important;
}

.page-diablo-planner .planner-option-suggestions > button {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #eceae5;
    background: #fff;
    padding: 8px 10px;
    color: #3c4147;
    cursor: pointer;
    text-align: left;
}

.page-diablo-planner .planner-option-suggestions > button:hover,
.page-diablo-planner .planner-option-suggestions > button:focus {
    background: #f0f2f4;
    outline: none;
}

.page-diablo-planner .planner-option-suggestions strong,
.page-diablo-planner .planner-option-suggestions small {
    display: block;
}

.page-diablo-planner .planner-option-suggestions strong {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.page-diablo-planner .planner-option-suggestions small {
    margin-top: 3px;
    color: #8b9096;
    font-size: 11px;
}

.page-diablo-planner .planner-option-suggestions > p {
    margin: 0;
    padding: 13px 10px;
    color: #858a90;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.page-diablo-planner .planner-choice-hover-tooltip {
    position: fixed;
    z-index: 2147483000;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #24282e;
    background: rgba(28, 31, 36, .98);
    padding: 12px;
    color: #e8e5df;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .34);
    pointer-events: none;
}

.page-diablo-planner .planner-choice-hover-tooltip[hidden] {
    display: none !important;
}

.page-diablo-planner .planner-choice-tooltip-head {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.page-diablo-planner .planner-choice-tooltip-head img {
    width: 46px;
    height: 46px;
    border: 1px solid #8e733e;
    background: #17191c;
    object-fit: cover;
}

.page-diablo-planner .planner-choice-tooltip-head small,
.page-diablo-planner .planner-choice-tooltip-head strong {
    display: block;
}

.page-diablo-planner .planner-choice-tooltip-head small {
    margin-bottom: 3px;
    color: #9ca4ad;
    font-size: 11px;
}

.page-diablo-planner .planner-choice-tooltip-head strong {
    color: #e4c279;
    font-size: 14px;
}

.page-diablo-planner .planner-choice-hover-tooltip > p {
    margin: 10px 0 0;
    color: #d2d4d7;
    font-size: 12px;
    line-height: 1.55;
}

.page-diablo-planner .planner-choice-tooltip-affixes {
    display: grid;
    gap: 4px;
    margin-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 8px;
}

.page-diablo-planner .planner-choice-tooltip-affixes span {
    color: #b9bec5;
    font-size: 11px;
    line-height: 1.35;
}

@media (max-width: 720px) {
    .page-diablo-planner .planner-config-panel {
        padding: 12px 10px 20px;
    }

    .page-diablo-planner .planner-config-heading {
        display: block;
        min-height: 0;
    }

    .page-diablo-planner .planner-config-heading strong {
        display: block;
        margin-top: 3px;
        font-size: 14px;
    }

    .page-diablo-planner .planner-choice-hover-tooltip {
        display: none !important;
    }

    .page-diablo-planner .planner-compact-option-row {
        grid-template-columns: 26px minmax(0, 1fr);
    }

    .page-diablo-planner .planner-compact-option-label {
        width: 26px;
    }
}

/* Keep equipped item/aspect slot frames at the same clarity as hover. */
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot:not(.is-empty) .planner-slot-tile::after {
    opacity: 1 !important;
    filter: none !important;
}

/* Build viewer member comments */
body.page-diablo-planner .planner-page:not(.is-viewer) .planner-build-comments { display: none; }
body.page-diablo-planner .planner-build-comments {
    margin-top: 18px;
    overflow: hidden;
    color: #b9bcc3;
    border: 1px solid #32353c;
    background: #14151a;
}
body.page-diablo-planner .planner-build-comments-head {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px;
    border-bottom: 1px solid #30333a;
    background: #18191e;
}
body.page-diablo-planner .planner-build-comments-head p {
    margin: 0 0 5px;
    color: #d85456 !important;
    font: 800 9px/1 Arial, sans-serif;
    letter-spacing: .15em;
}
body.page-diablo-planner .planner-build-comments-head h2 {
    margin: 0;
    color: #eceef1;
    font-size: 18px;
    letter-spacing: -.03em;
}
body.page-diablo-planner .planner-build-comments-head h2 span { margin-left: 4px; color: #d35658; font-size: 12px; }
body.page-diablo-planner .planner-build-comments-head > small { color: #727780; font-size: 10px; }
body.page-diablo-planner .planner-comment-alert {
    margin: 12px 18px 0;
    padding: 10px 12px;
    color: #bfc4cc;
    border: 1px solid #3b3e46;
    background: #1b1d23;
    font-size: 11px;
}
body.page-diablo-planner .planner-comment-alert.is-success { color: #acd1b4; border-color: #36523d; background: #17211a; }
body.page-diablo-planner .planner-comment-alert.is-error { color: #e3a7a8; border-color: #633739; background: #251719; }
body.page-diablo-planner .planner-comment-list { padding: 0 18px; }
body.page-diablo-planner .planner-comments-empty,
body.page-diablo-planner .planner-comments-unavailable {
    margin: 0;
    padding: 34px 18px;
    color: #696e78 !important;
    font-size: 11px;
    text-align: center;
}
body.page-diablo-planner .planner-comment {
    position: relative;
    padding: 17px 74px 17px 0;
    border-bottom: 1px solid #292c32;
}
body.page-diablo-planner .planner-comment:last-child { border-bottom: 0; }
body.page-diablo-planner .planner-comment > header { display: flex; align-items: baseline; gap: 9px; }
body.page-diablo-planner .planner-comment > header strong { color: #d5d8dd; font-size: 11px; }
body.page-diablo-planner .planner-comment > header time { color: #656a74; font-size: 9px; }
body.page-diablo-planner .planner-comment > p {
    margin: 9px 0 0;
    color: #b7bbc2 !important;
    font-size: 12px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}
body.page-diablo-planner .planner-comment-delete { position: absolute; top: 16px; right: 0; margin: 0; }
body.page-diablo-planner .planner-comment-delete button {
    appearance: none;
    padding: 3px 0;
    color: #747983;
    border: 0;
    background: transparent;
    font-size: 9px;
    cursor: pointer;
}
body.page-diablo-planner .planner-comment-delete button:hover { color: #df7779; }
body.page-diablo-planner .planner-comment-form {
    padding: 17px 18px 18px;
    border-top: 1px solid #30333a;
    background: #17181d;
}
body.page-diablo-planner .planner-comment-form > div { margin-bottom: 9px; display: flex; align-items: center; gap: 9px; }
body.page-diablo-planner .planner-comment-form > div strong { color: #d8dbe0; font-size: 11px; }
body.page-diablo-planner .planner-comment-form > div span { color: #666b74; font-size: 9px; }
body.page-diablo-planner .planner-comment-form textarea {
    width: 100%;
    min-height: 94px;
    display: block;
    padding: 12px;
    resize: vertical;
    color: #d0d3d9;
    border: 1px solid #393c44;
    border-radius: 0;
    outline: 0;
    background: #111217;
    font: 12px/1.7 Pretendard, "Noto Sans KR", sans-serif;
}
body.page-diablo-planner .planner-comment-form textarea:focus { border-color: #865052; box-shadow: 0 0 0 1px rgba(198, 67, 70, .16); }
body.page-diablo-planner .planner-comment-form textarea::placeholder { color: #5f646d; }
body.page-diablo-planner .planner-comment-form footer { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.page-diablo-planner .planner-comment-form footer small { color: #626771; font-size: 9px; }
body.page-diablo-planner .planner-comment-form footer button {
    min-width: 94px;
    min-height: 36px;
    padding: 0 14px;
    color: #fff;
    border: 1px solid #9b3033;
    border-radius: 0;
    background: #7f2023;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
body.page-diablo-planner .planner-comment-form footer button:hover { background: #9a292c; }
body.page-diablo-planner .planner-comment-login {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 18px;
    color: #777c85;
    border-top: 1px solid #30333a;
    background: #17181d;
    font-size: 11px;
}
body.page-diablo-planner .planner-comment-login a { color: #e1e3e7; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 720px) {
    body.page-diablo-planner .planner-build-comments { margin-top: 12px; }
    body.page-diablo-planner .planner-build-comments-head { min-height: 64px; padding: 12px 14px; }
    body.page-diablo-planner .planner-build-comments-head > small { display: none; }
    body.page-diablo-planner .planner-comment-list { padding-inline: 14px; }
    body.page-diablo-planner .planner-comment { padding-right: 48px; }
    body.page-diablo-planner .planner-comment-form { padding: 14px; }
    body.page-diablo-planner .planner-comment-form textarea { min-height: 104px; }
}

/* 2026-09-01: user-supplied paragon node backgrounds (local assets). */
body.page-diablo-planner .planner-paragon-node:not(.is-gate) .planner-paragon-node-icon-frame {
    width: 52px !important;
    height: 52px !important;
    background-image: url('/assets/img/diablo4-planner/paragon-ui/node-bg-common.png?v=20260901-1') !important;
    background-position: center !important;
    background-size: 52px 52px !important;
    background-repeat: no-repeat !important;
}
body.page-diablo-planner .planner-paragon-node.is-socket:not(.is-gate) .planner-paragon-node-icon-frame {
    background-image: url('/assets/img/diablo4-planner/paragon-ui/node-bg-glyph.png?v=20260901-1') !important;
}
body.page-diablo-planner .planner-paragon-node:not(.is-gate):not(.is-socket) .planner-paragon-node-icon-frame::before {
    display: none !important;
    content: none !important;
}
body.page-diablo-planner .planner-paragon-node:not(.is-gate) .planner-paragon-node-icon-frame > img {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    object-fit: contain !important;
}
body.page-diablo-planner .planner-paragon-node.is-socket:not(.is-gate) .planner-paragon-node-icon-frame > img {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
}
body.page-diablo-planner .planner-paragon-socket-mark {
    position: relative;
    z-index: 1;
    color: #cf2729;
    font-size: 15px;
    line-height: 1;
    text-shadow: 0 0 4px rgba(210, 28, 35, .7), 0 1px 2px #000;
}


/* Pointer-follow tooltips */
.page-diablo-planner .planner-gear-slot:hover > .planner-slot-tooltip,
.page-diablo-planner .planner-gear-slot:focus-visible > .planner-slot-tooltip,
.page-diablo-planner .planner-skill-node:hover > .planner-node-tooltip,
.page-diablo-planner .planner-skill-node:focus-visible > .planner-node-tooltip,
.page-diablo-planner .planner-paragon-node:hover > .planner-node-tooltip,
.page-diablo-planner .planner-paragon-node:focus-visible > .planner-node-tooltip {
    display: none !important;
}

.page-diablo-planner .planner-pointer-tooltip {
    position: fixed;
    z-index: 2147482000;
    top: 0;
    left: 0;
    box-sizing: border-box;
    pointer-events: none;
    text-align: left;
}

.page-diablo-planner .planner-pointer-tooltip[hidden] {
    display: none !important;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] {
    width: min(330px, calc(100vw - 24px));
    max-height: min(420px, calc(100vh - 24px));
    overflow: hidden;
    border: 1px solid #4a4f56;
    background: rgba(36, 39, 44, .985);
    padding: 14px;
    color: #e8eaed;
    box-shadow: 0 16px 38px rgba(18, 20, 24, .34);
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] {
    width: min(370px, calc(100vw - 24px));
    max-height: min(360px, calc(100vh - 24px));
    overflow: auto;
    border: 1px solid #44474e;
    background: rgba(22, 24, 28, .99);
    padding: 15px 16px;
    color: #eef0f3;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .48);
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] strong {
    display: block;
    color: #f2f3f5;
    font-size: 15px;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] em {
    display: block;
    border-top: 1px solid #35383e;
    border-bottom: 1px solid #35383e;
    margin: 6px 0;
    padding: 8px 0;
    color: #bcae91;
    font-size: 13px;
    font-style: normal;
    line-height: 1.5;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] small {
    display: block;
    color: #d6d9dd;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-line;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] i {
    display: block;
    border-top: 1px solid #35383e;
    margin-top: 7px;
    padding-top: 8px;
    color: #83a9d1;
    font-size: 13px;
    font-style: normal;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="paragon"],
.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="gate"] {
    width: min(300px, calc(100vw - 24px));
    max-height: min(330px, calc(100vh - 24px));
    overflow: auto;
    border: 1px solid #4b5058;
    background: rgba(28, 31, 36, .99);
    padding: 12px 13px;
    color: #e6e8eb;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .36);
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="paragon"] strong,
.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="gate"] strong {
    display: block;
    color: #f0d5ba;
    font-size: 14px;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="paragon"] small,
.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="gate"] small {
    display: block;
    margin-top: 5px;
    color: #d5d8dd;
    font-size: 13px;
    line-height: 1.6;
}

/* Compact equipment modifiers: greater affix + masterwork */
.page-diablo-planner .planner-compact-group {
    padding: 10px 0;
}

.page-diablo-planner .planner-compact-group + .planner-compact-group {
    padding-top: 10px;
}

.page-diablo-planner .planner-compact-option-list {
    gap: 6px;
}


.page-diablo-planner .planner-compact-option-icon,
.page-diablo-planner .planner-compact-option-row .planner-greater-affix {
    display: grid;
    width: 30px;
    height: 34px;
    place-items: center;
    box-sizing: border-box;
    border: 1px solid #d5d2cb;
    border-radius: 0;
    background: #f7f6f3;
    color: #8a8f96;
    font-size: 14px;
    line-height: 1;
}

.page-diablo-planner .planner-compact-option-row .planner-greater-affix {
    cursor: pointer;
}

.page-diablo-planner .planner-compact-option-row .planner-greater-affix:hover {
    border-color: #b7b2a8;
    color: #646a71;
}

.page-diablo-planner .planner-compact-option-row .planner-greater-affix.is-active {
    border-color: #c79b20;
    background: #fff4c8;
    color: #d19a00;
    box-shadow: inset 0 0 0 1px rgba(209, 154, 0, .12);
}

.page-diablo-planner .planner-compact-option-row .planner-masterwork {
    display: flex;
    min-width: 64px;
    justify-content: flex-end;
    gap: 8px;
}

.page-diablo-planner .planner-compact-option-row .planner-masterwork button {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    border: 0;
    padding: 0;
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(30, 34, 39, .12);
}

.page-diablo-planner .planner-compact-option-row .planner-masterwork button:hover {
    transform: scale(1.12);
}

.page-diablo-planner .planner-compact-option-row .planner-masterwork button.is-active {
    border: 0;
    box-shadow: 0 0 0 2px #272b31, 0 0 0 3px #fff;
    opacity: 1;
}

.page-diablo-planner .planner-masterwork-spacer {
    display: block;
    width: 64px;
    height: 1px;
}


/* Readability pass for previously tiny planner text */
.page-diablo-planner .planner-build-settings label > span,
.page-diablo-planner .planner-section-tabs > span,
.page-diablo-planner .planner-slot-copy strong,
.page-diablo-planner .planner-board-center > small,
.page-diablo-planner .planner-tool-search,
.page-diablo-planner .planner-canvas-guide,
.page-diablo-planner .planner-point-summary span,
.page-diablo-planner .planner-point-summary i {
    font-size: 13px;
}

.page-diablo-planner .planner-slot-copy em,
.page-diablo-planner .planner-tooltip-head small,
.page-diablo-planner .planner-tooltip-effect,
.page-diablo-planner .planner-tooltip-empty,
.page-diablo-planner .planner-choice-count,
.page-diablo-planner .planner-choice small,
.page-diablo-planner .planner-config-heading span,
.page-diablo-planner .planner-option-suggestions strong,
.page-diablo-planner .planner-option-suggestions > p,
.page-diablo-planner .planner-choice-hover-tooltip > p,
.page-diablo-planner .planner-choice-tooltip-affixes span,
.page-diablo-planner .planner-glyph-header p,
.page-diablo-planner .planner-glyph-header > label,
.page-diablo-planner .planner-glyph-layout header span,
.page-diablo-planner .planner-glyph-socket small,
.page-diablo-planner .planner-glyph-card small {
    font-size: 13px;
}

.page-diablo-planner .planner-tooltip-head em,
.page-diablo-planner .planner-tooltip-options > span,
.page-diablo-planner .planner-choice-tooltip-head small,
.page-diablo-planner .planner-option-suggestions small,
.page-diablo-planner .planner-glyph-equipped label,
.page-diablo-planner .planner-glyph-card > i {
    font-size: 12px;
}

.page-diablo-planner .planner-choice strong,
.page-diablo-planner .planner-choice-count strong,
.page-diablo-planner .planner-dialog-footer button,
.page-diablo-planner .planner-glyph-socket strong {
    font-size: 13px;
}

.page-diablo-planner .planner-skill-node > b,
.page-diablo-planner .planner-skill-gate,
.page-diablo-planner .planner-board-tabs button span,
.page-diablo-planner .planner-board-tabs button strong,
.page-diablo-planner .planner-board-actions label span,
.page-diablo-planner .planner-paragon-board-title > span,
.page-diablo-planner .planner-paragon-board-title small,
.page-diablo-planner .planner-paragon-node > i {
    font-size: 13px;
}

.page-diablo-planner .planner-choice-tooltip-head strong {
    font-size: 13px;
}

@media (max-width: 720px) {
    .page-diablo-planner .planner-pointer-tooltip {
        display: none !important;
    }


    .page-diablo-planner .planner-compact-option-icon,
    .page-diablo-planner .planner-compact-option-row .planner-greater-affix {
        width: 28px;
    }

    .page-diablo-planner .planner-compact-option-row .planner-masterwork,
    .page-diablo-planner .planner-masterwork-spacer {
        min-width: 58px;
        width: 58px;
        gap: 6px;
    }

    .page-diablo-planner .planner-compact-option-row .planner-masterwork button {
        width: 11px;
        height: 11px;
        min-width: 11px;
        min-height: 11px;
    }
}


/* Build planner refinement: GA image buttons, tempering prefix icon, narrower dialog, larger tooltip copy */
.page-diablo-planner .planner-compact-option-row {
    grid-template-columns: 30px minmax(0, 1fr) 64px;
    gap: 8px;
}

.page-diablo-planner .planner-compact-option-row.has-prefix {
    grid-template-columns: 30px 30px minmax(0, 1fr) 64px;
}

.page-diablo-planner .planner-compact-option-badge,
.page-diablo-planner .planner-compact-option-icon,
.page-diablo-planner .planner-compact-option-row .planner-greater-affix {
    display: grid;
    width: 30px;
    height: 34px;
    place-items: center;
    box-sizing: border-box;
    border: 1px solid #d5d2cb;
    border-radius: 0;
    background: linear-gradient(180deg, #f9f8f5 0%, #f0ede7 100%);
}

.page-diablo-planner .planner-compact-option-badge img,
.page-diablo-planner .planner-compact-option-row .planner-greater-affix img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.page-diablo-planner .planner-compact-option-badge--tempering {
    background: linear-gradient(180deg, #474b52 0%, #2d3137 100%);
    border-color: #555a62;
}

.page-diablo-planner .planner-compact-option-badge--tempering img {
    width: 17px;
    height: 17px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .28));
}

.page-diablo-planner .planner-compact-option-row .planner-greater-affix {
    padding: 0;
    background: linear-gradient(180deg, #f9f8f5 0%, #eee9df 100%);
    cursor: pointer;
}

.page-diablo-planner .planner-compact-option-row .planner-greater-affix img {
    filter: grayscale(1) saturate(0) brightness(.92);
    opacity: .82;
}

.page-diablo-planner .planner-compact-option-row .planner-greater-affix:hover {
    border-color: #b7b2a8;
    background: linear-gradient(180deg, #fcfbf7 0%, #f4efe4 100%);
}

.page-diablo-planner .planner-compact-option-row .planner-greater-affix.is-active {
    border-color: #b88d28;
    background: linear-gradient(180deg, #fff2cc 0%, #f8e1a5 100%);
    box-shadow: inset 0 0 0 1px rgba(198, 147, 21, .12);
}

.page-diablo-planner .planner-compact-option-row .planner-greater-affix.is-active img {
    filter: none;
    opacity: 1;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] .planner-tooltip-head strong {
    font-size: 16px;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] .planner-tooltip-head small {
    font-size: 14px;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] .planner-tooltip-head em {
    font-size: 13px;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] .planner-tooltip-effect {
    font-size: 13px;
    line-height: 1.7;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] .planner-tooltip-options > span,
.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] .planner-tooltip-empty {
    font-size: 14px;
    line-height: 1.65;
}

.page-diablo-planner .planner-choice-tooltip-head small {
    font-size: 13px;
}

.page-diablo-planner .planner-choice-tooltip-head strong {
    font-size: 15px;
}

.page-diablo-planner .planner-choice-hover-tooltip > p {
    font-size: 14px;
    line-height: 1.7;
}

.page-diablo-planner .planner-choice-tooltip-affixes span {
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 720px) {
    .page-diablo-planner .planner-compact-option-row {
        grid-template-columns: 28px minmax(0, 1fr) 58px;
        gap: 6px;
    }

    .page-diablo-planner .planner-compact-option-row.has-prefix {
        grid-template-columns: 28px 28px minmax(0, 1fr) 58px;
    }

    .page-diablo-planner .planner-compact-option-badge,
    .page-diablo-planner .planner-compact-option-icon,
    .page-diablo-planner .planner-compact-option-row .planner-greater-affix {
        width: 28px;
        height: 32px;
    }

    .page-diablo-planner .planner-compact-option-badge img,
    .page-diablo-planner .planner-compact-option-row .planner-greater-affix img {
        width: 16px;
        height: 16px;
    }
}


/* Build planner dialog redesign v3: smaller overall size, more balanced left/right ratio, denser controls */
.page-diablo-planner .planner-item-dialog {
    width: clamp(720px, 60vw, 800px);
    height: clamp(500px, 68vh, 590px);
}

.page-diablo-planner .planner-dialog-head {
    gap: 14px;
    padding: 9px 12px 8px;
}

.page-diablo-planner .planner-dialog-head p {
    margin: 0 0 3px;
    font-size: 12px;
}

.page-diablo-planner .planner-dialog-head h2 {
    font-size: 15px;
}

.page-diablo-planner .planner-dialog-head > button {
    width: 32px;
    height: 32px;
    font-size: 22px;
}

.page-diablo-planner .planner-dialog-mode {
    min-height: 36px;
    padding: 4px 8px;
}

.page-diablo-planner .planner-dialog-mode > button {
    min-height: 30px;
    padding: 0 12px;
    font-size: 13px;
}

.page-diablo-planner .planner-dialog-body {
    grid-template-columns: 268px minmax(0, 1fr);
}

.page-diablo-planner .planner-choice-panel {
    padding: 7px;
}

.page-diablo-planner .planner-choice-panel > label input {
    min-height: 34px;
    padding-left: 10px;
}

.page-diablo-planner .planner-choice-count {
    padding: 8px 2px 6px;
    font-size: 11px;
}

.page-diablo-planner .planner-choice-count strong {
    font-size: 12px;
}

.page-diablo-planner .planner-choice {
    min-height: 48px;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    gap: 7px;
    padding: 6px;
}

.page-diablo-planner .planner-choice img {
    width: 34px;
    height: 34px;
}


.page-diablo-planner .planner-choice small {
    margin-top: 2px;
    font-size: 11px;
}

.page-diablo-planner .planner-choice i {
    width: 18px;
    height: 18px;
    font-size: 13px;
}

.page-diablo-planner .planner-config-panel {
    padding: 9px 8px 14px;
}

.page-diablo-planner .planner-config-heading {
    min-height: 38px;
    gap: 10px;
    padding: 0 0 8px;
}

.page-diablo-planner .planner-config-heading span {
    font-size: 11px;
}

.page-diablo-planner .planner-config-heading strong {
    font-size: 14px;
}

.page-diablo-planner .planner-compact-group {
    padding: 8px 0;
}

.page-diablo-planner .planner-compact-group + .planner-compact-group {
    padding-top: 8px;
}

.page-diablo-planner .planner-compact-option-list {
    gap: 5px;
}

.page-diablo-planner .planner-compact-option-row {
    grid-template-columns: 28px minmax(0, 1fr) 56px;
    gap: 6px;
}

.page-diablo-planner .planner-compact-option-row.has-prefix {
    grid-template-columns: 28px 28px minmax(0, 1fr) 56px;
}

.page-diablo-planner .planner-compact-option-badge,
.page-diablo-planner .planner-compact-option-icon,
.page-diablo-planner .planner-compact-option-row .planner-greater-affix {
    width: 28px;
    height: 30px;
}


.page-diablo-planner .planner-compact-option-badge--tempering img {
    width: 15px;
    height: 15px;
}

.page-diablo-planner .planner-search-select > input {
    min-height: 30px;
    padding: 0 32px 0 8px;
    font-size: 13px;
}

.page-diablo-planner .planner-option-clear {
    right: 3px;
    width: 22px;
    height: 22px;
    font-size: 15px;
}

.page-diablo-planner .planner-compact-option-row .planner-masterwork,
.page-diablo-planner .planner-masterwork-spacer {
    min-width: 56px;
    width: 56px;
    gap: 6px;
}

.page-diablo-planner .planner-compact-option-row .planner-masterwork button {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
}

.page-diablo-planner .planner-dialog-footer {
    padding: 10px 12px;
}

.page-diablo-planner .planner-dialog-footer button {
    min-width: 56px;
    min-height: 34px;
    padding: 0 12px;
}

@media (max-width: 920px) {
    .page-diablo-planner .planner-item-dialog {
        width: min(760px, calc(100vw - 24px));
    }

    .page-diablo-planner .planner-dialog-body {
        grid-template-columns: 244px minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .page-diablo-planner .planner-compact-option-row {
        grid-template-columns: 26px minmax(0, 1fr) 52px;
        gap: 5px;
    }

    .page-diablo-planner .planner-compact-option-row.has-prefix {
        grid-template-columns: 26px 26px minmax(0, 1fr) 52px;
    }

    .page-diablo-planner .planner-compact-option-badge,
    .page-diablo-planner .planner-compact-option-icon,
    .page-diablo-planner .planner-compact-option-row .planner-greater-affix {
        width: 26px;
        height: 28px;
    }

    .page-diablo-planner .planner-compact-option-badge img,
    .page-diablo-planner .planner-compact-option-row .planner-greater-affix img,
    .page-diablo-planner .planner-compact-option-badge--tempering img {
        width: 14px;
        height: 14px;
    }

    .page-diablo-planner .planner-compact-option-row .planner-masterwork,
    .page-diablo-planner .planner-masterwork-spacer {
        min-width: 52px;
        width: 52px;
        gap: 5px;
    }

    .page-diablo-planner .planner-compact-option-row .planner-masterwork button {
        width: 9px;
        height: 9px;
        min-width: 9px;
        min-height: 9px;
    }
}


/* Build planner dialog refinement v4: narrower width + improved general text readability */
.page-diablo-planner .planner-item-dialog {
    width: clamp(660px, 56vw, 740px);
    height: clamp(500px, 68vh, 585px);
}

.page-diablo-planner .planner-dialog-body {
    grid-template-columns: 236px minmax(0, 1fr);
}

.page-diablo-planner .planner-dialog-head p {
    font-size: 13px;
}

.page-diablo-planner .planner-dialog-head h2 {
    font-size: 17px;
}

.page-diablo-planner .planner-dialog-mode > button {
    font-size: 13px;
}

.page-diablo-planner .planner-choice-panel > label input {
    font-size: 13px;
}

.page-diablo-planner .planner-choice-count {
    font-size: 12px;
}

.page-diablo-planner .planner-choice-count strong {
    font-size: 13px;
}

.page-diablo-planner .planner-choice strong {
    font-size: 13px;
}


.page-diablo-planner .planner-choice-empty {
    font-size: 13px;
}

.page-diablo-planner .planner-config-heading span {
    font-size: 12px;
}

.page-diablo-planner .planner-config-heading strong {
    font-size: 13px;
}

.page-diablo-planner .planner-search-select > input {
    font-size: 13px;
}

.page-diablo-planner .planner-option-suggestions strong {
    font-size: 13px;
}

.page-diablo-planner .planner-option-suggestions small {
    font-size: 12px;
}

.page-diablo-planner .planner-option-suggestions > p {
    font-size: 13px;
}

.page-diablo-planner .planner-dialog-footer button {
    font-size: 13px;
}

@media (max-width: 920px) {
    .page-diablo-planner .planner-item-dialog {
        width: min(700px, calc(100vw - 24px));
    }

    .page-diablo-planner .planner-dialog-body {
        grid-template-columns: 224px minmax(0, 1fr);
    }
}


/* Planner overview layout — keep the site's warm light visual language */
.page-diablo-planner .planner-gear-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
    gap: 14px;
    padding: 16px 18px 20px;
    background: #fff;
}

.page-diablo-planner .planner-gear-overview-main,
.page-diablo-planner .planner-gear-sidebar,
.page-diablo-planner .planner-summary-card,
.page-diablo-planner .planner-side-card { min-width: 0; }

.page-diablo-planner .planner-equipment-board--summary {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 18px;
    align-items: start;
    border: 1px solid #ddd9d1;
    background: #faf9f6;
    padding: 12px;
}

.page-diablo-planner .planner-slot-column-overview { gap: 8px; }

.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot {
    min-height: 60px;
    grid-template-columns: 48px minmax(0, 1fr) 20px;
    gap: 8px;
    border-color: #ddd9d2;
    background: #fff;
    padding: 5px 7px;
}

.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] {
    grid-template-columns: 20px minmax(0, 1fr) 48px;
}

.page-diablo-planner .planner-equipment-board--summary .planner-slot-tile {
    width: 48px;
    height: 48px;
}

.page-diablo-planner .planner-equipment-board--summary .planner-slot-copy small {
    font-size: 14px;
    font-weight: 500;
}

.page-diablo-planner .planner-equipment-board--summary .planner-slot-copy strong { font-size: 13px; }
.page-diablo-planner .planner-equipment-board--summary .planner-slot-copy em { font-size: 12px; }

.page-diablo-planner .planner-gear-sidebar {
    display: grid;
    align-content: start;
    gap: 10px;
}

.page-diablo-planner .planner-side-card,
.page-diablo-planner .planner-summary-card,
.page-diablo-planner .planner-mechanic-sidebar {
    border: 1px solid #ddd9d1;
    background: #faf9f6;
    padding: 13px 14px;
}

.page-diablo-planner .planner-side-card > header,
.page-diablo-planner .planner-summary-card > header,
.page-diablo-planner .planner-mechanic-sidebar > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e4e0d8;
    padding-bottom: 9px;
}

.page-diablo-planner .planner-side-card h3,
.page-diablo-planner .planner-summary-card h3 {
    margin: 0;
    color: #353a40;
    font-size: 13px;
}

.page-diablo-planner .planner-side-card > header span,
.page-diablo-planner .planner-summary-card > header span {
    color: #8a8f96;
    font-size: 12px;
}

.page-diablo-planner .planner-side-card > header button {
    min-height: 30px;
    border: 1px solid #c8c4bc;
    background: #fff;
    padding: 0 10px;
    color: #555b62;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.page-diablo-planner .planner-video-list { display: grid; gap: 9px; }

.page-diablo-planner .planner-video-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
}

.page-diablo-planner .planner-video-row input,
.page-diablo-planner .planner-rune-field input,
.page-diablo-planner [data-build-memo] {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #cbc7bf;
    background: #fff;
    color: #373c43;
    font: inherit;
}

.page-diablo-planner .planner-video-row input,
.page-diablo-planner .planner-rune-field input {
    min-height: 36px;
    padding: 0 10px;
    font-size: 13px;
}

.page-diablo-planner .planner-video-row button,
.page-diablo-planner .planner-video-actions button {
    min-height: 34px;
    border: 1px solid #c9c5bd;
    background: #fff;
    padding: 0 9px;
    color: #60666d;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}

.page-diablo-planner .planner-video-preview {
    border: 1px solid #d8d4cc;
    background: #fff;
    padding: 8px;
}

.page-diablo-planner .planner-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #171717;
}

.page-diablo-planner .planner-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.page-diablo-planner .planner-video-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 7px;
}

.page-diablo-planner [data-build-memo] {
    min-height: 172px;
    resize: vertical;
    padding: 10px 11px;
    font-size: 13px;
    line-height: 1.65;
}

.page-diablo-planner .planner-mechanic-sidebar { margin: 0; }


.page-diablo-planner .planner-featured-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.page-diablo-planner .planner-featured-skill {
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
}

.page-diablo-planner .planner-featured-skill-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #b8a277;
    background: #282521;
}

.page-diablo-planner .planner-featured-skill-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-diablo-planner .planner-featured-skill strong {
    color: #4e535a;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.page-diablo-planner .planner-featured-skill.is-empty .planner-featured-skill-icon {
    border-color: #d7d3cb;
    background: #efede8;
}
.page-diablo-planner .planner-featured-skill.is-empty strong { color: #9a9da1; }

.page-diablo-planner .planner-rune-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.page-diablo-planner .planner-rune-field {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
}

.page-diablo-planner .planner-rune-emblem {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #a98959;
    background: linear-gradient(180deg, #544331 0%, #2d241c 100%);
    color: #f0d2a5;
    font-family: Georgia, serif;
    font-size: 15px;
    font-weight: 500;
}

.page-diablo-planner .planner-rune-field.is-empty .planner-rune-emblem {
    border-color: #d1cdc5;
    background: #eeeae3;
    color: #99958e;
}

@media (max-width: 1040px) {
    .page-diablo-planner .planner-gear-overview { grid-template-columns: 1fr; }
    .page-diablo-planner .planner-summary-card--skills,
    .page-diablo-planner .planner-summary-card--runes { grid-column: auto; }
}

@media (max-width: 720px) {
    .page-diablo-planner .planner-gear-overview { padding: 10px; }
    .page-diablo-planner .planner-equipment-board--summary { grid-template-columns: 1fr; }
    .page-diablo-planner .planner-featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .page-diablo-planner .planner-rune-grid { grid-template-columns: 1fr; }
}


/* Planner overview refinement v2 — screenshot-like structure with the existing warm visual tone */
.page-diablo-planner .planner-gear-overview {
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
    align-items: stretch;
}

.page-diablo-planner .planner-gear-overview-main,
.page-diablo-planner .planner-gear-sidebar {
    height: 100%;
}

.page-diablo-planner .planner-gear-sidebar {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: 10px;
}

.page-diablo-planner .planner-memo-card {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.page-diablo-planner .planner-memo-card [data-build-memo] {
    min-height: 260px;
    flex: 1 1 auto;
    resize: none;
}

.page-diablo-planner .planner-equipment-board--summary {
    height: 100%;
    box-sizing: border-box;
    align-content: start;
    border: 0;
    background: transparent;
    padding: 4px 2px;
}

.page-diablo-planner .planner-slot-column-overview {
    align-content: start;
    gap: 7px;
}

.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot,
.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] {
    display: grid;
    min-height: 64px;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    border: 0;
    background: transparent;
    padding: 2px 3px;
    outline: none;
}

.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot:hover,
.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot.is-current,
.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot:focus-visible {
    border: 0;
    background: rgba(168, 106, 95, .055);
    box-shadow: none;
}

.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] .planner-slot-tile,
.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] .planner-slot-copy {
    grid-column: auto;
    grid-row: auto;
    text-align: left;
}

.page-diablo-planner .planner-equipment-board--summary .planner-slot-tile {
    position: relative;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    overflow: visible;
    border: 1px solid #c9c4bb;
    border-radius: 9px;
    background: #f5f2ec;
}

.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot.is-legendary .planner-slot-tile {
    border-color: #a98652;
    background: #292621;
}

.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot.is-unique .planner-slot-tile {
    border-color: #9f7d43;
    background: #292621;
    box-shadow: inset 0 0 0 1px rgba(167,128,63,.16);
}

.page-diablo-planner .planner-slot-placeholder {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #aaa59b;
}

.page-diablo-planner .planner-slot-placeholder svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-diablo-planner .planner-equipment-board--summary .planner-slot-copy {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 2px;
}

.page-diablo-planner .planner-equipment-board--summary .planner-slot-copy strong {
    order: 1;
    margin: 0;
    color: #343940;
    font-size: 14px;
    font-weight: 500;
}

.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot.is-legendary .planner-slot-copy strong {
    color: #ad6e30;
}

.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot.is-unique .planner-slot-copy strong {
    color: #906926;
}

.page-diablo-planner .planner-equipment-board--summary .planner-slot-copy small {
    order: 2;
    color: #6f757c;
    font-size: 13px;
    font-weight: 500;
}

.page-diablo-planner .planner-equipment-board--summary .planner-slot-copy em {
    order: 3;
    margin: 0;
    color: #92969c;
    font-size: 12px;
}

.page-diablo-planner .planner-slot-sockets {
    position: absolute;
    z-index: 4;
    right: -5px;
    bottom: -5px;
    display: flex;
    gap: 2px;
    pointer-events: auto;
}

.page-diablo-planner .planner-slot-socket {
    display: grid;
    width: 22px;
    height: 22px;
    min-width: 22px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #77736b;
    border-radius: 50%;
    background: #25272b;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 0 0 2px #f8f6f1;
}

.page-diablo-planner .planner-slot-socket:hover,
.page-diablo-planner .planner-slot-socket:focus-visible {
    border-color: #b76a5b;
    outline: none;
}

.page-diablo-planner .planner-slot-socket img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-diablo-planner .planner-slot-socket.is-rune {
    border-color: #7f5c9d;
}

.page-diablo-planner .planner-summary-card--skills { grid-column: 1; }
.page-diablo-planner .planner-summary-card--runes { grid-column: 2; }
.page-diablo-planner .planner-mechanic-overview {
    grid-column: 1 / -1;
    margin: 0;
}

.page-diablo-planner .planner-featured-skill {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.page-diablo-planner .planner-featured-skill:hover .planner-featured-skill-icon,
.page-diablo-planner .planner-featured-skill:focus-visible .planner-featured-skill-icon {
    border-color: #a96558;
    box-shadow: 0 0 0 2px rgba(169, 101, 88, .12);
}

.page-diablo-planner .planner-featured-skill:focus-visible { outline: none; }
.page-diablo-planner .planner-featured-skill-icon i {
    color: #aaa49a;
    font-size: 22px;
    font-style: normal;
    font-weight: 300;
}

.page-diablo-planner .planner-rune-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.page-diablo-planner .planner-rune-summary {
    display: grid;
    min-width: 0;
    gap: 4px;
    justify-items: center;
    text-align: center;
}

.page-diablo-planner .planner-rune-summary-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #9c794b;
    border-radius: 8px;
    background: #2a251f;
}

.page-diablo-planner .planner-rune-summary-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-diablo-planner .planner-rune-summary strong {
    max-width: 100%;
    overflow: hidden;
    color: #4c5158;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-diablo-planner .planner-rune-summary small {
    max-width: 100%;
    overflow: hidden;
    color: #8e9297;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-diablo-planner .planner-rune-summary.is-empty .planner-rune-summary-icon {
    border-color: #d4d0c8;
    background: #efede8;
}

/* Generic selection layer for active skills and socket contents */
.page-diablo-planner .planner-picker-dialog {
    width: min(720px, calc(100vw - 28px));
    max-height: min(720px, calc(100dvh - 28px));
    margin: auto;
    overflow: hidden;
    border: 0;
    background: #fff;
    padding: 0;
    color: #343940;
    box-shadow: 0 24px 72px rgba(0,0,0,.28);
}

.page-diablo-planner .planner-picker-dialog::backdrop {
    background: rgba(31, 32, 34, .68);
}

.page-diablo-planner .planner-picker-dialog > div {
    display: grid;
    max-height: min(720px, calc(100dvh - 28px));
    grid-template-rows: auto auto minmax(0, 1fr);
}

.page-diablo-planner .planner-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #ddd9d1;
    padding: 13px 15px;
}

.page-diablo-planner .planner-picker-head p {
    margin: 0 0 3px;
    color: #a94437;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
}

.page-diablo-planner .planner-picker-head h2 {
    margin: 0;
    font-size: 16px;
}

.page-diablo-planner .planner-picker-head > button {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #72777e;
    cursor: pointer;
    font-size: 24px;
}

.page-diablo-planner .planner-picker-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    border-bottom: 1px solid #e2ded6;
    background: #faf9f6;
    padding: 9px 12px;
}

.page-diablo-planner .planner-picker-toolbar input {
    min-height: 36px;
    border: 1px solid #c9c5bd;
    background: #fff;
    padding: 0 10px;
    color: #343940;
    font: inherit;
    font-size: 13px;
}

.page-diablo-planner .planner-picker-toolbar > button,
.page-diablo-planner .planner-picker-filters button {
    min-height: 34px;
    border: 1px solid #c9c5bd;
    background: #fff;
    padding: 0 10px;
    color: #5e646b;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.page-diablo-planner .planner-picker-toolbar button:disabled {
    cursor: default;
    opacity: .42;
}

.page-diablo-planner .planner-socket-toolbar {
    grid-template-columns: minmax(180px, 1fr) auto auto;
}

.page-diablo-planner .planner-picker-filters {
    display: flex;
    gap: 4px;
}

.page-diablo-planner .planner-picker-filters button.is-current {
    border-color: #a94437;
    background: #a94437;
    color: #fff;
}

.page-diablo-planner .planner-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    overflow: auto;
    padding: 12px;
}

.page-diablo-planner .planner-picker-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border: 1px solid #ddd9d1;
    background: #fff;
    padding: 7px;
    color: #383d43;
    cursor: pointer;
    text-align: left;
}

.page-diablo-planner .planner-picker-card:hover,
.page-diablo-planner .planner-picker-card.is-selected {
    border-color: #a9685d;
    background: #fffaf5;
}

.page-diablo-planner .planner-picker-card img {
    width: 42px;
    height: 42px;
    border: 1px solid #a98c62;
    background: #272521;
    object-fit: cover;
}

.page-diablo-planner .planner-picker-card strong,
.page-diablo-planner .planner-picker-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-diablo-planner .planner-picker-card strong { font-size: 13px; }
.page-diablo-planner .planner-picker-card small { margin-top: 3px; color: #858a90; font-size: 12px; }
.page-diablo-planner .planner-picker-empty { grid-column: 1 / -1; margin: 25px 0; color: #898e94; text-align: center; }

@media (max-width: 1040px) {
    .page-diablo-planner .planner-gear-sidebar { min-height: 520px; }
}

@media (max-width: 720px) {
    .page-diablo-planner .planner-equipment-board--summary .planner-gear-slot,
    .page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] {
        grid-template-columns: 58px minmax(0, 1fr);
    }
    .page-diablo-planner .planner-rune-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-diablo-planner .planner-picker-grid { grid-template-columns: 1fr; }
    .page-diablo-planner .planner-socket-toolbar { grid-template-columns: 1fr; }
}

/* Keep the right column the same visual height as the equipment column even with several saved videos. */
.page-diablo-planner .planner-video-card {
    display: flex;
    max-height: 270px;
    flex-direction: column;
}

.page-diablo-planner .planner-video-card .planner-video-list {
    min-height: 0;
    overflow-y: auto;
}


/* Slot presentation refinement: cleaner silhouettes, centered sockets, mirrored right column */
.page-diablo-planner .planner-equipment-board--summary {
    column-gap: 34px;
}

.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot,
.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] {
    min-height: 66px;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 12px;
    padding: 2px 4px;
}

.page-diablo-planner .planner-equipment-board--summary .planner-slot-column-right {
    justify-items: stretch;
}

.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] {
    grid-template-columns: minmax(0, 1fr) 62px;
}

.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] .planner-slot-copy {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
    justify-items: end;
}

.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] .planner-slot-tile {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

.page-diablo-planner .planner-equipment-board--summary .planner-slot-tile {
    width: 58px;
    height: 58px;
    border-radius: 8px;
}

.page-diablo-planner .planner-slot-placeholder {
    width: 34px;
    height: 34px;
    color: #aca79e;
}

.page-diablo-planner .planner-slot-placeholder svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.65;
}

.page-diablo-planner .planner-slot-sockets {
    right: auto;
    left: 50%;
    bottom: -8px;
    gap: 3px;
    transform: translateX(-50%);
}

.page-diablo-planner .planner-slot-socket {
    width: 21px;
    height: 21px;
    min-width: 21px;
    border: 2px solid #595b60;
    background: #25272b;
    box-shadow: 0 0 0 2px #f8f6f1;
}

.page-diablo-planner .planner-slot-socket.is-filled {
    border-color: #77716a;
}

.page-diablo-planner .planner-slot-socket.is-rune {
    border-color: #77548f;
}

.page-diablo-planner .planner-section-tabs > span:empty,
.page-diablo-planner .planner-summary-card > header > span:empty {
    display: none;
}

/* Tooltip option state: GA badge, masterwork indicated by option color */
.page-diablo-planner .planner-tooltip-options > .planner-tooltip-option-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    border-left-color: #7997b8;
    color: #c7ccd2;
}

.page-diablo-planner .planner-tooltip-option-line > span {
    min-width: 0;
}

.page-diablo-planner .planner-tooltip-ga {
    flex: 0 0 auto;
    margin-top: 1px;
    border: 1px solid rgba(231, 180, 71, .48);
    border-radius: 3px;
    background: rgba(231, 180, 71, .10);
    padding: 0 4px;
    color: #f1c45f;
    font-size: .82em;
    font-weight: 500;
    line-height: 1.45;
    white-space: nowrap;
}

.page-diablo-planner .planner-tooltip-options > .planner-tooltip-option-line.is-masterwork-1 {
    border-left-color: #68b7dc;
    color: #8ed1ef;
}

.page-diablo-planner .planner-tooltip-options > .planner-tooltip-option-line.is-masterwork-2 {
    border-left-color: #328cc5;
    color: #66b7e7;
}

.page-diablo-planner .planner-tooltip-options > .planner-tooltip-option-line.is-masterwork-3 {
    border-left-color: #e5a53b;
    color: #f0bd63;
}

.page-diablo-planner .planner-rune-summary small {
    display: none;
}

@media (max-width: 760px) {
    .page-diablo-planner .planner-equipment-board--summary {
        column-gap: 16px;
    }

    .page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] {
        grid-template-columns: 62px minmax(0, 1fr);
    }

    .page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] .planner-slot-tile {
        grid-column: 1;
        justify-self: start;
    }

    .page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] .planner-slot-copy {
        grid-column: 2;
        text-align: left;
        justify-items: start;
    }
}


/* Tooltip icon labels: GA / tempering / transformation / gem & rune */
.page-diablo-planner .planner-tooltip-options > .planner-tooltip-option-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 7px;
}

.page-diablo-planner .planner-tooltip-line-icons {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 3px;
    padding-top: 1px;
}

.page-diablo-planner .planner-tooltip-line-icons:empty {
    display: none;
}

.page-diablo-planner .planner-tooltip-line-icons:empty + .planner-tooltip-line-text {
    grid-column: 1 / -1;
}

.page-diablo-planner .planner-tooltip-line-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    object-fit: contain;
}

.page-diablo-planner .planner-tooltip-line-icon.is-ga {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
}

.page-diablo-planner .planner-tooltip-line-icon.is-tempering {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}

.page-diablo-planner .planner-tooltip-line-icon.is-transformation {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
}

.page-diablo-planner .planner-tooltip-line-icon.is-rune,
.page-diablo-planner .planner-tooltip-line-icon.is-gem {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 3px;
    background: rgba(10, 12, 16, .45);
}

.page-diablo-planner .planner-tooltip-line-icon.is-rune {
    border-color: rgba(160, 111, 196, .45);
}

.page-diablo-planner .planner-tooltip-line-text {
    min-width: 0;
    padding-top: 1px;
}

/* GA is represented by the supplied image; remove the old text badge. */
.page-diablo-planner .planner-tooltip-ga {
    display: none !important;
}

/* Build planner dialog proportion refinement v5 */
.page-diablo-planner .planner-item-dialog {
    width: clamp(620px, 50vw, 660px);
    height: auto;
    max-width: calc(100vw - 28px);
    max-height: calc(100dvh - 28px);
}

.page-diablo-planner .planner-item-dialog > div {
    height: auto;
    max-height: none;
    grid-template-rows: auto auto 326px auto;
}

.page-diablo-planner .planner-dialog-body {
    height: 326px;
    grid-template-columns: 250px minmax(0, 1fr);
}

.page-diablo-planner .planner-choice-panel {
    padding: 7px 8px;
}

.page-diablo-planner .planner-choice-panel > label input {
    min-height: 32px;
}

.page-diablo-planner .planner-choice-count {
    padding: 6px 2px 5px;
}

.page-diablo-planner .planner-choice {
    min-height: 45px;
    padding: 5px 6px;
}

.page-diablo-planner .planner-choice img {
    width: 32px;
    height: 32px;
}

.page-diablo-planner .planner-config-panel {
    padding: 8px 8px 8px;
}

.page-diablo-planner .planner-config-heading {
    min-height: 34px;
    padding-bottom: 7px;
}

.page-diablo-planner .planner-compact-group {
    padding: 6px 0;
}

.page-diablo-planner .planner-compact-group + .planner-compact-group {
    padding-top: 6px;
}

.page-diablo-planner .planner-compact-option-list {
    gap: 4px;
}

.page-diablo-planner .planner-dialog-footer {
    padding: 9px 10px;
}

@media (max-width: 720px) {
    .page-diablo-planner .planner-item-dialog {
        width: min(650px, calc(100vw - 18px));
    }

    .page-diablo-planner .planner-item-dialog > div {
        grid-template-rows: auto auto minmax(360px, 1fr) auto;
    }

    .page-diablo-planner .planner-dialog-body {
        height: auto;
        grid-template-columns: 1fr;
    }
}

/* Build planner dialog proportion correction v6
   Fixes the previous auto-height dialog expanding to the viewport. */
.page-diablo-planner .planner-item-dialog {
    width: 690px !important;
    height: 510px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    overflow: hidden !important;
}

.page-diablo-planner .planner-item-dialog > div {
    display: grid !important;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
}

.page-diablo-planner .planner-dialog-body {
    display: grid !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 270px minmax(0, 1fr) !important;
    overflow: hidden !important;
}

.page-diablo-planner .planner-choice-panel,
.page-diablo-planner .planner-config-panel {
    min-height: 0 !important;
}

.page-diablo-planner .planner-choice-panel {
    padding: 7px 8px !important;
}

.page-diablo-planner .planner-choice-list {
    min-height: 0 !important;
    overflow-y: auto !important;
}

.page-diablo-planner .planner-config-panel {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 8px 8px 6px !important;
}

.page-diablo-planner .planner-dialog-footer {
    flex: 0 0 auto;
    padding: 9px 10px !important;
}

/* Keep the option area dense enough for 4 affixes + tempering + transformation. */
.page-diablo-planner .planner-config-heading {
    min-height: 34px !important;
    padding-bottom: 7px !important;
}

.page-diablo-planner .planner-compact-group {
    padding: 5px 0 !important;
}

.page-diablo-planner .planner-compact-group + .planner-compact-group {
    padding-top: 5px !important;
}

.page-diablo-planner .planner-compact-option-list {
    gap: 4px !important;
}

@media (max-width: 720px) {
    .page-diablo-planner .planner-item-dialog {
        width: calc(100vw - 18px) !important;
        height: min(82dvh, 620px) !important;
        max-width: calc(100vw - 18px) !important;
        max-height: calc(100dvh - 18px) !important;
    }

    .page-diablo-planner .planner-item-dialog > div {
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    }

    .page-diablo-planner .planner-dialog-body {
        display: block !important;
        height: auto !important;
        overflow-y: auto !important;
    }

    .page-diablo-planner .planner-choice-list {
        max-height: 180px !important;
    }

}

/* Equipment icon containment fix — keep tall/narrow item art inside the slot tile. */
.page-diablo-planner .planner-equipment-board--summary .planner-slot-tile > img {
    position: absolute !important;
    inset: 2px !important;
    display: block !important;
    width: calc(100% - 4px) !important;
    height: calc(100% - 4px) !important;
    max-width: calc(100% - 4px) !important;
    max-height: calc(100% - 4px) !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 6px;
    clip-path: inset(0 round 6px);
    transform: none !important;
}

.page-diablo-planner .planner-equipment-board--summary .planner-slot-tile {
    isolation: isolate;
}

.page-diablo-planner .planner-equipment-board--summary .planner-slot-sockets {
    z-index: 5;
}

/* Class feature selector redesign — game-like icon controls while preserving the warm planner theme. */
.page-diablo-planner .planner-mechanic-overview {
    padding: 16px 18px 18px;
}

.page-diablo-planner .planner-mechanic-overview > header {
    margin-bottom: 14px;
}

.page-diablo-planner .planner-mechanic-fields {
    display: block;
    min-width: 0;
}

.page-diablo-planner .planner-mechanic-simple {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}

.page-diablo-planner .planner-mechanic-slot-wrap {
    display: grid;
    gap: 8px;
    justify-items: start;
}

.page-diablo-planner .planner-mechanic-slot-title {
    color: #555b62;
    font-size: 14px;
    font-weight: 500;
}

.page-diablo-planner .planner-mechanic-slot {
    display: grid;
    min-width: 86px;
    justify-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    padding: 0;
    color: #434950;
    cursor: pointer;
    text-align: center;
}

.page-diablo-planner .planner-mechanic-slot-icon {
    position: relative;
    display: grid;
    width: 60px;
    height: 60px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #cfc9be;
    border-radius: 7px;
    background: linear-gradient(180deg, #f7f4ed 0%, #e9e4da 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65);
}

.page-diablo-planner .planner-mechanic-slot-icon::before,
.page-diablo-planner .planner-mechanic-slot-icon::after {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(126, 116, 100, .15);
    transform: rotate(45deg);
}

.page-diablo-planner .planner-mechanic-slot-icon::after {
    inset: 17px;
    transform: rotate(0deg);
}

.page-diablo-planner .planner-mechanic-slot-icon img {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.page-diablo-planner .planner-mechanic-slot.is-selected .planner-mechanic-slot-icon,
.page-diablo-planner .planner-mechanic-slot:hover .planner-mechanic-slot-icon,
.page-diablo-planner .planner-mechanic-slot:focus-visible .planner-mechanic-slot-icon {
    border-color: #9e6c55;
    box-shadow: 0 0 0 2px rgba(158, 108, 85, .12), inset 0 0 0 1px rgba(255,255,255,.7);
}

.page-diablo-planner .planner-mechanic-slot:focus-visible { outline: none; }
.page-diablo-planner .planner-mechanic-slot-name {
    max-width: 130px;
    color: #5a4a3d;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.page-diablo-planner .planner-enchantment-slots {
    gap: 12px;
}

/* Druid spirit boons */
.page-diablo-planner .planner-druid-boons {
    display: grid;
    width: min(620px, 100%);
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #ded8cd;
    border-radius: 8px;
    background: #f5f2eb;
}

.page-diablo-planner .planner-druid-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.page-diablo-planner .planner-druid-spirit {
    position: relative;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #2b2b28;
    padding: 3px;
    cursor: pointer;
}

.page-diablo-planner .planner-druid-spirit img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.page-diablo-planner .planner-druid-spirit span {
    position: absolute;
    left: -9999px;
}

.page-diablo-planner .planner-druid-spirit.is-selected {
    box-shadow: 0 0 0 3px #466f71, 0 0 0 5px rgba(70,111,113,.18);
}

.page-diablo-planner .planner-druid-spirit.is-selected::after {
    content: '결속';
    position: absolute;
    right: -7px;
    bottom: -4px;
    border: 1px solid #386466;
    border-radius: 9px;
    background: #f4fbfa;
    padding: 1px 4px;
    color: #386466;
    font-size: 11px;
    font-weight: 600;
}

.page-diablo-planner .planner-druid-powers {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 50px);
    gap: 10px;
    align-items: center;
}

.page-diablo-planner .planner-druid-powers::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 4px;
    right: 4px;
    height: 1px;
    background: #c8c1b5;
}

.page-diablo-planner .planner-mechanic-orb {
    position: relative;
    z-index: 1;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    overflow: hidden;
    border: 2px solid #827766;
    border-radius: 50%;
    background: #39352f;
    padding: 2px;
    cursor: pointer;
    box-shadow: inset 0 0 0 2px #1f1f1d;
}

.page-diablo-planner .planner-mechanic-orb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    filter: grayscale(.75) brightness(.72);
    opacity: .78;
}

.page-diablo-planner .planner-mechanic-orb.is-selected,
.page-diablo-planner .planner-mechanic-orb.is-secondary {
    border-color: #65878b;
    box-shadow: 0 0 0 2px rgba(73,115,119,.22), inset 0 0 0 2px #253536;
}

.page-diablo-planner .planner-mechanic-orb.is-selected img,
.page-diablo-planner .planner-mechanic-orb.is-secondary img {
    filter: none;
    opacity: 1;
}

.page-diablo-planner .planner-mechanic-orb.is-secondary::after {
    content: '';
    position: absolute;
    inset: 2px;
    border: 2px solid #ba8f4f;
    border-radius: 50%;
    pointer-events: none;
}

/* Necromancer Book of the Dead */
.page-diablo-planner .planner-necro-book {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.page-diablo-planner .planner-necro-group h3,
.page-diablo-planner .planner-spirit-hall h3 {
    margin: 0 0 9px;
    color: #555a60;
    font-size: 13px;
}

.page-diablo-planner .planner-necro-group > div {
    display: grid;
    gap: 7px;
    border: 1px solid #ded8ce;
    border-radius: 7px;
    background: #f7f4ee;
    padding: 10px;
}

.page-diablo-planner .planner-necro-row {
    position: relative;
    display: grid;
    grid-template-columns: 52px 42px 42px 42px;
    align-items: center;
    gap: 8px;
}

.page-diablo-planner .planner-necro-row::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 43px;
    right: 12px;
    top: 50%;
    height: 1px;
    background: #cec8be;
}

.page-diablo-planner .planner-necro-spec,
.page-diablo-planner .planner-necro-choice {
    position: relative;
    z-index: 1;
}

.page-diablo-planner .planner-necro-spec {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid #b7afa3;
    border-radius: 5px;
    background: #eee9e0;
}

.page-diablo-planner .planner-necro-spec img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.page-diablo-planner .planner-necro-spec small {
    position: absolute;
    left: -9999px;
}

.page-diablo-planner .planner-necro-row.is-active .planner-necro-spec {
    border-color: #766758;
    box-shadow: 0 0 0 2px rgba(118,103,88,.12);
}

.page-diablo-planner .planner-necro-choice {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 2px solid #655f54;
    border-radius: 50%;
    background: #282724;
    padding: 0;
    color: #a49b8d;
    cursor: pointer;
    box-shadow: inset 0 0 0 2px #171715;
}

.page-diablo-planner .planner-necro-choice span {
    font-size: 13px;
    font-weight: 600;
}

.page-diablo-planner .planner-necro-choice.is-sacrifice {
    border-radius: 4px;
    transform: rotate(45deg) scale(.86);
    border-color: #6b342e;
    background: #3c201d;
    color: #b06a5f;
}

.page-diablo-planner .planner-necro-choice.is-sacrifice span {
    transform: rotate(-45deg);
}

.page-diablo-planner .planner-necro-choice.is-selected {
    border-color: #7c8f67;
    background: #46523c;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(99,119,79,.22), inset 0 0 0 2px #263021;
}

.page-diablo-planner .planner-necro-choice.is-sacrifice.is-selected {
    border-color: #9b4d42;
    background: #6e2d27;
    box-shadow: 0 0 0 2px rgba(155,77,66,.18), inset 0 0 0 2px #391715;
}

/* Spiritborn Spirit Hall */
.page-diablo-planner .planner-spirit-hall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.page-diablo-planner .planner-spirit-options {
    display: grid;
    grid-template-columns: repeat(4, 64px);
    gap: 10px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid #ded8ce;
    border-radius: 7px;
    background: #f7f4ee;
}

.page-diablo-planner .planner-spirit-choice {
    display: grid;
    justify-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.page-diablo-planner .planner-spirit-choice > span {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border: 2px solid #4b443d;
    background: #292520;
    transform: rotate(45deg) scale(.82);
    overflow: hidden;
    box-shadow: inset 0 0 0 2px #151411;
}

.page-diablo-planner .planner-spirit-choice > span img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    transform: rotate(-45deg) scale(1.05);
}

.page-diablo-planner .planner-spirit-choice small {
    color: #76736d;
    font-size: 13px;
    font-weight: 500;
}

.page-diablo-planner .planner-spirit-choice.is-selected > span {
    border-color: #9a6e40;
    box-shadow: 0 0 0 3px rgba(154,110,64,.14), inset 0 0 0 2px #4c351f;
}

.page-diablo-planner .planner-spirit-choice.is-selected small {
    color: #6d4c2e;
}

/* Warlock soul shards fallback: dataset currently has no shard art, so use game-like jewel silhouettes. */
.page-diablo-planner .planner-soul-shards {
    display: grid;
    width: min(480px, 100%);
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid #ded8ce;
    border-radius: 7px;
    background: #f7f4ee;
}

.page-diablo-planner .planner-shard-row {
    position: relative;
    display: grid;
    grid-template-columns: 58px repeat(3, 50px);
    gap: 10px;
    align-items: center;
}

.page-diablo-planner .planner-shard-row::before {
    content: '';
    position: absolute;
    left: 47px;
    right: 9px;
    top: 50%;
    height: 1px;
    background: #ccc5ba;
}

.page-diablo-planner .planner-shard-origin,
.page-diablo-planner .planner-shard-choice {
    position: relative;
    z-index: 1;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 2px solid #635d55;
    border-radius: 50%;
    background: #2c2925;
    padding: 0;
}

.page-diablo-planner .planner-shard-choice { cursor: pointer; }
.page-diablo-planner .planner-shard-origin { width: 52px; height: 52px; border-color: #496365; }

.page-diablo-planner .planner-shard-origin i,
.page-diablo-planner .planner-shard-choice i {
    display: block;
    width: 20px;
    height: 30px;
    border: 1px solid rgba(255,255,255,.28);
    background: #7e3c8e;
    clip-path: polygon(50% 0, 88% 20%, 78% 82%, 50% 100%, 18% 80%, 10% 25%);
    transform: rotate(4deg);
    box-shadow: inset 5px 0 9px rgba(255,255,255,.18), inset -5px 0 9px rgba(0,0,0,.3);
}

.page-diablo-planner .planner-shard-choice.tier-1 i { width: 17px; height: 27px; }
.page-diablo-planner .planner-shard-choice.tier-2 i { width: 20px; height: 30px; transform: rotate(-8deg); }
.page-diablo-planner .planner-shard-choice.tier-3 i { width: 23px; height: 32px; transform: rotate(12deg); }
.page-diablo-planner .shard-violet i { background: #a44db5; }
.page-diablo-planner .shard-ember i { background: #bc532d; }
.page-diablo-planner .shard-amethyst i { background: #6640a9; }
.page-diablo-planner .shard-ruby i { background: #b3313e; }
.page-diablo-planner .planner-shard-choice.is-selected {
    border-color: #527578;
    box-shadow: 0 0 0 3px rgba(82,117,120,.15), inset 0 0 0 2px #1f2f31;
}

/* Mechanic picker */
.page-diablo-planner .planner-mechanic-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-diablo-planner .planner-mechanic-picker-card img {
    object-fit: contain;
}

.page-diablo-planner .planner-mechanic-picker-card small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}

@media (max-width: 900px) {
    .page-diablo-planner .planner-necro-book,
    .page-diablo-planner .planner-spirit-hall {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .page-diablo-planner .planner-druid-boons,
    .page-diablo-planner .planner-soul-shards {
        overflow-x: auto;
    }

    .page-diablo-planner .planner-druid-row {
        grid-template-columns: 54px 224px;
    }

    .page-diablo-planner .planner-druid-powers {
        grid-template-columns: repeat(4, 46px);
        gap: 8px;
    }

    .page-diablo-planner .planner-necro-group > div {
        overflow-x: auto;
    }

    .page-diablo-planner .planner-necro-row {
        grid-template-columns: 50px 38px 38px 38px;
        gap: 7px;
        min-width: 208px;
    }

    .page-diablo-planner .planner-spirit-options {
        grid-template-columns: repeat(4, minmax(52px, 1fr));
        gap: 6px;
        padding: 10px;
    }

    .page-diablo-planner .planner-mechanic-picker-grid {
        grid-template-columns: 1fr;
    }
}

.page-diablo-planner .planner-shard-origin img,
.page-diablo-planner .planner-shard-choice img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.page-diablo-planner .planner-shard-origin i,
.page-diablo-planner .planner-shard-choice i { display: none !important; }
.page-diablo-planner .planner-shard-choice.is-selected img {
    filter: brightness(1.12) saturate(1.08);
}

/* Class feature alignment: center every profession/mechanic selector. */
.page-diablo-planner .planner-mechanic-overview .planner-mechanic-fields {
    width: 100%;
    text-align: center;
}

.page-diablo-planner .planner-mechanic-overview .planner-mechanic-simple,
.page-diablo-planner .planner-mechanic-overview .planner-enchantment-slots {
    justify-content: center;
}

.page-diablo-planner .planner-mechanic-overview .planner-mechanic-slot-wrap {
    justify-items: center;
    text-align: center;
}

.page-diablo-planner .planner-mechanic-overview .planner-druid-boons,
.page-diablo-planner .planner-mechanic-overview .planner-necro-book,
.page-diablo-planner .planner-mechanic-overview .planner-spirit-hall,
.page-diablo-planner .planner-mechanic-overview .planner-soul-shards,
.page-diablo-planner .planner-mechanic-overview .planner-mechanic-picker-grid {
    margin-inline: auto;
}

.page-diablo-planner .planner-mechanic-overview .planner-necro-book {
    width: min(920px, 100%);
}

.page-diablo-planner .planner-mechanic-overview .planner-spirit-hall {
    width: min(760px, 100%);
}

.page-diablo-planner .planner-mechanic-overview .planner-mechanic-picker-grid {
    width: min(620px, 100%);
}

.page-diablo-planner .planner-mechanic-overview .planner-necro-group h3,
.page-diablo-planner .planner-mechanic-overview .planner-spirit-hall h3 {
    text-align: center;
}

@media (max-width: 900px) {
    .page-diablo-planner .planner-mechanic-overview .planner-necro-book,
    .page-diablo-planner .planner-mechanic-overview .planner-spirit-hall {
        width: 100%;
    }
}

/* Class feature polish: remove unused right-side space and make active choices unmistakable. */
.page-diablo-planner .planner-mechanic-overview .planner-druid-boons {
    width: fit-content;
    max-width: 100%;
}

.page-diablo-planner .planner-mechanic-overview .planner-druid-row {
    width: fit-content;
    grid-template-columns: 54px 230px;
    gap: 10px;
}

.page-diablo-planner .planner-mechanic-overview .planner-druid-powers {
    width: 230px;
    grid-template-columns: repeat(4, 50px);
    gap: 10px;
}

.page-diablo-planner .planner-mechanic-overview .planner-soul-shards {
    width: fit-content;
    max-width: 100%;
}

.page-diablo-planner .planner-mechanic-overview .planner-shard-row {
    width: fit-content;
    grid-template-columns: 58px repeat(3, 50px);
}

/* Shared active-state treatment. */
.page-diablo-planner .planner-mechanic-slot.is-selected .planner-mechanic-slot-icon {
    border: 3px solid #b47336;
    background: #fff7e8;
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 5px rgba(180, 115, 54, .30),
        0 5px 12px rgba(92, 58, 27, .14),
        inset 0 0 0 1px rgba(255,255,255,.8);
}

.page-diablo-planner .planner-mechanic-slot.is-selected .planner-mechanic-slot-name,
.page-diablo-planner .planner-mechanic-slot-wrap:has(.planner-mechanic-slot.is-selected) .planner-mechanic-slot-title {
    color: #9d4b24;
    font-weight: 600;
}

/* Druid: bonded spirit + selected boons. */
.page-diablo-planner .planner-druid-spirit.is-selected {
    box-shadow:
        0 0 0 3px #3f7474,
        0 0 0 6px rgba(63,116,116,.22),
        0 5px 12px rgba(39,71,71,.18);
    transform: scale(1.04);
}

.page-diablo-planner .planner-mechanic-orb.is-selected {
    border-color: #c17d31;
    background: #413528;
    box-shadow:
        0 0 0 3px #f7efe0,
        0 0 0 6px rgba(193,125,49,.32),
        inset 0 0 0 2px #5f4528;
    transform: scale(1.08);
}

.page-diablo-planner .planner-mechanic-orb.is-selected::before {
    content: '✓';
    position: absolute;
    z-index: 4;
    top: -6px;
    right: -6px;
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    border: 2px solid #fff8eb;
    border-radius: 50%;
    background: #a65a28;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.page-diablo-planner .planner-mechanic-orb.is-secondary {
    border-color: #3f7f83;
    box-shadow:
        0 0 0 3px #eef8f7,
        0 0 0 6px rgba(63,127,131,.30),
        inset 0 0 0 2px #2b4b4d;
    transform: scale(1.08);
}

/* Necromancer: upgrades and sacrifice. */
.page-diablo-planner .planner-necro-choice.is-selected:not(.is-sacrifice) {
    border: 3px solid #6f8f46;
    background: #586c3e;
    color: #fff;
    box-shadow:
        0 0 0 3px #f4f1e9,
        0 0 0 6px rgba(111,143,70,.30),
        inset 0 0 0 2px #2e3b22;
    transform: scale(1.08);
}

.page-diablo-planner .planner-necro-choice.is-sacrifice.is-selected {
    border: 3px solid #b14c3b;
    background: #8a342a;
    color: #fff;
    box-shadow:
        0 0 0 3px #fff4ee,
        0 0 0 6px rgba(177,76,59,.28),
        inset 0 0 0 2px #481a16;
    transform: rotate(45deg) scale(.94);
}

.page-diablo-planner .planner-necro-row.is-active .planner-necro-spec {
    border-color: #9a7547;
    background: #fff8eb;
    box-shadow: 0 0 0 2px rgba(154,117,71,.18);
}

/* Spiritborn: active spirit should read immediately at a glance. */
.page-diablo-planner .planner-spirit-choice.is-selected > span {
    border: 3px solid #c28035;
    background: #382719;
    box-shadow:
        0 0 0 3px #fff7e9,
        0 0 0 6px rgba(194,128,53,.30),
        inset 0 0 0 2px #5e3d1e;
}

.page-diablo-planner .planner-spirit-choice.is-selected > span img {
    filter: brightness(1.14) saturate(1.18);
}

.page-diablo-planner .planner-spirit-choice.is-selected small {
    color: #9b4d25;
    font-weight: 600;
}

/* Warlock: selected shard gets a strong ring and lift. */
.page-diablo-planner .planner-shard-choice.is-selected {
    border: 3px solid #4e8285;
    background: #26393a;
    box-shadow:
        0 0 0 3px #f1f8f7,
        0 0 0 6px rgba(78,130,133,.30),
        0 4px 10px rgba(40,75,78,.16),
        inset 0 0 0 2px #1d2c2e;
    transform: scale(1.08);
}

.page-diablo-planner .planner-shard-choice.is-selected img {
    filter: brightness(1.22) saturate(1.22) contrast(1.05);
}

/* Selection popup cards: selected item is also much clearer. */
.page-diablo-planner .planner-mechanic-picker-card.is-selected,
.page-diablo-planner .planner-picker-card.is-selected {
    border-color: #b36b35;
    background: #fff6e8;
    box-shadow: 0 0 0 2px rgba(179,107,53,.20), inset 4px 0 #b35332;
}

@media (max-width: 720px) {
    .page-diablo-planner .planner-mechanic-overview .planner-druid-boons,
    .page-diablo-planner .planner-mechanic-overview .planner-soul-shards {
        width: 100%;
    }

    .page-diablo-planner .planner-mechanic-overview .planner-druid-row {
        width: max-content;
        grid-template-columns: 54px 224px;
    }

    .page-diablo-planner .planner-mechanic-overview .planner-druid-powers {
        width: 224px;
        grid-template-columns: repeat(4, 46px);
        gap: 8px;
    }
}

/* 2026-08-25: taller skill/paragon canvases + direct paragon glyph/board pickers */
.page-diablo-planner .planner-skill-viewport,
.page-diablo-planner .planner-paragon-viewport {
    height: 1320px;
    min-height: 1320px;
}

.page-diablo-planner .planner-paragon-board-link {
    position: absolute;
    z-index: 2;
    height: 8px;
    transform-origin: 0 50%;
    border-top: 2px solid #73282d;
    border-bottom: 2px solid #331014;
    background: #15171b;
    box-shadow: 0 0 0 2px rgba(7, 8, 10, .9), 0 0 12px rgba(129, 39, 44, .32);
    pointer-events: none;
}

.page-diablo-planner .planner-paragon-glyph-range {
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 2px dashed rgba(74, 153, 211, .68);
    background: rgba(41, 98, 143, .08);
    box-shadow: inset 0 0 30px rgba(44, 113, 165, .11), 0 0 18px rgba(54, 128, 184, .12);
    pointer-events: none;
}

.page-diablo-planner .planner-paragon-node.is-in-radius {
    border-color: #477fa8;
    background: #13202b;
    box-shadow: inset 0 0 0 4px #101d28, 0 0 0 3px rgba(67, 139, 194, .58), 0 0 12px rgba(56, 131, 189, .25);
}

.page-diablo-planner .planner-paragon-node.is-in-radius.is-active {
    border-color: #ec3944;
    background: #291218;
    box-shadow: inset 0 0 0 4px #260a0e, 0 0 0 3px #8f1219, 0 0 0 6px rgba(67, 139, 194, .38), 0 0 14px rgba(220, 18, 29, .42);
}

.page-diablo-planner .planner-paragon-node.is-glyph-mainstat {
    border-color: #e3b34d;
    box-shadow: inset 0 0 0 4px #2a210d, 0 0 0 3px rgba(225, 171, 57, .9), 0 0 15px rgba(225, 171, 57, .42);
}

.page-diablo-planner .planner-paragon-node.is-glyph-mainstat.is-active {
    box-shadow: inset 0 0 0 4px #281207, 0 0 0 3px #ed2631, 0 0 0 6px rgba(225, 171, 57, .82), 0 0 17px rgba(225, 171, 57, .35);
}

.page-diablo-planner .planner-glyph-stat-badge {
    position: absolute;
    z-index: 7;
    top: -17px;
    left: 50%;
    min-width: 30px;
    transform: translateX(-50%);
    border: 1px solid #aa7d2e;
    border-radius: 10px;
    background: #2a2112;
    padding: 2px 6px;
    color: #f1cb76;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
}

.page-diablo-planner .planner-paragon-node.is-socket.is-active {
    cursor: pointer;
}

.page-diablo-planner .planner-paragon-node.is-gate.is-active::after {
    position: absolute;
    z-index: 8;
    right: -7px;
    bottom: -7px;
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    border: 1px solid #d7d1c7;
    border-radius: 50%;
    background: #f7f4ed;
    color: #7c3a35;
    content: "+";
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,.34);
}

.page-diablo-planner .planner-paragon-node.is-gate.is-active::after {
    transform: rotate(-45deg);
}

.page-diablo-planner .planner-paragon-picker {
    width: min(720px, calc(100vw - 36px));
    max-height: min(720px, calc(100dvh - 36px));
    margin: auto;
    overflow: hidden;
    border: 1px solid #cfc9bd;
    border-radius: 12px;
    background: #fbfaf6;
    padding: 0;
    color: #292d33;
    box-shadow: 0 26px 80px rgba(0, 0, 0, .34);
}

.page-diablo-planner .planner-paragon-picker::backdrop {
    background: rgba(24, 26, 30, .64);
}

.page-diablo-planner .planner-paragon-picker-shell {
    display: grid;
    max-height: min(720px, calc(100dvh - 36px));
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.page-diablo-planner .planner-paragon-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #ddd8cf;
    padding: 15px 17px 13px;
}

.page-diablo-planner .planner-paragon-picker-head small {
    display: block;
    margin-bottom: 3px;
    color: #a3483d;
    font-size: 13px;
    font-weight: 600;
}

.page-diablo-planner .planner-paragon-picker-head h3 {
    margin: 0;
    color: #292d33;
    font-size: 18px;
}

.page-diablo-planner .planner-paragon-picker-head > button {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #747980;
    cursor: pointer;
    font-size: 25px;
}

.page-diablo-planner .planner-paragon-picker-search {
    border-bottom: 1px solid #e0dcd4;
    background: #f4f1eb;
    padding: 10px 14px;
}

.page-diablo-planner .planner-paragon-picker-search input {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    border: 1px solid #c9c4ba;
    border-radius: 7px;
    background: #fff;
    padding: 0 11px;
    color: #343940;
    font: inherit;
    font-size: 14px;
    outline: none;
}

.page-diablo-planner .planner-paragon-picker-search input:focus {
    border-color: #92796f;
    box-shadow: 0 0 0 2px rgba(154, 77, 64, .11);
}

.page-diablo-planner .planner-paragon-picker-grid {
    display: grid;
    min-height: 0;
    overflow-y: auto;
    gap: 8px;
    padding: 12px 14px 16px;
}

.page-diablo-planner .planner-paragon-picker-grid--glyph {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-diablo-planner .planner-paragon-picker-grid--board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-diablo-planner .planner-paragon-picker-card {
    display: grid;
    min-width: 0;
    min-height: 66px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #d9d4ca;
    border-radius: 9px;
    background: #fff;
    padding: 8px 9px;
    color: #343940;
    cursor: pointer;
    text-align: left;
}

.page-diablo-planner .planner-paragon-picker-card:hover,
.page-diablo-planner .planner-paragon-picker-card.is-selected {
    border-color: #a34a3f;
    background: #fff8f5;
}

.page-diablo-planner .planner-paragon-picker-card.is-selected {
    box-shadow: inset 3px 0 #a94437;
}

.page-diablo-planner .planner-paragon-picker-card > img,
.page-diablo-planner .planner-paragon-board-choice-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid #8b6f3c;
    border-radius: 7px;
    background: #1b1d21;
    object-fit: cover;
    color: #d7a84a;
    font-size: 20px;
}

.page-diablo-planner .planner-paragon-picker-card strong,
.page-diablo-planner .planner-paragon-picker-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-diablo-planner .planner-paragon-picker-card strong {
    font-size: 14px;
}

.page-diablo-planner .planner-paragon-picker-card small {
    margin-top: 4px;
    color: #7d8289;
    font-size: 13px;
}

.page-diablo-planner .planner-paragon-picker-card > i {
    color: #a24b40;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}

.page-diablo-planner .planner-paragon-picker-empty {
    grid-column: 1 / -1;
    margin: 30px 0;
    color: #858a90;
    text-align: center;
}

.page-diablo-planner .planner-paragon-picker-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #ddd8cf;
    background: #f5f2ec;
    padding: 10px 14px;
}

.page-diablo-planner .planner-paragon-picker-foot button {
    min-width: 68px;
    min-height: 36px;
    border: 1px solid #c8c2b8;
    border-radius: 6px;
    background: #fff;
    color: #444a51;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.page-diablo-planner .planner-paragon-picker-foot button.is-danger {
    border-color: #d7aba4;
    color: #a33f35;
}

@media (max-width: 980px) {
    .page-diablo-planner .planner-skill-viewport,
    .page-diablo-planner .planner-paragon-viewport {
        height: 1040px;
        min-height: 1040px;
    }
}

@media (max-width: 720px) {
    .page-diablo-planner .planner-skill-viewport,
    .page-diablo-planner .planner-paragon-viewport {
        height: 780px;
        min-height: 780px;
    }

    .page-diablo-planner .planner-paragon-picker {
        width: calc(100vw - 18px);
        max-height: calc(100dvh - 18px);
    }

    .page-diablo-planner .planner-paragon-picker-shell {
        max-height: calc(100dvh - 18px);
    }

    .page-diablo-planner .planner-paragon-picker-grid--glyph,
    .page-diablo-planner .planner-paragon-picker-grid--board {
        grid-template-columns: 1fr;
    }
}


/* 2026-08-25: paragon boards attach edge-to-edge + per-board controls */
.page-diablo-planner .planner-paragon-board-panel {
    border-width: 3px;
}

.page-diablo-planner .planner-paragon-board-link {
    display: none !important;
}

.page-diablo-planner .planner-paragon-board-title {
    top: 8px;
    right: 8px;
    left: auto;
    min-width: 260px;
    max-width: 390px;
}

.page-diablo-planner .planner-paragon-board-local-tools {
    position: absolute;
    z-index: 12;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    pointer-events: auto;
}

.page-diablo-planner .planner-paragon-board-local-tools button {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #4b515d;
    border-radius: 6px;
    background: rgba(15, 17, 22, .96);
    padding: 0 10px;
    color: #eee5d7;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .38);
}

.page-diablo-planner .planner-paragon-board-local-tools button span {
    font-size: 13px;
    font-weight: 500;
}

.page-diablo-planner .planner-paragon-board-local-tools button:hover {
    border-color: #c58b52;
    background: #282018;
    color: #ffd49d;
}

.page-diablo-planner .planner-paragon-board-local-tools button.is-danger:hover {
    border-color: #b74a4f;
    background: #321518;
    color: #ffb0b4;
}

.page-diablo-planner .planner-paragon-node.is-gate {
    z-index: 13;
}

@media (max-width: 720px) {
    .page-diablo-planner .planner-paragon-board-title {
        min-width: 220px;
    }

    .page-diablo-planner .planner-paragon-board-local-tools button span {
        display: none;
    }
}


/* Paragon gate refinement: square gate nodes, flush board attachment, no duplicate plus badge */
.page-diablo-planner .planner-paragon-node.is-gate {
    z-index: 13;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    background: #171a1f;
}

.page-diablo-planner .planner-paragon-node.is-gate > img,
.page-diablo-planner .planner-paragon-node.is-gate > span {
    transform: none;
}

.page-diablo-planner .planner-paragon-node.is-gate > img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.page-diablo-planner .planner-paragon-node.is-gate .planner-node-tooltip {
    transform: translateX(-50%) scale(var(--planner-canvas-inverse-scale, 1));
}

.page-diablo-planner .planner-paragon-node.is-gate.is-active::after {
    display: none;
    content: none;
}

/* 2026-08-25: paragon rotation animation + legendary board picker + shift-drag polish */
.page-diablo-planner .planner-paragon-board-rotator {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    overflow: visible;
}

.page-diablo-planner .planner-paragon-board-panel.is-rotating .planner-paragon-board-rotator {
    transition: transform 300ms cubic-bezier(.22, .72, .24, 1);
    will-change: transform;
    pointer-events: none;
}

.page-diablo-planner .planner-paragon-board-panel.is-rotating .planner-paragon-board-rotator.is-rotating-active {
    transform: rotate(var(--paragon-rotate-delta, 90deg));
}

.page-diablo-planner .planner-paragon-board-panel.is-rotating .planner-paragon-board-local-tools,
.page-diablo-planner .planner-paragon-board-panel.is-rotating .planner-paragon-board-title {
    pointer-events: none;
}

.page-diablo-planner .planner-paragon-board-choice {
    min-height: 92px;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 11px;
}

.page-diablo-planner .planner-paragon-board-choice > img {
    width: 54px;
    height: 54px;
    border: 1px solid #9b7836;
    border-radius: 7px;
    background: #181a1e;
    object-fit: contain;
    padding: 3px;
}

.page-diablo-planner .planner-paragon-board-choice > span {
    min-width: 0;
}

.page-diablo-planner .planner-paragon-board-choice strong {
    color: #3b3025;
    font-size: 13px;
}

.page-diablo-planner .planner-paragon-board-choice small {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    color: #767a80;
    font-size: 13px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.page-diablo-planner .planner-paragon-node {
    user-select: none;
    -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
    .page-diablo-planner .planner-paragon-board-panel.is-rotating .planner-paragon-board-rotator {
        transition: none;
    }
}


/* 2026-08-25: paragon node square corners + multiline tooltips + larger glyph + hide legacy board toolbar */
.page-diablo-planner .planner-paragon-node,
.page-diablo-planner .planner-paragon-node.is-gate,
.page-diablo-planner .planner-paragon-node.is-socket,
.page-diablo-planner .planner-paragon-node.is-active,
.page-diablo-planner .planner-paragon-node.is-in-radius,
.page-diablo-planner .planner-paragon-node.is-glyph-mainstat {
    border-radius: 0 !important;
}

.page-diablo-planner .planner-paragon-node > img {
    border-radius: 0 !important;
}

.page-diablo-planner .planner-paragon-node .planner-node-tooltip small {
    display: grid;
    gap: 4px;
}

.page-diablo-planner .planner-paragon-node .planner-node-tooltip small > span {
    display: block;
    white-space: normal;
}

.page-diablo-planner .planner-paragon-node.is-socket > img {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px;
    max-height: 42px;
    object-fit: contain;
}

.page-diablo-planner .planner-paragon-controls {
    display: none !important;
}

/* 2026-08-25: cleaner glyph radius/main-stat visualization */
.page-diablo-planner .planner-paragon-glyph-range {
    border: 1px solid rgba(73, 139, 184, .28) !important;
    background: rgba(49, 105, 146, .045) !important;
    box-shadow: inset 0 0 34px rgba(45, 106, 149, .055) !important;
}

/* The glyph radius is represented by the area itself, not another border on every node. */
.page-diablo-planner .planner-paragon-node.is-in-radius:not(.is-active) {
    border-color: #32363d;
    background: #171a1f;
    box-shadow: inset 0 0 0 4px #0d0f12, 0 1px 5px rgba(0, 0, 0, .65);
}

.page-diablo-planner .planner-paragon-node.is-in-radius.is-magic:not(.is-active) {
    border-color: #31597b;
    background: #171a1f;
    box-shadow: inset 0 0 0 4px #0b1118, 0 0 0 1px #152a3d;
}

.page-diablo-planner .planner-paragon-node.is-in-radius.is-rare:not(.is-active) {
    border-color: #8b6e20;
    background: #171a1f;
    box-shadow: inset 0 0 0 4px #151207, 0 0 0 1px #463812;
}

.page-diablo-planner .planner-paragon-node.is-in-radius.is-legendary:not(.is-active) {
    border-color: #82312a;
    background: #171a1f;
    box-shadow: inset 0 0 0 4px #190a09, 0 0 0 2px #451610;
}

.page-diablo-planner .planner-paragon-node.is-in-radius.is-socket:not(.is-active) {
    border-color: #79528a;
    background: #18121c;
    box-shadow: inset 0 0 0 4px #0d0f12, 0 1px 5px rgba(0, 0, 0, .65);
}

.page-diablo-planner .planner-paragon-node.is-in-radius.is-active,
.page-diablo-planner .planner-paragon-node.is-in-radius.is-glyph-mainstat.is-active {
    border-color: #ed2631;
    background: #2b1013;
    box-shadow: inset 0 0 0 4px #28080b, 0 0 0 3px #8f1219, 0 0 12px rgba(220, 18, 29, .48);
}

/* Main-stat nodes get one restrained gold corner marker instead of a second outline and text badge. */
.page-diablo-planner .planner-paragon-node.is-glyph-mainstat:not(.is-active) {
    background: #171a1f;
}

.page-diablo-planner .planner-paragon-node.is-glyph-mainstat::before {
    position: absolute;
    z-index: 8;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(247, 218, 144, .62);
    border-radius: 50%;
    background: #bd8d31;
    content: "";
    box-shadow: 0 0 0 2px rgba(19, 16, 10, .72);
    pointer-events: none;
}

.page-diablo-planner .planner-paragon-node.is-glyph-mainstat.is-active::before {
    background: #f2c967;
    border-color: #ffe3a3;
}

.page-diablo-planner .planner-glyph-stat-badge {
    display: none !important;
}


/* 2026-08-25: crisp canvas zoom. Chromium CSS zoom re-rasterizes text/icons at the target scale instead of enlarging one transformed bitmap. */
.page-diablo-planner .planner-canvas-pan-layer {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.page-diablo-planner .planner-canvas-stage[data-crisp-zoom="true"] {
    transform: none !important;
    transform-origin: 0 0;
    will-change: auto;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}

.page-diablo-planner .planner-canvas-stage[data-crisp-zoom="true"] img,
.page-diablo-planner .planner-canvas-stage[data-crisp-zoom="true"] svg {
    image-rendering: auto;
    shape-rendering: geometricPrecision;
}

.page-diablo-planner .planner-canvas-stage[data-crisp-zoom="true"] .planner-paragon-node,
.page-diablo-planner .planner-canvas-stage[data-crisp-zoom="true"] .planner-skill-node {
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}


/* 2026-08-25: skill-tree crisp zoom refinement */
.page-diablo-planner .planner-skill-stage[data-crisp-zoom="true"] {
    isolation: isolate;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    font-synthesis: none;
}

.page-diablo-planner .planner-skill-stage[data-crisp-zoom="true"] .planner-skill-lines {
    shape-rendering: geometricPrecision;
    vector-effect: non-scaling-stroke;
}

.page-diablo-planner .planner-skill-stage[data-crisp-zoom="true"] .planner-skill-lines line,
.page-diablo-planner .planner-skill-stage[data-crisp-zoom="true"] .planner-skill-lines path {
    shape-rendering: geometricPrecision;
}

.page-diablo-planner .planner-skill-stage[data-crisp-zoom="true"] .planner-skill-node img {
    image-rendering: auto;
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    transform: translateZ(0);
    filter: none;
    opacity: .46;
}

.page-diablo-planner .planner-skill-stage[data-crisp-zoom="true"] .planner-skill-node.is-active img {
    opacity: 1;
}

.page-diablo-planner .planner-skill-stage[data-crisp-zoom="true"] .planner-skill-node::before,
.page-diablo-planner .planner-skill-stage[data-crisp-zoom="true"] .planner-skill-junction,
.page-diablo-planner .planner-skill-stage[data-crisp-zoom="true"] .planner-skill-junction::before,
.page-diablo-planner .planner-skill-stage[data-crisp-zoom="true"] .planner-skill-gate {
    backface-visibility: hidden;
}

.page-diablo-planner .planner-skill-stage[data-crisp-zoom="true"] .planner-skill-node > b,
.page-diablo-planner .planner-skill-stage[data-crisp-zoom="true"] .planner-skill-gate,
.page-diablo-planner .planner-skill-stage[data-crisp-zoom="true"] text {
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}


/* Build planner top controls refresh — warm site styling */
.page-diablo-planner .planner-titlebar {
    margin-bottom: 16px;
}

.page-diablo-planner .planner-build-settings--top {
    display: grid;
    grid-template-columns: minmax(230px, 260px) minmax(300px, 1fr) 170px auto;
    align-items: end;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #d9d4ca;
    background: #fffdfa;
}

.page-diablo-planner .planner-class-setting {
    display: grid;
    min-width: 0;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: end;
    gap: 10px;
}

.page-diablo-planner .planner-class-setting > label,
.page-diablo-planner .planner-season-setting,
.page-diablo-planner .planner-build-settings--top .planner-build-name {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.page-diablo-planner .planner-class-setting-portrait {
    position: relative;
    display: block;
    width: 74px;
    height: 74px;
    overflow: hidden;
    border: 1px solid #c9c0b1;
    background: linear-gradient(180deg, #f1ede5 0%, #e6dfd3 100%);
}

.page-diablo-planner .planner-class-setting-portrait::after {
    position: absolute;
    inset: auto 0 0;
    height: 20px;
    background: linear-gradient(180deg, rgba(245, 241, 234, 0), rgba(245, 241, 234, .32));
    content: '';
    pointer-events: none;
}

.page-diablo-planner .planner-class-setting-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
}

.page-diablo-planner .planner-build-settings--top input,
.page-diablo-planner .planner-build-settings--top select {
    min-height: 42px;
    border-color: #c7c1b8;
    background: #fff;
    font-size: 13px;
}

.page-diablo-planner .planner-build-settings--top .planner-build-name input {
    font-size: 14px;
}

.page-diablo-planner .planner-actions--settings {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0;
}

.page-diablo-planner .planner-actions--settings button {
    min-height: 42px;
    white-space: nowrap;
}

.page-diablo-planner .planner-actions--settings button[data-action="save"] {
    min-width: 76px;
    border-color: #315f91;
    background: #315f91;
    color: #fff;
}

.page-diablo-planner .planner-actions--settings button[data-action="reset"] {
    min-width: 68px;
    background: #fff;
}

@media (max-width: 980px) {
    .page-diablo-planner .planner-build-settings--top {
        grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr) 150px;
    }

    .page-diablo-planner .planner-actions--settings {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 700px) {
    .page-diablo-planner .planner-build-settings--top {
        grid-template-columns: 1fr;
    }

    .page-diablo-planner .planner-class-setting {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .page-diablo-planner .planner-class-setting-portrait {
        width: 64px;
        height: 64px;
    }

    .page-diablo-planner .planner-actions--settings {
        grid-column: auto;
        justify-content: stretch;
    }

    .page-diablo-planner .planner-actions--settings button {
        flex: 1 1 0;
    }
}

/* 2026-08-30 source-accurate class feature artwork from D4Builds. */
.page-diablo-planner .planner-druid-spirit,
.page-diablo-planner .planner-mechanic-orb,
.page-diablo-planner .planner-necro-choice {
    isolation: isolate;
    overflow: visible;
    border: 0;
    box-shadow: none;
}

.page-diablo-planner .planner-druid-spirit {
    width: 58px;
    height: 58px;
    border-radius: 0;
    background: url('/assets/img/diablo4-planner/class-features/d4builds/frames/category.png') center/contain no-repeat;
    padding: 9px;
}

.page-diablo-planner .planner-druid-spirit.is-selected {
    background-image: url('/assets/img/diablo4-planner/class-features/d4builds/frames/category-active.png');
    box-shadow: none;
    transform: scale(1.05);
}

.page-diablo-planner .planner-druid-spirit img {
    position: relative;
    z-index: -1;
    border-radius: 50%;
}

.page-diablo-planner .planner-mechanic-orb {
    width: 50px;
    height: 50px;
    border-radius: 0;
    background: url('/assets/img/diablo4-planner/class-features/d4builds/frames/node.png') center/contain no-repeat;
    padding: 8px;
}

.page-diablo-planner .planner-mechanic-orb.is-selected,
.page-diablo-planner .planner-mechanic-orb.is-secondary {
    background-image: url('/assets/img/diablo4-planner/class-features/d4builds/frames/node-active.png');
    border: 0;
    box-shadow: none;
}

.page-diablo-planner .planner-mechanic-orb img {
    position: relative;
    z-index: -1;
    border-radius: 50%;
    filter: grayscale(.8) brightness(.7);
}

.page-diablo-planner .planner-mechanic-orb.is-selected img,
.page-diablo-planner .planner-mechanic-orb.is-secondary img {
    filter: none;
}

.page-diablo-planner .planner-necro-spec {
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 0;
    background: url('/assets/img/diablo4-planner/class-features/d4builds/frames/summon-node.png') center/contain no-repeat;
    padding: 8px;
}

.page-diablo-planner .planner-necro-row.is-active .planner-necro-spec {
    border: 0;
    background: url('/assets/img/diablo4-planner/class-features/d4builds/frames/summon-node-active.png') center/contain no-repeat;
    box-shadow: none;
}

.page-diablo-planner .planner-necro-spec img {
    width: 38px;
    height: 38px;
}

.page-diablo-planner .planner-necro-choice,
.page-diablo-planner .planner-necro-choice.is-selected:not(.is-sacrifice) {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 0;
    background: url('/assets/img/diablo4-planner/class-features/d4builds/frames/node.png') center/contain no-repeat;
    color: #9f9482;
    box-shadow: none;
    transform: none;
}

.page-diablo-planner .planner-necro-choice.is-selected:not(.is-sacrifice) {
    background-image: url('/assets/img/diablo4-planner/class-features/d4builds/frames/node-active.png');
    color: #f1dfb7;
}

.page-diablo-planner .planner-necro-choice.is-sacrifice,
.page-diablo-planner .planner-necro-choice.is-sacrifice.is-selected {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 0;
    background: url('/assets/img/diablo4-planner/class-features/d4builds/frames/sacrifice.png') center/contain no-repeat;
    color: #b98276;
    box-shadow: none;
    transform: none;
}

.page-diablo-planner .planner-necro-choice.is-sacrifice.is-selected {
    background-image: url('/assets/img/diablo4-planner/class-features/d4builds/frames/sacrifice-active.png');
    color: #ffd1c1;
}

.page-diablo-planner .planner-necro-choice.is-sacrifice span {
    transform: none;
}

.page-diablo-planner .planner-spirit-choice > span {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.page-diablo-planner .planner-spirit-choice.is-selected > span {
    border: 0;
    background: transparent;
    box-shadow: 0 0 20px rgba(210, 141, 52, .32);
}

.page-diablo-planner .planner-shard-origin,
.page-diablo-planner .planner-shard-choice {
    border-color: #584d66;
    background: #211f29;
}

/* D4Guides-exact War Plan canvas, activity rail and source coordinates. */
.page-diablo-planner .planner-warplan-workspace {
    border-top-color: #2a2d33;
    background: #15171b;
    padding: 16px 18px 20px;
}

.page-diablo-planner .planner-warplan-toolbar {
    max-width: 1215px;
    margin-inline: auto;
}

.page-diablo-planner .planner-warplan-points,
.page-diablo-planner .planner-warplan-search input,
.page-diablo-planner .planner-warplan-fit {
    border-color: #33363e;
    background: #1c1e23;
    color: #b8bbc2;
}

.page-diablo-planner .planner-warplan-zoom,
.page-diablo-planner .planner-warplan-guide {
    color: #747881;
}

.page-diablo-planner .planner-warplan-main {
    display: grid;
    max-width: 1215px;
    grid-template-columns: minmax(0, 875px) 316px;
    align-items: start;
    gap: 24px;
    margin: 0 auto;
}

.page-diablo-planner .planner-warplan-sidebar {
    min-width: 0;
}

.page-diablo-planner .planner-warplan-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin: 0;
}

.page-diablo-planner .planner-warplan-tab {
    min-height: 58px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    border: 1px solid #292c33;
    border-radius: 7px;
    background: #111318;
    padding: 8px 12px;
    color: #aaaeb6;
}

.page-diablo-planner .planner-warplan-tab:hover {
    border-color: #4b3336;
    background: #17191f;
}

.page-diablo-planner .planner-warplan-tab.is-current {
    border-color: #8d1f26;
    background: #1a1b20;
    box-shadow: inset 0 0 0 1px rgba(172, 31, 40, .16);
}

.page-diablo-planner .planner-warplan-tab img {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
}

.page-diablo-planner .planner-warplan-tab span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.page-diablo-planner .planner-warplan-tab strong {
    color: #b9bbc1;
    font-size: 13px;
    font-weight: 650;
}

.page-diablo-planner .planner-warplan-tab small {
    margin: 0;
    color: #777b84;
    font-size: 10px;
    white-space: nowrap;
}

.page-diablo-planner .planner-warplan-tab i {
    display: none;
}

.page-diablo-planner .planner-warplan-selection {
    display: flex;
    min-height: 65px;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    border: 1px solid #292c33;
    border-radius: 7px;
    background: #111318;
    padding: 0 15px;
    color: #777b84;
    font-size: 11px;
}

.page-diablo-planner .planner-warplan-selection strong {
    color: #a7abb3;
    font-size: 12px;
}

.page-diablo-planner .planner-warplan-viewport {
    width: 100%;
    height: min(76vh, 870px);
    min-height: 650px;
    border-color: #292c33;
    border-radius: 5px;
    background: #101216;
}

.page-diablo-planner .planner-warplan-stage.is-d4guides-exact {
    width: 875px;
    height: 870px;
    background-color: #101216;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-lines {
    width: 100%;
    height: 100%;
}

.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-line {
    stroke: #7d8187;
    stroke-width: 2;
    opacity: .70;
}

.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-line.is-active {
    stroke: #c2272f;
    stroke-width: 3;
    opacity: 1;
}

.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node {
    width: 66px;
    min-height: 66px;
    transform: translate(-50%, -50%);
}

.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node-art,
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node.is-choice .planner-warplan-node-art {
    width: 56px;
    height: 56px;
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node-art::after {
    display: none;
}

.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node-art img,
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node.is-choice .planner-warplan-node-art img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    filter: none;
    opacity: 1;
    object-fit: contain;
    transform: none;
}

.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node.is-keystone .planner-warplan-node-art {
    width: 88px;
    height: 88px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node.is-keystone .planner-warplan-node-art img {
    width: 88px;
    height: 88px;
    border-radius: 0;
    object-fit: contain;
    transform: none;
}

.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node.is-locked:not(.is-active) {
    opacity: 1;
}

.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node.is-active:not(.is-keystone) .planner-warplan-node-art {
    border: 2px solid #d22d36;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 13px rgba(210, 45, 54, .72);
}

.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node-name,
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-rank {
    display: none;
}

@media (max-width: 1080px) {
    .page-diablo-planner .planner-warplan-main {
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 14px;
    }
}

@media (max-width: 780px) {
    .page-diablo-planner .planner-warplan-main {
        grid-template-columns: 1fr;
    }

    .page-diablo-planner .planner-warplan-sidebar {
        grid-row: 1;
    }

    .page-diablo-planner .planner-warplan-tabs {
        display: flex;
        overflow-x: auto;
    }

    .page-diablo-planner .planner-warplan-tab {
        flex: 0 0 190px;
    }

    .page-diablo-planner .planner-warplan-selection {
        flex: 0 0 150px;
        margin: 0;
    }

    .page-diablo-planner .planner-warplan-viewport {
        height: 680px;
        min-height: 560px;
    }
}


/* Equipment row alignment: keep weapon/offhand rows paired across both columns */
.page-diablo-planner .planner-equipment-board--summary .planner-slot-spacer {
    display: block;
    min-height: 66px;
    pointer-events: none;
}

@media (max-width: 760px) {
    .page-diablo-planner .planner-equipment-board--summary .planner-slot-spacer {
        display: none;
    }
}


/* Empty-slot placeholder refinement */
.page-diablo-planner .planner-equipment-board--summary .planner-slot-tile {
    background: linear-gradient(180deg, #f8f6f1 0%, #f2eee7 100%);
    border-color: #c8c1b5;
}

.page-diablo-planner .planner-slot-placeholder {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #b3ac9f;
    opacity: .95;
}

.page-diablo-planner .planner-slot-placeholder svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}


/* Mercenary / War Plans tabs + glyph hover details */
.page-diablo-planner .planner-feature-tab-head{border-bottom:1px solid #ded9cf;padding:18px 20px 14px}.page-diablo-planner .planner-feature-tab-head p{margin:0 0 4px;color:#ad4437;font-size: 13px;font-weight:600;letter-spacing:.12em}.page-diablo-planner .planner-feature-tab-head h2{margin:0;color:#292d33;font-size:19px}.page-diablo-planner .planner-feature-tab-head span{display:block;margin-top:5px;color:#858078;font-size: 13px}.page-diablo-planner .planner-mercenary-layout{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:560px}.page-diablo-planner .planner-mercenary-list{display:grid;align-content:start;gap:8px;border-right:1px solid #ded9cf;padding:14px;background:#f7f4ee}.page-diablo-planner .planner-mercenary-card{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;min-height:58px;border:1px solid #d8d2c7;background:#fff;padding:7px 9px;text-align:left;cursor:pointer}.page-diablo-planner .planner-mercenary-card.is-selected{border-color:#b54a3b;box-shadow:inset 3px 0 #b54a3b;background:#fbf7f3}.page-diablo-planner .planner-mercenary-mark{display:grid;width:40px;height:40px;place-items:center;border:1px solid #beb6aa;background:#ede8df;color:#755849;font-weight:600}.page-diablo-planner .planner-mercenary-card strong{display:block;color:#262a30;font-size: 14px}.page-diablo-planner .planner-mercenary-card small{display:block;margin-top:3px;color:#8a857d;font-size: 13px}.page-diablo-planner .planner-mercenary-detail{padding:20px}.page-diablo-planner .planner-mercenary-detail>header{border-bottom:1px solid #ded9cf;padding-bottom:12px}.page-diablo-planner .planner-mercenary-detail>header p{margin:0 0 4px;color:#a74d3d;font-size: 12px;font-weight:600;letter-spacing:.12em}.page-diablo-planner .planner-mercenary-detail>header h3{margin:0;font-size:18px}.page-diablo-planner .planner-mercenary-detail>header span{display:block;margin-top:4px;color:#8a857d;font-size: 13px}.page-diablo-planner .planner-mercenary-skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.page-diablo-planner .planner-mercenary-skill{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:9px;min-height:66px;border:1px solid #d8d2c7;background:#fff;padding:8px;text-align:left;cursor:pointer}.page-diablo-planner .planner-mercenary-skill img{width:46px;height:46px;object-fit:cover;border:1px solid #716253}.page-diablo-planner .planner-mercenary-skill strong{color:#2b2e34;font-size: 13px}.page-diablo-planner .planner-mercenary-skill.is-selected{border-color:#b07a2d;background:#fbf6e9;box-shadow:inset 0 0 0 2px rgba(176,122,45,.16)}.page-diablo-planner .planner-warplan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-height:520px;align-content:start;padding:18px}.page-diablo-planner .planner-warplan-card{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:11px;min-height:72px;border:1px solid #d8d2c7;background:#fff;padding:10px 12px;text-align:left;cursor:pointer}.page-diablo-planner .planner-warplan-number{display:grid;width:34px;height:34px;place-items:center;border:1px solid #c7c0b4;background:#f1ede6;color:#736b61;font-weight:600}.page-diablo-planner .planner-warplan-card strong{display:block;color:#292d33;font-size: 14px}.page-diablo-planner .planner-warplan-card small{display:block;margin-top:4px;color:#8a857d;font-size: 13px}.page-diablo-planner .planner-warplan-card.is-selected{border-color:#b54a3b;background:#fbf5f1;box-shadow:inset 3px 0 #b54a3b}.page-diablo-planner .planner-warplan-card.is-selected .planner-warplan-number{border-color:#a84b3e;background:#a84b3e;color:#fff}.page-diablo-planner .planner-feature-empty{margin:0;padding:22px;color:#8c877f;font-size: 14px}.page-diablo-planner .planner-glyph-node-tooltip{display:none}.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="glyph"]{min-width:270px;max-width:390px}.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="glyph"] strong{display:block;color:#d7ad58;font-size:14px}.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="glyph"] small{display:grid;gap:4px;margin-top:7px;color:#e1ded8;font-size: 14px;line-height:1.55}.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="paragon"] small>span{display:block}@media(max-width:820px){.page-diablo-planner .planner-mercenary-layout{grid-template-columns:1fr}.page-diablo-planner .planner-mercenary-list{grid-template-columns:repeat(2,minmax(0,1fr));border-right:0;border-bottom:1px solid #ded9cf}.page-diablo-planner .planner-mercenary-skills{grid-template-columns:repeat(2,minmax(0,1fr))}.page-diablo-planner .planner-warplan-grid{grid-template-columns:1fr}}


/* Glyph tooltip top-layer fix */
.page-diablo-planner .planner-paragon-picker { overflow: visible; }
.page-diablo-planner .planner-paragon-picker-shell { overflow: hidden; border-radius: inherit; background: #fbfaf6; }
.page-diablo-planner .planner-paragon-picker > .planner-pointer-tooltip { z-index: 2147483646; }
.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="glyph"] {
    width: min(390px, calc(100vw - 24px));
    border: 1px solid #4a4f56;
    background: rgba(30,33,38,.99);
    padding: 13px 14px;
    color: #e8eaed;
    box-shadow: 0 16px 38px rgba(0,0,0,.42);
}
.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="glyph"] small > span { display:block; }


/* 2026-08-26 typography refinement: keep readable sizes, soften excessive boldness */
.page-diablo-planner strong {
    font-weight: 500;
}

.page-diablo-planner h1,
.page-diablo-planner h2,
.page-diablo-planner h3 {
    font-weight: 600;
}

.page-diablo-planner .planner-equipment-board--summary .planner-slot-copy strong,
.page-diablo-planner .planner-picker-card strong,
.page-diablo-planner .planner-section-tabs button,
.page-diablo-planner .planner-picker-toolbar > button,
.page-diablo-planner .planner-picker-filters button {
    font-weight: 500;
}

.page-diablo-planner .planner-equipment-board--summary .planner-slot-copy small,
.page-diablo-planner .planner-picker-card small {
    font-weight: 400;
}


/* 2026-08-26 dialog redesign v7: airier item selection layer */
.page-diablo-planner .planner-item-dialog {
    width: min(820px, calc(100vw - 36px)) !important;
    height: min(620px, calc(100dvh - 36px)) !important;
    max-width: calc(100vw - 36px) !important;
    max-height: calc(100dvh - 36px) !important;
    border: 1px solid #262b31 !important;
    border-radius: 12px !important;
    background: #f6f3ed !important;
    box-shadow: 0 28px 72px rgba(0, 0, 0, .36) !important;
}

.page-diablo-planner .planner-item-dialog::backdrop {
    background: rgba(16, 18, 22, .76);
}

.page-diablo-planner .planner-item-dialog > div {
    background: linear-gradient(180deg, #fcfbf8 0%, #f5f1ea 100%);
}

.page-diablo-planner .planner-dialog-head {
    border-bottom: 1px solid #e7ded1;
    background: #fffdf9;
    padding: 18px 22px 14px !important;
}

.page-diablo-planner .planner-dialog-head p {
    margin-bottom: 6px;
    color: #b04c3d;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
}

.page-diablo-planner .planner-dialog-head h2 {
    font-size: 19px;
    line-height: 1.25;
}

.page-diablo-planner .planner-dialog-head > button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #ddd4c7;
    border-radius: 10px;
    background: #f8f5ef;
    color: #6e746b;
    font-size: 20px;
    line-height: 1;
}

.page-diablo-planner .planner-dialog-mode {
    gap: 8px;
    border-bottom: 0;
    background: #fffdf9;
    padding: 8px 22px 0 !important;
}

.page-diablo-planner .planner-dialog-mode > button {
    min-height: 38px;
    border: 1px solid #dbd3c7;
    border-bottom-color: transparent;
    border-radius: 10px 10px 0 0;
    background: #f1ede6;
    padding: 0 16px;
    color: #6e746b;
    font-size: 13px;
    font-weight: 500;
}

.page-diablo-planner .planner-dialog-mode > button.is-current {
    border-color: #b34a3b;
    background: #b34a3b;
    color: #fff;
    box-shadow: 0 10px 20px rgba(179, 74, 59, .2);
}

.page-diablo-planner .planner-dialog-body {
    grid-template-columns: 288px minmax(0, 1fr) !important;
    gap: 16px;
    padding: 16px 18px 18px !important;
    background: #f6f3ed;
}

.page-diablo-planner .planner-choice-panel,
.page-diablo-planner .planner-config-panel {
    border: 1px solid #ded6ca;
    border-radius: 14px;
    background: #fffdfa;
    box-shadow: 0 2px 6px rgba(32, 28, 23, .04);
}

.page-diablo-planner .planner-choice-panel {
    padding: 14px !important;
    grid-template-rows: auto auto minmax(0, 1fr);
}

.page-diablo-planner .planner-choice-panel > label input {
    min-height: 42px;
    border: 1px solid #d3cbbe;
    border-radius: 10px;
    background: #fff;
    padding-left: 14px;
    color: #333840;
    font-size: 13px;
}

.page-diablo-planner .planner-choice-count {
    padding: 12px 2px 10px !important;
    color: #8b8479;
    font-size: 12px;
}

.page-diablo-planner .planner-choice-count strong {
    color: #3b4047;
    font-size: 13px;
    font-weight: 600;
}

.page-diablo-planner .planner-choice-list {
    border-top: 1px solid #ece5da;
    padding-top: 8px;
    padding-right: 3px;
}

.page-diablo-planner .planner-choice {
    min-height: 72px;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    gap: 12px;
    border: 1px solid #ebe3d7;
    border-radius: 12px;
    margin-bottom: 8px;
    padding: 10px 11px;
    box-shadow: 0 1px 0 rgba(34, 30, 24, .03);
}

.page-diablo-planner .planner-choice:last-child {
    margin-bottom: 0;
}

.page-diablo-planner .planner-choice:hover {
    border-color: #d8cdbb;
    background: #f8f4ed;
}

.page-diablo-planner .planner-choice.is-selected {
    border-color: #d1bf98;
    background: #f8f2e8;
    box-shadow: inset 4px 0 #3a78ae, 0 8px 18px rgba(52, 58, 66, .08);
}

.page-diablo-planner .planner-choice img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

.page-diablo-planner .planner-choice strong {
    font-size: 13px;
    line-height: 1.35;
}

.page-diablo-planner .planner-choice small {
    margin-top: 4px;
    color: #8a8f96;
    font-size: 12px;
}

.page-diablo-planner .planner-choice i {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: #faf7f2;
    font-size: 12px;
}

.page-diablo-planner .planner-config-panel {
    padding: 18px !important;
}

.page-diablo-planner .planner-config-heading {
    min-height: 52px !important;
    align-items: flex-start;
    border-bottom: 1px solid #ebe3d6;
    padding: 2px 0 14px !important;
}

.page-diablo-planner .planner-config-heading span {
    color: #8d867b;
    font-size: 12px;
    font-weight: 600;
}

.page-diablo-planner .planner-config-heading strong {
    color: #6d4e20;
    font-size: 18px;
    font-weight: 600;
}

.page-diablo-planner .planner-compact-group {
    border: 1px solid #ece4d8;
    border-radius: 14px;
    background: #fff;
    padding: 14px 14px 12px !important;
    margin-top: 14px;
}

.page-diablo-planner .planner-compact-group + .planner-compact-group {
    padding-top: 14px !important;
}

.page-diablo-planner .planner-compact-group > header {
    margin-bottom: 10px;
}

.page-diablo-planner .planner-compact-group > header h3 {
    font-size: 14px;
}

.page-diablo-planner .planner-compact-group > header p {
    margin-top: 4px;
    color: #8d867b;
    font-size: 12px;
    line-height: 1.5;
}

.page-diablo-planner .planner-compact-option-list {
    gap: 8px !important;
}

.page-diablo-planner .planner-compact-option-row {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.page-diablo-planner .planner-compact-option-label {
    width: 32px;
    height: 36px;
    border-radius: 10px;
    background: #f5f1eb;
    color: #756d62;
    font-size: 12px;
    font-weight: 700;
}

.page-diablo-planner .planner-search-select > input {
    min-height: 40px;
    border: 1px solid #d3cbbe;
    border-radius: 10px;
    background: #fcfbf8;
    padding: 0 40px 0 12px;
    color: #333840;
    font-size: 13px;
}

.page-diablo-planner .planner-option-clear {
    right: 8px;
    width: 28px;
    height: 28px;
}

.page-diablo-planner .planner-option-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    border-color: #e7dfd4;
    border-radius: 12px;
    background: #fcfbf8;
    padding: 9px 10px;
}

.page-diablo-planner .planner-greater-affix {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.page-diablo-planner .planner-option-control {
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 8px;
}

.page-diablo-planner .planner-option-control > strong {
    color: #41464d;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.page-diablo-planner .planner-roll {
    grid-template-columns: 62px 92px;
    gap: 4px;
}

.page-diablo-planner .planner-roll > span {
    font-size: 10px;
}

.page-diablo-planner .planner-roll input {
    min-height: 36px;
    border-radius: 8px;
}

.page-diablo-planner .planner-masterwork button {
    width: 30px;
    height: 30px;
}

.page-diablo-planner .planner-aspect-effect {
    border: 1px solid #e7d5a7;
    border-left: 0;
    border-radius: 12px;
    background: #fbf5e8;
    padding: 14px;
}

.page-diablo-planner .planner-aspect-effect > label {
    max-width: 100%;
    grid-template-columns: 1fr 100px;
    color: #6d624b;
    font-size: 12px;
}

.page-diablo-planner .planner-dialog-empty {
    min-height: 280px;
    border: 1px dashed #d8d0c3;
    border-radius: 16px;
    background: #fffdfa;
}

.page-diablo-planner .planner-dialog-empty strong {
    font-size: 18px;
}

.page-diablo-planner .planner-dialog-empty p {
    font-size: 13px;
}

.page-diablo-planner .planner-dialog-footer {
    border-top: 1px solid #e7ded1;
    background: #fffdf9;
    padding: 14px 22px 18px !important;
}

.page-diablo-planner .planner-dialog-footer button {
    min-height: 40px;
    border-radius: 10px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 600;
}

.page-diablo-planner .planner-dialog-footer .planner-dialog-remove {
    border-color: #dfc0bb;
    background: #fff8f7;
    color: #a24b42;
}

.page-diablo-planner .planner-dialog-footer .planner-dialog-save {
    box-shadow: 0 10px 20px rgba(53, 107, 167, .16);
}

@media (max-width: 720px) {
    .page-diablo-planner .planner-item-dialog {
        width: calc(100vw - 18px) !important;
        height: min(88dvh, 720px) !important;
        max-width: calc(100vw - 18px) !important;
        max-height: calc(100dvh - 18px) !important;
        border-radius: 10px !important;
    }

    .page-diablo-planner .planner-dialog-head {
        padding: 14px 16px 12px !important;
    }

    .page-diablo-planner .planner-dialog-mode {
        padding: 8px 16px 0 !important;
    }

    .page-diablo-planner .planner-dialog-body {
        display: block !important;
        padding: 14px !important;
        overflow-y: auto !important;
    }

    .page-diablo-planner .planner-choice-panel {
        margin-bottom: 14px;
    }

    .page-diablo-planner .planner-choice-list {
        max-height: 220px !important;
    }

    .page-diablo-planner .planner-config-panel {
        overflow: visible !important;
    }

    .page-diablo-planner .planner-dialog-footer {
        padding: 12px 16px 16px !important;
    }
}


/* 2026-08-26 dialog cleanup v8: cleaner proportions, wider left panel, single-line right rows */
.page-diablo-planner .planner-item-dialog {
    width: min(840px, calc(100vw - 36px)) !important;
    height: min(620px, calc(100dvh - 36px)) !important;
}

.page-diablo-planner .planner-dialog-head {
    padding: 16px 20px 12px !important;
}

.page-diablo-planner .planner-dialog-head h2 {
    font-size: 18px;
}

.page-diablo-planner .planner-dialog-mode {
    padding: 8px 20px 0 !important;
}

.page-diablo-planner .planner-dialog-body {
    grid-template-columns: 310px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px 16px 16px !important;
}

.page-diablo-planner .planner-choice-panel {
    padding: 12px !important;
}

.page-diablo-planner .planner-choice {
    min-height: 68px;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 12px;
    margin-bottom: 8px;
    padding: 10px 12px;
}

.page-diablo-planner .planner-choice i {
    display: none !important;
}

.page-diablo-planner .planner-choice strong {
    font-size: 13px;
    font-weight: 500;
}

.page-diablo-planner .planner-choice small {
    font-size: 12px;
}

.page-diablo-planner .planner-config-panel {
    padding: 16px !important;
}

.page-diablo-planner .planner-config-heading {
    min-height: 46px !important;
    padding: 0 0 12px !important;
}

.page-diablo-planner .planner-config-heading strong {
    font-size: 17px;
}

.page-diablo-planner .planner-compact-group {
    border: 1px solid #ece4d8;
    border-radius: 12px;
    background: #fff;
    padding: 12px !important;
    margin-top: 12px;
}

.page-diablo-planner .planner-compact-option-list {
    display: grid;
    gap: 8px !important;
}

.page-diablo-planner .planner-compact-option-row {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) 70px !important;
    align-items: center !important;
    gap: 8px !important;
}

.page-diablo-planner .planner-compact-option-row.has-prefix {
    grid-template-columns: 28px 30px minmax(0, 1fr) 70px !important;
}

.page-diablo-planner .planner-compact-option-badge,
.page-diablo-planner .planner-compact-option-row .planner-greater-affix {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
}

.page-diablo-planner .planner-compact-option-badge img,
.page-diablo-planner .planner-compact-option-row .planner-greater-affix img {
    width: 16px;
    height: 16px;
}

.page-diablo-planner .planner-search-select {
    min-width: 0;
}

.page-diablo-planner .planner-search-select > input {
    min-height: 38px;
    padding: 0 38px 0 12px;
    font-size: 13px;
}

.page-diablo-planner .planner-option-clear {
    width: 24px;
    height: 24px;
}

.page-diablo-planner .planner-compact-option-row .planner-masterwork,
.page-diablo-planner .planner-masterwork-spacer {
    display: inline-flex !important;
    width: 70px !important;
    min-width: 70px !important;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.page-diablo-planner .planner-compact-option-row .planner-masterwork button {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px;
    padding: 0;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 50%;
    box-shadow: none;
    opacity: .95;
}

.page-diablo-planner .planner-compact-option-row .planner-masterwork button.is-active {
    border-color: rgba(0,0,0,.18);
    box-shadow: 0 0 0 2px rgba(255,255,255,.9) inset;
}

.page-diablo-planner .planner-dialog-footer {
    padding: 12px 16px 16px !important;
}

@media (max-width: 720px) {
    .page-diablo-planner .planner-dialog-body {
        display: block !important;
        padding: 14px !important;
    }

    .page-diablo-planner .planner-choice {
        grid-template-columns: 42px minmax(0, 1fr) !important;
    }

    .page-diablo-planner .planner-compact-option-row,
    .page-diablo-planner .planner-compact-option-row.has-prefix {
        grid-template-columns: 28px minmax(0, 1fr) 62px !important;
    }

    .page-diablo-planner .planner-compact-option-badge {
        display: none;
    }
}


/* 2026-08-26 cool palette refresh + tooltip bullet cleanup */
.page-diablo-planner {
    --planner-ink: #202633;
    --planner-muted: #707a89;
    --planner-line: #d8dfe8;
    --planner-paper: #fbfcfe;
    --planner-canvas: #f3f5f8;
    --planner-blue: #4f6397;
    --planner-red: #eb6f70;
    --planner-gold: #c99545;
    --planner-dark: #2f3645;
    background: var(--planner-canvas);
}
.page-diablo-planner .planner-page,
.page-diablo-planner .planner-tab-panel,
.page-diablo-planner .planner-summary-card,
.page-diablo-planner .planner-build-settings,
.page-diablo-planner .planner-mechanic,
.page-diablo-planner .planner-panel,
.page-diablo-planner .planner-table,
.page-diablo-planner .planner-equipment-board,
.page-diablo-planner .planner-feature-panel {
    background: var(--planner-paper);
}
.page-diablo-planner .planner-actions button,
.page-diablo-planner .planner-build-settings,
.page-diablo-planner .planner-build-settings input,
.page-diablo-planner .planner-build-settings select,
.page-diablo-planner .planner-tab-strip button,
.page-diablo-planner .planner-panel,
.page-diablo-planner .planner-summary-card,
.page-diablo-planner .planner-equipment-board,
.page-diablo-planner .planner-item-dialog,
.page-diablo-planner .planner-choice-panel,
.page-diablo-planner .planner-config-panel {
    border-color: var(--planner-line);
}
.page-diablo-planner .planner-item-dialog {
    background: #f7f9fc !important;
}
.page-diablo-planner .planner-item-dialog > div,
.page-diablo-planner .planner-dialog-body {
    background: #f3f5f8 !important;
}
.page-diablo-planner .planner-dialog-head,
.page-diablo-planner .planner-dialog-mode,
.page-diablo-planner .planner-dialog-footer {
    background: #fbfcfe !important;
    border-color: var(--planner-line) !important;
}
.page-diablo-planner .planner-choice-panel,
.page-diablo-planner .planner-config-panel,
.page-diablo-planner .planner-compact-group,
.page-diablo-planner .planner-choice,
.page-diablo-planner .planner-option-row,
.page-diablo-planner .planner-search-select > input,
.page-diablo-planner .planner-choice-panel > label input,
.page-diablo-planner .planner-slot-tile,
.page-diablo-planner .planner-equipment-board--summary .planner-slot-tile {
    background: #fbfcfe;
}
.page-diablo-planner .planner-item-dialog::backdrop {
    background: rgba(24, 30, 42, .72);
}
/* Tooltip options use a centered bullet instead of the previous vertical bar. */
.page-diablo-planner .planner-tooltip-options > .planner-tooltip-option-line {
    position: relative;
    border-left: 0 !important;
    padding-left: 0 !important;
    grid-template-columns: auto minmax(0, 1fr);
}
.page-diablo-planner .planner-tooltip-line-icons {
    display: none !important;
}
.page-diablo-planner .planner-tooltip-line-icons:empty + .planner-tooltip-line-text,
.page-diablo-planner .planner-tooltip-line-text {
    position: relative;
    grid-column: 1 / -1;
    padding-top: 0;
    padding-left: 12px;
}
.page-diablo-planner .planner-tooltip-line-text::before {
    content: "·";
    position: absolute;
    top: 0;
    left: 0;
    color: currentColor;
    font-size: 1.05em;
    line-height: 1.3;
}
.page-diablo-planner .planner-slot-tooltip,
.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] {
    background: rgba(37, 43, 55, .98);
    border-color: #465066;
}


/* 2026-08-26 planner cool-neutral cleanup v9 */
.page-diablo-planner {
    --planner-ink: #202633;
    --planner-muted: #727c8b;
    --planner-line: #d6dde7;
    --planner-paper: #fbfcfe;
    --planner-canvas: #f2f4f7;
    --planner-blue: #526aa3;
    --planner-red: #e76468;
    --planner-gold: #c8923e;
    --planner-dark: #303848;
}

/* Main planner surfaces: remove remaining beige / ivory warmth. */
.page-diablo-planner .planner-build-card,
.page-diablo-planner .planner-gear-overview,
.page-diablo-planner .planner-gear-overview-main,
.page-diablo-planner .planner-gear-sidebar,
.page-diablo-planner .planner-side-card,
.page-diablo-planner .planner-summary-card,
.page-diablo-planner .planner-mechanic-sidebar,
.page-diablo-planner .planner-mechanic-overview,
.page-diablo-planner .planner-tab-panel,
.page-diablo-planner .planner-feature-panel {
    background: #fbfcfe !important;
    border-color: #d6dde7 !important;
}

.page-diablo-planner .planner-section-tabs {
    background: #f3f5f8 !important;
    border-color: #d6dde7 !important;
}

.page-diablo-planner .planner-section-tabs button {
    border-color: #d6dde7 !important;
    color: #667181;
}

.page-diablo-planner .planner-section-tabs button.is-current {
    background: #fbfcfe !important;
    color: #252c39;
}

.page-diablo-planner .planner-gear-overview {
    background: #fbfcfe !important;
}

.page-diablo-planner .planner-equipment-board,
.page-diablo-planner .planner-equipment-board--summary {
    background: #f8fafc !important;
    border-color: #d6dde7 !important;
}

.page-diablo-planner .planner-equipment-board--summary {
    background: transparent !important;
}

.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot,
.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] {
    background: transparent !important;
}

.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot:hover,
.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot.is-current,
.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot:focus-visible {
    background: rgba(82, 106, 163, .055) !important;
}

.page-diablo-planner .planner-gear-slot {
    border-color: #d6dde7 !important;
    background: #fbfcfe !important;
}

.page-diablo-planner .planner-gear-slot:hover,
.page-diablo-planner .planner-gear-slot.is-current {
    border-color: #9eabc0 !important;
    background: #f5f8fb !important;
}

.page-diablo-planner .planner-slot-tile,
.page-diablo-planner .planner-equipment-board--summary .planner-slot-tile,
.page-diablo-planner .planner-featured-skill.is-empty .planner-featured-skill-icon,
.page-diablo-planner .planner-rune-field.is-empty .planner-rune-emblem {
    border-color: #ccd4df !important;
    background: linear-gradient(180deg, #f7f9fb 0%, #eef2f6 100%) !important;
    color: #9ca6b4 !important;
}

.page-diablo-planner .planner-slot-placeholder {
    color: #a1aab7 !important;
}

.page-diablo-planner .planner-side-card,
.page-diablo-planner .planner-summary-card,
.page-diablo-planner .planner-mechanic-sidebar {
    background: #fbfcfe !important;
    border-color: #d6dde7 !important;
}

.page-diablo-planner .planner-side-card > header,
.page-diablo-planner .planner-summary-card > header,
.page-diablo-planner .planner-mechanic-sidebar > header {
    border-bottom-color: #e1e6ed !important;
}

.page-diablo-planner .planner-side-card > header button,
.page-diablo-planner .planner-video-row input,
.page-diablo-planner .planner-rune-field input,
.page-diablo-planner [data-build-memo],
.page-diablo-planner .planner-video-row button,
.page-diablo-planner .planner-video-actions button,
.page-diablo-planner .planner-video-preview {
    border-color: #cfd7e2 !important;
    background: #ffffff !important;
}

/* Class-mechanic blocks */
.page-diablo-planner .planner-mechanic-slot-icon,
.page-diablo-planner .planner-druid-boons,
.page-diablo-planner .planner-necro-group > div,
.page-diablo-planner .planner-spirit-options,
.page-diablo-planner .planner-soul-shards,
.page-diablo-planner .planner-warplan-card,
.page-diablo-planner .planner-mercenary-card,
.page-diablo-planner .planner-mercenary-list,
.page-diablo-planner .planner-warplan-number,
.page-diablo-planner .planner-paragon-picker-shell {
    border-color: #d5dce6 !important;
    background: #f7f9fc !important;
}

.page-diablo-planner .planner-mechanic-slot-icon::before,
.page-diablo-planner .planner-mechanic-slot-icon::after {
    border-color: rgba(93, 105, 124, .12) !important;
}

.page-diablo-planner .planner-necro-spec {
    border-color: #cbd4df !important;
    background: #eef2f6 !important;
}

.page-diablo-planner .planner-druid-powers::before,
.page-diablo-planner .planner-necro-row::before,
.page-diablo-planner .planner-shard-row::before {
    background: #cfd7e2 !important;
}

.page-diablo-planner .planner-feature-tab-head,
.page-diablo-planner .planner-mercenary-detail > header {
    border-color: #dce2ea !important;
}

.page-diablo-planner .planner-mercenary-card.is-selected,
.page-diablo-planner .planner-warplan-card.is-selected {
    background: #eef3f9 !important;
    border-color: #9eacc1 !important;
    box-shadow: inset 3px 0 #526aa3 !important;
}

/* Dialog: fully cool-neutral, including controls and selected cards. */
.page-diablo-planner .planner-item-dialog {
    background: #f4f6f9 !important;
    border-color: #455064 !important;
}

.page-diablo-planner .planner-item-dialog > div {
    background: #f4f6f9 !important;
}

.page-diablo-planner .planner-dialog-head,
.page-diablo-planner .planner-dialog-mode,
.page-diablo-planner .planner-dialog-footer {
    background: #fbfcfe !important;
    border-color: #d7dee8 !important;
}

.page-diablo-planner .planner-dialog-head > button {
    border-color: #d3dae4 !important;
    background: #f3f5f8 !important;
    color: #657080 !important;
}

.page-diablo-planner .planner-dialog-mode > button {
    border-color: #d5dce6 !important;
    background: #f1f4f7 !important;
    color: #667181 !important;
}

.page-diablo-planner .planner-dialog-mode > button.is-current {
    border-color: #e76468 !important;
    background: #e76468 !important;
    color: #fff !important;
    box-shadow: none !important;
}

.page-diablo-planner .planner-dialog-body {
    background: #f1f4f7 !important;
}

.page-diablo-planner .planner-choice-panel,
.page-diablo-planner .planner-config-panel {
    box-sizing: border-box;
    min-width: 0 !important;
    border-color: #d6dde7 !important;
    background: #fbfcfe !important;
    box-shadow: 0 2px 7px rgba(39, 52, 72, .045) !important;
}

.page-diablo-planner .planner-choice-panel > label input,
.page-diablo-planner .planner-search-select > input,
.page-diablo-planner .planner-option-row,
.page-diablo-planner .planner-compact-group {
    border-color: #d2dae5 !important;
    background: #ffffff !important;
}

.page-diablo-planner .planner-choice-list {
    border-top-color: #e1e6ed !important;
}

.page-diablo-planner .planner-choice {
    border-color: #e0e5ec !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.page-diablo-planner .planner-choice:hover {
    border-color: #bdc8d7 !important;
    background: #f5f8fb !important;
}

.page-diablo-planner .planner-choice.is-selected {
    border-color: #9eacc1 !important;
    background: #eef3f9 !important;
    box-shadow: inset 4px 0 #526aa3 !important;
}

.page-diablo-planner .planner-choice i,
.page-diablo-planner .planner-compact-option-label,
.page-diablo-planner .planner-compact-option-badge,
.page-diablo-planner .planner-compact-option-row .planner-greater-affix {
    border-color: #cfd7e2 !important;
    background: #f2f5f8 !important;
    color: #6e7888 !important;
}

.page-diablo-planner .planner-config-heading {
    border-bottom-color: #e0e6ee !important;
}

.page-diablo-planner .planner-config-heading span,
.page-diablo-planner .planner-choice-count,
.page-diablo-planner .planner-compact-group > header p {
    color: #7c8796 !important;
}

.page-diablo-planner .planner-aspect-effect {
    border-color: #d9e0e9 !important;
    background: #f5f8fb !important;
    color: #5e6878 !important;
}

/* Empty right panel: force true centering and prevent right-edge clipping. */
.page-diablo-planner .planner-dialog-empty {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 280px !important;
    margin: 0 !important;
    padding: 34px 26px !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 1px dashed #cfd7e2 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    color: #697484 !important;
    text-align: center !important;
}

.page-diablo-planner .planner-dialog-empty > span {
    color: #a9b2bf !important;
}

.page-diablo-planner .planner-dialog-empty strong {
    display: block;
    max-width: 100%;
    margin: 8px auto 0 !important;
    color: #424b59 !important;
    text-align: center;
}

.page-diablo-planner .planner-dialog-empty p {
    display: block;
    width: min(360px, 100%);
    max-width: 100% !important;
    margin: 8px auto 0 !important;
    color: #7c8796 !important;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
}

.page-diablo-planner .planner-dialog-footer .planner-dialog-remove {
    border-color: #d8dfe8 !important;
    background: #f6f8fa !important;
    color: #9aa3af !important;
}

/* Keep mobile empty state centered as well. */
@media (max-width: 720px) {
    .page-diablo-planner .planner-dialog-empty {
        min-height: 220px !important;
        padding: 28px 18px !important;
    }
}

/* 2026-08-26 dialog right-edge clipping fix v9
   The dialog body previously used width:100% with horizontal padding under content-box sizing,
   making its rendered width exceed the dialog and clipping the right panel. */
.page-diablo-planner .planner-item-dialog,
.page-diablo-planner .planner-item-dialog > div,
.page-diablo-planner .planner-dialog-body,
.page-diablo-planner .planner-choice-panel,
.page-diablo-planner .planner-config-panel,
.page-diablo-planner .planner-dialog-empty {
    box-sizing: border-box !important;
}

.page-diablo-planner .planner-item-dialog > div {
    width: 100% !important;
    min-width: 0 !important;
}

.page-diablo-planner .planner-dialog-body {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    padding-right: 18px !important;
}

.page-diablo-planner .planner-choice-panel,
.page-diablo-planner .planner-config-panel {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.page-diablo-planner .planner-config-panel {
    justify-self: stretch !important;
}

.page-diablo-planner .planner-dialog-empty {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 720px) {
    .page-diablo-planner .planner-dialog-body {
        width: 100% !important;
        padding-right: 14px !important;
    }
}

/* 2026-08-26 Mercenary skill tree v1 — full 19-node trees, cool neutral layout */
.page-diablo-planner .planner-mercenary-layout {
    display: grid !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    background: #f3f5f8;
}

.page-diablo-planner .planner-mercenary-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #d8dfe8 !important;
    background: #f3f5f8 !important;
    padding: 14px 18px !important;
}

.page-diablo-planner .planner-mercenary-card {
    display: grid !important;
    min-width: 0;
    min-height: 68px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center;
    gap: 11px !important;
    border: 1px solid #d8dfe8 !important;
    border-radius: 8px;
    background: #fbfcfe !important;
    padding: 9px 11px !important;
    color: #28313f;
    box-shadow: 0 2px 8px rgba(43, 54, 73, .035);
    text-align: left;
    cursor: pointer;
    transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.page-diablo-planner .planner-mercenary-card:hover {
    border-color: #b7c2d1 !important;
    background: #fff !important;
}

.page-diablo-planner .planner-mercenary-card.is-selected {
    border-color: #6f86b6 !important;
    background: #f2f6fc !important;
    box-shadow: inset 3px 0 #5c73a7, 0 4px 14px rgba(60, 79, 113, .08) !important;
}

.page-diablo-planner .planner-mercenary-mark {
    display: grid !important;
    width: 46px !important;
    height: 46px !important;
    place-items: center;
    overflow: hidden;
    border: 1px solid #aab5c5 !important;
    border-radius: 6px;
    background: #252d3b !important;
}

.page-diablo-planner .planner-mercenary-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-diablo-planner .planner-mercenary-card strong {
    display: block;
    overflow: hidden;
    color: #27303d !important;
    font-size: 14px !important;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-diablo-planner .planner-mercenary-card small {
    display: block;
    overflow: hidden;
    margin-top: 4px !important;
    color: #7a8594 !important;
    font-size: 12px !important;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-diablo-planner .planner-mercenary-detail {
    min-width: 0;
    padding: 18px !important;
    background: #f3f5f8;
}

.page-diablo-planner .planner-mercenary-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid #d8dfe8;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #fbfcfe;
    padding: 16px 18px 14px;
}

.page-diablo-planner .planner-mercenary-detail-head p {
    margin: 0 0 4px;
    color: #eb6f70;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
}

.page-diablo-planner .planner-mercenary-detail-head h3 {
    margin: 0;
    color: #242d3a;
    font-size: 20px;
    font-weight: 600;
}

.page-diablo-planner .planner-mercenary-detail-head span {
    display: block;
    margin-top: 4px;
    color: #7b8695;
    font-size: 12px;
}

.page-diablo-planner .planner-mercenary-detail-head > button {
    min-height: 34px;
    border: 1px solid #cdd5e0;
    border-radius: 7px;
    background: #fff;
    padding: 0 12px;
    color: #5d6877;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}

.page-diablo-planner .planner-mercenary-detail-head > button:disabled {
    cursor: default;
    opacity: .42;
}

.page-diablo-planner .planner-mercenary-selection-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid #d8dfe8;
    border-top: 1px solid #e5eaf0;
    background: #f8fafc;
}

.page-diablo-planner .planner-mercenary-selection-summary > span {
    display: grid;
    min-width: 0;
    min-height: 58px;
    align-content: center;
    gap: 3px;
    border-right: 1px solid #e0e5ec;
    padding: 8px 13px;
}

.page-diablo-planner .planner-mercenary-selection-summary > span:last-child {
    border-right: 0;
}

.page-diablo-planner .planner-mercenary-selection-summary small {
    color: #929cab;
    font-size: 10px;
    font-weight: 500;
}

.page-diablo-planner .planner-mercenary-selection-summary strong {
    overflow: hidden;
    color: #98a1ad;
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-diablo-planner .planner-mercenary-selection-summary .is-filled strong {
    color: #2f5f91;
}

.page-diablo-planner .planner-mercenary-tree-shell {
    border: 1px solid #d8dfe8;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: #fbfcfe;
    padding: 14px;
}

.page-diablo-planner .planner-mercenary-tree-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    padding: 0 2px 12px;
}

.page-diablo-planner .planner-mercenary-tree-heading > div {
    display: grid;
    gap: 4px;
}

.page-diablo-planner .planner-mercenary-tree-heading strong {
    color: #2c3543;
    font-size: 14px;
    font-weight: 600;
}

.page-diablo-planner .planner-mercenary-tree-heading span,
.page-diablo-planner .planner-mercenary-tree-heading small {
    color: #818c9b;
    font-size: 11px;
    line-height: 1.45;
}

.page-diablo-planner .planner-mercenary-tree-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #343e50;
    border-radius: 7px;
    background: #202632;
    scrollbar-color: #687589 #2a313e;
    scrollbar-width: thin;
}

.page-diablo-planner .planner-mercenary-tree-canvas {
    position: relative;
    width: 1000px;
    height: 610px;
    margin-inline: auto;
    background:
        radial-gradient(circle at 50% 6%, rgba(92, 115, 167, .10), transparent 27%),
        linear-gradient(180deg, #202632 0%, #1c222c 100%);
}

.page-diablo-planner .planner-mercenary-tree-links {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.page-diablo-planner .planner-mercenary-tree-line {
    stroke: #4a5464;
    stroke-width: 5;
    vector-effect: non-scaling-stroke;
    transition: stroke .14s ease, opacity .14s ease;
}

.page-diablo-planner .planner-mercenary-tree-line.is-active {
    stroke: #6d9bcc;
    filter: drop-shadow(0 0 3px rgba(92, 141, 194, .42));
}

.page-diablo-planner .planner-mercenary-tree-line.is-dimmed {
    opacity: .34;
}

.page-diablo-planner .planner-mercenary-node {
    position: absolute;
    z-index: 3;
    top: calc(var(--merc-y) * 1px);
    left: calc(var(--merc-x) * 1px);
    display: grid;
    width: 116px;
    min-height: 86px;
    justify-items: center;
    border: 0;
    background: transparent;
    padding: 0;
    color: #dce2eb;
    cursor: pointer;
    transform: translate(-50%, -50%);
    text-align: center;
    transition: opacity .14s ease, filter .14s ease;
}

.page-diablo-planner .planner-mercenary-node.is-dimmed {
    opacity: .43;
    filter: saturate(.6);
}

.page-diablo-planner .planner-mercenary-node:hover,
.page-diablo-planner .planner-mercenary-node:focus-visible {
    z-index: 8;
    opacity: 1;
    outline: none;
    filter: none;
}

.page-diablo-planner .planner-mercenary-node-frame {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    overflow: hidden;
    border: 2px solid #596477;
    border-radius: 7px;
    background: #161b23;
    box-shadow: 0 0 0 3px #111720, 0 5px 12px rgba(0, 0, 0, .28);
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.page-diablo-planner .planner-mercenary-node:hover .planner-mercenary-node-frame,
.page-diablo-planner .planner-mercenary-node:focus-visible .planner-mercenary-node-frame {
    border-color: #91a3bd;
    transform: translateY(-1px);
}

.page-diablo-planner .planner-mercenary-node-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-diablo-planner .planner-mercenary-node.is-core .planner-mercenary-node-frame,
.page-diablo-planner .planner-mercenary-node.is-iconic .planner-mercenary-node-frame {
    border-color: #a9864e;
}

.page-diablo-planner .planner-mercenary-node.is-perk .planner-mercenary-node-frame {
    width: 64px;
    height: 64px;
    border-color: #b58a48;
    box-shadow: 0 0 0 3px #111720, 0 0 0 5px rgba(181, 138, 72, .18), 0 7px 16px rgba(0,0,0,.35);
}

.page-diablo-planner .planner-mercenary-node.is-selected .planner-mercenary-node-frame {
    border-color: #78afe1;
    box-shadow: 0 0 0 3px #111720, 0 0 0 5px rgba(104, 168, 224, .35), 0 0 19px rgba(79, 145, 202, .45);
}

.page-diablo-planner .planner-mercenary-node.is-perk.is-selected .planner-mercenary-node-frame {
    border-color: #d6a554;
    box-shadow: 0 0 0 3px #111720, 0 0 0 5px rgba(214, 165, 84, .28), 0 0 18px rgba(199, 145, 57, .32);
}

.page-diablo-planner .planner-mercenary-node-rank {
    display: grid;
    min-width: 30px;
    height: 18px;
    place-items: center;
    margin-top: -5px;
    border: 1px solid #404a5b;
    border-radius: 3px;
    background: #2b3341;
    padding-inline: 4px;
    color: #aeb8c7;
    font-size: 9px;
    line-height: 1;
}

.page-diablo-planner .planner-mercenary-node.is-selected .planner-mercenary-node-rank {
    border-color: #5c83aa;
    background: #345779;
    color: #f1f6fb;
}

.page-diablo-planner .planner-mercenary-node.is-perk .planner-mercenary-node-rank {
    border-color: #7b6645;
    background: #4b3d28;
    color: #e7c98e;
}

.page-diablo-planner .planner-mercenary-node-label {
    display: block;
    width: 116px;
    margin-top: 5px;
    overflow: hidden;
    color: #dbe1ea;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}


/* Tooltip contents are copied into the global pointer tooltip; keep the source hidden. */
.page-diablo-planner .planner-mercenary-node > .planner-node-tooltip {
    display: none !important;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="mercenary"] {
    width: min(340px, calc(100vw - 24px));
    max-height: min(360px, calc(100vh - 24px));
    overflow: auto;
    border: 1px solid #4c586b;
    border-radius: 5px;
    background: rgba(28, 34, 45, .99);
    padding: 14px 15px;
    color: #eef2f7;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .42);
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="mercenary"] strong {
    display: block;
    color: #f3f6fa;
    font-size: 15px;
    font-weight: 600;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="mercenary"] em {
    display: block;
    margin: 6px 0 8px;
    border-top: 1px solid #3f4858;
    border-bottom: 1px solid #3f4858;
    padding: 7px 0;
    color: #89aed0;
    font-size: 11px;
    font-style: normal;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="mercenary"] small {
    display: block;
    color: #d4dbe5;
    font-size: 13px;
    line-height: 1.65;
}

.page-diablo-planner .planner-mercenary-empty {
    display: grid;
    min-height: 440px;
    place-content: center;
    justify-items: center;
    border: 1px dashed #cbd4e0;
    border-radius: 8px;
    background: #fbfcfe;
    padding: 36px;
    color: #7d8795;
    text-align: center;
}

.page-diablo-planner .planner-mercenary-empty > span {
    color: #aab6c6;
    font-size: 44px;
}

.page-diablo-planner .planner-mercenary-empty strong {
    margin-top: 7px;
    color: #404a58;
    font-size: 18px;
    font-weight: 600;
}

.page-diablo-planner .planner-mercenary-empty p {
    margin: 7px 0 0;
    color: #818b99;
    font-size: 12px;
}

@media (max-width: 920px) {
    .page-diablo-planner .planner-mercenary-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .page-diablo-planner .planner-mercenary-selection-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-diablo-planner .planner-mercenary-selection-summary > span:nth-child(2) {
        border-right: 0;
    }

    .page-diablo-planner .planner-mercenary-selection-summary > span:nth-child(-n+2) {
        border-bottom: 1px solid #e0e5ec;
    }
}

@media (max-width: 620px) {
    .page-diablo-planner .planner-mercenary-list {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }

    .page-diablo-planner .planner-mercenary-detail {
        padding: 12px !important;
    }

    .page-diablo-planner .planner-mercenary-detail-head {
        align-items: flex-start;
        padding: 13px 14px 12px;
    }

    .page-diablo-planner .planner-mercenary-tree-heading {
        display: block;
    }

    .page-diablo-planner .planner-mercenary-tree-heading > small {
        display: block;
        margin-top: 6px;
    }
}

/* 2026-08-26 mercenary tree UX v2: tall canvas + wheel zoom/pan + skill-tree active styling */
.page-diablo-planner .planner-mercenary-tree-shell {
    padding: 14px 14px 16px;
}

.page-diablo-planner .planner-mercenary-tree-heading {
    align-items: center;
    padding-bottom: 12px;
}

.page-diablo-planner .planner-mercenary-tree-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    color: #7d8796;
    font-size: 11px;
    white-space: nowrap;
}

.page-diablo-planner .planner-mercenary-tree-tools > span {
    color: #7d8796;
    font-size: 11px;
}

.page-diablo-planner .planner-mercenary-tree-tools > button {
    min-height: 30px;
    border: 1px solid #cbd3df;
    border-radius: 5px;
    background: #fff;
    padding: 0 10px;
    color: #586473;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
}

.page-diablo-planner .planner-mercenary-tree-tools > button:hover {
    border-color: #8493a7;
    color: #303a48;
}

.page-diablo-planner .planner-mercenary-tree-tools > strong {
    min-width: 42px;
    color: #485466;
    font-size: 11px;
    font-weight: 600;
    text-align: right;
}

.page-diablo-planner .planner-mercenary-tree-viewport {
    position: relative;
    width: 100%;
    height: clamp(760px, 82vh, 980px);
    overflow: hidden;
    border: 1px solid #323946;
    border-radius: 7px;
    background-color: #1a1c20;
    background-image:
        radial-gradient(circle at 50% 6%, rgba(255,255,255,.025), transparent 34%),
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: auto, 28px 28px, 28px 28px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.page-diablo-planner .planner-mercenary-tree-viewport.is-panning {
    cursor: grabbing;
}

.page-diablo-planner .planner-mercenary-tree-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    height: 1260px;
    transform-origin: 0 0;
    will-change: transform;
}

.page-diablo-planner .planner-mercenary-tree-links {
    width: 1000px;
    height: 1260px;
}

.page-diablo-planner .planner-mercenary-tree-line {
    stroke: #3b3e44;
    stroke-width: 6;
    vector-effect: non-scaling-stroke;
}

.page-diablo-planner .planner-mercenary-tree-line.is-active {
    stroke: #d10e1c;
    stroke-width: 4;
    filter: drop-shadow(0 0 4px rgba(209, 14, 28, .5));
}

.page-diablo-planner .planner-mercenary-tree-line.is-dimmed {
    opacity: .25;
}

.page-diablo-planner .planner-mercenary-node {
    width: 126px;
    min-height: 94px;
}

.page-diablo-planner .planner-mercenary-node-frame {
    width: 54px;
    height: 54px;
    border: 2px solid #4b4e53;
    border-radius: 4px;
    background: #24262b;
    box-shadow: 0 0 0 3px #111318, inset 0 0 0 1px #17191d, 0 6px 14px rgba(0,0,0,.28);
}

.page-diablo-planner .planner-mercenary-node.is-perk .planner-mercenary-node-frame,
.page-diablo-planner .planner-mercenary-node.is-core .planner-mercenary-node-frame,
.page-diablo-planner .planner-mercenary-node.is-iconic .planner-mercenary-node-frame {
    width: 64px;
    height: 64px;
    border-color: #62656a;
    border-radius: 4px;
    box-shadow: 0 0 0 3px #111318, inset 0 0 0 2px #303238, 0 7px 16px rgba(0,0,0,.34);
}

.page-diablo-planner .planner-mercenary-node.is-corePassive .planner-mercenary-node-frame,
.page-diablo-planner .planner-mercenary-node.is-iconicPassive .planner-mercenary-node-frame {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.page-diablo-planner .planner-mercenary-node.is-corePassive .planner-mercenary-node-frame img,
.page-diablo-planner .planner-mercenary-node.is-iconicPassive .planner-mercenary-node-frame img {
    border-radius: 50%;
}

.page-diablo-planner .planner-mercenary-node-frame img {
    filter: grayscale(.78) brightness(.58);
}

.page-diablo-planner .planner-mercenary-node:hover .planner-mercenary-node-frame,
.page-diablo-planner .planner-mercenary-node:focus-visible .planner-mercenary-node-frame {
    border-color: #8a8f98;
    transform: none;
}

.page-diablo-planner .planner-mercenary-node.is-selected .planner-mercenary-node-frame {
    border-color: #b51c26 !important;
    background: #2a1b1e;
    box-shadow: 0 0 0 3px #3f090d, inset 0 0 0 1px #de2530, 0 0 16px rgba(209,14,28,.44) !important;
}

.page-diablo-planner .planner-mercenary-node.is-selected .planner-mercenary-node-frame img {
    filter: none;
}

.page-diablo-planner .planner-mercenary-node.is-perk.is-selected .planner-mercenary-node-frame {
    border-color: #b51c26 !important;
    box-shadow: 0 0 0 3px #3f090d, inset 0 0 0 1px #de2530, 0 0 16px rgba(209,14,28,.44) !important;
}

.page-diablo-planner .planner-mercenary-node-rank {
    min-width: 28px;
    height: 18px;
    margin-top: -5px;
    border: 1px solid #566486;
    border-radius: 3px;
    background: #11141b;
    color: #eef1f5;
    font-size: 10px;
}

.page-diablo-planner .planner-mercenary-node.is-selected .planner-mercenary-node-rank,
.page-diablo-planner .planner-mercenary-node.is-perk .planner-mercenary-node-rank,
.page-diablo-planner .planner-mercenary-node.is-perk.is-selected .planner-mercenary-node-rank {
    border-color: #ff4b55;
    background: #d51621;
    color: #fff;
}

.page-diablo-planner .planner-mercenary-node-label {
    width: 126px;
    margin-top: 6px;
    color: #cfd5de;
    font-size: 11px;
    line-height: 1.3;
}

.page-diablo-planner .planner-mercenary-node.is-selected .planner-mercenary-node-label {
    color: #fff;
}

.page-diablo-planner .planner-mercenary-node.is-dimmed {
    opacity: .32;
    filter: grayscale(.6);
}

@media (max-width: 920px) {
    .page-diablo-planner .planner-mercenary-tree-heading {
        align-items: flex-start;
    }

    .page-diablo-planner .planner-mercenary-tree-tools {
        flex-wrap: wrap;
    }

    .page-diablo-planner .planner-mercenary-tree-tools > span {
        width: 100%;
        text-align: right;
    }
}

@media (max-width: 620px) {
    .page-diablo-planner .planner-mercenary-tree-viewport {
        height: 720px;
    }

    .page-diablo-planner .planner-mercenary-tree-tools {
        justify-content: flex-start;
        margin-top: 8px;
    }

    .page-diablo-planner .planner-mercenary-tree-tools > span {
        text-align: left;
    }
}


/* 2026-08-26 mercenary tree CSP-safe node coordinates.
   Do not rely on inline style attributes: production CSP blocks them. */
.page-diablo-planner .planner-mercenary-node {
    top: auto;
    left: auto;
}
.page-diablo-planner .planner-mercenary-node.merc-pos-perk { left: 500px; top: 105px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-core-0 { left: 270px; top: 330px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-core-1 { left: 730px; top: 330px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-corePassive-0-0 { left: 160px; top: 565px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-corePassive-0-1 { left: 380px; top: 565px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-corePassive-1-0 { left: 620px; top: 565px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-corePassive-1-1 { left: 840px; top: 565px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-iconic-0-0 { left: 160px; top: 815px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-iconic-0-1 { left: 380px; top: 815px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-iconic-1-0 { left: 620px; top: 815px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-iconic-1-1 { left: 840px; top: 815px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-iconicPassive-0-0-0 { left: 90px; top: 1085px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-iconicPassive-0-0-1 { left: 230px; top: 1085px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-iconicPassive-0-1-0 { left: 310px; top: 1085px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-iconicPassive-0-1-1 { left: 450px; top: 1085px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-iconicPassive-1-0-0 { left: 550px; top: 1085px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-iconicPassive-1-0-1 { left: 690px; top: 1085px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-iconicPassive-1-1-0 { left: 770px; top: 1085px; }
.page-diablo-planner .planner-mercenary-node.merc-pos-iconicPassive-1-1-1 { left: 910px; top: 1085px; }

/* 2026-08-26 Mercenary setup v3: Primary / Reinforcement / Skill / Opportunity */
.page-diablo-planner .planner-mercenary-list {
    display: block !important;
    border-right: 0 !important;
    border-bottom: 1px solid #d8dfe8 !important;
    background: #f3f5f8 !important;
    padding: 14px 18px 16px !important;
}

.page-diablo-planner .planner-mercenary-setup {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.page-diablo-planner .planner-mercenary-setup-slot {
    display: grid;
    min-width: 0;
    min-height: 88px;
    align-content: start;
    gap: 8px;
    border: 1px solid #d4dce7;
    border-radius: 8px;
    background: #fbfcfe;
    padding: 10px 11px;
    color: #27313f;
    text-align: left;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.page-diablo-planner .planner-mercenary-setup-slot:hover:not(:disabled) {
    border-color: #aebacb;
    background: #fff;
}

.page-diablo-planner .planner-mercenary-setup-slot.is-open {
    border-color: #6f86b6;
    background: #f3f6fb;
    box-shadow: inset 0 -3px #5c73a7;
}

.page-diablo-planner .planner-mercenary-setup-slot.is-filled {
    border-color: #bdc8d7;
}

.page-diablo-planner .planner-mercenary-setup-slot:disabled {
    cursor: default;
    opacity: .48;
}

.page-diablo-planner .planner-mercenary-setup-label {
    overflow: hidden;
    color: #7a8594;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-diablo-planner .planner-mercenary-setup-value {
    display: grid;
    min-width: 0;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.page-diablo-planner .planner-mercenary-setup-icon,
.page-diablo-planner .planner-mercenary-picker-icon {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #9eabbd;
    border-radius: 6px;
    background: #252d3a;
}

.page-diablo-planner .planner-mercenary-setup-icon {
    width: 46px;
    height: 46px;
}

.page-diablo-planner .planner-mercenary-setup-icon img,
.page-diablo-planner .planner-mercenary-picker-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-diablo-planner .planner-mercenary-setup-icon.is-empty,
.page-diablo-planner .planner-mercenary-picker-icon.is-empty {
    background: #f4f6f9;
    color: #a7b0bd;
}

.page-diablo-planner .planner-mercenary-setup-icon i,
.page-diablo-planner .planner-mercenary-picker-icon i {
    font-size: 19px;
    font-style: normal;
}

.page-diablo-planner .planner-mercenary-setup-value > span:last-child {
    min-width: 0;
}

.page-diablo-planner .planner-mercenary-setup-value strong,
.page-diablo-planner .planner-mercenary-setup-value small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-diablo-planner .planner-mercenary-setup-value strong {
    color: #26303d;
    font-size: 13px;
    font-weight: 600;
}

.page-diablo-planner .planner-mercenary-setup-value small {
    margin-top: 4px;
    color: #8792a1;
    font-size: 11px;
    font-weight: 400;
}

.page-diablo-planner .planner-mercenary-picker-panel {
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid #cfd8e4;
    border-radius: 8px;
    background: #fbfcfe;
    box-shadow: 0 10px 26px rgba(42, 53, 72, .08);
}

.page-diablo-planner .planner-mercenary-picker-panel > header {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e0e6ee;
    background: #f7f9fc;
    padding: 0 12px 0 14px;
}

.page-diablo-planner .planner-mercenary-picker-panel > header strong {
    color: #2b3543;
    font-size: 12px;
    font-weight: 600;
}

.page-diablo-planner .planner-mercenary-picker-panel > header button {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #7f8a99;
    cursor: pointer;
    font-size: 18px;
}

.page-diablo-planner .planner-mercenary-picker-panel > header button:hover {
    background: #edf1f6;
    color: #3a4554;
}

.page-diablo-planner .planner-mercenary-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    max-height: 310px;
    overflow-y: auto;
    padding: 10px;
    scrollbar-color: #aeb7c4 #edf1f5;
    scrollbar-width: thin;
}

.page-diablo-planner .planner-mercenary-picker-card {
    display: grid;
    min-width: 0;
    min-height: 64px;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 9px;
    border: 1px solid #dbe2eb;
    border-radius: 7px;
    background: #fff;
    padding: 7px 8px;
    color: #2b3543;
    text-align: left;
    cursor: pointer;
}

.page-diablo-planner .planner-mercenary-picker-card:hover {
    border-color: #afbbcb;
    background: #f8fafc;
}

.page-diablo-planner .planner-mercenary-picker-card.is-selected {
    border-color: #6e85b3;
    background: #f1f5fb;
    box-shadow: inset 3px 0 #5c73a7;
}

.page-diablo-planner .planner-mercenary-picker-icon {
    width: 42px;
    height: 42px;
}

.page-diablo-planner .planner-mercenary-picker-card > span:nth-child(2) {
    min-width: 0;
}

.page-diablo-planner .planner-mercenary-picker-card strong,
.page-diablo-planner .planner-mercenary-picker-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-diablo-planner .planner-mercenary-picker-card strong {
    color: #2c3542;
    font-size: 12px;
    font-weight: 600;
}

.page-diablo-planner .planner-mercenary-picker-card small {
    margin-top: 3px;
    color: #8792a0;
    font-size: 10px;
    font-weight: 400;
}

.page-diablo-planner .planner-mercenary-picker-check {
    color: #5c73a7;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    text-align: center;
}

.page-diablo-planner .planner-mercenary-picker-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 22px;
    color: #8792a0;
    font-size: 12px;
    text-align: center;
}

/* Keep the existing primary mercenary skill tree layout untouched below the four setup slots. */
.page-diablo-planner .planner-mercenary-detail {
    padding-top: 16px !important;
}

@media (max-width: 980px) {
    .page-diablo-planner .planner-mercenary-setup,
    .page-diablo-planner .planner-mercenary-picker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .page-diablo-planner .planner-mercenary-list {
        padding: 10px !important;
    }
    .page-diablo-planner .planner-mercenary-setup,
    .page-diablo-planner .planner-mercenary-picker-grid {
        grid-template-columns: 1fr;
    }
    .page-diablo-planner .planner-mercenary-setup-slot {
        min-height: 78px;
    }
}


/* 2026-08-26 Mercenary selector v4: modal layer + vertical lists + 3 opportunity types */
.page-diablo-planner .planner-mercenary-picker-panel {
    display: none !important;
}

.page-diablo-planner .planner-mercenary-picker-layer {
    position: fixed;
    z-index: 2147483200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(29, 35, 46, .70);
    backdrop-filter: blur(2px);
}

.page-diablo-planner .planner-mercenary-picker-dialog {
    display: grid;
    width: min(430px, calc(100vw - 32px));
    max-height: min(720px, calc(100dvh - 48px));
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #cbd5e2;
    border-radius: 12px;
    background: #f8fafc;
    box-shadow: 0 26px 70px rgba(18, 25, 37, .34);
}

.page-diablo-planner .planner-mercenary-picker-dialog > header {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #dbe2eb;
    background: #fff;
    padding: 12px 14px 12px 18px;
}

.page-diablo-planner .planner-mercenary-picker-dialog > header > div {
    min-width: 0;
}

.page-diablo-planner .planner-mercenary-picker-dialog > header small,
.page-diablo-planner .planner-mercenary-picker-dialog > header strong {
    display: block;
}

.page-diablo-planner .planner-mercenary-picker-dialog > header small {
    margin-bottom: 4px;
    color: #7f8ca0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
}

.page-diablo-planner .planner-mercenary-picker-dialog > header strong {
    color: #202a38;
    font-size: 16px;
    font-weight: 600;
}

.page-diablo-planner .planner-mercenary-picker-dialog > header button {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border: 1px solid #d4dce7;
    border-radius: 8px;
    background: #f6f8fb;
    color: #738094;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.page-diablo-planner .planner-mercenary-picker-dialog > header button:hover {
    border-color: #b8c4d4;
    background: #edf2f7;
    color: #344155;
}

.page-diablo-planner .planner-mercenary-picker-list {
    display: grid;
    grid-template-columns: 1fr !important;
    align-content: start;
    gap: 8px;
    overflow-y: auto;
    padding: 12px;
    scrollbar-color: #aeb8c7 #edf1f6;
    scrollbar-width: thin;
}

.page-diablo-planner .planner-mercenary-picker-list .planner-mercenary-picker-card {
    width: 100%;
    min-height: 72px;
    grid-template-columns: 50px minmax(0, 1fr) 22px;
    gap: 11px;
    border-color: #d7e0ea;
    border-radius: 9px;
    padding: 9px 10px;
}

.page-diablo-planner .planner-mercenary-picker-list .planner-mercenary-picker-card:hover {
    border-color: #aebccc;
    background: #f5f8fc;
}

.page-diablo-planner .planner-mercenary-picker-list .planner-mercenary-picker-card.is-selected {
    border-color: #627cab;
    background: #eef3fa;
    box-shadow: inset 4px 0 #5c73a7;
}

.page-diablo-planner .planner-mercenary-picker-list .planner-mercenary-picker-icon {
    width: 50px;
    height: 50px;
    border-radius: 7px;
}

.page-diablo-planner .planner-mercenary-picker-list .planner-mercenary-picker-card strong {
    font-size: 13px;
}

.page-diablo-planner .planner-mercenary-picker-list .planner-mercenary-picker-card small {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
}

.page-diablo-planner .planner-mercenary-picker-list .planner-mercenary-picker-empty {
    grid-column: auto;
    padding: 28px 18px;
}

@media (max-width: 620px) {
    .page-diablo-planner .planner-mercenary-picker-layer {
        padding: 12px;
    }
    .page-diablo-planner .planner-mercenary-picker-dialog {
        width: min(420px, calc(100vw - 20px));
        max-height: calc(100dvh - 24px);
    }
}

/* 2026-08-26 War Plans v2: 7 activity trees, zoom/pan, local node assets */
.page-diablo-planner .planner-warplan-workspace {
    background: #f5f7fa;
    border-top: 1px solid #dbe2eb;
    padding: 14px 16px 18px;
}

.page-diablo-planner .planner-warplan-toolbar {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.page-diablo-planner .planner-warplan-points {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    border: 1px solid #cfd8e4;
    border-radius: 8px;
    background: #fff;
    padding: 0 12px;
    color: #536071;
    font-size: 12px;
}

.page-diablo-planner .planner-warplan-points strong {
    display: grid;
    min-width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid #e06969;
    border-radius: 5px;
    color: #d95252;
    font-size: 13px;
    font-weight: 600;
}

.page-diablo-planner .planner-warplan-search input {
    width: 100%;
    min-height: 42px;
    border: 1px solid #cfd8e4;
    border-radius: 8px;
    background: #fff;
    padding: 0 13px;
    color: #2c3542;
    font-size: 13px;
    outline: none;
}

.page-diablo-planner .planner-warplan-search input:focus {
    border-color: #7085b1;
    box-shadow: 0 0 0 2px rgba(91, 113, 168, .12);
}

.page-diablo-planner .planner-warplan-fit {
    min-height: 42px;
    border: 1px solid #cfd8e4;
    border-radius: 8px;
    background: #fff;
    padding: 0 14px;
    color: #465263;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}

.page-diablo-planner .planner-warplan-fit:hover {
    border-color: #aebaca;
    background: #f8fafc;
}

.page-diablo-planner .planner-warplan-zoom {
    min-width: 48px;
    color: #596679;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}

.page-diablo-planner .planner-warplan-tabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 10px;
}

.page-diablo-planner .planner-warplan-tab {
    display: grid;
    min-width: 0;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 56px;
    border: 1px solid #d3dbe6;
    border-radius: 8px;
    background: #fff;
    padding: 7px 8px;
    color: #3c4757;
    cursor: pointer;
    text-align: left;
}

.page-diablo-planner .planner-warplan-tab:hover {
    border-color: #aeb9ca;
    background: #f8fafc;
}

.page-diablo-planner .planner-warplan-tab.is-current {
    border-color: #d65b59;
    background: #fff5f5;
    box-shadow: inset 0 -3px #df5a59;
}

.page-diablo-planner .planner-warplan-tab img {
    width: 38px;
    height: 38px;
    border: 1px solid #555f70;
    border-radius: 5px;
    background: #20252e;
    object-fit: cover;
}

.page-diablo-planner .planner-warplan-tab span,
.page-diablo-planner .planner-warplan-tab strong,
.page-diablo-planner .planner-warplan-tab small {
    display: block;
    min-width: 0;
}

.page-diablo-planner .planner-warplan-tab strong {
    overflow: hidden;
    color: #313a47;
    font-size: 11px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-diablo-planner .planner-warplan-tab small {
    margin-top: 3px;
    color: #8b95a3;
    font-size: 10px;
}

.page-diablo-planner .planner-warplan-guide {
    justify-content: flex-end;
    min-height: 27px;
    padding: 0 2px 7px;
    color: #8792a1;
}

.page-diablo-planner .planner-warplan-viewport {
    position: relative;
    height: min(76vh, 860px);
    min-height: 640px;
    overflow: hidden;
    border: 1px solid #2f3744;
    border-radius: 8px;
    background-color: #191d24;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 32px 32px;
    cursor: grab;
    touch-action: none;
}

.page-diablo-planner .planner-warplan-viewport.is-panning {
    cursor: grabbing;
}

.page-diablo-planner .planner-warplan-stage {
    position: relative;
    width: 1104px;
    height: 1000px;
    transform-origin: 0 0;
}

.page-diablo-planner .planner-warplan-lines {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 1104px;
    height: 1000px;
    overflow: visible;
    pointer-events: none;
}

.page-diablo-planner .planner-warplan-line {
    stroke: #4c5564;
    stroke-width: 5;
    stroke-linecap: round;
    opacity: .62;
}

.page-diablo-planner .planner-warplan-line.is-active {
    stroke: #ef3037;
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(239, 48, 55, .42));
}

.page-diablo-planner .planner-warplan-node {
    position: absolute;
    z-index: 3;
    display: grid;
    width: 78px;
    min-height: 92px;
    justify-items: center;
    transform: translate(-50%, -34px);
    border: 0;
    background: transparent;
    padding: 0;
    color: #b4bbc5;
    cursor: pointer;
    text-align: center;
}

.page-diablo-planner .planner-warplan-node:disabled {
    cursor: default;
}

.page-diablo-planner .planner-warplan-node-art {
    position: relative;
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    overflow: hidden;
    border: 2px solid #5d6673;
    border-radius: 50%;
    background: #11151b;
    box-shadow: 0 0 0 3px #222831, 0 5px 12px rgba(0,0,0,.28);
}

.page-diablo-planner .planner-warplan-node-art::after {
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.page-diablo-planner .planner-warplan-node-art img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    filter: grayscale(.36) brightness(.70);
    opacity: .76;
}

.page-diablo-planner .planner-warplan-node.is-choice .planner-warplan-node-art {
    width: 54px;
    height: 54px;
    margin-top: 4px;
    border-radius: 8px;
    transform: rotate(45deg);
}

.page-diablo-planner .planner-warplan-node.is-choice .planner-warplan-node-art img {
    width: 48px;
    height: 48px;
    transform: rotate(-45deg) scale(1.12);
}

.page-diablo-planner .planner-warplan-node.is-keystone .planner-warplan-node-art {
    width: 72px;
    height: 72px;
    border-color: #8b4142;
    border-radius: 12px;
    transform: rotate(45deg);
    box-shadow: 0 0 0 4px #272d37, 0 0 0 6px #5a282a, 0 8px 20px rgba(0,0,0,.36);
}

.page-diablo-planner .planner-warplan-node.is-keystone .planner-warplan-node-art img {
    width: 62px;
    height: 62px;
    transform: rotate(-45deg) scale(1.12);
    filter: none;
    opacity: 1;
}

.page-diablo-planner .planner-warplan-node.is-active:not(.is-keystone) .planner-warplan-node-art {
    border-color: #f0373e;
    background: #251315;
    box-shadow: 0 0 0 3px #4a171b, 0 0 14px rgba(240,55,62,.72);
}

.page-diablo-planner .planner-warplan-node.is-active .planner-warplan-node-art img {
    filter: none;
    opacity: 1;
}

.page-diablo-planner .planner-warplan-node.is-locked:not(.is-active) {
    opacity: .34;
}

.page-diablo-planner .planner-warplan-node.is-search-dim {
    opacity: .14 !important;
}

.page-diablo-planner .planner-warplan-rank {
    position: relative;
    z-index: 5;
    min-width: 32px;
    margin-top: -7px;
    border: 1px solid #39414e;
    border-radius: 3px;
    background: #242a35;
    padding: 2px 5px;
    color: #9ba4b1;
    font: 600 10px/1.1 Arial, sans-serif;
}

.page-diablo-planner .planner-warplan-node.is-active .planner-warplan-rank {
    border-color: #ef3037;
    background: #e62d34;
    color: #fff;
}

.page-diablo-planner .planner-warplan-node-name {
    display: block;
    width: 100px;
    margin-top: 5px;
    color: #aeb5bf;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.28;
    text-shadow: 0 1px 2px #000;
}

.page-diablo-planner .planner-warplan-node.is-active .planner-warplan-node-name {
    color: #f4f5f7;
}

.page-diablo-planner .planner-warplan-node .planner-node-tooltip {
    display: none;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="warplan"] {
    width: min(360px, calc(100vw - 24px));
    border: 1px solid #505967;
    background: rgba(28, 32, 40, .99);
    padding: 13px 14px;
    color: #e5e8ec;
    box-shadow: 0 16px 38px rgba(0,0,0,.42);
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="warplan"] strong,
.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="warplan"] em,
.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="warplan"] small,
.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="warplan"] i {
    display: block;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="warplan"] strong {
    color: #f0c479;
    font-size: 14px;
    font-weight: 600;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="warplan"] em {
    margin-top: 3px;
    color: #8f9aaa;
    font-size: 10px;
    font-style: normal;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="warplan"] small {
    margin-top: 10px;
    border-top: 1px solid #454c58;
    padding-top: 9px;
    color: #d2d7de;
    font-size: 12px;
    line-height: 1.6;
}

.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="warplan"] i {
    margin-top: 8px;
    color: #dc8f8f;
    font-size: 10px;
    font-style: normal;
}

/* CSP-safe fixed grid coordinates for War Plan nodes. */
.page-diablo-planner .planner-warplan-node.wp-x-0 { left: 82px; }
.page-diablo-planner .planner-warplan-node.wp-x-1 { left: 176px; }
.page-diablo-planner .planner-warplan-node.wp-x-2 { left: 270px; }
.page-diablo-planner .planner-warplan-node.wp-x-3 { left: 364px; }
.page-diablo-planner .planner-warplan-node.wp-x-4 { left: 458px; }
.page-diablo-planner .planner-warplan-node.wp-x-5 { left: 552px; }
.page-diablo-planner .planner-warplan-node.wp-x-6 { left: 646px; }
.page-diablo-planner .planner-warplan-node.wp-x-7 { left: 740px; }
.page-diablo-planner .planner-warplan-node.wp-x-8 { left: 834px; }
.page-diablo-planner .planner-warplan-node.wp-x-9 { left: 928px; }
.page-diablo-planner .planner-warplan-node.wp-x-10 { left: 1022px; }
.page-diablo-planner .planner-warplan-node.wp-y-0 { top: 78px; }
.page-diablo-planner .planner-warplan-node.wp-y-1 { top: 184px; }
.page-diablo-planner .planner-warplan-node.wp-y-2 { top: 290px; }
.page-diablo-planner .planner-warplan-node.wp-y-3 { top: 396px; }
.page-diablo-planner .planner-warplan-node.wp-y-4 { top: 502px; }
.page-diablo-planner .planner-warplan-node.wp-y-5 { top: 608px; }
.page-diablo-planner .planner-warplan-node.wp-y-6 { top: 714px; }
.page-diablo-planner .planner-warplan-node.wp-y-7 { top: 820px; }
.page-diablo-planner .planner-warplan-node.wp-y-8 { top: 926px; }

@media (max-width: 980px) {
    .page-diablo-planner .planner-warplan-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .page-diablo-planner .planner-warplan-workspace { padding: 10px; }
    .page-diablo-planner .planner-warplan-toolbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
    .page-diablo-planner .planner-warplan-search { grid-column: 1 / -1; grid-row: 2; }
    .page-diablo-planner .planner-warplan-zoom { display: none; }
    .page-diablo-planner .planner-warplan-tabs {
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .page-diablo-planner .planner-warplan-tab { flex: 0 0 170px; }
    .page-diablo-planner .planner-warplan-viewport {
        height: 680px;
        min-height: 600px;
    }
}

/* 2026-08-26 tree alignment + compact node labels + paragon board texture */

/* One supplied texture image is used independently inside every Paragon board. */
.page-diablo-planner .planner-paragon-board-texture {
    background-color: #0f1114 !important;
    background-image:
        linear-gradient(rgba(7, 9, 12, .10), rgba(7, 9, 12, .18)),
        url("/assets/img/diablo4-planner/paragon-board-texture.webp") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    opacity: 1 !important;
}

/* Mercenary: names are tooltip-only on the canvas. */
.page-diablo-planner .planner-mercenary-node-label {
    display: none !important;
}

/* War Plan: make the CSS grid coordinate the exact visual center of the icon.
   SVG lines use the same WAR_PLAN_X / WAR_PLAN_Y coordinates, so their ends now
   meet the icon center regardless of icon shape, rank badge, or hidden label. */
.page-diablo-planner .planner-warplan-node {
    width: 96px !important;
    height: 96px !important;
    min-height: 0 !important;
    display: block !important;
    transform: translate(-50%, -50%) !important;
}

.page-diablo-planner .planner-warplan-node-art {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
}

.page-diablo-planner .planner-warplan-node.is-choice .planner-warplan-node-art {
    margin-top: 0 !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

.page-diablo-planner .planner-warplan-node.is-keystone .planner-warplan-node-art {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

.page-diablo-planner .planner-warplan-node-name {
    display: none !important;
}

/* Rank is an overlay and no longer participates in node geometry. */
.page-diablo-planner .planner-warplan-rank {
    position: absolute !important;
    z-index: 6 !important;
    top: calc(50% + 24px) !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
}

.page-diablo-planner .planner-warplan-node.is-choice .planner-warplan-rank {
    top: calc(50% + 21px) !important;
}

.page-diablo-planner .planner-warplan-node.is-keystone .planner-warplan-rank {
    top: calc(50% + 31px) !important;
}

/* Keep hover/focus interaction above connecting lines without moving the icon. */
.page-diablo-planner .planner-warplan-node:hover,
.page-diablo-planner .planner-warplan-node:focus-visible {
    z-index: 8;
}


/* 2026-08-26 exact War Plan layout + supplied Skill Tree background */

/* The supplied artwork moves together with the skill-tree canvas while zooming/panning. */
.page-diablo-planner .planner-skill-viewport {
    background-color: #07090c !important;
    background-image: none !important;
}

/* War Plan connector and icon centers share exactly the same px/py coordinates. */
.page-diablo-planner .planner-warplan-line {
    stroke-width: 4px;
    opacity: .58;
}
.page-diablo-planner .planner-warplan-line.is-active {
    stroke-width: 5px;
}
.page-diablo-planner .planner-warplan-node.has-exact-position {
    width: 96px !important;
    height: 96px !important;
    min-height: 0 !important;
    display: block !important;
    transform: translate(-50%, -50%) !important;
}
.page-diablo-planner .planner-warplan-node.has-exact-position .planner-warplan-node-art {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 62px !important;
    height: 62px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
}
.page-diablo-planner .planner-warplan-node.has-exact-position .planner-warplan-node-art::after {
    border-radius: 50% !important;
}
.page-diablo-planner .planner-warplan-node.has-exact-position .planner-warplan-node-art img {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    transform: none !important;
}
.page-diablo-planner .planner-warplan-node.has-exact-position.is-keystone .planner-warplan-node-art {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
}
.page-diablo-planner .planner-warplan-node.has-exact-position.is-keystone .planner-warplan-node-art img {
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    transform: none !important;
}
.page-diablo-planner .planner-warplan-node.has-exact-position.is-choice .planner-warplan-node-art {
    width: 62px !important;
    height: 62px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
}
.page-diablo-planner .planner-warplan-node.has-exact-position.is-choice .planner-warplan-node-art img {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    transform: none !important;
}
.page-diablo-planner .planner-warplan-node-name,
.page-diablo-planner .planner-mercenary-node-label {
    display: none !important;
}
.page-diablo-planner .planner-warplan-node.has-exact-position .planner-warplan-rank {
    position: absolute !important;
    z-index: 6 !important;
    top: calc(50% + 24px) !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
}
.page-diablo-planner .planner-warplan-node.has-exact-position.is-keystone .planner-warplan-rank {
    top: calc(50% + 31px) !important;
}

/* CSP-safe exact node coordinates. */
.page-diablo-planner .planner-warplan-node[data-warplan-node="whispers-root"] { left: 552px !important; top: 105px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="whispers-corrupted-roots"] { left: 275px !important; top: 225px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="whispers-roots-power"] { left: 155px !important; top: 385px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="whispers-headrotten-feast"] { left: 155px !important; top: 705px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="whispers-tree-plenty"] { left: 440px !important; top: 330px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="whispers-simple-gifts"] { left: 665px !important; top: 330px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="whispers-fortune-famine"] { left: 390px !important; top: 505px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="whispers-wisdom-whispers"] { left: 552px !important; top: 505px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="whispers-material-wealth"] { left: 715px !important; top: 505px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="whispers-grim-mysteries"] { left: 470px !important; top: 680px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="whispers-chaotic-favor"] { left: 635px !important; top: 680px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="whispers-resplendent-favor"] { left: 552px !important; top: 855px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="whispers-grim-retribution"] { left: 830px !important; top: 225px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="whispers-colossal-foe"] { left: 950px !important; top: 385px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="whispers-malignant-invasion"] { left: 950px !important; top: 705px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="nightmare-root"] { left: 552px !important; top: 105px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="nightmare-waking-spoils"] { left: 385px !important; top: 225px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="nightmare-gauntlet"] { left: 270px !important; top: 365px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="nightmare-nemesis"] { left: 145px !important; top: 525px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="nightmare-rewarded-faith"] { left: 395px !important; top: 525px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="nightmare-fearless-conviction"] { left: 270px !important; top: 790px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="nightmare-dread-revival"] { left: 552px !important; top: 335px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="nightmare-recurring-nightmare"] { left: 552px !important; top: 555px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="nightmare-branching-pathways"] { left: 552px !important; top: 790px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="nightmare-goblinfall"] { left: 720px !important; top: 225px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="nightmare-horadric-hunter"] { left: 835px !important; top: 365px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="nightmare-cipher-maps"] { left: 740px !important; top: 525px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="nightmare-altar-avarice"] { left: 950px !important; top: 525px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="nightmare-greed-good"] { left: 845px !important; top: 790px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-root"] { left: 552px !important; top: 100px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-tainted-shrines"] { left: 385px !important; top: 220px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-hated-foe"] { left: 270px !important; top: 355px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-meat-brothers"] { left: 135px !important; top: 540px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-infernal-rite"] { left: 300px !important; top: 600px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-night-terrors"] { left: 270px !important; top: 815px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-hellmouth"] { left: 552px !important; top: 315px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-planar-tremors"] { left: 400px !important; top: 515px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-writhe-rot"] { left: 552px !important; top: 515px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-crimson-scent"] { left: 705px !important; top: 515px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-chaotic-echoes"] { left: 400px !important; top: 730px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-bursting-brood"] { left: 552px !important; top: 730px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-bound-blood"] { left: 705px !important; top: 730px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-wretched-vermin"] { left: 720px !important; top: 220px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-fall-fell"] { left: 835px !important; top: 355px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-undying-embers"] { left: 790px !important; top: 540px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-ashes-ashes"] { left: 955px !important; top: 540px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="helltide-hell-prize"] { left: 835px !important; top: 815px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="undercity-root"] { left: 552px !important; top: 105px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="undercity-endless-swarm"] { left: 400px !important; top: 240px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="undercity-unfortunate-souls"] { left: 285px !important; top: 380px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="undercity-gutter-filth"] { left: 170px !important; top: 540px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="undercity-trials-tributes"] { left: 285px !important; top: 730px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="undercity-last-gasp"] { left: 552px !important; top: 365px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="undercity-bauble-day"] { left: 552px !important; top: 570px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="undercity-idols-war"] { left: 552px !important; top: 790px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="undercity-jade-epiphany"] { left: 705px !important; top: 240px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="undercity-finely-tuned"] { left: 820px !important; top: 380px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="undercity-pathfinder"] { left: 935px !important; top: 540px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="undercity-initiative"] { left: 820px !important; top: 730px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-root"] { left: 552px !important; top: 95px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-lair-runes"] { left: 105px !important; top: 250px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-lair-plenty"] { left: 300px !important; top: 335px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-golden-hoard"] { left: 210px !important; top: 570px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-exotic-armory"] { left: 300px !important; top: 820px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-two-by-two"] { left: 552px !important; top: 295px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-greater-nemesis"] { left: 552px !important; top: 505px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-ultimate-nemesis"] { left: 552px !important; top: 710px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-grigoire-gambit"] { left: 800px !important; top: 330px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-duriel-invasion"] { left: 800px !important; top: 555px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-nemesis-tides"] { left: 800px !important; top: 810px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-out-cold"] { left: 1010px !important; top: 250px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-dog-astaroth"] { left: 1010px !important; top: 675px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-children-zir"] { left: 690px !important; top: 420px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-embers-anguish"] { left: 690px !important; top: 675px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-varshan-vengeance"] { left: 905px !important; top: 420px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-blood-bartuc"] { left: 905px !important; top: 675px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="lair-bosses-infernal-deception"] { left: 552px !important; top: 910px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="infernal-hordes-root"] { left: 552px !important; top: 100px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="infernal-hordes-exalted-council"] { left: 260px !important; top: 220px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="infernal-hordes-council-coffers"] { left: 165px !important; top: 370px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="infernal-hordes-forged-flame"] { left: 90px !important; top: 570px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="infernal-hordes-flawless-find"] { left: 300px !important; top: 570px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="infernal-hordes-infernal-hoard"] { left: 195px !important; top: 805px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="infernal-hordes-method-madness"] { left: 552px !important; top: 315px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="infernal-hordes-reign-hell"] { left: 445px !important; top: 505px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="infernal-hordes-total-chaos"] { left: 660px !important; top: 505px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="infernal-hordes-pulse-aether"] { left: 445px !important; top: 685px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="infernal-hordes-bedlam"] { left: 660px !important; top: 685px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="infernal-hordes-impending-doom"] { left: 552px !important; top: 800px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="infernal-hordes-black-pact"] { left: 552px !important; top: 925px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="infernal-hordes-cult-annihilation"] { left: 840px !important; top: 220px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="infernal-hordes-scale-tathamet"] { left: 940px !important; top: 420px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="infernal-hordes-devils-deal"] { left: 940px !important; top: 790px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="pit-root"] { left: 552px !important; top: 105px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="pit-choron-haste"] { left: 225px !important; top: 250px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="pit-choron-shortcut"] { left: 105px !important; top: 525px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="pit-heart-stone"] { left: 345px !important; top: 525px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="pit-damned-thieves"] { left: 225px !important; top: 800px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="pit-choron-blessing"] { left: 552px !important; top: 300px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="pit-pit-butcher"] { left: 552px !important; top: 505px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="pit-choron-favor"] { left: 552px !important; top: 685px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="pit-choron-soul"] { left: 430px !important; top: 860px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="pit-choron-flesh"] { left: 675px !important; top: 860px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="pit-choron-wager"] { left: 880px !important; top: 250px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="pit-cursed-merchant"] { left: 760px !important; top: 525px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="pit-cursed-rituals"] { left: 1000px !important; top: 525px !important; }
.page-diablo-planner .planner-warplan-node[data-warplan-node="pit-cursed-offerings"] { left: 880px !important; top: 800px !important; }

/* 2026-08-26 skill-tree background — consolidated current settings
   Keeps the currently effective uncropped 1:1 artwork size and position. */
.page-diablo-planner .planner-skill-stage {
    overflow: visible !important;
    isolation: isolate;
    background: transparent !important;
}

.page-diablo-planner .planner-skill-stage::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: -81% !important;
    top: -16% !important;
    width: 255% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    background-color: #05070a !important;
    background-image:
        linear-gradient(rgba(5,7,10,.06), rgba(5,7,10,.12)),
        url("/assets/img/diablo4-planner/skill-tree-background.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
}

.page-diablo-planner .planner-skill-lines { z-index: 1; }
.page-diablo-planner .planner-skill-node,
.page-diablo-planner .planner-skill-gate,
.page-diablo-planner .planner-skill-junction { z-index: 2; }

/* 2026-08-26 class-specific character artwork behind equipment slots.
   Keep the existing equipment-board theme; only add the selected class artwork
   behind the slot columns. The artwork is deliberately zoomed/cropped so it
   reads as a character backdrop instead of a narrow poster strip. */
.page-diablo-planner [data-slots] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.page-diablo-planner [data-slots]::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -18%;
    right: -6%;
    bottom: -18%;
    left: -6%;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 44% 78% at 50% 52%, rgba(7, 11, 18, .05) 0 42%, rgba(7, 11, 18, .12) 62%, rgba(7, 11, 18, 0) 82%),
        var(--planner-class-slot-background, none);
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center 52%;
    background-size: 100% 100%, auto 132%;
    opacity: .82;
    filter: saturate(.90) contrast(.96) brightness(.94);
    -webkit-mask-image: radial-gradient(ellipse 43% 92% at 50% 52%, #000 0 56%, rgba(0,0,0,.96) 69%, rgba(0,0,0,.62) 82%, transparent 100%);
    mask-image: radial-gradient(ellipse 43% 92% at 50% 52%, #000 0 56%, rgba(0,0,0,.96) 69%, rgba(0,0,0,.62) 82%, transparent 100%);
}


/* Keep slot rows readable while allowing the artwork to show through the center. */
.page-diablo-planner [data-slots] .planner-gear-slot,
.page-diablo-planner [data-slots] .planner-gear-slot[data-side="right"] {
    position: relative;
    z-index: 2;
}

.page-diablo-planner [data-slots][data-class-slug="barbarian"] {
    --planner-class-slot-background: url("/assets/img/diablo4-planner/class-backgrounds/barbarian.webp");
}
.page-diablo-planner [data-slots][data-class-slug="druid"] {
    --planner-class-slot-background: url("/assets/img/diablo4-planner/class-backgrounds/druid.webp");
}
.page-diablo-planner [data-slots][data-class-slug="necromancer"] {
    --planner-class-slot-background: url("/assets/img/diablo4-planner/class-backgrounds/necromancer.webp");
}
.page-diablo-planner [data-slots][data-class-slug="paladin"] {
    --planner-class-slot-background: url("/assets/img/diablo4-planner/class-backgrounds/paladin.webp");
}
.page-diablo-planner [data-slots][data-class-slug="rogue"] {
    --planner-class-slot-background: url("/assets/img/diablo4-planner/class-backgrounds/rogue.webp");
}
.page-diablo-planner [data-slots][data-class-slug="sorcerer"] {
    --planner-class-slot-background: url("/assets/img/diablo4-planner/class-backgrounds/sorcerer.webp");
}
.page-diablo-planner [data-slots][data-class-slug="spiritborn"] {
    --planner-class-slot-background: url("/assets/img/diablo4-planner/class-backgrounds/spiritborn.webp");
}
.page-diablo-planner [data-slots][data-class-slug="warlock"] {
    --planner-class-slot-background: url("/assets/img/diablo4-planner/class-backgrounds/warlock.webp");
}

@media (max-width: 900px) {
    .page-diablo-planner [data-slots]::before {
        top: -10%;
        bottom: -10%;
        background-position: center center, center 50%;
        background-size: 100% 100%, auto 118%;
        opacity: .64;
    }
}

@media (max-width: 720px) {
    .page-diablo-planner [data-slots]::before {
        top: -4%;
        right: -18%;
        bottom: -4%;
        left: -18%;
        background-size: 100% 100%, auto 104%;
        opacity: .34;
    }
}

/* 2026-08-26 white-UI refined class slot background override
   Keep the board light and use the class art only as a faint center silhouette. */
.page-diablo-planner [data-slots] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse at center, #f4f6f8 0%, #fafbfd 56%, #ffffff 86%) !important;
}

.page-diablo-planner [data-slots]::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -6% !important;
    right: -10% !important;
    bottom: -6% !important;
    left: -10% !important;
    pointer-events: none;
    background-image: var(--planner-class-slot-background, none) !important;
    background-repeat: no-repeat !important;
    background-position: center 50% !important;
    background-size: auto 112% !important;
    opacity: .20 !important;
    filter: grayscale(.72) saturate(.38) brightness(1.18) contrast(.88) !important;
    -webkit-mask-image: radial-gradient(ellipse 34% 80% at 50% 50%, rgba(0,0,0,.96) 0%, rgba(0,0,0,.88) 34%, rgba(0,0,0,.48) 62%, transparent 82%) !important;
    mask-image: radial-gradient(ellipse 34% 80% at 50% 50%, rgba(0,0,0,.96) 0%, rgba(0,0,0,.88) 34%, rgba(0,0,0,.48) 62%, transparent 82%) !important;
}

.page-diablo-planner [data-slots]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(251, 252, 254, .98) 0%,
            rgba(251, 252, 254, .92) 14%,
            rgba(251, 252, 254, .58) 28%,
            rgba(251, 252, 254, 0) 42%,
            rgba(251, 252, 254, 0) 58%,
            rgba(251, 252, 254, .58) 72%,
            rgba(251, 252, 254, .92) 86%,
            rgba(251, 252, 254, .98) 100%),
        linear-gradient(180deg,
            rgba(251, 252, 254, .88) 0%,
            rgba(251, 252, 254, .18) 18%,
            rgba(251, 252, 254, 0) 30%,
            rgba(251, 252, 254, 0) 76%,
            rgba(251, 252, 254, .30) 90%,
            rgba(251, 252, 254, .88) 100%);
}

.page-diablo-planner [data-slots] > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .page-diablo-planner [data-slots]::before {
        background-size: auto 106% !important;
        opacity: .16 !important;
    }
}

@media (max-width: 720px) {
    .page-diablo-planner [data-slots]::before {
        top: -2% !important;
        right: -16% !important;
        bottom: -2% !important;
        left: -16% !important;
        background-size: auto 98% !important;
        opacity: .11 !important;
    }
}


/* 2026-08-27 larger transparent empty-slot artwork */
.page-diablo-planner .planner-gear-slot.is-empty .planner-slot-tile,
.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot.is-empty .planner-slot-tile {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.page-diablo-planner .planner-slot-placeholder {
    width: 52px !important;
    height: 52px !important;
    opacity: .92 !important;
}
.page-diablo-planner .planner-slot-placeholder img {
    display: block !important;
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 2026-08-27 corrected slot icons: restore slot tile, transparent artwork only */
.page-diablo-planner .planner-gear-slot.is-empty .planner-slot-tile,
.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot.is-empty .planner-slot-tile {
    background: #202126 !important;
    border: 1px solid #35373e !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.page-diablo-planner .planner-slot-placeholder {
    width: 48px !important;
    height: 48px !important;
    background: transparent !important;
    opacity: .92 !important;
}
.page-diablo-planner .planner-slot-placeholder img {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: brightness(.88) contrast(1.08) saturate(.65) !important;
}

/* Owner controls live on the loaded build detail/planner, not on list cards. */
.page-diablo-planner .planner-titlebar {
    align-items: flex-end;
}
.page-diablo-planner .planner-owner-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.page-diablo-planner .planner-owner-actions form { margin: 0; }
.page-diablo-planner .planner-owner-actions a,
.page-diablo-planner .planner-owner-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 0 11px;
    border: 1px solid #3a3d44;
    background: #1d1f24;
    color: #aeb3bb;
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}
.page-diablo-planner .planner-owner-actions a:hover {
    border-color: #716049;
    color: #d8c5ab;
}
.page-diablo-planner .planner-owner-actions button:hover {
    border-color: #704343;
    color: #dfaaaa;
}
@media (max-width: 640px) {
    .page-diablo-planner .planner-titlebar { align-items: flex-start; }
}

/* Saved build viewer mode */
.page-diablo-planner .planner-build-settings[hidden],
.page-diablo-planner .planner-view-summary[hidden],
.page-diablo-planner .planner-owner-actions[hidden] {
    display: none !important;
}

.page-diablo-planner .planner-view-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 92px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid #31343a;
    background: #191b20;
}

.page-diablo-planner .planner-view-summary-portrait {
    display: block;
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    overflow: hidden;
    border: 1px solid #49433b;
    background: #22242a;
}

.page-diablo-planner .planner-view-summary-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
}

.page-diablo-planner .planner-view-summary-copy {
    min-width: 0;
}

.page-diablo-planner .planner-view-summary-copy > p {
    margin: 0 0 5px;
    color: #d75a50;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .13em;
}

.page-diablo-planner .planner-view-summary-copy h2 {
    margin: 0;
    overflow: hidden;
    color: #f0f1f3;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-diablo-planner .planner-view-summary-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #8e96a3;
    font-size: 12px;
}

.page-diablo-planner .planner-view-summary-meta strong {
    color: #c7d0df;
    font-weight: 600;
}

.page-diablo-planner .planner-page.is-viewer .planner-build-settings--top {
    display: none !important;
}

.page-diablo-planner .planner-page.is-viewer .planner-owner-actions button[data-action="edit"] {
    border-color: #66543d;
    color: #dbc29d;
}

.page-diablo-planner .planner-page.is-viewer .planner-gear-slot,
.page-diablo-planner .planner-page.is-viewer .planner-skill-node,
.page-diablo-planner .planner-page.is-viewer .planner-paragon-node,
.page-diablo-planner .planner-page.is-viewer [role="button"] {
    cursor: default;
}

.page-diablo-planner .planner-page.is-viewer [data-video-add],
.page-diablo-planner .planner-page.is-viewer [data-skill-reset],
.page-diablo-planner .planner-page.is-viewer [data-paragon-reset],
.page-diablo-planner .planner-page.is-viewer .planner-board-actions,
.page-diablo-planner .planner-page.is-viewer [data-mercenary-reset],
.page-diablo-planner .planner-page.is-viewer [data-dialog-save],
.page-diablo-planner .planner-page.is-viewer [data-dialog-remove],
.page-diablo-planner .planner-page.is-viewer [data-dialog-remove-top] {
    display: none !important;
}

.page-diablo-planner .planner-page.is-viewer .planner-memo-card textarea,
.page-diablo-planner .planner-page.is-viewer .planner-tool-search input,
.page-diablo-planner .planner-page.is-viewer .planner-warplan-search input {
    cursor: default;
}

@media (max-width: 700px) {
    .page-diablo-planner .planner-view-summary {
        min-height: 78px;
        padding: 10px 12px;
    }

    .page-diablo-planner .planner-view-summary-portrait {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }
}

/* D4Builds import dialog --------------------------------------------------- */
body.page-diablo-planner .planner-d4builds-open {
    min-width: 132px;
    color: #c8cbd1 !important;
    background: #1b1d22 !important;
    border-color: #42464f !important;
}

body.page-diablo-planner .planner-d4builds-open:hover {
    color: #f1f2f4 !important;
    background: #22252b !important;
    border-color: #5b606b !important;
}

body.page-diablo-planner .planner-import-dialog {
    width: min(640px, calc(100vw - 28px));
    max-width: none;
    padding: 0;
    color: #c8cbd1;
    background: transparent;
    border: 0;
    overflow: visible;
}

body.page-diablo-planner .planner-import-dialog::backdrop {
    background: rgba(5, 6, 8, .82) !important;
    backdrop-filter: blur(2px);
}

body.page-diablo-planner .planner-import-shell {
    overflow: hidden;
    background: #181a1f !important;
    border: 1px solid #383c45 !important;
    box-shadow: 0 28px 76px rgba(0, 0, 0, .55);
}

body.page-diablo-planner .planner-import-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 22px 18px;
    background: #1b1d22 !important;
    border-bottom: 1px solid #333740 !important;
}

body.page-diablo-planner .planner-import-head > div {
    min-width: 0;
}

body.page-diablo-planner .planner-import-head p {
    margin: 0 0 7px;
    color: #d85e59 !important;
    font: 800 9px/1.2 Arial, sans-serif;
    letter-spacing: .14em;
}

body.page-diablo-planner .planner-import-head h2 {
    margin: 0;
    color: #e5e6e8 !important;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: -.035em;
}

body.page-diablo-planner .planner-import-head span {
    display: block;
    margin-top: 8px;
    color: #8e929a !important;
    font-size: 12px;
    line-height: 1.65;
}

body.page-diablo-planner .planner-import-close {
    flex: 0 0 auto;
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    color: #a9adb5 !important;
    background: #202329 !important;
    border: 1px solid #3b3f48 !important;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
}

body.page-diablo-planner .planner-import-close:hover {
    color: #fff !important;
    border-color: #5c616c !important;
}

body.page-diablo-planner .planner-import-body {
    display: grid;
    gap: 12px;
    padding: 20px 22px;
}

body.page-diablo-planner .planner-import-url {
    display: grid;
    gap: 7px;
}

body.page-diablo-planner .planner-import-url > span {
    color: #bfc2c8 !important;
    font-size: 11px;
    font-weight: 750;
}

body.page-diablo-planner .planner-import-url input {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    color: #e5e6e8 !important;
    background: #111318 !important;
    border: 1px solid #3a3e47 !important;
    outline: none;
    font-size: 13px;
}

body.page-diablo-planner .planner-import-url input::placeholder {
    color: #626771 !important;
}

body.page-diablo-planner .planner-import-url input:focus {
    border-color: #7a4a49 !important;
    box-shadow: 0 0 0 2px rgba(142, 61, 58, .12);
}

body.page-diablo-planner .planner-import-guide {
    margin: 0;
    color: #81858e !important;
    font-size: 11px;
    line-height: 1.7;
}

body.page-diablo-planner .planner-import-guide strong {
    color: #bfc2c8 !important;
}

body.page-diablo-planner .planner-import-status {
    padding: 10px 12px;
    color: #aeb2ba !important;
    background: #14171c !important;
    border: 1px solid #343841 !important;
    font-size: 11px;
    line-height: 1.6;
    word-break: keep-all;
}

body.page-diablo-planner .planner-import-status.is-success {
    color: #a9c5ae !important;
    border-color: #405b46 !important;
    background: #151d18 !important;
}

body.page-diablo-planner .planner-import-status.is-error {
    color: #e4aaa7 !important;
    border-color: #69413f !important;
    background: #211716 !important;
}

body.page-diablo-planner .planner-import-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px 18px;
    background: #16181d !important;
    border-top: 1px solid #30343c !important;
}

body.page-diablo-planner .planner-import-actions button {
    min-width: 86px;
    min-height: 38px;
    padding: 0 14px;
    color: #bfc2c8 !important;
    background: #1e2026 !important;
    border: 1px solid #3d414a !important;
    font-size: 11px;
    font-weight: 750;
}

body.page-diablo-planner .planner-import-actions button.is-primary {
    color: #fff !important;
    background: #783532 !important;
    border-color: #a14c48 !important;
}

body.page-diablo-planner .planner-import-actions button.is-primary:hover:not(:disabled) {
    background: #8a3c38 !important;
    border-color: #b55752 !important;
}

body.page-diablo-planner .planner-import-actions button:disabled {
    opacity: .55;
    cursor: wait;
}

@media (max-width: 700px) {
    body.page-diablo-planner .planner-d4builds-open {
        min-width: 0;
    }

    body.page-diablo-planner .planner-import-head,
    body.page-diablo-planner .planner-import-body {
        padding-inline: 17px;
    }

    body.page-diablo-planner .planner-import-actions {
        padding-inline: 17px;
    }

    body.page-diablo-planner .planner-import-head h2 {
        font-size: 18px;
    }
}

/* Final source-parity overrides: kept last so legacy planner rules cannot replace them. */
.page-diablo-planner .planner-druid-spirit { width:58px; height:58px; overflow:visible; isolation:isolate; border:0; border-radius:0; background:url('/assets/img/diablo4-planner/class-features/d4builds/frames/category.png') center/contain no-repeat; padding:9px; box-shadow:none; }
.page-diablo-planner .planner-druid-spirit.is-selected { background-image:url('/assets/img/diablo4-planner/class-features/d4builds/frames/category-active.png'); box-shadow:none; transform:scale(1.05); }
.page-diablo-planner .planner-druid-spirit img { position:relative; z-index:-1; border-radius:50%; }
.page-diablo-planner .planner-mechanic-orb { width:50px; height:50px; overflow:visible; isolation:isolate; border:0; border-radius:0; background:url('/assets/img/diablo4-planner/class-features/d4builds/frames/node.png') center/contain no-repeat; padding:8px; box-shadow:none; }
.page-diablo-planner .planner-mechanic-orb.is-selected,
.page-diablo-planner .planner-mechanic-orb.is-secondary { border:0; background-image:url('/assets/img/diablo4-planner/class-features/d4builds/frames/node-active.png'); box-shadow:none; }
.page-diablo-planner .planner-mechanic-orb img { position:relative; z-index:-1; border-radius:50%; filter:grayscale(.8) brightness(.7); }
.page-diablo-planner .planner-mechanic-orb.is-selected img,
.page-diablo-planner .planner-mechanic-orb.is-secondary img { filter:none; }
.page-diablo-planner .planner-necro-spec { width:54px; height:54px; border:0; border-radius:0; background:url('/assets/img/diablo4-planner/class-features/d4builds/frames/summon-node.png') center/contain no-repeat; padding:8px; }
.page-diablo-planner .planner-necro-row.is-active .planner-necro-spec { border:0; background-image:url('/assets/img/diablo4-planner/class-features/d4builds/frames/summon-node-active.png'); box-shadow:none; }
.page-diablo-planner .planner-necro-spec img { width:38px; height:38px; }
.page-diablo-planner .planner-necro-choice,
.page-diablo-planner .planner-necro-choice.is-selected:not(.is-sacrifice) { width:46px; height:46px; overflow:visible; isolation:isolate; border:0; border-radius:0; background:url('/assets/img/diablo4-planner/class-features/d4builds/frames/node.png') center/contain no-repeat; color:#9f9482; box-shadow:none; transform:none; }
.page-diablo-planner .planner-necro-choice.is-selected:not(.is-sacrifice) { background-image:url('/assets/img/diablo4-planner/class-features/d4builds/frames/node-active.png'); color:#f1dfb7; }
.page-diablo-planner .planner-necro-choice.is-sacrifice,
.page-diablo-planner .planner-necro-choice.is-sacrifice.is-selected { width:48px; height:48px; border:0; border-radius:0; background:url('/assets/img/diablo4-planner/class-features/d4builds/frames/sacrifice.png') center/contain no-repeat; color:#b98276; box-shadow:none; transform:none; }
.page-diablo-planner .planner-necro-choice.is-sacrifice.is-selected { background-image:url('/assets/img/diablo4-planner/class-features/d4builds/frames/sacrifice-active.png'); color:#ffd1c1; }
.page-diablo-planner .planner-necro-choice.is-sacrifice span { transform:none; }
.page-diablo-planner .planner-spirit-choice > span { border:0; background:transparent; box-shadow:none; }
.page-diablo-planner .planner-spirit-choice.is-selected > span { border:0; background:transparent; box-shadow:0 0 20px rgba(210,141,52,.32); }
.page-diablo-planner .planner-shard-origin,
.page-diablo-planner .planner-shard-choice { border-color:#584d66; background:#211f29; }

.page-diablo-planner .planner-warplan-workspace { border-top-color:#2a2d33; background:#15171b; padding:16px 18px 20px; }
.page-diablo-planner .planner-warplan-toolbar { max-width:1215px; margin-inline:auto; }
.page-diablo-planner .planner-warplan-points,
.page-diablo-planner .planner-warplan-search input,
.page-diablo-planner .planner-warplan-fit { border-color:#33363e; background:#1c1e23; color:#b8bbc2; }
.page-diablo-planner .planner-warplan-zoom,
.page-diablo-planner .planner-warplan-guide { color:#747881; }
.page-diablo-planner .planner-warplan-main { display:grid; max-width:1215px; grid-template-columns:minmax(0,875px) 316px; align-items:start; gap:24px; margin:0 auto; }
.page-diablo-planner .planner-warplan-sidebar { min-width:0; }
.page-diablo-planner .planner-warplan-tabs { display:grid; grid-template-columns:1fr; gap:9px; margin:0; }
.page-diablo-planner .planner-warplan-tab { min-height:58px; grid-template-columns:34px minmax(0,1fr); gap:12px; border:1px solid #292c33; border-radius:7px; background:#111318; padding:8px 12px; color:#aaaeb6; }
.page-diablo-planner .planner-warplan-tab:hover { border-color:#4b3336; background:#17191f; }
.page-diablo-planner .planner-warplan-tab.is-current { border-color:#8d1f26; background:#1a1b20; box-shadow:inset 0 0 0 1px rgba(172,31,40,.16); }
.page-diablo-planner .planner-warplan-tab img { width:34px; height:34px; border:0; border-radius:0; background:transparent; object-fit:contain; }
.page-diablo-planner .planner-warplan-tab span { position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.page-diablo-planner .planner-warplan-tab strong { color:#b9bbc1; font-size:13px; font-weight:650; }
.page-diablo-planner .planner-warplan-tab small { margin:0; color:#777b84; font-size:10px; white-space:nowrap; }
.page-diablo-planner .planner-warplan-tab i { display:none; }
.page-diablo-planner .planner-warplan-selection { display:flex; min-height:65px; align-items:center; justify-content:space-between; margin-top:8px; border:1px solid #292c33; border-radius:7px; background:#111318; padding:0 15px; color:#777b84; font-size:11px; }
.page-diablo-planner .planner-warplan-selection strong { color:#a7abb3; font-size:12px; }
.page-diablo-planner .planner-warplan-viewport { width:100%; height:min(76vh,870px); min-height:650px; border-color:#292c33; border-radius:5px; background:#101216; }
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact { width:875px; height:870px; background-color:#101216; background-position:center; background-repeat:no-repeat; background-size:100% 100%; }
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-lines { width:100%; height:100%; }
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-line { stroke:#7d8187; stroke-width:2; opacity:.70; }
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-line.is-active { stroke:#c2272f; stroke-width:3; opacity:1; }
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node { width:66px; min-height:66px; transform:translate(-50%,-50%); }
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node-art,
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node.is-choice .planner-warplan-node-art { width:56px; height:56px; margin:0; overflow:visible; border:0; border-radius:50%; background:transparent; box-shadow:none; transform:none; }
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node-art::after { display:none; }
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node-art img,
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node.is-choice .planner-warplan-node-art img { width:56px; height:56px; border-radius:50%; filter:none; opacity:1; object-fit:contain; transform:none; }
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node.is-keystone .planner-warplan-node-art { width:88px; height:88px; border:0; border-radius:0; background:transparent; box-shadow:none; transform:none; }
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node.is-keystone .planner-warplan-node-art img { width:88px; height:88px; border-radius:0; object-fit:contain; transform:none; }
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node.is-locked:not(.is-active) { opacity:1; }
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node.is-active:not(.is-keystone) .planner-warplan-node-art { border:2px solid #d22d36; border-radius:50%; background:transparent; box-shadow:0 0 13px rgba(210,45,54,.72); }
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node-name,
.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-rank { display:none; }

@media (max-width:1080px) {
    .page-diablo-planner .planner-warplan-main { grid-template-columns:minmax(0,1fr) 260px; gap:14px; }
}
@media (max-width:780px) {
    .page-diablo-planner .planner-warplan-main { grid-template-columns:1fr; }
    .page-diablo-planner .planner-warplan-sidebar { grid-row:1; }
    .page-diablo-planner .planner-warplan-tabs { display:flex; overflow-x:auto; }
    .page-diablo-planner .planner-warplan-tab { flex:0 0 190px; }
    .page-diablo-planner .planner-warplan-selection { flex:0 0 150px; margin:0; }
    .page-diablo-planner .planner-warplan-viewport { height:680px; min-height:560px; }
}

/* 2026-08-31 game UI equipment, local stat totals and local Talisman board */
body.page-diablo-planner .planner-gear-overview {
    grid-template-columns: minmax(0, 1fr) 340px !important;
    align-items: start !important;
    background: #111318 !important;
}
body.page-diablo-planner .planner-gear-overview-main {
    min-height: 760px;
    border: 1px solid #292d31 !important;
    background:
        linear-gradient(90deg, rgba(9,10,11,.96) 0%, rgba(9,10,11,.24) 30%, rgba(9,10,11,.24) 70%, rgba(9,10,11,.96) 100%),
        url('/assets/img/diablo4-planner/game-ui/paperdoll.ea26a36d.webp') center/auto 96% no-repeat !important;
    box-shadow: inset 0 0 100px #000, 0 12px 32px rgba(0,0,0,.26);
}
body.page-diablo-planner .planner-equipment-board--summary {
    min-height: 758px !important;
    padding: 30px 24px !important;
    background: transparent !important;
}
body.page-diablo-planner [data-slots]::before { opacity: .28 !important; filter: grayscale(.16) contrast(1.18) brightness(.72) !important; }
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot,
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] {
    min-height: 76px !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 10px !important;
    border: 0 !important;
    background: transparent !important;
    padding: 3px !important;
}
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] {
    grid-template-columns: minmax(0, 1fr) 76px !important;
}
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot:hover,
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot.is-current {
    background: linear-gradient(90deg, rgba(179,112,48,.10), transparent) !important;
}
body.page-diablo-planner .planner-slot-tile,
body.page-diablo-planner .planner-equipment-board--summary .planner-slot-tile,
body.page-diablo-planner .planner-gear-slot.is-empty .planner-slot-tile {
    position: relative;
    width: 72px !important;
    height: 72px !important;
    box-sizing: border-box;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: radial-gradient(circle at 50% 36%, #353534, #171918 62%, #080909) !important;
    box-shadow: inset 0 0 18px #000, 0 3px 10px rgba(0,0,0,.68) !important;
}
body.page-diablo-planner .planner-slot-tile::after {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: 3;
    pointer-events: none;
    background: none;
}
body.page-diablo-planner .planner-gear-slot.is-legendary .planner-slot-tile {
    background: radial-gradient(circle at 50% 35%, #7b4b20, #25180d 64%, #080706) !important;
    box-shadow: inset 0 0 18px #000, 0 0 12px rgba(218,133,43,.24) !important;
}
body.page-diablo-planner .planner-gear-slot.is-unique .planner-slot-tile {
    background: radial-gradient(circle at 50% 35%, #51406c, #201a2d 64%, #080708) !important;
    box-shadow: inset 0 0 18px #000, 0 0 12px rgba(160,112,213,.28) !important;
}
body.page-diablo-planner .planner-gear-slot.is-mythic .planner-slot-tile {
    background: radial-gradient(circle at 50% 35%, #623c69, #28162c 64%, #080708) !important;
    box-shadow: inset 0 0 20px #000, 0 0 16px rgba(232,103,224,.30) !important;
}
body.page-diablo-planner .planner-equipment-board--summary .planner-slot-tile > img {
    position: relative;
    z-index: 2;
    width: 62px !important;
    height: 62px !important;
    margin: 5px;
    object-fit: contain !important;
    filter: drop-shadow(0 3px 3px #000) saturate(1.1) !important;
}
body.page-diablo-planner .planner-slot-placeholder,
body.page-diablo-planner .planner-slot-placeholder img { width: 62px !important; height: 62px !important; }
body.page-diablo-planner .planner-slot-copy strong { color: #d6d1c7 !important; font-family: Georgia, 'Noto Serif KR', serif; font-size: 14px !important; text-shadow: 0 1px 2px #000; }
body.page-diablo-planner .planner-slot-copy small { color: #8a8d8b !important; font-size: 11px !important; }
body.page-diablo-planner .planner-slot-copy em { color: #ba7a36 !important; font-size: 11px !important; }
body.page-diablo-planner .planner-gear-slot.is-unique .planner-slot-copy strong { color: #c993eb !important; }
body.page-diablo-planner .planner-gear-slot.is-mythic .planner-slot-copy strong { color: #f0a4ee !important; }
body.page-diablo-planner .planner-slot-sockets { z-index: 5 !important; }

body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] {
    width: min(440px, calc(100vw - 24px)) !important;
    max-width: 440px !important;
    max-height: min(86vh, 760px) !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] > .planner-item-tooltip,
body.page-diablo-planner .planner-item-tooltip {
    position: relative;
    inset: auto;
    display: block;
    box-sizing: border-box;
    width: 440px;
    max-width: calc(100vw - 24px);
    max-height: min(86vh, 760px);
    overflow: auto;
    border: 0 !important;
    background:
        linear-gradient(180deg, rgba(24,25,30,.96), rgba(18,18,20,.985)),
        url('/assets/img/diablo4-planner/game-ui/tooltip-base.d5050608.webp') center/cover !important;
    padding: 29px 31px 31px !important;
    color: #d6d2c8 !important;
    font-family: Georgia, 'Noto Serif KR', serif;
    font-size: 16px;
    line-height: 1.42;
    box-shadow: 0 15px 45px rgba(0,0,0,.82), inset 0 0 58px rgba(0,0,0,.5) !important;
    scrollbar-width: thin;
    transform: none;
}
body.page-diablo-planner .planner-gear-slot > .planner-item-tooltip { display: none !important; }
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] > .planner-item-tooltip { display: block !important; }
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] > .planner-item-tooltip::before,
body.page-diablo-planner .planner-item-tooltip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background: none;
}
body.page-diablo-planner .planner-item-tooltip.is-unique { background-color: #211b2b !important; }
body.page-diablo-planner .planner-item-tooltip.is-mythic { background-color: #28182b !important; }
body.page-diablo-planner .planner-item-tooltip-head { display: grid !important; grid-template-columns: minmax(0,1fr) 78px !important; gap: 14px !important; align-items: start !important; }
body.page-diablo-planner .planner-item-tooltip-titleblock strong { display: block; color: #dc9140 !important; font-size: 24px !important; font-weight: 500 !important; letter-spacing: .025em; line-height: 1.08 !important; text-transform: uppercase; }
body.page-diablo-planner .planner-item-tooltip.is-unique .planner-item-tooltip-titleblock strong { color: #ce8ee9 !important; }
body.page-diablo-planner .planner-item-tooltip.is-mythic .planner-item-tooltip-titleblock strong { color: #f2a1ec !important; }
body.page-diablo-planner .planner-item-tooltip-titleblock em { display: block; margin-top: 7px; color: #d5c6ab !important; font-size: 16px !important; font-style: normal !important; }
body.page-diablo-planner .planner-item-tooltip-titleblock small { display: block; margin-top: 3px; color: #aaa69d !important; font-size: 14px !important; }
body.page-diablo-planner .planner-tooltip-divider { display: block; height: 13px; margin: 10px 0 7px; background: linear-gradient(90deg, transparent, #6f746e 8%, #2f3432 48%, #6f746e 92%, transparent) center/100% 1px no-repeat; }
body.page-diablo-planner .planner-tooltip-divider.is-small { height: 7px; margin: 4px 0 8px; }
body.page-diablo-planner .planner-item-power { display: flex; align-items: baseline; gap: 9px; }
body.page-diablo-planner .planner-item-power b { color: #eee9dd; font-size: 22px; font-weight: 500; }
body.page-diablo-planner .planner-item-power small { color: #a8a298; font-size: 14px; }
body.page-diablo-planner .planner-tooltip-group { display: block; margin: 13px 0; }
body.page-diablo-planner .planner-tooltip-group-title { display: block; margin-bottom: 6px; color: #918b80 !important; font-family: sans-serif; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .12em; text-transform: uppercase; }
body.page-diablo-planner .planner-tooltip-group-lines { display: grid; gap: 6px; }
body.page-diablo-planner .planner-tooltip-option-line { display: grid !important; grid-template-columns: 23px minmax(0,1fr) !important; gap: 2px !important; align-items: start !important; color: #ddd8cc !important; }
body.page-diablo-planner .planner-tooltip-line-prefix { display: grid !important; min-height: 22px; place-items: center; color: #e1d4b4 !important; }
body.page-diablo-planner .planner-tooltip-line-text { grid-column: auto !important; padding: 0 !important; color: inherit !important; font-size: 16px !important; line-height: 1.38 !important; }
body.page-diablo-planner .planner-tooltip-option-line.is-greater { color: #f0dc79 !important; }
body.page-diablo-planner .planner-tooltip-group.is-tempering .planner-tooltip-option-line { color: #73b8d2 !important; }
body.page-diablo-planner .planner-tooltip-group.is-transform .planner-tooltip-option-line { color: #e29bd5 !important; }
body.page-diablo-planner .planner-item-tooltip-effect { display: block; margin: 12px 0 !important; border: 0 !important; background: transparent !important; padding: 0 !important; color: #d69043 !important; font-size: 16px !important; }
body.page-diablo-planner .planner-item-tooltip-effect.is-unique,
body.page-diablo-planner .planner-item-tooltip-effect.is-mythic { color: #d092e4 !important; }
body.page-diablo-planner .planner-item-tooltip-footer { display: block; margin-top: 14px; border-top: 1px solid #4a4d49; padding-top: 12px; color: #8f8b83 !important; font-size: 14px !important; font-style: italic; }

body.page-diablo-planner .planner-gear-sidebar { display: grid !important; grid-template-rows: auto auto auto !important; gap: 10px !important; background: transparent !important; }
body.page-diablo-planner .planner-gear-stats-card { min-height: 520px; padding: 0 !important; border: 1px solid #2f3339 !important; background: #0e1013 !important; box-shadow: 0 10px 28px rgba(0,0,0,.2); }
body.page-diablo-planner .planner-gear-stats-card > header { margin: 0 !important; padding: 15px 16px 13px !important; border-bottom: 1px solid #2b2e34 !important; background: linear-gradient(180deg,#191c21,#121419) !important; }
body.page-diablo-planner .planner-gear-stats-card header p { margin: 0 0 3px; color: #76624b; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
body.page-diablo-planner .planner-gear-stats-card h3 { color: #d4d0c7 !important; font-size: 15px !important; }
body.page-diablo-planner .planner-gear-stats-card > header > span { color: #7e8288 !important; font-size: 11px !important; }
body.page-diablo-planner .planner-gear-stats { max-height: 680px; overflow: auto; padding: 8px 15px 16px; scrollbar-width: thin; }
body.page-diablo-planner .planner-stat-group { padding: 9px 0 4px; border-bottom: 1px solid #23262b; }
body.page-diablo-planner .planner-stat-group:last-child { border-bottom: 0; }
body.page-diablo-planner .planner-stat-group h4 { margin: 0 0 5px; color: #83715c; font-size: 10px; letter-spacing: .08em; }
body.page-diablo-planner .planner-stat-row { display: grid; grid-template-columns: minmax(0,1fr) auto 20px; gap: 7px; align-items: center; min-height: 29px; color: #aeb1b5; font-size: 12px; }
body.page-diablo-planner .planner-stat-row strong { color: #ded9cd; font-size: 12px; font-variant-numeric: tabular-nums; }
body.page-diablo-planner .planner-stat-row small { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid #32363d; border-radius: 50%; color: #70757d; font-size: 9px; }

body.page-diablo-planner .planner-talisman-pane { background: #111318; }
body.page-diablo-planner .planner-talisman-workspace { display: grid; grid-template-columns: minmax(0, 880px) minmax(310px, 1fr); gap: 18px; max-width: 1260px; margin: 0 auto; padding: 18px; }
body.page-diablo-planner .planner-talisman-board-wrap { border: 1px solid #31343a; background: #090a0d; padding: 8px; box-shadow: inset 0 0 45px #000; }
body.page-diablo-planner .planner-talisman-board { position: relative; width: 100%; aspect-ratio: 870 / 780; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; }
body.page-diablo-planner .planner-talisman-socket { position: absolute; display: grid; place-items: center; box-sizing: border-box; overflow: visible; border: 0; background: var(--socket-bg) center/contain no-repeat; padding: 0; color: #9a9a98; cursor: pointer; pointer-events: none; }
body.page-diablo-planner .planner-talisman-socket::after { content: ""; position: absolute; inset: 31%; z-index: 5; border-radius: 50%; opacity: 0; box-shadow: inset 0 0 0 2px #ae762d, 0 0 19px rgba(190,121,41,.56); transition: opacity .18s; pointer-events: auto; cursor: pointer; }
body.page-diablo-planner .planner-talisman-socket:hover::after { opacity: 1; }
body.page-diablo-planner .planner-talisman-socket img { width: 34%; height: 34%; object-fit: contain; filter: drop-shadow(0 4px 5px #000); }
body.page-diablo-planner .planner-talisman-socket strong { position: absolute; top: 83%; left: 50%; width: 118%; transform: translateX(-50%); overflow: hidden; color: #d0ccc3; font-size: clamp(8px, .8vw, 11px); font-weight: 650; line-height: 1.2; text-align: center; text-overflow: ellipsis; text-shadow: 0 2px 3px #000; white-space: nowrap; }
body.page-diablo-planner .planner-talisman-socket > span { color: #85827c; font-size: clamp(9px, 1vw, 13px); text-shadow: 0 2px 3px #000; }
body.page-diablo-planner .planner-talisman-socket.is-locked { cursor: not-allowed; filter: grayscale(1) brightness(.65); }
body.page-diablo-planner .planner-talisman-socket.is-set strong { color: #80c982; }
body.page-diablo-planner .planner-talisman-socket.is-mythic-unique strong { color: #eea2e8; }
body.page-diablo-planner .planner-talisman-sidebar { display: grid; align-content: start; gap: 12px; min-width: 0; }
body.page-diablo-planner .planner-talisman-summary,
body.page-diablo-planner .planner-talisman-picker { border: 1px solid #2d3036; background: #101216; padding: 13px; }
body.page-diablo-planner .planner-talisman-current { padding: 11px 12px; border-bottom: 1px solid #292c31; background: #15171c; }
body.page-diablo-planner .planner-talisman-current span { display: block; color: #777c84; font-size: 10px; }
body.page-diablo-planner .planner-talisman-current strong { display: block; margin-top: 3px; color: #d1cdc4; font-size: 13px; }
body.page-diablo-planner .planner-talisman-current small { display: block; margin-top: 4px; color: #85888e; font-size: 11px; line-height: 1.45; }
body.page-diablo-planner .planner-talisman-set { margin-top: 10px; border: 1px solid #2a2d32; background: #13151a; padding: 10px; }
body.page-diablo-planner .planner-talisman-set header { display: flex; justify-content: space-between; color: #8fc28e; font-size: 12px; }
body.page-diablo-planner .planner-talisman-set p { display: grid; grid-template-columns: 45px 1fr; gap: 6px; margin: 7px 0 0; color: #5e6269; font-size: 10px; line-height: 1.4; }
body.page-diablo-planner .planner-talisman-set p.is-active { color: #aebfa8; }
body.page-diablo-planner .planner-talisman-set p b { color: inherit; }
body.page-diablo-planner .planner-talisman-picker > header { display: grid; gap: 8px; margin-bottom: 10px; }
body.page-diablo-planner .planner-talisman-picker h3 { margin: 0; color: #cbc7be; font-size: 13px; }
body.page-diablo-planner .planner-talisman-picker input { width: 100%; min-height: 36px; box-sizing: border-box; border: 1px solid #34373d; background: #0d0f12; padding: 0 10px; color: #d1d2d3; }
body.page-diablo-planner .planner-talisman-list { display: grid; max-height: 470px; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; overflow: auto; padding-right: 3px; scrollbar-width: thin; }
body.page-diablo-planner .planner-talisman-choice { display: grid; min-width: 0; grid-template-columns: 46px minmax(0,1fr); gap: 7px; align-items: center; border: 1px solid #2f3238; background: #15171c; padding: 5px; color: #b8b9ba; text-align: left; cursor: pointer; }
body.page-diablo-planner .planner-talisman-choice:hover,
body.page-diablo-planner .planner-talisman-choice.is-selected { border-color: #86592f; background: #1c1916; }
body.page-diablo-planner .planner-talisman-choice > span { display: grid; width: 44px; height: 44px; place-items: center; background: radial-gradient(circle,#313237,#111216); }
body.page-diablo-planner .planner-talisman-choice img { width: 40px; height: 40px; object-fit: contain; }
body.page-diablo-planner .planner-talisman-choice strong { min-width: 0; overflow: hidden; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
body.page-diablo-planner .planner-talisman-choice small { display: block; margin-top: 3px; overflow: hidden; color: #767a81; font-size: 9px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
body.page-diablo-planner .planner-talisman-choice.is-set strong { color: #8fc88c; }
body.page-diablo-planner .planner-talisman-choice.is-mythic-unique strong { color: #e7a0e2; }
body.page-diablo-planner .planner-talisman-choice.is-clear { grid-column: 1 / -1; }

@media (max-width: 1100px) {
    body.page-diablo-planner .planner-gear-overview,
    body.page-diablo-planner .planner-talisman-workspace { grid-template-columns: 1fr !important; }
    body.page-diablo-planner .planner-gear-stats-card { min-height: 0; }
    body.page-diablo-planner .planner-gear-stats { max-height: 420px; }
}
@media (max-width: 720px) {
    body.page-diablo-planner .planner-gear-overview-main { min-height: 0; }
    body.page-diablo-planner .planner-equipment-board--summary { min-height: 0 !important; padding: 12px 8px !important; }
    body.page-diablo-planner .planner-talisman-workspace { padding: 8px; }
    body.page-diablo-planner .planner-talisman-list { grid-template-columns: 1fr; }
    body.page-diablo-planner .planner-item-tooltip { font-size: 14px; }
}

/* 2026-08-31 exact local game UI assets: paperdoll, slot sprites and 3-layer tooltips */
@font-face {
    font-family: 'D4OldFenrisLocal';
    src: url('/assets/img/diablo4-planner/game-ui/Serif.cd8cd0ef.otf') format('opentype');
    font-display: swap;
}
@font-face {
    font-family: 'D4GameTextLocal';
    src: url('/assets/img/diablo4-planner/game-ui/SansSerif.26d0ba43.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'D4GameTextLocal';
    src: url('/assets/img/diablo4-planner/game-ui/SansSerif_Medium.56f09199.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

body.page-diablo-planner [data-slots][data-class-slug="barbarian"] { --planner-game-hero: url('/assets/img/diablo4-planner/game-ui/barbarian-v2.11962973.webp'); }
body.page-diablo-planner [data-slots][data-class-slug="druid"] { --planner-game-hero: url('/assets/img/diablo4-planner/game-ui/druid-v2.ea1138be.webp'); }
body.page-diablo-planner [data-slots][data-class-slug="necromancer"] { --planner-game-hero: url('/assets/img/diablo4-planner/game-ui/necromancer-v2.a61b9fd0.webp'); }
body.page-diablo-planner [data-slots][data-class-slug="paladin"] { --planner-game-hero: url('/assets/img/diablo4-planner/game-ui/paladin-v2.d416934c.webp'); }
body.page-diablo-planner [data-slots][data-class-slug="rogue"] { --planner-game-hero: url('/assets/img/diablo4-planner/game-ui/rogue-v2.2b53abb9.webp'); }
body.page-diablo-planner [data-slots][data-class-slug="sorcerer"] { --planner-game-hero: url('/assets/img/diablo4-planner/game-ui/sorcerer-v2.997a812c.webp'); }
body.page-diablo-planner [data-slots][data-class-slug="spiritborn"] { --planner-game-hero: url('/assets/img/diablo4-planner/game-ui/spiritborn-v2.b2d7da49.webp'); }
body.page-diablo-planner [data-slots][data-class-slug="warlock"] { --planner-game-hero: url('/assets/img/diablo4-planner/game-ui/warlock-v2.bb609cd4.webp'); }

body.page-diablo-planner .planner-gear-overview-main {
    min-height: 700px;
    overflow: visible;
    border: 1px solid #292d31 !important;
    background: #08090b !important;
}
body.page-diablo-planner .planner-equipment-board--summary,
body.page-diablo-planner [data-slots] {
    position: relative;
    isolation: isolate;
    min-height: 698px !important;
    align-content: start !important;
    column-gap: 86px !important;
    overflow: hidden !important;
    background: #08090b !important;
    padding: 58px 30px 36px !important;
}
body.page-diablo-planner [data-slots]::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: -18% !important;
    right: -6% !important;
    bottom: -18% !important;
    left: -6% !important;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 44% 78% at 50% 52%, rgba(7,11,18,.05) 0 42%, rgba(7,11,18,.12) 62%, rgba(7,11,18,0) 82%),
        var(--planner-class-slot-background, none) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, center 52% !important;
    background-size: 100% 100%, auto 132% !important;
    opacity: .82 !important;
    filter: saturate(.9) contrast(.96) brightness(.94) !important;
    -webkit-mask-image: radial-gradient(ellipse 43% 92% at 50% 52%, #000 0 56%, rgba(0,0,0,.96) 69%, rgba(0,0,0,.62) 82%, transparent 100%) !important;
    mask-image: radial-gradient(ellipse 43% 92% at 50% 52%, #000 0 56%, rgba(0,0,0,.96) 69%, rgba(0,0,0,.62) 82%, transparent 100%) !important;
}
body.page-diablo-planner [data-slots]::after { display: none !important; }
body.page-diablo-planner [data-slots] > * { position: relative; z-index: 2; }

body.page-diablo-planner .planner-slot-column-overview { gap: 5px !important; }
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot,
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] {
    min-height: 78px !important;
    grid-template-columns: 55px minmax(0, 1fr) !important;
    gap: 10px !important;
    border: 0 !important;
    background: transparent !important;
    padding: 2px 3px !important;
}
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] { grid-template-columns: minmax(0, 1fr) 55px !important; }
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot:hover,
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot.is-current,
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot:focus-visible {
    background: linear-gradient(90deg, rgba(187,127,60,.12), rgba(187,127,60,0)) !important;
    box-shadow: none !important;
}
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"]:hover,
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"].is-current,
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"]:focus-visible {
    background: linear-gradient(270deg, rgba(187,127,60,.12), rgba(187,127,60,0)) !important;
}
body.page-diablo-planner .planner-slot-tile,
body.page-diablo-planner .planner-equipment-board--summary .planner-slot-tile,
body.page-diablo-planner .planner-gear-slot.is-empty .planner-slot-tile,
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot.is-empty .planner-slot-tile {
    position: relative;
    display: grid;
    width: 49px !important;
    height: 73px !important;
    place-items: center;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: url('/assets/img/diablo4-planner/game-ui/slots.20b6acce.webp') 0 0/170px 73px no-repeat !important;
    box-shadow: none !important;
}
body.page-diablo-planner .planner-slot-rarity-frame {
    position: absolute;
    z-index: 2;
    inset: 3px;
    pointer-events: none;
    background: url('/assets/img/diablo4-planner/game-ui/frames.979f76d2.webp') 0 0/700% 100% no-repeat;
}
body.page-diablo-planner .planner-slot-tile::after,
body.page-diablo-planner .planner-equipment-board--summary .planner-slot-tile::after {
    content: '' !important;
    position: absolute !important;
    z-index: 3 !important;
    inset: 0 !important;
    pointer-events: none !important;
    border: 19px solid transparent !important;
    border-image: url('/assets/img/diablo4-planner/game-ui/highlight.de4a1895.webp') 19 / 19px / 1px round !important;
    background: none !important;
    opacity: .68;
    filter: grayscale(.35) brightness(.9);
}
body.page-diablo-planner .planner-gear-slot:hover .planner-slot-tile::after,
body.page-diablo-planner .planner-gear-slot.is-current .planner-slot-tile::after,
body.page-diablo-planner .planner-gear-slot:focus-visible .planner-slot-tile::after {
    opacity: 1;
    filter: none;
}
body.page-diablo-planner .planner-gear-slot.is-legendary .planner-slot-rarity-frame { background-position-x: -300%; }
body.page-diablo-planner .planner-gear-slot.is-unique .planner-slot-rarity-frame { background-position-x: -400%; }
body.page-diablo-planner .planner-gear-slot.is-mythic .planner-slot-rarity-frame { background-position-x: -600%; }
body.page-diablo-planner .planner-equipment-board--summary .planner-slot-tile > img {
    position: absolute;
    z-index: 1;
    inset: 5px;
    width: calc(100% - 10px) !important;
    height: calc(100% - 10px) !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: translateX(2px) !important;
    filter: drop-shadow(0 3px 3px #000) saturate(1.05) !important;
}
body.page-diablo-planner .planner-slot-placeholder,
body.page-diablo-planner .planner-slot-placeholder img {
    position: relative;
    z-index: 1;
    width: 38px !important;
    height: 56px !important;
}
body.page-diablo-planner .planner-slot-placeholder img { filter: grayscale(1) brightness(.58) contrast(1.22) !important; }
body.page-diablo-planner .planner-slot-sockets { z-index: 4 !important; bottom: -10px !important; gap: 0 !important; }
body.page-diablo-planner .planner-slot-socket {
    display: grid !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid #766b59 !important;
    border-radius: 50% !important;
    background: #090a0b url('/assets/img/diablo4-planner/game-ui/socket.130ea97d.webp') center/100% 100% no-repeat !important;
    padding: 3px !important;
    box-shadow: inset 0 0 0 1px #181713, 0 1px 3px rgba(0,0,0,.9) !important;
}
body.page-diablo-planner .planner-slot-socket:hover,
body.page-diablo-planner .planner-slot-socket:focus-visible {
    border-color: #b9a477 !important;
    box-shadow: inset 0 0 0 1px #221e17, 0 0 6px rgba(202,164,93,.5) !important;
}
body.page-diablo-planner .planner-slot-socket img {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    max-width: none !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
body.page-diablo-planner .planner-slot-copy { font-family: 'D4OldFenrisLocal', 'Noto Serif KR', serif; }
body.page-diablo-planner .planner-slot-copy strong { color: #ff8000 !important; font-size: 15px !important; font-weight: 400 !important; }
body.page-diablo-planner .planner-slot-copy small { color: #b8afa1 !important; font-size: 11px !important; }
body.page-diablo-planner .planner-slot-copy em { color: #ff8000 !important; font-size: 11px !important; }
body.page-diablo-planner .planner-gear-slot.is-empty .planner-slot-copy strong { color: #777 !important; }
body.page-diablo-planner .planner-gear-slot.is-unique .planner-slot-copy strong,
body.page-diablo-planner .planner-gear-slot.is-unique .planner-slot-copy em { color: #dca779 !important; }
body.page-diablo-planner .planner-gear-slot.is-mythic .planner-slot-copy strong,
body.page-diablo-planner .planner-gear-slot.is-mythic .planner-slot-copy em { color: #dc9bf2 !important; }

body.page-diablo-planner .planner-gear-slot .planner-slot-tooltip { display: none !important; }
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] {
    width: min(430px, calc(100vw - 36px)) !important;
    max-width: 430px !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] > .planner-item-tooltip,
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] > .planner-slot-tooltip,
body.page-diablo-planner .planner-gear-slot:focus > .planner-item-tooltip {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: min(430px, calc(100vw - 36px)) !important;
    max-width: 430px !important;
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    border: 38px solid transparent !important;
    border-image: url('/assets/img/diablo4-planner/game-ui/tooltip-base.d5050608.webp') 76 fill / 38px stretch !important;
    background: transparent !important;
    padding: 2px 0 5px !important;
    color: #b8afa1 !important;
    font-family: 'D4GameTextLocal', 'Noto Serif KR', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.28 !important;
    text-shadow: 0 0 2px #000;
    box-shadow: 0 18px 48px rgba(0,0,0,.82) !important;
    scrollbar-width: none !important;
    transform: none !important;
    z-index: 0;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] > .planner-item-tooltip::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    border: 64px solid transparent;
    border-image: url('/assets/img/diablo4-planner/game-ui/frame-legendary.b243f03a.webp') 128 fill / 64px stretch;
    background: none;
}
body.page-diablo-planner .planner-gear-slot:focus > .planner-item-tooltip::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    border: 64px solid transparent;
    border-image: url('/assets/img/diablo4-planner/game-ui/frame-legendary.b243f03a.webp') 128 fill / 64px stretch;
    background: none;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] > .planner-item-tooltip.is-unique::before { border-image-source: url('/assets/img/diablo4-planner/game-ui/frame-unique.867dc987.webp'); }
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] > .planner-item-tooltip.is-mythic::before { border-image-source: url('/assets/img/diablo4-planner/game-ui/frame-mythic.4695b2a7.webp'); }
body.page-diablo-planner .planner-gear-slot:focus > .planner-item-tooltip.is-unique::before { border-image-source: url('/assets/img/diablo4-planner/game-ui/frame-unique.867dc987.webp'); }
body.page-diablo-planner .planner-gear-slot:focus > .planner-item-tooltip.is-mythic::before { border-image-source: url('/assets/img/diablo4-planner/game-ui/frame-mythic.4695b2a7.webp'); }
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] > .planner-item-tooltip::after {
    content: '';
    position: absolute;
    z-index: 20;
    inset: 0;
    pointer-events: none;
    border: 62px solid transparent;
    border-image: url('/assets/img/diablo4-planner/game-ui/tooltip-frame.9829c985.webp') 124 / 62px / 11px round;
}
body.page-diablo-planner .planner-gear-slot:focus > .planner-item-tooltip::after {
    content: '';
    position: absolute;
    z-index: 20;
    inset: 0;
    pointer-events: none;
    border: 62px solid transparent;
    border-image: url('/assets/img/diablo4-planner/game-ui/tooltip-frame.9829c985.webp') 124 / 62px / 11px round;
}
body.page-diablo-planner .planner-gear-slot:focus > .planner-item-tooltip {
    display: block !important;
    position: fixed !important;
    z-index: 2147482001 !important;
    top: 18px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
}
body.page-diablo-planner .planner-item-tooltip-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 78px !important;
    gap: 12px !important;
    align-items: start !important;
    border-bottom: 1px solid #454842 !important;
    padding-bottom: 12px !important;
}
body.page-diablo-planner .planner-item-tooltip-titleblock strong {
    display: block !important;
    overflow-wrap: anywhere;
    color: #ff8000 !important;
    font-family: 'D4OldFenrisLocal', 'Noto Serif KR', serif !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    letter-spacing: .01em !important;
    line-height: 1.08 !important;
    text-transform: uppercase;
}
body.page-diablo-planner .planner-item-tooltip.is-unique .planner-item-tooltip-titleblock strong { color: #dca779 !important; }
body.page-diablo-planner .planner-item-tooltip.is-mythic .planner-item-tooltip-titleblock strong { color: #dc9bf2 !important; }
body.page-diablo-planner .planner-item-tooltip-titleblock em { display: block !important; margin-top: 4px !important; color: #dba864 !important; font-size: 16px !important; font-style: normal !important; }
body.page-diablo-planner .planner-item-tooltip-titleblock small { display: block !important; margin-top: 2px !important; color: #b8afa1 !important; font-size: 14px !important; }
body.page-diablo-planner .planner-item-tooltip-art { width: 76px !important; height: 76px !important; object-fit: contain !important; filter: drop-shadow(0 5px 5px #000) !important; }
body.page-diablo-planner .planner-tooltip-divider {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
body.page-diablo-planner .planner-tooltip-divider.is-small,
body.page-diablo-planner .planner-tooltip-divider.is-section { display: none !important; }
body.page-diablo-planner .planner-item-power {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin: 0 !important;
    border-bottom: 1px solid #454842 !important;
    padding: 10px 0 !important;
}
body.page-diablo-planner .planner-item-power b { color: #e3e0d9 !important; font-size: 23px !important; font-weight: 400 !important; }
body.page-diablo-planner .planner-item-power small { color: #b8afa1 !important; font-size: 15px !important; }
body.page-diablo-planner .planner-tooltip-group { display: block !important; margin: 10px 0 !important; border: 0 !important; padding: 0 !important; }
body.page-diablo-planner .planner-tooltip-group.is-tempering,
body.page-diablo-planner .planner-tooltip-group.is-transform,
body.page-diablo-planner .planner-tooltip-group.is-sockets {
    border-top: 1px solid #454842 !important;
    padding-top: 11px !important;
}
body.page-diablo-planner .planner-tooltip-group-title { display: none !important; }
body.page-diablo-planner .planner-tooltip-group-lines { display: grid !important; gap: 5px !important; }
body.page-diablo-planner .planner-tooltip-option-line { display: grid !important; grid-template-columns: 22px minmax(0,1fr) !important; gap: 2px !important; align-items: start !important; color: #e3e0d9 !important; }
body.page-diablo-planner .planner-tooltip-line-prefix { display: grid !important; min-height: 22px !important; place-items: center !important; color: #dba864 !important; }
body.page-diablo-planner .planner-tooltip-line-diamond { display: block; color: #d8d4ca; font-size: 8px; line-height: 1; text-shadow: 0 0 2px #000; }
body.page-diablo-planner .planner-tooltip-line-text { grid-column: auto !important; padding: 0 !important; color: inherit !important; font-size: 17px !important; line-height: 1.34 !important; }
body.page-diablo-planner .planner-tooltip-line-text::before { display: none !important; }
body.page-diablo-planner .planner-tooltip-option-line.is-greater { color: #ffff64 !important; }
body.page-diablo-planner .planner-tooltip-group.is-tempering .planner-tooltip-option-line { color: #62a1bd !important; }
body.page-diablo-planner .planner-tooltip-group.is-transform .planner-tooltip-option-line { color: #d5a6c6 !important; }
body.page-diablo-planner .planner-item-tooltip-effect { display: block !important; margin: 10px 0 !important; border: 0 !important; border-top: 1px solid #454842 !important; background: transparent !important; padding: 11px 0 0 !important; color: #ff8000 !important; font-size: 17px !important; line-height: 1.38 !important; }
body.page-diablo-planner .planner-item-tooltip-effect-line { display: grid !important; grid-template-columns: 22px minmax(0,1fr); gap: 2px; align-items: start; }
body.page-diablo-planner .planner-item-tooltip-effect-line > b { display: grid; min-height: 22px; place-items: center; color: inherit; font-size: 14px; }
body.page-diablo-planner .planner-item-tooltip-effect.is-unique,
body.page-diablo-planner .planner-item-tooltip-effect.is-mythic { color: #dc9bf2 !important; }
body.page-diablo-planner .planner-item-tooltip-footer { display: block !important; margin-top: 13px !important; border-top: 1px solid #4b4842 !important; padding-top: 10px !important; color: #888 !important; font-size: 14px !important; font-style: italic !important; }
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"]::-webkit-scrollbar,
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] > .planner-item-tooltip::-webkit-scrollbar,
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] > .planner-slot-tooltip::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

body.page-diablo-planner .planner-gear-sidebar { grid-template-rows: auto !important; }
body.page-diablo-planner .planner-media-tab-body { min-height: 610px; background: #101216; padding: 18px; }
body.page-diablo-planner .planner-video-pane .planner-feature-tab-head,
body.page-diablo-planner .planner-memo-pane .planner-feature-tab-head { border-color: #30343a; background: #17191e; }
body.page-diablo-planner .planner-video-pane .planner-feature-tab-head h2,
body.page-diablo-planner .planner-memo-pane .planner-feature-tab-head h2 { color: #d5d1c7; }
body.page-diablo-planner .planner-video-pane .planner-feature-tab-head span,
body.page-diablo-planner .planner-memo-pane .planner-feature-tab-head span { color: #85888e; }
body.page-diablo-planner .planner-video-pane .planner-feature-tab-head > button { min-height: 36px; border: 1px solid #725231; background: #211a14; padding: 0 14px; color: #d4aa70; cursor: pointer; }
body.page-diablo-planner .planner-media-tab-body .planner-side-card { max-height: none !important; border: 1px solid #30343a !important; background: #111318 !important; }
body.page-diablo-planner .planner-video-pane .planner-video-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-height: none; overflow: visible; padding: 14px; }
body.page-diablo-planner .planner-memo-pane .planner-memo-card { min-height: 570px; padding: 14px; }
body.page-diablo-planner .planner-memo-pane [data-build-memo] { width: 100%; min-height: 540px; box-sizing: border-box; resize: vertical; border: 1px solid #343840; background: #0b0d10; padding: 18px; color: #d5d2ca; font: 15px/1.75 'Noto Sans KR', sans-serif; }

@media (max-width: 980px) {
    body.page-diablo-planner .planner-equipment-board--summary,
    body.page-diablo-planner [data-slots] { column-gap: 34px !important; padding-inline: 18px !important; }
    body.page-diablo-planner .planner-video-pane .planner-video-list { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
    body.page-diablo-planner .planner-gear-overview {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }
    body.page-diablo-planner .planner-gear-overview-main,
    body.page-diablo-planner .planner-gear-sidebar,
    body.page-diablo-planner .planner-summary-card,
    body.page-diablo-planner .planner-mechanic-overview {
        grid-column: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}
@media (max-width: 720px) {
    body.page-diablo-planner .planner-page { overflow-x: hidden !important; }
    body.page-diablo-planner .planner-shell,
    body.page-diablo-planner .planner-workspace,
    body.page-diablo-planner .planner-build-card,
    body.page-diablo-planner .planner-pane { min-width: 0 !important; width: 100% !important; }
    body.page-diablo-planner .planner-actions--settings {
        display: grid !important;
        grid-template-columns: minmax(0, 1.55fr) repeat(2, minmax(0, .85fr)) !important;
        gap: 7px !important;
    }
    body.page-diablo-planner .planner-actions--settings button {
        min-width: 0 !important;
        padding-inline: 5px !important;
        font-size: 12px !important;
    }
    body.page-diablo-planner .planner-section-tabs > div {
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    body.page-diablo-planner .planner-section-tabs > div::-webkit-scrollbar { display: none; }
    body.page-diablo-planner .planner-section-tabs button {
        min-width: max-content !important;
        padding-inline: 12px !important;
        font-size: 12px !important;
    }
    body.page-diablo-planner .planner-gear-overview { padding: 8px !important; overflow: hidden !important; }
    body.page-diablo-planner .planner-equipment-board--summary,
    body.page-diablo-planner [data-slots] {
        min-height: 560px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 4px !important;
        padding: 18px 4px 28px !important;
    }
    body.page-diablo-planner [data-slots]::before {
        display: block !important;
        top: -8% !important;
        right: -22% !important;
        bottom: -8% !important;
        left: -22% !important;
        background-position: center center, center 52% !important;
        background-size: 100% 100%, auto 112% !important;
        opacity: .56 !important;
    }
    body.page-diablo-planner .planner-slot-column-overview { min-width: 0 !important; gap: 4px !important; }
    body.page-diablo-planner .planner-slot-column-left,
    body.page-diablo-planner .planner-slot-column-right { grid-area: auto !important; }
    body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot,
    body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] {
        min-width: 0 !important;
        min-height: 78px !important;
        gap: 4px !important;
        padding-inline: 1px !important;
    }
    body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="left"] .planner-slot-tile {
        grid-column: 1 !important;
        justify-self: start !important;
    }
    body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="left"] .planner-slot-copy {
        grid-column: 2 !important;
        text-align: left !important;
        justify-items: stretch !important;
        padding-right: 5px !important;
    }
    body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] .planner-slot-copy {
        grid-column: 1 !important;
        text-align: right !important;
        justify-items: stretch !important;
        padding-left: 5px !important;
    }
    body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"] .planner-slot-tile {
        grid-column: 2 !important;
        justify-self: end !important;
    }
    body.page-diablo-planner .planner-equipment-board--summary .planner-slot-copy {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    body.page-diablo-planner .planner-equipment-board--summary .planner-slot-copy > * {
        width: 100% !important;
        max-width: 100% !important;
    }
    body.page-diablo-planner .planner-equipment-board--summary .planner-slot-copy strong {
        overflow-wrap: anywhere;
        font-size: 12px !important;
        line-height: 1.22 !important;
    }
    body.page-diablo-planner .planner-equipment-board--summary .planner-slot-copy small,
    body.page-diablo-planner .planner-equipment-board--summary .planner-slot-copy em { font-size: 10px !important; }
    body.page-diablo-planner .planner-gear-stats-card { min-height: 0 !important; }
    body.page-diablo-planner .planner-gear-stats { max-height: none !important; overflow: visible !important; }
    body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="slot"] { display: none !important; }
    body.page-diablo-planner .planner-media-tab-body { min-height: 420px; padding: 8px; }
}

/* 2026-08-31 unified local Maxroll-style tooltip pass */
body.page-diablo-planner .planner-slot-socket img {
    position: relative !important;
    left: 0 !important;
    margin: 0 !important;
    object-position: center center !important;
    transform: none !important;
}

body.page-diablo-planner .planner-item-tooltip,
body.page-diablo-planner .planner-choice-tooltip-card,
body.page-diablo-planner .planner-item-tooltip-effect,
body.page-diablo-planner .planner-item-tooltip-effect-line,
body.page-diablo-planner .planner-item-tooltip-effect-line > span {
    min-width: 0 !important;
    box-sizing: border-box !important;
}
body.page-diablo-planner .planner-item-tooltip-effect,
body.page-diablo-planner .planner-item-tooltip-effect-line {
    width: 100% !important;
    max-width: 100% !important;
}
body.page-diablo-planner .planner-item-tooltip-effect-line > span {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    writing-mode: horizontal-tb !important;
}
body.page-diablo-planner .planner-item-tooltip-head + .planner-item-tooltip-effect {
    border-top: 0 !important;
    padding-top: 0 !important;
}

body.page-diablo-planner .planner-choice-hover-tooltip {
    max-width: 430px !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}
body.page-diablo-planner .planner-choice-hover-tooltip > .planner-choice-tooltip-card {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    z-index: 0;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 430px !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    border: 38px solid transparent !important;
    border-image: url('/assets/img/diablo4-planner/game-ui/tooltip-base.d5050608.webp') 76 fill / 38px stretch !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 2px 0 5px !important;
    color: #b8afa1 !important;
    font-family: 'D4GameTextLocal', 'Noto Serif KR', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.28 !important;
    text-shadow: 0 0 2px #000;
    box-shadow: 0 18px 48px rgba(0,0,0,.82) !important;
}
body.page-diablo-planner .planner-choice-hover-tooltip > .planner-choice-tooltip-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    border: 64px solid transparent;
    border-image: url('/assets/img/diablo4-planner/game-ui/frame-legendary.b243f03a.webp') 128 fill / 64px stretch;
    background: none;
}
body.page-diablo-planner .planner-choice-hover-tooltip > .planner-choice-tooltip-card.is-unique::before {
    border-image-source: url('/assets/img/diablo4-planner/game-ui/frame-unique.867dc987.webp');
}
body.page-diablo-planner .planner-choice-hover-tooltip > .planner-choice-tooltip-card.is-mythic::before {
    border-image-source: url('/assets/img/diablo4-planner/game-ui/frame-mythic.4695b2a7.webp');
}
body.page-diablo-planner .planner-choice-hover-tooltip > .planner-choice-tooltip-card::after {
    content: '';
    position: absolute;
    z-index: 20;
    inset: 0;
    pointer-events: none;
    border: 62px solid transparent;
    border-image: url('/assets/img/diablo4-planner/game-ui/tooltip-frame.9829c985.webp') 124 / 62px / 11px round;
}

body.page-diablo-planner .planner-pointer-tooltip:not([data-tooltip-type="slot"]) {
    isolation: isolate;
    width: min(390px, calc(100vw - 36px)) !important;
    max-width: 390px !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    border: 38px solid transparent !important;
    border-image: url('/assets/img/diablo4-planner/game-ui/tooltip-base.d5050608.webp') 76 fill / 38px stretch !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 2px 0 5px !important;
    color: #dedbd4 !important;
    font-family: 'D4GameTextLocal', 'Noto Serif KR', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.42 !important;
    text-shadow: 0 0 2px #000;
    box-shadow: 0 18px 48px rgba(0,0,0,.82) !important;
}
body.page-diablo-planner .planner-pointer-tooltip:not([data-tooltip-type="slot"])::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    border: 64px solid transparent;
    border-image: url('/assets/img/diablo4-planner/game-ui/frame-common.6b8673f5.webp') 128 fill / 64px stretch;
    background: none;
}
body.page-diablo-planner .planner-pointer-tooltip:not([data-tooltip-type="slot"])::after {
    content: '';
    position: absolute;
    z-index: 20;
    inset: 0;
    pointer-events: none;
    border: 62px solid transparent;
    border-image: url('/assets/img/diablo4-planner/game-ui/tooltip-frame.9829c985.webp') 124 / 62px / 11px round;
}
body.page-diablo-planner .planner-pointer-tooltip:not([data-tooltip-type="slot"]) > strong {
    display: block !important;
    color: #e7c487 !important;
    font-family: 'D4OldFenrisLocal', 'Noto Serif KR', serif !important;
    font-size: 21px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
}
body.page-diablo-planner .planner-pointer-tooltip:not([data-tooltip-type="slot"]) > em {
    display: block !important;
    margin: 6px 0 0 !important;
    border: 0 !important;
    padding: 0 !important;
    color: #9b9285 !important;
    font-size: 13px !important;
    font-style: normal !important;
}
body.page-diablo-planner .planner-pointer-tooltip:not([data-tooltip-type="slot"]) > small {
    display: block !important;
    margin-top: 11px !important;
    border-top: 1px solid #454842 !important;
    padding-top: 10px !important;
    color: #dedbd4 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}
body.page-diablo-planner .planner-pointer-tooltip:not([data-tooltip-type="slot"]) > i {
    display: block !important;
    margin-top: 10px !important;
    border-top: 1px solid #454842 !important;
    padding-top: 9px !important;
    color: #87a8c7 !important;
    font-size: 13px !important;
    font-style: normal !important;
}
body.page-diablo-planner .planner-pointer-tooltip:not([data-tooltip-type="slot"]) .planner-featured-tooltip-head {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 11px !important;
    border-bottom: 1px solid #454842 !important;
    padding-bottom: 10px !important;
}
body.page-diablo-planner .planner-pointer-tooltip:not([data-tooltip-type="slot"]) .planner-featured-tooltip-head img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
}
body.page-diablo-planner .planner-pointer-tooltip:not([data-tooltip-type="slot"]) .planner-featured-tooltip-head strong {
    display: block !important;
    color: #e7c487 !important;
    font-family: 'D4OldFenrisLocal', 'Noto Serif KR', serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
}
body.page-diablo-planner .planner-pointer-tooltip:not([data-tooltip-type="slot"]) .planner-featured-tooltip-head small {
    display: block !important;
    margin-top: 3px !important;
    color: #9b9285 !important;
    font-size: 12px !important;
}
body.page-diablo-planner .planner-pointer-tooltip:not([data-tooltip-type="slot"]) .planner-featured-tooltip-tags {
    display: block !important;
    padding: 9px 0 !important;
    color: #bba98b !important;
    font-size: 13px !important;
}
body.page-diablo-planner .planner-pointer-tooltip:not([data-tooltip-type="slot"]) .planner-featured-tooltip-description {
    display: grid !important;
    gap: 5px !important;
    border-top: 1px solid #454842 !important;
    padding-top: 10px !important;
    color: #dedbd4 !important;
    font-size: 15px !important;
    line-height: 1.52 !important;
}
body.page-diablo-planner .planner-pointer-tooltip:not([data-tooltip-type="slot"]) .planner-featured-tooltip-support {
    display: grid !important;
    gap: 8px !important;
    margin-top: 10px !important;
    border-top: 1px solid #454842 !important;
    padding-top: 10px !important;
}

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

/* 2026-08-31 build versions, single masterwork state and item-card loadout */
body.page-diablo-planner .planner-version-bar {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid #292d33;
    border-bottom: 1px solid #292d33;
    background: linear-gradient(180deg, #17191e, #111318);
    padding: 10px 14px;
}
body.page-diablo-planner .planner-version-list-wrap {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 10px;
}
body.page-diablo-planner .planner-version-label {
    flex: 0 0 auto;
    color: #8b7962;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}
body.page-diablo-planner .planner-version-list {
    display: flex;
    min-width: 0;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
}
body.page-diablo-planner .planner-version-list button {
    min-height: 32px;
    flex: 0 0 auto;
    border: 1px solid #34383f;
    background: #101216;
    padding: 0 12px;
    color: #92969d;
    cursor: pointer;
    font-size: 12px;
}
body.page-diablo-planner .planner-version-list button:hover { border-color: #64513c; color: #c9b99f; }
body.page-diablo-planner .planner-version-list button.is-current {
    border-color: #8b6236;
    background: linear-gradient(180deg, #2a2118, #191510);
    color: #dfb77e;
    box-shadow: inset 0 -2px #aa6d32;
}
body.page-diablo-planner .planner-version-editor-controls {
    display: flex;
    flex: 0 0 auto;
    align-items: end;
    gap: 7px;
}
body.page-diablo-planner .planner-version-editor-controls label { display: grid; gap: 3px; }
body.page-diablo-planner .planner-version-editor-controls label > span { color: #777c84; font-size: 9px; }
body.page-diablo-planner .planner-version-editor-controls input {
    width: 150px;
    min-height: 32px;
    box-sizing: border-box;
    border: 1px solid #34383f;
    background: #0c0e11;
    padding: 0 9px;
    color: #d3cfc6;
    font-size: 12px;
}
body.page-diablo-planner .planner-version-editor-controls button {
    min-height: 32px;
    border: 1px solid #745231;
    background: #211a14;
    padding: 0 12px;
    color: #d4aa70;
    cursor: pointer;
    font-size: 12px;
}
body.page-diablo-planner.is-viewer .planner-version-editor-controls { display: none !important; }

body.page-diablo-planner .planner-compact-option-row,
body.page-diablo-planner .planner-compact-option-row.has-prefix {
    grid-template-columns: 34px minmax(0, 1fr) 46px !important;
}
body.page-diablo-planner .planner-compact-option-row .planner-masterwork,
body.page-diablo-planner .planner-masterwork-spacer {
    width: 46px !important;
    min-width: 46px !important;
    justify-content: center !important;
}
body.page-diablo-planner .planner-compact-option-row .planner-masterwork button,
body.page-diablo-planner .planner-compact-option-row .planner-masterwork button.stage-1 {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border: 1px solid #6d4a31 !important;
    background: #4a2d1d !important;
    box-shadow: inset 0 0 0 2px #1f1712 !important;
    opacity: .45 !important;
}
body.page-diablo-planner .planner-compact-option-row .planner-masterwork button.is-active,
body.page-diablo-planner .planner-compact-option-row .planner-masterwork button.stage-1.is-active {
    border-color: #bf8350 !important;
    background: #89542f !important;
    box-shadow: inset 0 0 0 2px #3a2418, 0 0 7px rgba(170,101,54,.58) !important;
    opacity: 1 !important;
}
body.page-diablo-planner .planner-tooltip-option-line.is-masterwork-1 { color: #b77948 !important; }

body.page-diablo-planner .planner-items-pane { background: #0d0f12; }
body.page-diablo-planner .planner-items-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 430px));
    justify-content: center;
    gap: 22px;
    padding: 22px;
}
body.page-diablo-planner .planner-items-empty {
    grid-column: 1 / -1;
    margin: 0;
    border: 1px solid #2e3238;
    background: #111318;
    padding: 48px 20px;
    color: #7e838b;
    text-align: center;
}
body.page-diablo-planner .planner-item-card { min-width: 0; }
body.page-diablo-planner .planner-item-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #30343a;
    border-bottom: 0;
    background: #17191e;
    padding: 9px 12px;
}
body.page-diablo-planner .planner-item-card-head span { color: #8d7458; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
body.page-diablo-planner .planner-item-card-head strong { overflow: hidden; color: #c8c3b9; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
body.page-diablo-planner .planner-item-card > .planner-item-tooltip,
body.page-diablo-planner .planner-item-card > .planner-slot-tooltip {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    z-index: 0;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    border: 38px solid transparent !important;
    border-image: url('/assets/img/diablo4-planner/game-ui/tooltip-base.d5050608.webp') 76 fill / 38px stretch !important;
    background: transparent !important;
    padding: 2px 0 5px !important;
    color: #b8afa1 !important;
    font-family: 'D4GameTextLocal', 'Noto Serif KR', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.28 !important;
    text-shadow: 0 0 2px #000;
    box-shadow: 0 18px 48px rgba(0,0,0,.68) !important;
}
body.page-diablo-planner .planner-item-card > .planner-item-tooltip::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    border: 64px solid transparent;
    border-image: url('/assets/img/diablo4-planner/game-ui/frame-legendary.b243f03a.webp') 128 fill / 64px stretch;
    background: none;
}
body.page-diablo-planner .planner-item-card > .planner-item-tooltip.is-unique::before { border-image-source: url('/assets/img/diablo4-planner/game-ui/frame-unique.867dc987.webp'); }
body.page-diablo-planner .planner-item-card > .planner-item-tooltip.is-mythic::before { border-image-source: url('/assets/img/diablo4-planner/game-ui/frame-mythic.4695b2a7.webp'); }
body.page-diablo-planner .planner-item-card > .planner-item-tooltip::after {
    content: '';
    position: absolute;
    z-index: 20;
    inset: 0;
    pointer-events: none;
    border: 62px solid transparent;
    border-image: url('/assets/img/diablo4-planner/game-ui/tooltip-frame.9829c985.webp') 124 / 62px / 11px round;
}

@media (max-width: 920px) {
    body.page-diablo-planner .planner-version-bar { align-items: stretch; flex-direction: column; }
    body.page-diablo-planner .planner-version-editor-controls { justify-content: flex-end; }
    body.page-diablo-planner .planner-items-grid { grid-template-columns: minmax(0, 430px); }
}
@media (max-width: 720px) {
    body.page-diablo-planner .planner-version-bar { padding: 9px 8px; }
    body.page-diablo-planner .planner-version-list-wrap { align-items: stretch; flex-direction: column; gap: 5px; }
    body.page-diablo-planner .planner-version-editor-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    body.page-diablo-planner .planner-version-editor-controls input { width: 100%; }
    body.page-diablo-planner .planner-items-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 10px 5px; }
    body.page-diablo-planner .planner-item-card > .planner-item-tooltip,
    body.page-diablo-planner .planner-item-card > .planner-slot-tooltip { border-width: 30px !important; border-image-width: 30px !important; font-size: 15px !important; }
    body.page-diablo-planner .planner-item-card > .planner-item-tooltip::before { border-width: 52px; border-image-width: 52px; }
    body.page-diablo-planner .planner-item-card > .planner-item-tooltip::after { border-width: 50px; border-image-width: 50px; border-image-outset: 8px; }
}

/* Item tab uses a compact, self-contained tooltip card layout. */
body.page-diablo-planner .planner-items-pane {
    min-width: 0;
    overflow: hidden;
}
body.page-diablo-planner .planner-items-grid {
    --planner-item-card-gap: 14px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row dense;
    grid-auto-rows: 1px;
    justify-content: stretch;
    align-items: start;
    column-gap: 14px;
    row-gap: 0;
    padding: 16px;
}
body.page-diablo-planner .planner-items-grid.is-empty { grid-auto-rows: auto; }
body.page-diablo-planner .planner-item-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.page-diablo-planner .planner-item-card-head {
    min-width: 0;
    padding: 7px 9px;
}
body.page-diablo-planner .planner-item-card-head span { font-size: 9px; }
body.page-diablo-planner .planner-item-card-head strong { min-width: 0; font-size: 11px; }
body.page-diablo-planner .planner-item-card > .planner-item-tooltip,
body.page-diablo-planner .planner-item-card > .planner-slot-tooltip {
    min-width: 0 !important;
    border-width: 24px !important;
    border-image-width: 24px !important;
    padding: 1px 0 3px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.58) !important;
}
body.page-diablo-planner .planner-item-card > .planner-item-tooltip::before {
    inset: -24px;
    border-width: 40px;
    border-image-width: 40px;
}
body.page-diablo-planner .planner-item-card > .planner-item-tooltip::after {
    inset: -24px;
    border-width: 39px;
    border-image-width: 39px;
    border-image-outset: 6px;
}
body.page-diablo-planner .planner-item-card .planner-item-tooltip-head {
    grid-template-columns: minmax(0, 1fr) 50px !important;
    gap: 7px !important;
    padding-bottom: 7px !important;
}
body.page-diablo-planner .planner-item-card .planner-item-tooltip-titleblock strong {
    font-size: 17px !important;
    line-height: 1.06 !important;
}
body.page-diablo-planner .planner-item-card .planner-item-tooltip-titleblock em {
    margin-top: 3px !important;
    font-size: 11px !important;
}
body.page-diablo-planner .planner-item-card .planner-item-tooltip-titleblock small {
    margin-top: 1px !important;
    font-size: 10px !important;
}
body.page-diablo-planner .planner-item-card .planner-item-tooltip-art {
    width: 48px !important;
    height: 48px !important;
}
body.page-diablo-planner .planner-item-card .planner-item-power {
    gap: 5px !important;
    padding: 6px 0 !important;
}
body.page-diablo-planner .planner-item-card .planner-item-power b { font-size: 17px !important; }
body.page-diablo-planner .planner-item-card .planner-item-power small { font-size: 11px !important; }
body.page-diablo-planner .planner-item-card .planner-tooltip-group {
    margin: 6px 0 !important;
}
body.page-diablo-planner .planner-item-card .planner-tooltip-group.is-tempering,
body.page-diablo-planner .planner-item-card .planner-tooltip-group.is-transform,
body.page-diablo-planner .planner-item-card .planner-tooltip-group.is-sockets {
    padding-top: 7px !important;
}
body.page-diablo-planner .planner-item-card .planner-tooltip-group-lines { gap: 3px !important; }
body.page-diablo-planner .planner-item-card .planner-tooltip-option-line {
    grid-template-columns: 16px minmax(0, 1fr) !important;
    gap: 1px !important;
}
body.page-diablo-planner .planner-item-card .planner-tooltip-line-prefix {
    min-height: 17px !important;
}
body.page-diablo-planner .planner-item-card .planner-tooltip-line-diamond { font-size: 6px; }
body.page-diablo-planner .planner-item-card .planner-tooltip-line-icon {
    width: 13px !important;
    height: 13px !important;
}
body.page-diablo-planner .planner-item-card .planner-tooltip-line-text {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
}
body.page-diablo-planner .planner-item-card .planner-item-tooltip-effect {
    margin: 6px 0 !important;
    padding-top: 7px !important;
    font-size: 12.5px !important;
    line-height: 1.32 !important;
}
body.page-diablo-planner .planner-item-card .planner-item-tooltip-effect-line {
    grid-template-columns: 16px minmax(0, 1fr) !important;
    gap: 1px !important;
}
body.page-diablo-planner .planner-item-card .planner-item-tooltip-effect-line > b {
    min-height: 17px;
    font-size: 10px;
}
body.page-diablo-planner .planner-item-card .planner-item-tooltip-footer {
    margin-top: 7px !important;
    padding-top: 6px !important;
    font-size: 10.5px !important;
}

@media (min-width: 481px) and (max-width: 720px) {
    body.page-diablo-planner .planner-items-grid {
        --planner-item-card-gap: 6px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 6px;
        row-gap: 0;
        padding: 8px;
    }
    body.page-diablo-planner .planner-item-card-head {
        gap: 4px;
        padding: 5px 6px;
    }
    body.page-diablo-planner .planner-item-card-head span { font-size: 7px; }
    body.page-diablo-planner .planner-item-card-head strong { font-size: 8px; }
    body.page-diablo-planner .planner-item-card > .planner-item-tooltip,
    body.page-diablo-planner .planner-item-card > .planner-slot-tooltip {
        border-width: 14px !important;
        border-image-width: 14px !important;
        font-size: 9px !important;
    }
    body.page-diablo-planner .planner-item-card > .planner-item-tooltip::before {
        inset: -14px;
        border-width: 24px;
        border-image-width: 24px;
    }
    body.page-diablo-planner .planner-item-card > .planner-item-tooltip::after {
        inset: -14px;
        border-width: 23px;
        border-image-width: 23px;
        border-image-outset: 3px;
    }
    body.page-diablo-planner .planner-item-card .planner-item-tooltip-head {
        grid-template-columns: minmax(0, 1fr) 29px !important;
        gap: 3px !important;
        padding-bottom: 4px !important;
    }
    body.page-diablo-planner .planner-item-card .planner-item-tooltip-titleblock strong { font-size: 11px !important; }
    body.page-diablo-planner .planner-item-card .planner-item-tooltip-titleblock em { margin-top: 1px !important; font-size: 8px !important; }
    body.page-diablo-planner .planner-item-card .planner-item-tooltip-titleblock small { font-size: 7px !important; }
    body.page-diablo-planner .planner-item-card .planner-item-tooltip-art { width: 28px !important; height: 28px !important; }
    body.page-diablo-planner .planner-item-card .planner-item-power { gap: 3px !important; padding: 4px 0 !important; }
    body.page-diablo-planner .planner-item-card .planner-item-power b { font-size: 11px !important; }
    body.page-diablo-planner .planner-item-card .planner-item-power small { font-size: 8px !important; }
    body.page-diablo-planner .planner-item-card .planner-tooltip-group { margin: 4px 0 !important; }
    body.page-diablo-planner .planner-item-card .planner-tooltip-group.is-tempering,
    body.page-diablo-planner .planner-item-card .planner-tooltip-group.is-transform,
    body.page-diablo-planner .planner-item-card .planner-tooltip-group.is-sockets { padding-top: 4px !important; }
    body.page-diablo-planner .planner-item-card .planner-tooltip-group-lines { gap: 2px !important; }
    body.page-diablo-planner .planner-item-card .planner-tooltip-option-line,
    body.page-diablo-planner .planner-item-card .planner-item-tooltip-effect-line {
        grid-template-columns: 10px minmax(0, 1fr) !important;
    }
    body.page-diablo-planner .planner-item-card .planner-tooltip-line-prefix,
    body.page-diablo-planner .planner-item-card .planner-item-tooltip-effect-line > b { min-height: 12px !important; }
    body.page-diablo-planner .planner-item-card .planner-tooltip-line-icon { width: 8px !important; height: 8px !important; }
    body.page-diablo-planner .planner-item-card .planner-tooltip-line-text,
    body.page-diablo-planner .planner-item-card .planner-item-tooltip-effect {
        font-size: 9px !important;
        line-height: 1.25 !important;
    }
    body.page-diablo-planner .planner-item-card .planner-item-tooltip-effect { margin: 4px 0 !important; padding-top: 4px !important; }
    body.page-diablo-planner .planner-item-card .planner-item-tooltip-footer { margin-top: 4px !important; padding-top: 4px !important; font-size: 7px !important; }
}

@media (max-width: 480px) {
    body.page-diablo-planner .planner-items-pane { overflow: visible; }
    body.page-diablo-planner .planner-items-grid {
        --planner-item-card-gap: 12px;
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        row-gap: 0;
        padding: 10px 5px;
    }
    body.page-diablo-planner .planner-item-card > .planner-item-tooltip,
    body.page-diablo-planner .planner-item-card > .planner-slot-tooltip {
        border-width: 24px !important;
        border-image-width: 24px !important;
        font-size: 13px !important;
    }
    body.page-diablo-planner .planner-item-card > .planner-item-tooltip::before {
        inset: -24px;
        border-width: 40px;
        border-image-width: 40px;
    }
    body.page-diablo-planner .planner-item-card > .planner-item-tooltip::after {
        inset: -24px;
        border-width: 39px;
        border-image-width: 39px;
        border-image-outset: 6px;
    }
}

/* Skill details keep resource, lucky-hit and description rows distinct. */
body.page-diablo-planner .planner-skill-tooltip-lines {
    display: grid !important;
    gap: 3px !important;
    white-space: normal !important;
}
body.page-diablo-planner .planner-skill-tooltip-lines > .planner-featured-tooltip-text-line {
    display: block !important;
    min-width: 0;
    white-space: normal !important;
    word-break: keep-all;
    overflow-wrap: break-word;
}
body.page-diablo-planner .planner-skill-tooltip-lines > .planner-featured-tooltip-text-line.is-meta {
    color: #c8b18c;
}
body.page-diablo-planner .planner-skill-tooltip-lines > .planner-featured-tooltip-text-line.is-meta + .planner-featured-tooltip-text-line.is-description {
    margin-top: 5px;
    border-top: 1px solid #454842;
    padding-top: 7px;
}

/* Skill-tree tooltip follows the in-game card hierarchy from the reference. */
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] {
    width: min(430px, calc(100vw - 36px)) !important;
    max-width: 430px !important;
    overflow: visible !important;
    padding: 20px 10px 9px !important;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-icon {
    display: grid !important;
    position: relative;
    z-index: 30;
    box-sizing: border-box;
    width: 72px;
    height: 72px;
    place-items: center;
    margin: -68px auto 12px;
    border: 8px solid transparent;
    border-image: url('/assets/img/diablo4-planner/game-ui/frame-common.6b8673f5.webp') 128 fill / 8px stretch;
    background: #131313;
    filter: drop-shadow(0 6px 7px rgba(0,0,0,.72));
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-icon::after {
    content: '';
    position: absolute;
    inset: 2px;
    border: 1px solid rgba(198,188,168,.42);
    pointer-events: none;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-icon img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-title {
    display: block !important;
    color: #f3eee6 !important;
    font-family: 'D4OldFenrisLocal', 'Noto Serif KR', serif !important;
    font-size: 23px !important;
    font-weight: 500 !important;
    line-height: 1.18 !important;
    text-align: center;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-rank {
    display: block;
    margin: 8px 4px 4px;
    border: 1px solid rgba(120,116,105,.5);
    background:
        linear-gradient(90deg, rgba(255,255,255,.025), rgba(255,255,255,.09) 50%, rgba(255,255,255,.025)),
        #2c2c29;
    padding: 4px 8px 5px;
    color: #eeeae2;
    font-family: 'D4OldFenrisLocal', 'Noto Serif KR', serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    box-shadow: inset 0 1px rgba(255,255,255,.05), inset 0 -1px rgba(0,0,0,.7);
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 13px;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-badges > span {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid #55534e;
    background: linear-gradient(180deg, #343431, #252522);
    padding: 3px 9px 4px;
    color: #f0ede7;
    font-family: 'D4OldFenrisLocal', 'Noto Serif KR', serif;
    font-size: 16px;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-badges > span.is-primary {
    border-color: #2c7c35;
    background: linear-gradient(180deg, #1d7028, #13521d);
    color: #fff;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-divider {
    display: block;
    position: relative;
    height: 13px;
    margin: 9px 0 5px;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-divider::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 0;
    left: 0;
    border-top: 1px solid #706c62;
    box-shadow: 0 1px rgba(0,0,0,.65);
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-divider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    width: 7px;
    height: 7px;
    border: 1px solid #77736a;
    background: #1a1a18;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 0 0 0 3px #1a1a18;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-lines {
    gap: 2px !important;
    margin-top: 0 !important;
    border-top: 0 !important;
    padding-top: 0 !important;
    color: #d8d0c4 !important;
    font-family: 'D4GameTextLocal', 'Noto Serif KR', serif !important;
    font-size: 17px !important;
    line-height: 1.42 !important;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-lines > .is-meta {
    color: #cdb78f !important;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-lines > .is-meta + .is-description {
    margin-top: 2px;
    border-top: 0;
    padding-top: 0;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-number {
    color: #e4a844;
    font-weight: 500;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-featured-tooltip-text-line.is-meta .planner-skill-tooltip-number {
    color: #e3ddd3;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-featured-tooltip-text-line.is-meta.is-lucky .planner-skill-tooltip-number {
    color: #fff46b;
    font-weight: 700;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-next {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    color: #d8d0c4;
    font-family: 'D4GameTextLocal', 'Noto Serif KR', serif;
    font-size: 16px;
    line-height: 1.38;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-next > strong {
    color: #bca582 !important;
    font-family: 'D4OldFenrisLocal', 'Noto Serif KR', serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-next-line {
    display: grid;
    grid-template-columns: 13px minmax(0, 1fr);
    gap: 5px;
    align-items: start;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-next-line > b {
    color: #b9b5ad;
    font-size: 10px;
    line-height: 1.9;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-next-line .planner-skill-tooltip-number {
    color: #e4a844;
    font-weight: 600;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-divider.is-footer {
    margin-top: 7px;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-damage {
    display: flex;
    min-height: 25px;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    color: #d5cec3;
    font-family: 'D4OldFenrisLocal', 'Noto Serif KR', serif;
    font-size: 17px;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-damage > b {
    display: inline-grid;
    width: 18px;
    height: 20px;
    place-items: center;
    color: #d17421;
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-damage > b::before { content: '◆'; }
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-damage.is-fire > b::before { content: '♨'; }
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-damage.is-cold > b { color: #6ebee8; }
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-damage.is-lightning > b { color: #b89cff; }
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-damage.is-shadow > b { color: #9571c4; }
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-damage.is-poison > b { color: #84b94f; }
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-damage.is-bleed > b { color: #b64b42; }
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="skill"] .planner-skill-tooltip-damage.is-physical > b { color: #c7b596; }

/* Tab descriptions are intentionally omitted; tabs use the full navigation width. */
body.page-diablo-planner .planner-section-tabs { padding-right: 0; }
body.page-diablo-planner .planner-section-tabs > div { width: 100%; }

/* The transformation selector is the final row, so its result list opens upward. */
body.page-diablo-planner .planner-option-suggestions.is-drop-up {
    top: auto !important;
    bottom: calc(100% + 3px) !important;
}

/* Keep the whole class portrait inside the equipment board instead of cropping it. */
body.page-diablo-planner [data-slots]::before {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background-size: 100% 100%, auto 88% !important;
    background-position: center center, center 52% !important;
}

/* 2026-09-01: paragon glyph readability, visible radius and game-style node rings. */
body.page-diablo-planner .planner-paragon-board-choice strong {
    color: #f0c879 !important;
    font-size: 14px;
    font-weight: 650;
    text-shadow: 0 1px 2px #000;
}
body.page-diablo-planner .planner-paragon-board-choice small {
    color: #c7cbd2 !important;
    font-size: 13px;
    line-height: 1.5;
    text-shadow: 0 1px 2px #000;
}
body.page-diablo-planner .planner-paragon-board-choice .planner-skill-tooltip-number {
    color: #e4a844;
    font-weight: 650;
}

body.page-diablo-planner .planner-paragon-glyph-range {
    border: 0 !important;
    background: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

body.page-diablo-planner .planner-paragon-node-icon-frame {
    position: relative;
    z-index: 1;
    display: grid;
    isolation: isolate;
    width: 56px;
    height: 56px;
    place-items: center;
    background: url('/assets/img/diablo4-planner/paragon-ui/node-ring-normal.png?v=20260901-r13') center / contain no-repeat;
    pointer-events: none;
}
body.page-diablo-planner .planner-paragon-node-icon-frame::before {
    position: absolute;
    z-index: -1;
    /* Fill beneath the ring itself so an active cell's red surface cannot show
       through transparent pixels as a second circular outline. */
    inset: 4px;
    border-radius: 50%;
    background: #181315 url('/assets/img/diablo4-planner/game-ui/tooltip-base.d5050608.webp') center / 150% 150% no-repeat;
    content: '';
}
body.page-diablo-planner .planner-paragon-node-icon-frame > img {
    position: relative;
    z-index: 1;
    width: 29px !important;
    height: 29px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    filter: grayscale(1) brightness(.36) !important;
}
body.page-diablo-planner .planner-paragon-node.is-active .planner-paragon-node-icon-frame > img {
    filter: none !important;
}
body.page-diablo-planner .planner-paragon-node.is-magic .planner-paragon-node-icon-frame {
    background-image: url('/assets/img/diablo4-planner/paragon-ui/node-ring-magic.png?v=20260901-r13');
}
body.page-diablo-planner .planner-paragon-node.is-rare .planner-paragon-node-icon-frame {
    background-image: url('/assets/img/diablo4-planner/paragon-ui/node-ring-rare.png?v=20260901-r13');
}
body.page-diablo-planner .planner-paragon-node.is-legendary .planner-paragon-node-icon-frame {
    background-image: url('/assets/img/diablo4-planner/paragon-ui/node-ring-legendary.png');
    width: 58px;
    height: 58px;
}
body.page-diablo-planner .planner-paragon-node.is-socket .planner-paragon-node-icon-frame {
    width: 60px;
    height: 60px;
    background-image: url('/assets/img/diablo4-planner/paragon-ui/node-ring-socket.png');
}
body.page-diablo-planner .planner-paragon-node.is-socket .planner-paragon-node-icon-frame > img {
    width: 38px !important;
    height: 38px !important;
}
body.page-diablo-planner .planner-paragon-node.is-socket .planner-paragon-node-icon-frame::before { inset: 13px; }

body.page-diablo-planner .planner-paragon-node:not(.is-gate) {
    width: 53px;
    height: 53px;
    border: 1px solid rgba(58, 48, 53, .92) !important;
    border-radius: 0 !important;
    background: rgba(17, 17, 17, .84) !important;
    padding: 0 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .6) !important;
}
body.page-diablo-planner .planner-paragon-node.is-magic:not(.is-gate) { border-color: rgba(44, 91, 124, .92) !important; }
body.page-diablo-planner .planner-paragon-node.is-rare:not(.is-gate) { border-color: rgba(130, 105, 30, .94) !important; }
body.page-diablo-planner .planner-paragon-node.is-legendary:not(.is-gate) { border-color: rgba(149, 49, 42, .96) !important; }
body.page-diablo-planner .planner-paragon-node.is-in-radius:not(.is-active):not(.is-gate) {
    border-color: #2a3612 !important;
    background: #1a2f09 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .6) !important;
}
body.page-diablo-planner .planner-paragon-node.is-active:not(.is-gate) {
    border: 2px solid #c40606 !important;
    background: #240e0e !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .72) !important;
}

body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="paragon"] .planner-skill-tooltip-number,
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="glyph"] .planner-skill-tooltip-number {
    color: #e4a844;
    font-weight: 600;
}

/* Glyph sockets use the Maxroll/game card hierarchy, kept entirely on local assets. */
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="paragon"][data-tooltip-rarity="socket"] {
    width: min(410px, calc(100vw - 36px)) !important;
    max-width: 410px !important;
    padding: 28px 34px 24px !important;
    color: #d2c6b5 !important;
    font-family: 'D4OldFenrisLocal', 'Noto Serif KR', serif !important;
    font-size: 18px !important;
    line-height: 1.32 !important;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="paragon"][data-tooltip-rarity="socket"]::before {
    border-image-source: url('/assets/img/diablo4-planner/game-ui/tooltip-base.d5050608.webp') !important;
}
body.page-diablo-planner .planner-glyph-socket-tooltip-card {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 70px;
    color: #d7cdbf;
    text-align: left;
}
body.page-diablo-planner .planner-glyph-socket-emblem {
    position: absolute;
    z-index: 25;
    top: -70px;
    left: 50%;
    display: grid;
    width: 78px;
    height: 78px;
    transform: translateX(-50%);
    place-items: center;
    background: url('/assets/img/diablo4-planner/paragon-ui/node-ring-socket.png') center / contain no-repeat;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .85));
}
body.page-diablo-planner .planner-glyph-socket-emblem::before {
    position: absolute;
    z-index: -1;
    inset: 15px;
    border-radius: 50%;
    background: #171313 url('/assets/img/diablo4-planner/game-ui/tooltip-base.d5050608.webp') center / 180% 180% no-repeat;
    content: '';
}
body.page-diablo-planner .planner-glyph-socket-emblem img {
    width: 50px !important;
    height: 50px !important;
    border: 0 !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    filter: none !important;
}
body.page-diablo-planner .planner-glyph-socket-title,
body.page-diablo-planner .planner-glyph-socket-name {
    display: block !important;
    color: #f5efe5 !important;
    font-family: 'D4OldFenrisLocal', 'Noto Serif KR', serif !important;
    font-weight: 600 !important;
    text-align: center !important;
}
body.page-diablo-planner .planner-glyph-socket-title { font-size: 27px !important; line-height: 1.1 !important; }
body.page-diablo-planner .planner-glyph-socket-name { margin: 8px 0 9px; font-size: 25px !important; line-height: 1.12 !important; }
body.page-diablo-planner .planner-glyph-socket-divider {
    display: block;
    width: 100%;
    height: 18px;
    margin: 7px 0 5px;
    background: url('/assets/img/diablo4-planner/paragon-ui/glyph-tooltip-divider.png') center / 100% 18px no-repeat;
}
body.page-diablo-planner .planner-glyph-socket-primary {
    display: block;
    margin-bottom: 8px;
    color: #d5d0c6;
    font-size: 18px;
}
body.page-diablo-planner .planner-glyph-socket-primary > span { color: #a9aaa6; font-size: 12px; }
body.page-diablo-planner .planner-glyph-socket-primary b { color: #31e839; font-weight: 700; }
body.page-diablo-planner .planner-glyph-socket-label {
    display: grid;
    min-height: 29px;
    place-items: center;
    border: 0;
    background: url('/assets/img/diablo4-planner/paragon-ui/glyph-tooltip-label-bar.png') center / 100% 100% no-repeat;
    color: #f1ede5;
    font-size: 17px;
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: uppercase;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .55);
}
body.page-diablo-planner .planner-glyph-socket-level,
body.page-diablo-planner .planner-glyph-socket-note,
body.page-diablo-planner .planner-glyph-socket-empty { display: block; }
body.page-diablo-planner .planner-glyph-socket-level { margin-bottom: 8px; color: #cbbb9f; font-size: 18px; }
body.page-diablo-planner .planner-glyph-socket-effect,
body.page-diablo-planner .planner-glyph-socket-legendary {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 3px;
    margin: 4px 0 8px;
    color: #ddd6cc;
    font-size: 18px;
    line-height: 1.35;
}
body.page-diablo-planner .planner-glyph-socket-effect > span:first-child { color: #b6b5ae; font-size: 12px; line-height: 1.8; }
body.page-diablo-planner .planner-glyph-socket-heading {
    display: block;
    margin-top: 6px;
    color: #c7b68d;
    font-size: 18px;
}
body.page-diablo-planner .planner-glyph-socket-note { color: #b7ada0; font-size: 17px; }
body.page-diablo-planner .planner-glyph-socket-threshold { color: #f23731; }
body.page-diablo-planner .planner-glyph-socket-legendary { color: #f0a13c; }
body.page-diablo-planner .planner-glyph-socket-legendary > span:first-child { color: #f0a13c; line-height: 1.55; }
body.page-diablo-planner .planner-glyph-socket-tooltip-card .planner-skill-tooltip-number {
    color: #f0bd73 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
    text-rendering: geometricPrecision;
}
body.page-diablo-planner .planner-glyph-socket-tooltip-card.is-empty { padding: 8px 0 3px; }
body.page-diablo-planner .planner-glyph-socket-tooltip-card.is-empty .planner-glyph-socket-divider { margin-bottom: 8px; }
body.page-diablo-planner .planner-glyph-socket-empty { color: #c7baaa; font-size: 17px; text-align: center; }

/* Mercenary skills use the same framed card hierarchy as the game-style skill cards. */
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="mercenary"] {
    width: min(410px, calc(100vw - 36px)) !important;
    max-width: 410px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 5px 7px !important;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="mercenary"] .planner-mercenary-tooltip-head {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 1px 0 12px !important;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="mercenary"] .planner-mercenary-tooltip-head img {
    box-sizing: border-box;
    width: 66px !important;
    height: 66px !important;
    border: 8px solid transparent;
    border-image: url('/assets/img/diablo4-planner/game-ui/frame-common.6b8673f5.webp') 128 fill / 8px stretch;
    background: #111;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,.7));
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="mercenary"] .planner-mercenary-tooltip-head strong {
    color: #f3eee6 !important;
    font-size: 22px !important;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="mercenary"] .planner-mercenary-tooltip-head small {
    color: #bca582 !important;
    font-size: 13px !important;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="mercenary"] .planner-mercenary-tooltip-tags {
    display: flex !important;
    flex-wrap: wrap;
    gap: 5px;
    padding: 9px 0 !important;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="mercenary"] .planner-mercenary-tooltip-tags > span {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    border: 1px solid #55534e;
    background: linear-gradient(180deg, #343431, #252522);
    padding: 2px 8px 3px;
    color: #eee9df;
    font-size: 13px;
    line-height: 1;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="mercenary"] .planner-mercenary-tooltip-description {
    display: grid !important;
    gap: 5px !important;
    margin-top: 0 !important;
    border-top: 1px solid #706c62 !important;
    padding-top: 10px !important;
    color: #d8d0c4 !important;
    font-size: 16px !important;
    line-height: 1.48 !important;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="mercenary"] .planner-mercenary-tooltip-line {
    display: block;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="mercenary"] .planner-mercenary-tooltip-line.is-meta {
    color: #cdb78f;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="mercenary"] .planner-mercenary-tooltip-line.is-meta > b {
    color: #cdb78f;
    font-weight: 500;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="mercenary"] .planner-skill-tooltip-number {
    color: #e4a844;
    font-weight: 650;
}

/* 2026-09-01: level-150 legendary glyph presentation and cell-accurate radius. */
body.page-diablo-planner .planner-paragon-glyph-range-cells {
    position: absolute;
    z-index: 21;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    --planner-glyph-range-outline: rgba(128, 35, 39, .62);
}
body.page-diablo-planner .planner-paragon-glyph-range-cell {
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 53px;
    height: 53px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(70, 101, 26, .9);
    background: rgba(31, 66, 14, .68);
    box-shadow: inset 0 0 0 1px rgba(28, 44, 13, .8);
}

body.page-diablo-planner .planner-paragon-node-icon-frame {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    grid-template: 100% / 100%;
}
body.page-diablo-planner .planner-paragon-node-icon-frame > img {
    width: 40px !important;
    height: 40px !important;
    max-width: none !important;
    max-height: none !important;
    transform: none;
}
body.page-diablo-planner .planner-paragon-node.is-in-radius:not(.is-active) .planner-paragon-node-icon-frame > img {
    opacity: .52 !important;
    filter: grayscale(1) brightness(.3) contrast(.95) !important;
}
body.page-diablo-planner .planner-paragon-node.is-active:not(.is-socket) .planner-paragon-node-icon-frame > img {
    opacity: 1 !important;
    filter: brightness(.72) contrast(.9) saturate(.85) !important;
}
body.page-diablo-planner .planner-paragon-node.is-socket.is-active .planner-paragon-node-icon-frame > img {
    opacity: 1 !important;
    filter: none !important;
}
body.page-diablo-planner .planner-paragon-node.is-socket .planner-paragon-node-icon-frame > img {
    width: 74px !important;
    height: 74px !important;
}

body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="paragon"][data-tooltip-rarity="socket"] {
    box-sizing: border-box !important;
    width: min(415px, calc(100vw - 30px)) !important;
    max-width: 415px !important;
    border: 22px solid transparent !important;
    border-image: url('/assets/img/diablo4-planner/game-ui/tooltip-base.d5050608.webp') 76 fill / 22px stretch !important;
    background: #140d0a !important;
    padding: 23px 0 15px !important;
    color: #d7caba !important;
    font-size: 18px !important;
    line-height: 1.36 !important;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="paragon"][data-tooltip-rarity="socket"]::before {
    display: block !important;
    content: '' !important;
    position: absolute;
    z-index: -1;
    inset: -17px !important;
    border: 22px solid transparent !important;
    border-image: url('/assets/img/diablo4-planner/game-ui/frame-legendary.b243f03a.webp') 128 fill / 22px stretch !important;
    pointer-events: none;
}
body.page-diablo-planner .planner-pointer-tooltip[data-tooltip-type="paragon"][data-tooltip-rarity="socket"]::after {
    inset: -11px !important;
}
body.page-diablo-planner .planner-glyph-socket-tooltip-card {
    z-index: auto !important;
    color: #d7caba !important;
    padding-top: 16px !important;
}
body.page-diablo-planner .planner-glyph-socket-emblem {
    top: -70px !important;
    left: 50% !important;
    width: 80px !important;
    height: 80px !important;
    background: url('/assets/img/diablo4-planner/paragon-ui/glyph-tooltip-emblem-ring.png') center / 80px 80px no-repeat !important;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .9)) !important;
}
body.page-diablo-planner .planner-glyph-socket-emblem::before {
    display: none !important;
    content: none !important;
}
body.page-diablo-planner .planner-glyph-socket-emblem img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 80px !important;
    height: 80px !important;
    max-width: none !important;
    max-height: none !important;
    transform: translate(-50%, -50%) translate(-2px, -2px) !important;
    pointer-events: none;
}
body.page-diablo-planner .planner-glyph-socket-rarity {
    display: block;
    margin: 4px 0 10px;
    color: #ef8d22;
    font-size: 19px;
    line-height: 1.15;
    text-align: center;
}
body.page-diablo-planner .planner-glyph-socket-name {
    margin: 0 0 9px !important;
    color: #fffaf1 !important;
    font-size: 25px !important;
    line-height: 1.12 !important;
}
body.page-diablo-planner .planner-glyph-socket-label {
    min-height: 29px !important;
    margin: 0 !important;
    color: #f5f0e8 !important;
    font-size: 18px !important;
    line-height: 29px !important;
}
body.page-diablo-planner .planner-glyph-socket-divider {
    height: 18px !important;
    margin: 0 0 7px !important;
}
body.page-diablo-planner .planner-glyph-socket-radius {
    display: block;
    margin: 0 0 4px;
    color: #d1b788;
    font-size: 18px;
}
body.page-diablo-planner .planner-glyph-socket-radius b {
    color: #e8bd4e;
    font-weight: 700;
    text-shadow: none;
}
body.page-diablo-planner .planner-glyph-socket-radius-max {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 2px;
    align-items: start;
    margin: 0 0 7px;
    color: #e58c39;
    font-size: 18px;
}
body.page-diablo-planner .planner-glyph-socket-radius-max > span:first-child,
body.page-diablo-planner .planner-glyph-socket-effect > span:first-child,
body.page-diablo-planner .planner-glyph-socket-threshold > span:first-child {
    color: #b8b3aa;
    font-size: 11px;
    line-height: 2.05;
}
body.page-diablo-planner .planner-glyph-socket-heading {
    margin-top: 4px !important;
    color: #cbb282 !important;
    font-size: 18px !important;
    line-height: 1.25;
}
body.page-diablo-planner .planner-glyph-socket-note {
    color: #b9ada0 !important;
    font-size: 17px !important;
    line-height: 1.25;
}
body.page-diablo-planner .planner-glyph-socket-effect,
body.page-diablo-planner .planner-glyph-socket-legendary {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 2px !important;
    margin: 3px 0 7px !important;
    font-size: 18px !important;
    line-height: 1.38 !important;
}
body.page-diablo-planner .planner-glyph-socket-threshold {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 2px;
    align-items: start;
    margin: 3px 0 5px !important;
    font-size: 15px !important;
    line-height: 1.35;
}
body.page-diablo-planner .planner-glyph-socket-threshold > span:first-child {
    color: #b8b3aa;
    font-size: 10px;
    line-height: 2.1;
}
body.page-diablo-planner .planner-glyph-socket-threshold.is-met {
    color: #60ff54 !important;
    text-shadow: none !important;
}
body.page-diablo-planner .planner-glyph-socket-legendary,
body.page-diablo-planner .planner-glyph-socket-legendary .planner-skill-tooltip-number {
    color: #ee8d22 !important;
}

/* 2026-09-01: larger softly blended class portrait and bottom-aligned weapon rows. */
body.page-diablo-planner .planner-equipment-board--summary,
body.page-diablo-planner [data-slots] {
    grid-template-rows: minmax(0, 1fr) !important;
    align-content: stretch !important;
    align-items: stretch !important;
}
body.page-diablo-planner [data-slots]::before {
    top: -10% !important;
    right: -12% !important;
    bottom: -10% !important;
    left: -12% !important;
    background-image: var(--planner-class-slot-background, none) !important;
    background-position: center 48% !important;
    background-size: auto 126% !important;
    opacity: .76 !important;
    filter: saturate(.88) contrast(1.03) brightness(.78) !important;
    -webkit-mask-image: radial-gradient(ellipse 62% 94% at 50% 49%, #000 0 48%, rgba(0,0,0,.96) 62%, rgba(0,0,0,.68) 76%, rgba(0,0,0,.24) 90%, transparent 100%) !important;
    mask-image: radial-gradient(ellipse 62% 94% at 50% 49%, #000 0 48%, rgba(0,0,0,.96) 62%, rgba(0,0,0,.68) 76%, rgba(0,0,0,.24) 90%, transparent 100%) !important;
}
body.page-diablo-planner [data-slots]::after {
    content: '' !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background:
        linear-gradient(90deg, #08090b 0%, rgba(8,9,11,.86) 7%, rgba(8,9,11,.34) 21%, transparent 36%, transparent 64%, rgba(8,9,11,.34) 79%, rgba(8,9,11,.86) 93%, #08090b 100%),
        linear-gradient(180deg, #08090b 0%, rgba(8,9,11,.45) 8%, transparent 23%, transparent 76%, rgba(8,9,11,.42) 91%, #08090b 100%) !important;
}
body.page-diablo-planner .planner-slot-column-overview {
    display: flex !important;
    min-height: 0;
    align-self: stretch !important;
    flex-direction: column;
    gap: 5px !important;
}
body.page-diablo-planner .planner-slot-stack {
    display: grid;
    gap: 5px;
}
body.page-diablo-planner .planner-slot-stack--weapons {
    margin-top: auto;
}

@media (max-width: 720px) {
    body.page-diablo-planner [data-slots]::before {
        top: -7% !important;
        right: -34% !important;
        bottom: -7% !important;
        left: -34% !important;
        background-position: center 49% !important;
        background-size: auto 118% !important;
        opacity: .62 !important;
        -webkit-mask-image: radial-gradient(ellipse 48% 94% at 50% 50%, #000 0 46%, rgba(0,0,0,.92) 62%, rgba(0,0,0,.52) 79%, transparent 100%) !important;
        mask-image: radial-gradient(ellipse 48% 94% at 50% 50%, #000 0 46%, rgba(0,0,0,.92) 62%, rgba(0,0,0,.52) 79%, transparent 100%) !important;
    }
    body.page-diablo-planner [data-slots]::after {
        background:
            linear-gradient(90deg, #08090b 0%, rgba(8,9,11,.78) 4%, rgba(8,9,11,.24) 18%, transparent 35%, transparent 65%, rgba(8,9,11,.24) 82%, rgba(8,9,11,.78) 96%, #08090b 100%),
            linear-gradient(180deg, #08090b 0%, rgba(8,9,11,.40) 7%, transparent 22%, transparent 78%, rgba(8,9,11,.38) 92%, #08090b 100%) !important;
    }
}

/* War-plan nodes: local stone backing and a single game-style inner ring. */
body.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node:not(.is-keystone) .planner-warplan-node-art {
    display: grid !important;
    width: 62px !important;
    height: 62px !important;
    place-items: center !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: url('/assets/img/diablo4-planner/paragon-ui/node-bg-common.png') center / 62px 62px no-repeat !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .72) !important;
}
body.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node:not(.is-keystone) .planner-warplan-node-art::after {
    content: '' !important;
    position: absolute !important;
    inset: 4px !important;
    display: block !important;
    border: 1px solid rgba(178, 184, 185, .30) !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .86) !important;
    pointer-events: none !important;
}
body.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node:not(.is-keystone) .planner-warplan-node-art img,
body.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node.is-choice:not(.is-keystone) .planner-warplan-node-art img {
    position: relative !important;
    z-index: 1 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
}
body.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node.is-active:not(.is-keystone) .planner-warplan-node-art {
    border: 0 !important;
    box-shadow: 0 0 0 2px #77171c, 0 0 14px rgba(210, 45, 54, .68) !important;
}
body.page-diablo-planner .planner-warplan-stage.is-d4guides-exact .planner-warplan-node.is-active:not(.is-keystone) .planner-warplan-node-art::after {
    border-color: rgba(255, 204, 146, .65) !important;
}

/* Inven/game-style compact paragon grid: one 36px square is one click target. */
body.page-diablo-planner .planner-paragon-node:not(.is-gate) {
    width: 36px !important;
    height: 36px !important;
    border: 1px solid rgba(35, 39, 43, .92) !important;
    border-radius: 0 !important;
    background: rgba(7, 9, 10, .88) !important;
    padding: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .58) !important;
}
body.page-diablo-planner .planner-paragon-node.is-magic:not(.is-gate) { border-color: rgba(35, 68, 91, .92) !important; }
body.page-diablo-planner .planner-paragon-node.is-rare:not(.is-gate) { border-color: rgba(91, 76, 24, .92) !important; }
body.page-diablo-planner .planner-paragon-node.is-legendary:not(.is-gate) { border-color: rgba(101, 42, 29, .92) !important; }
body.page-diablo-planner .planner-paragon-node.is-active:not(.is-gate) {
    border-width: 1px !important;
    border-color: #df171d !important;
    background: rgba(10, 12, 13, .96) !important;
    box-shadow: inset 0 0 0 1px rgba(79, 61, 33, .42) !important;
}
body.page-diablo-planner .planner-paragon-node.is-in-radius:not(.is-active):not(.is-gate),
body.page-diablo-planner .planner-paragon-node.is-glyph-mainstat:not(.is-active):not(.is-gate) {
    border-color: rgba(35, 39, 43, .92) !important;
    background: rgba(7, 9, 10, .88) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .58) !important;
}
body.page-diablo-planner .planner-paragon-node.is-in-radius.is-magic:not(.is-active):not(.is-gate) {
    border-color: rgba(35, 68, 91, .92) !important;
}
body.page-diablo-planner .planner-paragon-node.is-in-radius.is-rare:not(.is-active):not(.is-gate) {
    border-color: rgba(91, 76, 24, .92) !important;
}
body.page-diablo-planner .planner-paragon-node.is-in-radius.is-legendary:not(.is-active):not(.is-gate) {
    border-color: rgba(101, 42, 29, .92) !important;
}
body.page-diablo-planner .planner-paragon-node.is-in-radius.is-socket:not(.is-active):not(.is-gate) {
    border-color: #79528a !important;
}
body.page-diablo-planner .planner-paragon-node:not(.is-gate) .planner-paragon-node-icon-frame,
body.page-diablo-planner .planner-paragon-node.is-legendary:not(.is-gate) .planner-paragon-node-icon-frame {
    width: 32px !important;
    height: 32px !important;
    background-image: url('/assets/img/diablo4-planner/paragon-ui/node-bg-common.png?v=20260901-1') !important;
    background-position: center !important;
    background-size: 32px 32px !important;
    background-repeat: no-repeat !important;
    filter: grayscale(.88) brightness(.44) contrast(1.05) !important;
}
body.page-diablo-planner .planner-paragon-node.is-magic:not(.is-gate) .planner-paragon-node-icon-frame {
    background-image: url('/assets/img/diablo4-planner/paragon-ui/node-bg-magic.png?v=20260901-1') !important;
}
body.page-diablo-planner .planner-paragon-node.is-rare:not(.is-gate) .planner-paragon-node-icon-frame {
    background-image: url('/assets/img/diablo4-planner/paragon-ui/node-bg-rare.png?v=20260901-1') !important;
}
body.page-diablo-planner .planner-paragon-node.is-legendary:not(.is-gate) .planner-paragon-node-icon-frame {
    background-image: url('/assets/img/diablo4-planner/paragon-ui/node-bg-legendary.png?v=20260901-1') !important;
}
body.page-diablo-planner .planner-paragon-node.is-socket:not(.is-gate) .planner-paragon-node-icon-frame {
    width: 36px !important;
    height: 36px !important;
    background-image: url('/assets/img/diablo4-planner/paragon-ui/node-bg-glyph.png?v=20260901-1') !important;
    background-size: 36px 36px !important;
}
body.page-diablo-planner .planner-paragon-node.is-active:not(.is-gate) .planner-paragon-node-icon-frame {
    filter: none !important;
}
body.page-diablo-planner .planner-paragon-node:not(.is-gate) .planner-paragon-node-icon-frame::before {
    display: none !important;
    content: none !important;
}
body.page-diablo-planner .planner-paragon-node:not(.is-gate) .planner-paragon-node-icon-frame > img,
body.page-diablo-planner .planner-paragon-node.is-socket:not(.is-gate) .planner-paragon-node-icon-frame > img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    opacity: .48 !important;
    filter: grayscale(1) brightness(.45) contrast(1.08) !important;
}
body.page-diablo-planner .planner-paragon-node.is-active:not(.is-socket):not(.is-gate) .planner-paragon-node-icon-frame > img {
    opacity: 1 !important;
    filter: brightness(0) saturate(100%) invert(65%) sepia(87%) saturate(1197%) hue-rotate(349deg) brightness(105%) contrast(99%) !important;
}
body.page-diablo-planner .planner-paragon-node.is-socket.is-active:not(.is-gate) .planner-paragon-node-icon-frame > img {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    opacity: 1 !important;
    filter: none !important;
}
body.page-diablo-planner .planner-paragon-node.is-gate {
    width: 36px !important;
    height: 36px !important;
    border-width: 1px !important;
    background: rgba(8, 10, 11, .9) !important;
    padding: 0 !important;
    place-items: center !important;
}
body.page-diablo-planner .planner-paragon-node.is-gate > img {
    width: 32px !important;
    height: 32px !important;
}
body.page-diablo-planner .planner-paragon-glyph-range-cell {
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.page-diablo-planner .planner-paragon-glyph-range-cell.has-top-edge {
    border-top: 2px solid var(--planner-glyph-range-outline) !important;
}
body.page-diablo-planner .planner-paragon-glyph-range-cell.has-right-edge {
    border-right: 2px solid var(--planner-glyph-range-outline) !important;
}
body.page-diablo-planner .planner-paragon-glyph-range-cell.has-bottom-edge {
    border-bottom: 2px solid var(--planner-glyph-range-outline) !important;
}
body.page-diablo-planner .planner-paragon-glyph-range-cell.has-left-edge {
    border-left: 2px solid var(--planner-glyph-range-outline) !important;
}

/* 2026-09-02 installed-client calculator */
body.page-diablo-planner .planner-combat-calculator {
    min-height: 0 !important;
    overflow: hidden;
}
body.page-diablo-planner .planner-combat-calculator > header > span {
    border: 1px solid #494239;
    background: #171511;
    padding: 4px 7px;
    color: #b89461 !important;
    font: 700 9px/1 'Noto Sans KR', sans-serif !important;
    letter-spacing: .04em;
}
body.page-diablo-planner .planner-combat-calculator-body {
    display: grid;
    max-height: 720px;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: #0c0e11;
    color: #b8b9b8;
    scrollbar-color: #3c3d3d #111317;
    scrollbar-width: thin;
}
body.page-diablo-planner .planner-calculator-mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 12px 13px 7px;
}
body.page-diablo-planner .planner-calculator-mode button {
    min-height: 34px;
    border: 1px solid #30343a;
    background: #13161a;
    padding: 0 7px;
    color: #81868d;
    font: 700 11px/1 'Noto Sans KR', sans-serif;
    cursor: pointer;
}
body.page-diablo-planner .planner-calculator-mode button:hover,
body.page-diablo-planner .planner-calculator-mode button.is-current {
    border-color: #84613b;
    background: linear-gradient(180deg, #261d14, #19150f);
    color: #deb273;
}
body.page-diablo-planner .planner-calculator-mode-note {
    margin: 0;
    padding: 0 14px 11px;
    color: #71767d;
    font: 10px/1.5 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-calculator-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border-block: 1px solid #292c31;
    background: #292c31;
}
body.page-diablo-planner .planner-calculator-results > div {
    display: grid;
    min-height: 70px;
    align-content: center;
    gap: 5px;
    background: radial-gradient(circle at 72% 30%, rgba(128, 82, 38, .12), transparent 58%), #111317;
    padding: 9px 12px;
}
body.page-diablo-planner .planner-calculator-results span {
    display: grid;
    color: #999d9f;
    font: 10px/1.25 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-calculator-results small {
    margin-top: 3px;
    color: #5f646b;
    font-size: 9px;
}
body.page-diablo-planner .planner-calculator-results strong {
    color: #e5d7bf;
    font: 600 18px/1.1 Georgia, 'Noto Serif KR', serif;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px #000;
}
body.page-diablo-planner .planner-calculator-section {
    border-bottom: 1px solid #282b30;
    background: #0f1115;
}
body.page-diablo-planner .planner-calculator-section > summary {
    display: flex;
    min-height: 42px;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 0 14px;
    color: #c7c3ba;
    font: 700 11px/1 'Noto Sans KR', sans-serif;
    list-style: none;
    cursor: pointer;
}
body.page-diablo-planner .planner-calculator-section > summary::-webkit-details-marker { display: none; }
body.page-diablo-planner .planner-calculator-section > summary::before {
    content: "+";
    color: #805d37;
    font: 400 15px/1 monospace;
}
body.page-diablo-planner .planner-calculator-section[open] > summary::before { content: "−"; }
body.page-diablo-planner .planner-calculator-section > summary > span { margin-right: auto; }
body.page-diablo-planner .planner-calculator-section > summary > small {
    color: #656a71;
    font-size: 9px;
    font-weight: 500;
}
body.page-diablo-planner .planner-calculator-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 0 13px 13px;
}
body.page-diablo-planner .planner-calculator-field {
    display: grid;
    min-width: 0;
    gap: 4px;
}
body.page-diablo-planner .planner-calculator-field > span:first-child {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    color: #8e9297;
    font: 9px/1.2 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-calculator-field > span:first-child small {
    overflow: hidden;
    color: #9a7546;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.page-diablo-planner .planner-calculator-input {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border: 1px solid #30343a;
    background: #090b0e;
}
body.page-diablo-planner .planner-calculator-input:focus-within { border-color: #815b31; box-shadow: inset 0 0 0 1px rgba(194, 126, 56, .14); }
body.page-diablo-planner .planner-calculator-input input {
    width: 100%;
    min-width: 0;
    height: 32px;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0 7px;
    color: #d7d3ca;
    font: 600 12px/1 'Noto Sans KR', sans-serif;
    font-variant-numeric: tabular-nums;
}
body.page-diablo-planner .planner-calculator-input > span { padding-right: 7px; color: #736b60; font-size: 10px; }
body.page-diablo-planner .planner-calculator-derived {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0 13px 13px;
    background: #24272c;
}
body.page-diablo-planner .planner-calculator-derived span {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    background: #14161a;
    padding: 7px;
    color: #737980;
    font-size: 9px;
}
body.page-diablo-planner .planner-calculator-derived b { color: #bdb8ad; font-weight: 600; font-variant-numeric: tabular-nums; }
body.page-diablo-planner .planner-calculator-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0 13px 8px;
}
body.page-diablo-planner .planner-calculator-comparison > div {
    display: grid;
    gap: 5px;
    border: 1px solid #34302a;
    background: #15130f;
    padding: 9px;
}
body.page-diablo-planner .planner-calculator-comparison span { color: #817765; font-size: 9px; }
body.page-diablo-planner .planner-calculator-comparison strong { color: #dfa957; font: 600 18px/1 Georgia, serif; font-variant-numeric: tabular-nums; }
body.page-diablo-planner .planner-calculator-warning {
    margin: 0;
    padding: 0 14px 13px;
    color: #6f747a;
    font: 9px/1.45 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-calculator-skill-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px;
    padding: 0 13px 9px;
}
body.page-diablo-planner .planner-calculator-skill-controls > label:first-child { display: grid; gap: 4px; color: #8e9297; font-size: 9px; }
body.page-diablo-planner .planner-calculator-skill-controls select {
    width: 100%;
    height: 34px;
    border: 1px solid #30343a;
    background: #090b0e;
    padding: 0 7px;
    color: #d1cdc4;
    font-size: 11px;
}
body.page-diablo-planner .planner-calculator-skill-result {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0 13px 13px;
    background: #2b2d31;
}
body.page-diablo-planner .planner-calculator-skill-result > div {
    display: grid;
    gap: 4px;
    background: #13151a;
    padding: 8px;
}
body.page-diablo-planner .planner-calculator-skill-result span { color: #73777d; font-size: 9px; }
body.page-diablo-planner .planner-calculator-skill-result strong { color: #d8b474; font-size: 12px; font-variant-numeric: tabular-nums; }
body.page-diablo-planner .planner-calculator-skill-result > p { grid-column: 1 / -1; margin: 0; background: #13151a; padding: 10px; color: #73777d; font-size: 9px; line-height: 1.45; }
body.page-diablo-planner .planner-calculator-sources > div { display: grid; padding: 0 13px 12px; }
body.page-diablo-planner .planner-calculator-sources p {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    gap: 5px;
    align-items: center;
    margin: 0;
    border-top: 1px solid #23262a;
    padding: 6px 0;
    color: #858a90;
    font-size: 9px;
}
body.page-diablo-planner .planner-calculator-sources p strong { color: #bda277; font-variant-numeric: tabular-nums; }
body.page-diablo-planner .planner-calculator-sources p small { color: #5f646b; text-align: right; }
body.page-diablo-planner .planner-calculator-sources em { color: #676c72; font-size: 9px; font-style: normal; line-height: 1.5; }
body.page-diablo-planner .planner-calculator-unresolved ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0 14px 13px 27px;
    color: #72777d;
    font-size: 9px;
    line-height: 1.45;
}
body.page-diablo-planner .planner-calculator-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 11px 13px 13px;
    color: #70757c;
    font-size: 8px;
}
body.page-diablo-planner .planner-calculator-footer span { display: inline-flex; align-items: center; gap: 3px; }
body.page-diablo-planner .planner-calculator-footer i { width: 5px; height: 5px; border-radius: 50%; background: #568867; }
body.page-diablo-planner .planner-calculator-footer i.is-inferred { background: #a88950; }
body.page-diablo-planner .planner-calculator-footer i.is-site { background: #667ea8; }
body.page-diablo-planner .planner-calculator-footer button {
    min-height: 27px;
    margin-left: auto;
    border: 1px solid #34383e;
    background: #14171b;
    padding: 0 8px;
    color: #8c9197;
    font-size: 9px;
    cursor: pointer;
}
body.page-diablo-planner .planner-calculator-footer button:disabled { opacity: .45; cursor: default; }
body.page-diablo-planner .planner-calculator-error { margin: 0; padding: 18px; color: #cf7777; font-size: 11px; }
@media (max-width: 1100px) {
    body.page-diablo-planner .planner-combat-calculator-body { max-height: none; }
    body.page-diablo-planner .planner-calculator-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    body.page-diablo-planner .planner-calculator-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.page-diablo-planner .planner-calculator-results strong { font-size: 16px; }
}

/* 2026-09-02 automatic level 70 character sheet */
body.page-diablo-planner .planner-character-sheet-intro {
    display: grid;
    gap: 4px;
    border-bottom: 1px solid #302a22;
    background:
        radial-gradient(circle at 92% 0, rgba(153, 91, 37, .16), transparent 44%),
        linear-gradient(180deg, #191713, #101216);
    padding: 14px 15px 13px;
}
body.page-diablo-planner .planner-character-sheet-intro > span {
    color: #9c713f;
    font: 800 8px/1 'Noto Sans KR', sans-serif;
    letter-spacing: .15em;
}
body.page-diablo-planner .planner-character-sheet-intro > strong {
    color: #e0d8ca;
    font: 600 18px/1.2 Georgia, 'Noto Serif KR', serif;
}
body.page-diablo-planner .planner-character-sheet-intro > small {
    color: #777b80;
    font: 9px/1.45 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-character-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border-bottom: 1px solid #292c31;
    background: #292c31;
}
body.page-diablo-planner .planner-character-summary > div {
    display: grid;
    min-height: 72px;
    align-content: center;
    gap: 5px;
    background: radial-gradient(circle at 76% 24%, rgba(143, 86, 34, .12), transparent 58%), #111317;
    padding: 9px 12px;
}
body.page-diablo-planner .planner-character-summary span {
    display: grid;
    gap: 3px;
    color: #9a9d9f;
    font: 10px/1.2 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-character-summary small { color: #5f646a; font-size: 8px; }
body.page-diablo-planner .planner-character-summary strong {
    color: #f0d7b0;
    font: 600 18px/1.1 Georgia, 'Noto Serif KR', serif;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px #000;
}
body.page-diablo-planner .planner-character-core {
    border-bottom: 1px solid #282b30;
    background: #0f1115;
    padding: 12px 13px 13px;
}
body.page-diablo-planner .planner-character-core > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #c7c3ba;
    font: 700 11px/1 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-character-core > header small { color: #656a71; font-size: 8px; font-weight: 500; }
body.page-diablo-planner .planner-character-core-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
body.page-diablo-planner .planner-character-core-stat {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 7px;
    border: 1px solid #2d3035;
    background: linear-gradient(135deg, #15181c, #101216);
    padding: 8px 9px;
}
body.page-diablo-planner .planner-character-core-stat > span { color: #92969a; font-size: 9px; }
body.page-diablo-planner .planner-character-core-stat > strong {
    color: #ddd2c0;
    font: 700 15px/1 Georgia, 'Noto Serif KR', serif;
    font-variant-numeric: tabular-nums;
}
body.page-diablo-planner .planner-character-core-stat > small {
    grid-column: 1 / -1;
    overflow: hidden;
    color: #6f7379;
    font-size: 8px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.page-diablo-planner .planner-character-stat-list,
body.page-diablo-planner .planner-character-resistances {
    display: grid;
    padding: 0 13px 12px;
}
body.page-diablo-planner .planner-character-resistances {
    margin: 0 13px 13px;
    border: 1px solid #272a2f;
    background: #111318;
    padding: 0 9px;
}
body.page-diablo-planner .planner-character-stat-row {
    display: flex;
    min-height: 31px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #23262a;
    color: #92969b;
    font: 9px/1.3 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-character-stat-row:first-child { border-top: 0; }
body.page-diablo-planner .planner-character-stat-row > span { display: grid; min-width: 0; gap: 2px; }
body.page-diablo-planner .planner-character-stat-row > span small { color: #5f646b; font-size: 8px; }
body.page-diablo-planner .planner-character-stat-row > strong {
    flex: 0 0 auto;
    color: #d9c49f;
    font: 700 11px/1 'Noto Sans KR', sans-serif;
    font-variant-numeric: tabular-nums;
}
body.page-diablo-planner .planner-character-source-summary { padding: 0 13px 12px !important; }
body.page-diablo-planner .planner-character-power-list { display: grid; gap: 7px; padding: 0 13px 13px; }
body.page-diablo-planner .planner-character-power {
    display: grid;
    gap: 4px;
    border: 1px solid #302e2a;
    background: #141413;
    padding: 9px;
}
body.page-diablo-planner .planner-character-power > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.page-diablo-planner .planner-character-power > header strong { color: #cdb486; font-size: 10px; }
body.page-diablo-planner .planner-character-power > header span {
    flex: 0 0 auto;
    border: 1px solid #4b3c29;
    background: #201910;
    padding: 3px 5px;
    color: #a77a43;
    font-size: 7px;
}
body.page-diablo-planner .planner-character-power > small { color: #666b70; font-size: 8px; }
body.page-diablo-planner .planner-character-power > p { margin: 0; color: #85888c; font-size: 9px; line-height: 1.5; }
body.page-diablo-planner .planner-character-empty { margin: 0; color: #676c72; font-size: 9px; }
body.page-diablo-planner .planner-character-sheet-footer {
    border-top: 1px solid #272a2f;
    background: #0d0f12;
    padding: 11px 13px 13px;
    color: #676c72;
    font: 8px/1.5 'Noto Sans KR', sans-serif;
}
@media (max-width: 1100px) {
    body.page-diablo-planner .planner-character-core-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    body.page-diablo-planner .planner-character-core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.page-diablo-planner .planner-character-summary strong { font-size: 16px; }
}

/* 2026-09-02 compact D4Builds-style comparison card */
body.page-diablo-planner .planner-simple-combat {
    display: grid;
    min-width: 0;
    background: #0d0f12;
}
body.page-diablo-planner .planner-simple-combat-head {
    display: grid;
    gap: 4px;
    border-bottom: 1px solid #302a22;
    background:
        radial-gradient(circle at 92% 0, rgba(153, 91, 37, .15), transparent 44%),
        linear-gradient(180deg, #181612, #101216);
    padding: 14px 15px 13px;
}
body.page-diablo-planner .planner-simple-combat-head > span {
    color: #9c713f;
    font: 800 8px/1 'Noto Sans KR', sans-serif;
    letter-spacing: .15em;
}
body.page-diablo-planner .planner-simple-combat-head > strong {
    color: #e0d8ca;
    font: 600 17px/1.2 Georgia, 'Noto Serif KR', serif;
}
body.page-diablo-planner .planner-simple-combat-head > small {
    color: #73777d;
    font: 9px/1.45 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-simple-combat-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border-bottom: 1px solid #302f2d;
    background: #302f2d;
}
body.page-diablo-planner .planner-simple-combat-metrics article {
    display: grid;
    min-width: 0;
    min-height: 92px;
    align-content: center;
    gap: 7px;
    background:
        radial-gradient(circle at 74% 22%, rgba(171, 101, 43, .17), transparent 54%),
        #111317;
    padding: 12px 14px;
}
body.page-diablo-planner .planner-simple-combat-metrics strong {
    overflow: hidden;
    color: #f0d7b0;
    font: 600 23px/1 Georgia, 'Noto Serif KR', serif;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px #000;
}
body.page-diablo-planner .planner-simple-combat-metrics span {
    color: #a6a8aa;
    font: 700 10px/1.2 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-simple-combat-metrics .planner-comparison-delta {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    border: 1px solid #34383d;
    border-radius: 2px;
    background: rgba(8, 10, 12, .56);
    padding: 3px 5px;
    color: #6f747a;
    font: 700 8px/1 'Noto Sans KR', sans-serif;
    white-space: nowrap;
}
body.page-diablo-planner .planner-simple-combat-metrics .planner-comparison-delta.is-positive {
    border-color: rgba(80, 154, 104, .42);
    color: #71c98d;
}
body.page-diablo-planner .planner-simple-combat-metrics .planner-comparison-delta.is-negative {
    border-color: rgba(176, 67, 61, .46);
    color: #d87068;
}
body.page-diablo-planner .planner-simple-combat-metrics .planner-comparison-delta.is-same { color: #aaa59b; }
body.page-diablo-planner .planner-simple-combat-metrics em {
    margin-left: 3px;
    border: 1px solid #4a3a27;
    border-radius: 2px;
    padding: 1px 4px;
    color: #a77a43;
    font-size: 7px;
    font-style: normal;
}
body.page-diablo-planner .planner-comparison-baseline {
    display: grid;
    gap: 10px;
    border-bottom: 1px solid #292c30;
    background: linear-gradient(90deg, rgba(143, 86, 34, .07), transparent 76%), #0f1114;
    padding: 12px 14px;
}
body.page-diablo-planner .planner-comparison-baseline > div:first-child {
    display: grid;
    gap: 3px;
}
body.page-diablo-planner .planner-comparison-baseline > div:first-child > strong {
    color: #c9c0b2;
    font: 700 10px/1.2 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-comparison-baseline > div:first-child > small {
    color: #696e74;
    font: 8px/1.45 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-comparison-baseline > span {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
body.page-diablo-planner .planner-comparison-baseline button {
    min-height: 28px;
    border: 1px solid #72502e;
    border-radius: 2px;
    background: linear-gradient(#302318, #1e1812);
    padding: 0 10px;
    color: #d7b17a;
    font: 700 9px/1 'Noto Sans KR', sans-serif;
    cursor: pointer;
}
body.page-diablo-planner .planner-comparison-baseline button:hover { border-color: #a16a35; color: #f0c68c; }
body.page-diablo-planner .planner-comparison-baseline button.is-subtle {
    border-color: #35393e;
    background: #14171a;
    color: #777c82;
}
body.page-diablo-planner .planner-comparison-baseline button:disabled { opacity: .4; cursor: default; }
body.page-diablo-planner .planner-comparison-changes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    border-top: 1px solid #272a2e;
    padding-top: 7px;
}
body.page-diablo-planner .planner-comparison-changes p {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    border-bottom: 1px solid #202328;
    padding: 6px 0;
    color: #74797f;
    font: 8px/1.2 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-comparison-changes strong {
    color: #c9b18c;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body.page-diablo-planner .planner-simple-combat-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    padding: 9px 14px 10px;
}
body.page-diablo-planner .planner-simple-combat-facts p {
    display: flex;
    min-width: 0;
    min-height: 29px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    border-bottom: 1px solid #22252a;
    color: #7f8388;
    font: 9px/1.2 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-simple-combat-facts strong {
    overflow: hidden;
    color: #d2c4ad;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.page-diablo-planner .planner-simple-combat-method {
    border-top: 1px solid #25282c;
    background: #0f1114;
    padding: 0 14px;
}
body.page-diablo-planner .planner-simple-combat-method summary {
    padding: 10px 0;
    color: #777b80;
    font: 700 9px/1 'Noto Sans KR', sans-serif;
    cursor: pointer;
}
body.page-diablo-planner .planner-simple-combat-method p {
    margin: 0 0 9px;
    color: #696e74;
    font: 8px/1.55 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-simple-combat-audit {
    background: linear-gradient(90deg, rgba(78, 111, 86, .055), transparent 70%), #0f1114;
}
body.page-diablo-planner .planner-simple-combat-audit .planner-simple-combat-facts {
    padding: 0 0 8px;
}
body.page-diablo-planner .planner-simple-combat-audit .planner-simple-combat-facts p {
    margin: 0;
}
body.page-diablo-planner .planner-simple-combat-audit .planner-simple-combat-facts span {
    display: grid;
    min-width: 0;
    gap: 2px;
}
body.page-diablo-planner .planner-simple-combat-audit .planner-simple-combat-facts small {
    color: #50565d;
    font-size: 7px;
}
body.page-diablo-planner .planner-simple-combat-audit .planner-simple-combat-facts + p {
    margin-bottom: 10px;
    border-left: 2px solid #554333;
    padding-left: 8px;
}
body.page-diablo-planner .planner-simple-stat-groups {
    display: grid;
    border-bottom: 1px solid #25282c;
}
body.page-diablo-planner .planner-simple-stat-group {
    border-top: 1px solid #282b30;
    background: #0f1115;
}
body.page-diablo-planner .planner-simple-stat-group:first-child { border-top: 0; }
body.page-diablo-planner .planner-simple-stat-group > header {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #25282c;
    background: linear-gradient(90deg, rgba(143, 86, 34, .09), transparent 72%);
    padding: 0 14px;
}
body.page-diablo-planner .planner-simple-stat-group > header strong {
    color: #c7c3ba;
    font: 700 10px/1 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-simple-stat-group > header small {
    overflow: hidden;
    color: #62676d;
    font: 8px/1 'Noto Sans KR', sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.page-diablo-planner .planner-simple-stat-group > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    padding: 5px 14px 8px;
}
body.page-diablo-planner .planner-simple-stat-group p {
    display: flex;
    min-width: 0;
    min-height: 29px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    border-bottom: 1px solid #22252a;
    color: #7f8388;
    font: 9px/1.2 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-simple-stat-group p > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}
body.page-diablo-planner .planner-simple-stat-group p small {
    color: #555a60;
    font-size: 7px;
}
body.page-diablo-planner .planner-simple-stat-group p > strong {
    overflow: hidden;
    flex: 0 0 auto;
    max-width: 52%;
    color: #d2c4ad;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 720px) {
    body.page-diablo-planner .planner-simple-combat-metrics strong { font-size: 19px; }
    body.page-diablo-planner .planner-simple-combat-facts { grid-template-columns: 1fr; }
    body.page-diablo-planner .planner-simple-stat-group > div { grid-template-columns: 1fr; }
    body.page-diablo-planner .planner-comparison-changes { grid-template-columns: 1fr; }
}

/* 2026-09-02 non-barbarian two-handed weapon offhand lock */
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot.is-two-hand-occupied,
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot[data-side="right"].is-two-hand-occupied {
    cursor: not-allowed !important;
    opacity: .76;
    pointer-events: none;
}
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot.is-two-hand-occupied .planner-slot-tile {
    border-color: #625a4d !important;
    background: radial-gradient(circle at 50% 42%, #292722 0, #171816 58%, #0b0d0e 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(218, 193, 151, .16), inset 0 0 18px rgba(0, 0, 0, .75), 0 0 0 1px #080909 !important;
    filter: grayscale(.18) saturate(.68);
}
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot.is-two-hand-occupied .planner-slot-tile::after {
    opacity: .36 !important;
}
body.page-diablo-planner .planner-equipment-board--summary .planner-gear-slot.is-two-hand-occupied .planner-slot-tile > img {
    opacity: .72 !important;
    transform: scale(.9) !important;
}
body.page-diablo-planner .planner-slot-twohand-mark {
    position: absolute;
    right: -5px;
    bottom: -5px;
    z-index: 7;
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border: 1px solid #8a673e;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, #403423, #17130f 72%);
    box-shadow: 0 1px 5px #000, inset 0 0 0 1px rgba(229, 195, 130, .12);
    color: #d8bd8a;
    font: 800 8px/1 'Noto Sans KR', sans-serif;
    letter-spacing: -.04em;
}
body.page-diablo-planner .planner-gear-slot.is-two-hand-occupied .planner-slot-copy strong {
    color: #aaa397 !important;
}
body.page-diablo-planner .planner-gear-slot.is-two-hand-occupied .planner-slot-copy small {
    color: #74736f !important;
}
body.page-diablo-planner .planner-gear-slot.is-two-hand-occupied .planner-slot-copy em {
    color: #9a754a !important;
}

/* 2026-09-02 aspect weapon base selector and calculator preview */
body.page-diablo-planner .planner-base-item-config {
    box-sizing: border-box;
    margin-top: 12px;
    border: 1px solid #3b3e49;
    border-radius: 12px;
    background: #20212a;
    padding: 12px;
}
body.page-diablo-planner .planner-base-item-config > header {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 12px;
    margin-bottom: 9px;
}
body.page-diablo-planner .planner-base-item-config > header > span {
    color: #8e9098;
    white-space: nowrap;
}
body.page-diablo-planner .planner-base-item-config > header > strong {
    color: #ded8cd;
}
body.page-diablo-planner .planner-base-item-select {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
}
body.page-diablo-planner .planner-base-item-select > img {
    box-sizing: border-box;
    width: 42px;
    height: 42px;
    object-fit: contain;
    border: 1px solid #494c57;
    border-radius: 8px;
    background: radial-gradient(circle at 50% 42%, #30343b, #171a1f 72%);
    padding: 3px;
}
body.page-diablo-planner .planner-base-item-select > span {
    display: grid;
    gap: 5px;
    min-width: 0;
}
body.page-diablo-planner .planner-base-item-select select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 34px;
    border: 1px solid #444752;
    border-radius: 7px;
    background: #171820;
    padding: 0 30px 0 10px;
    color: #e5dfd4;
    color-scheme: dark;
    font: 700 12px/1.2 'Noto Sans KR', sans-serif;
}
body.page-diablo-planner .planner-base-item-select small {
    overflow: hidden;
    color: #878a93;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}