body {
    background-color: var(--bg-primary);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--bg-primary) url('../template/images/main_bg.avif?v=cf1da2a43369') no-repeat center center / cover;
    pointer-events: none;
}

.header-inner { height: 50px; }
.header-logo-text { font-size: 1.15rem; }

.equipment-card { --equipment-blue: #8fbaff; --equipment-blue-text: #d6e8ff; --equipment-blue-bg: rgba(80, 125, 182, .18); background: rgba(34, 48, 63, .96); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.equipment-card-header { padding: 14px 22px; border-bottom: 1px solid var(--border); }
.equipment-card-body { padding: 18px; }
.equipment-heading, .equipment-controls, .equipment-build-controls { display: flex; align-items: center; gap: 12px; }
.equipment-build-controls { flex-wrap: wrap; }
.equipment-heading { justify-content: space-between; margin-bottom: 14px; }
.equipment-heading h1 { font-size: 1.35rem; line-height: 1.2; }
.equipment-note { color: var(--text-secondary); font-size: .78rem; }
.equipment-controls { display: grid; grid-template-columns: 1.1fr 1.1fr 1.55fr .75fr .75fr auto; align-items: end; gap: 9px; padding: 12px; border: 1px solid var(--border); border-radius: 7px; background: rgba(24,33,43,.55); }
.equipment-controls label { display: grid; gap: 4px; color: var(--text-secondary); font-size: .76rem; }
.equipment-controls select, .equipment-controls input, .equipment-filters input, .equipment-filters select, .equipment-build-controls :is(select, input) { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); border-radius: 4px; min-height: 33px; padding: 5px 8px; }
.equipment-stepper, .equipment-controls .equipment-select { position: relative; display: block; height: 33px; min-width: 0; }
.equipment-stepper { line-height: 0; }
.equipment-stepper > input { display: block; }
.equipment-controls :is(#equipment-level, #equipment-upgrade) { width: 100%; min-width: 0; padding-right: 29px; -moz-appearance: textfield; appearance: textfield; }
.equipment-controls :is(#equipment-level, #equipment-upgrade)::-webkit-inner-spin-button, .equipment-controls :is(#equipment-level, #equipment-upgrade)::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.equipment-stepper-buttons { position: absolute; top: 1px; right: 1px; bottom: 1px; display: grid; width: 22px; grid-template-rows: 1fr 1fr; border-left: 1px solid var(--border); overflow: hidden; border-radius: 0 3px 3px 0; }
.equipment-stepper-button { position: relative; display: grid; place-items: center; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; cursor: url('../template/images/text.cur?v=f75453a5744d'), pointer; }
.equipment-stepper-button + .equipment-stepper-button { border-top: 1px solid rgba(96, 122, 149, .45) !important; }
.equipment-stepper-button::after { width: 8px; height: 5px; background: #91abc6; content: ''; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.equipment-stepper-button--down::after { transform: rotate(180deg); }
.equipment-stepper-button:hover, .equipment-stepper-button:focus-visible { background: rgba(82, 119, 157, .2) !important; }
.equipment-stepper-button:hover::after, .equipment-stepper-button:focus-visible::after { background: #c8ddf3; }
.equipment-upgrade-number { position: relative; display: block; }
.equipment-upgrade-number #equipment-upgrade { color: transparent; caret-color: transparent; }
.equipment-upgrade-number output { position: absolute; top: 50%; right: 29px; left: 9px; overflow: hidden; color: var(--text-primary); font-size: .82rem; line-height: 1; pointer-events: none; transform: translateY(-50%); white-space: nowrap; }
.equipment-card :where(select, input, button):focus-visible { outline: none; outline-offset: 0; }
.equipment-select { position: relative; min-width: 0; }
#equipment-type:not(.equipment-select-native), #equipment-quality:not(.equipment-select-native) { visibility: hidden; }
.equipment-select-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.equipment-select-toggle { position: relative; display: flex; align-items: center; width: 100%; min-height: 33px; padding: 5px 27px 5px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: .82rem; text-align: left; }
.equipment-select-toggle::before { position: absolute; top: 0; right: 18px; bottom: 0; width: 1px; background: var(--border); content: ''; }
.equipment-select-toggle::after { position: absolute; top: 50%; right: 5px; width: 9px; height: 6px; margin: 0; background: var(--text-secondary); clip-path: polygon(0 0, 100% 0, 50% 100%); content: ''; transform: translateY(-50%); }
.equipment-select.is-open .equipment-select-toggle, .equipment-select-toggle:hover, .equipment-select-toggle:focus-visible { border-color: var(--equipment-blue); background: var(--equipment-blue-bg); color: var(--equipment-blue-text); }
.equipment-select.is-open .equipment-select-toggle::after { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.equipment-select-menu { position: absolute; z-index: 40; top: calc(100% + 3px); right: 0; left: 0; max-height: 240px; overflow: auto; padding: 3px 0; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-primary); box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.equipment-select-menu[hidden] { display: none; }
.equipment-select-option { display: block; width: 100%; min-height: 30px; padding: 5px 8px; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: .82rem; text-align: left; }
.equipment-select-option:hover, .equipment-select-option:focus-visible, .equipment-select-option.is-selected { background: var(--equipment-blue-bg); color: var(--equipment-blue-text); }
.equipment-select-option.is-class-base { font-weight: 600; }
.equipment-select-option.is-class-branch { padding-left: 18px; }
.equipment-select-option.is-class-branch::before { display: inline-block; width: 4px; height: 4px; margin: 0 9px 2px 0; border-radius: 50%; background: #7f9fc4; content: ''; vertical-align: middle; }
.equipment-select-option:disabled { color: var(--text-muted); cursor: default; }
.equipment-filters .equipment-select { min-width: 0; }
.equipment-build-controls .equipment-select { flex: 1; min-width: 0; }
.equipment-card .btn { flex: none; min-height: 30px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 5px; background: transparent; color: var(--text-secondary); font: inherit; font-size: .78rem; }
.equipment-card .btn:hover, .equipment-card .btn:focus-visible { border-color: var(--equipment-blue); background: var(--equipment-blue-bg); color: var(--equipment-blue-text); transform: none; box-shadow: none; }
.equipment-card .btn.btn-danger:hover:not(:disabled), .equipment-card .btn.btn-danger:focus-visible:not(:disabled) { border-color: rgba(225, 120, 120, .7); background: transparent; color: #e59696; }
.equipment-controls button { margin-left: 0; }
.equipment-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; gap: 12px; margin-top: 12px; }
.equipment-left-column { display: grid; grid-template-rows: auto auto; align-content: start; gap: 12px; min-width: 0; }
.equipment-stage-panel, .equipment-stats-panel, .equipment-picker, .equipment-summary, .equipment-honor { border: 1px solid var(--border); border-radius: 7px; background: rgba(24,33,43,.55); padding: 15px; }
.equipment-stage-panel { padding: 9px; }
.equipment-picker h2, .equipment-summary h2 { margin-bottom: 12px; color: var(--text-primary); font-size: .95rem; font-weight: 600; letter-spacing: .02em; }
.equipment-stats-panel h2 { margin-bottom: 12px; color: var(--text-primary); font-size: .95rem; font-weight: 600; letter-spacing: .02em; text-align: center; }
.equipment-stage { width: 307px; max-width: 100%; aspect-ratio: 307 / 323; margin: 0 auto; position: relative; background: #10171e; overflow: hidden; border-radius: 4px; }
.equipment-stage > img { width: 100%; height: 100%; object-fit: contain; display: block; }
#equipment-slots { position: absolute; inset: 0; width: 307px; height: 323px; }
.equipment-slot { position: absolute; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; border-radius: 0; overflow: hidden; color: var(--text-primary); font-size: 0; }
.equipment-slot::after { position: absolute; inset: 0; box-sizing: border-box; border: 1px solid transparent; background: transparent; content: ''; pointer-events: none; }
.equipment-slot:hover::after, .equipment-slot.is-pending::after { border-color: #8fbaff; }
.equipment-slot:hover, .equipment-slot.is-pending { z-index: 3; }
.equipment-slot img, .equipment-item-icon { width: 100%; height: 100%; display: block; object-fit: contain; }
.equipment-slot.is-occupied-by-two-handed-weapon img { opacity: .8; filter: grayscale(.45) brightness(.9); }
.equipment-slot em { position: absolute; right: 1px; bottom: 0; font: 700 10px/1 Segoe UI, sans-serif; color: #fff1bc; text-shadow: 0 1px 2px #000; }
.equipment-picker { min-width: 0; }
.equipment-picker--catalog { display: flex; flex-direction: column; grid-column: auto; min-height: 0; padding-bottom: 7px; }
.equipment-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.equipment-filters input { grid-column: 1 / -1; }
.equipment-filters input { min-width: 0; }
.equipment-filters .equipment-select-toggle { white-space: nowrap; }
.equipment-items { height: 300px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(103, 137, 194, .7) rgba(5, 11, 20, .62); border: 1px solid var(--border); border-radius: 5px; background: rgba(12,18,24,.38); }
.equipment-picker--catalog .equipment-items { height: 260px; flex: 0 0 auto; min-height: 0; }
.equipment-item { width: 100%; min-height: 40px; padding: 4px 7px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; color: var(--text-primary); background: transparent; border: 0; border-bottom: 1px solid rgba(46,63,80,.72); text-align: left; }
.equipment-item:hover, .equipment-item:focus-visible, .equipment-item.is-equipped { background: var(--equipment-blue-bg); }
.equipment-item img { width: 28px; height: 28px; object-fit: contain; image-rendering: auto; }
.equipment-item.is-level-locked { cursor: not-allowed; filter: grayscale(.72); opacity: .55; }
.equipment-item.is-level-locked:hover, .equipment-item.is-level-locked:focus-visible { background: transparent; }
.equipment-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipment-item-name.equipment-rarity-consumable, .equipment-xeon-option strong.equipment-rarity-consumable, .equipment-tooltip-head .equipment-rarity-consumable, .equipment-xeon-tooltip-head .equipment-rarity-consumable { color: #f4f4f4; }
.equipment-item-name.equipment-rarity-ordinary, .equipment-xeon-option strong.equipment-rarity-ordinary, .equipment-tooltip-head .equipment-rarity-ordinary, .equipment-xeon-tooltip-head .equipment-rarity-ordinary { color: #f3efbd; }
.equipment-item-name.equipment-rarity-pay, .equipment-xeon-option strong.equipment-rarity-pay, .equipment-tooltip-head .equipment-rarity-pay, .equipment-xeon-tooltip-head .equipment-rarity-pay { color: #d888f5; }
.equipment-item-name.equipment-rarity-supernus, .equipment-xeon-option strong.equipment-rarity-supernus, .equipment-tooltip-head .equipment-rarity-supernus, .equipment-xeon-tooltip-head .equipment-rarity-supernus { color: #f9f932; }
.equipment-item-name.equipment-rarity-eximus, .equipment-xeon-option strong.equipment-rarity-eximus, .equipment-tooltip-head .equipment-rarity-eximus, .equipment-xeon-tooltip-head .equipment-rarity-eximus { color: #f9c732; }
.equipment-item-name.equipment-rarity-rare, .equipment-xeon-option strong.equipment-rarity-rare, .equipment-tooltip-head .equipment-rarity-rare, .equipment-xeon-tooltip-head .equipment-rarity-rare { color: #96f9f9; }
.equipment-item-name.equipment-rarity-carus, .equipment-xeon-option strong.equipment-rarity-carus, .equipment-tooltip-head .equipment-rarity-carus, .equipment-xeon-tooltip-head .equipment-rarity-carus { color: #6464f9; }
.equipment-pagination, .equipment-xeon-pagination { display: flex; width: 100%; min-width: 0; min-height: 26px; box-sizing: border-box; align-items: center; justify-content: center; gap: 7px; }
.equipment-pagination { margin-top: 3px; }
.equipment-page-button, .equipment-xeon-page-button { flex: 0 0 20px; width: 20px; min-width: 20px; min-height: 20px !important; height: 20px; box-sizing: border-box; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #9db3d6; font: 600 1rem/1 Arial, sans-serif; cursor: url('../template/images/text.cur?v=f75453a5744d'), pointer; }
.equipment-page-button:hover:not(:disabled), .equipment-page-button:focus-visible, .equipment-xeon-page-button:hover:not(:disabled), .equipment-xeon-page-button:focus-visible { color: #f4f7ff; outline: 0; }
.equipment-page-button:disabled, .equipment-xeon-page-button:disabled { opacity: .42; cursor: default; }
.equipment-page-status, .equipment-xeon-page-status { min-width: 32px; color: #dce9ff; font: 600 .66rem/1 Arial, sans-serif; letter-spacing: .03em; text-align: center; font-variant-numeric: tabular-nums; }
.equipment-xeon-pagination { transform: translateY(4px); }
.equipment-bottom-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.equipment-honor { margin-top: 12px; }
.equipment-honor-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.equipment-honor-header h2 { margin: 0; color: var(--text-primary); font-size: .95rem; font-weight: 600; letter-spacing: .02em; }
.equipment-honor-header p { margin: 4px 0 0; color: var(--text-muted); font-size: .73rem; }
.equipment-honor-categories, .equipment-honor-grid { width: min(100%, 384px); margin-right: auto; margin-left: auto; }
.equipment-honor-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; color: var(--text-secondary); font-size: .78rem; font-weight: 600; text-align: center; }
.equipment-honor-grid { display: grid; grid-template-columns: repeat(8, 40px); grid-auto-rows: 40px; justify-content: center; gap: 8px; margin-top: 8px; }
.equipment-honor-skill { position: relative; width: 40px; height: 40px; padding: 2px; overflow: visible; border: 1px solid var(--border); border-radius: 4px; background: rgba(8,13,18,.72); cursor: url('../template/images/text.cur?v=f75453a5744d'), pointer; }
.equipment-honor-skill::after { position: absolute; inset: -1px; border: 1px solid transparent; border-radius: 4px; content: ''; pointer-events: none; }
.equipment-honor-skill:hover::after, .equipment-honor-skill:focus-visible::after { border-color: #8fbaff; }
.equipment-honor-skill.is-active { border-color: rgba(128, 166, 221, .72); }
.equipment-honor-skill.is-locked { filter: grayscale(.72); opacity: .48; }
.equipment-honor-skill img { display: block; width: 100%; height: 100%; object-fit: contain; }
.equipment-honor-action { position: absolute; z-index: 3; bottom: 2px; width: 12px; height: 12px; background-position: center; background-repeat: no-repeat; background-size: contain; cursor: url('../template/images/text.cur?v=f75453a5744d'), pointer; touch-action: none; user-select: none; transition: filter .12s ease, transform .12s ease; }
.equipment-honor-action:hover { filter: brightness(1.2) drop-shadow(0 0 3px rgba(143, 186, 255, .85)); transform: scale(1.08); }
.equipment-honor-action--plus { right: 2px; background-image: url('../template/images/plus.png?v=72a49bd280f9'); }
.equipment-honor-action--minus { left: 2px; background-image: url('../template/images/minus.png?v=24f6ca68fc1a'); }
.equipment-honor-rank { position: absolute; z-index: 2; top: 2px; left: 2px; min-width: 11px; padding: 1px 2px; border: 1px solid rgba(143, 186, 255, .55); border-radius: 2px; background: rgba(13, 7, 7, .86); box-shadow: 0 1px 3px rgba(0, 0, 0, .9); color: #FFE26A; font: 700 8pt/1 Tahoma, sans-serif; text-align: left; text-shadow: 1px 1px 1px #000; }
.equipment-honor-empty { width: 40px; height: 40px; }
.equipment-tooltip-honor-level { color: #a9c7ff !important; font-weight: 400; }
.equipment-empty { color: var(--text-muted); min-height: 50px; }
.equipment-item-tooltip { position: fixed; z-index: 100; width: min(360px, calc(100vw - 24px)); padding: 11px; border: 1px solid rgba(129, 154, 201, .56); border-radius: 5px; background: linear-gradient(145deg, rgba(20, 28, 42, .98), rgba(10, 15, 24, .98)); box-shadow: 0 12px 28px rgba(0, 0, 0, .68); color: #e8f1ff; font-family: Arial, sans-serif; pointer-events: none; }
.equipment-item-tooltip:not(.is-honor-tooltip) { border-top-right-radius: 0; }
.equipment-item-tooltip.is-stage-pinned { position: fixed; }
.equipment-item-tooltip.is-detached { pointer-events: auto; }
.equipment-xeon-panel { position: absolute; z-index: 101; box-sizing: border-box; width: 10px; max-width: calc(100vw - 16px); min-width: 0; height: 100%; overflow: hidden; border: 1px solid rgba(129, 154, 201, .34); border-radius: 0 5px 5px 0; background: linear-gradient(145deg, rgba(20, 28, 42, .98), rgba(10, 15, 24, .98)); box-shadow: 0 14px 34px rgba(0, 0, 0, .46); color: #edf4ff; font-family: Arial, sans-serif; pointer-events: auto; transition: width .14s ease, height .14s ease, border-color .14s ease, box-shadow .14s ease; }
.equipment-xeon-panel.is-left-of-tooltip:not(.is-open) { border-radius: 5px 0 0 5px; }
.equipment-xeon-panel.is-open { width: min(284px, calc(100vw - 24px)); height: auto; border-radius: 5px; border-color: rgba(129, 154, 201, .56); box-shadow: 0 18px 42px rgba(0, 0, 0, .58); }
.equipment-xeon-panel.is-open:not(.is-left-of-tooltip) { border-top-left-radius: 0; }
.equipment-xeon-panel.is-left-of-tooltip.is-open { border-top-right-radius: 0; }
.equipment-xeon-panel[hidden] { display: none; }
.equipment-xeon-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: #f4f7ff; font: 700 .76rem/1.2 Arial, sans-serif; letter-spacing: .01em; text-align: left; cursor: url('../template/images/text.cur?v=f75453a5744d'), pointer; }
.equipment-xeon-panel:not(.is-open) .equipment-xeon-toggle { min-height: 0; height: 100%; padding: 0; grid-template-columns: 1fr; place-items: center; }
.is-open .equipment-xeon-toggle { border-bottom-color: rgba(129, 154, 201, .25); }
.equipment-xeon-toggle:hover, .equipment-xeon-toggle:focus-visible { background: rgba(102, 138, 204, .14); outline: 0; }
.equipment-xeon-toggle-count { color: #b993ff; font-weight: 400; }
.equipment-xeon-toggle-mark { margin-left: 9px; background: transparent; color: #d7e5ff; font-size: .92rem; line-height: 1; }
.equipment-xeon-body, .equipment-xeon-results-host { display: grid; min-width: 0; }
.equipment-xeon-body { gap: 8px; padding: 10px; }
.equipment-xeon-tools { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 6px; }
.equipment-xeon-search-wrap { position: relative; grid-column: 1 / -1; grid-row: 1; min-width: 0; }
.equipment-xeon-search { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px 30px 8px 9px; border: 1px solid rgba(129, 154, 201, .3); border-radius: 6px; background: rgba(5, 10, 18, .7); color: #f4f7ff; caret-color: #f4f7ff; direction: ltr; font: .75rem/1.2 Arial, sans-serif; text-align: left; unicode-bidi: plaintext; }
.equipment-xeon-search::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.equipment-xeon-panel.is-open .equipment-xeon-toggle--collapse { position: absolute; top: 50%; right: 6px; display: grid; width: 18px; min-height: 0; height: 18px; padding: 0; place-items: center; border: 0; border-radius: 0; background: transparent; color: #d7e5ff; font: 700 1rem/1 Arial, sans-serif; text-align: center; transform: translateY(-50%); }
.equipment-xeon-search:focus, .equipment-xeon-sort:focus, .equipment-xeon-direction:focus-visible { border-color: rgba(153, 188, 255, .92); outline: 0; box-shadow: 0 0 0 2px rgba(93, 143, 232, .18); }
.equipment-xeon-sort-label { grid-column: 1; display: block; min-width: 0; }
.equipment-xeon-sort { width: 100%; min-width: 0; padding: 6px 7px; border: 1px solid rgba(129, 154, 201, .28); border-radius: 5px; background: rgba(5, 10, 18, .7); color: #dce9ff; font: .68rem/1.2 Arial, sans-serif; }
.equipment-xeon-direction { align-self: end; height: 28px; padding: 0; border: 1px solid rgba(129, 154, 201, .28); border-radius: 6px; background: rgba(79, 111, 170, .18); color: #dce9ff; font: 700 .9rem/1 Arial, sans-serif; cursor: url('../template/images/text.cur?v=f75453a5744d'), pointer; }
.equipment-xeon-direction:hover { background: rgba(92, 135, 208, .34); }
.equipment-xeon-results { margin: 0; color: #9eb7df; font-size: .67rem; line-height: 1.2; }
.equipment-xeon-list { display: grid; position: relative; min-width: 0; max-height: min(54vh, 440px); padding-bottom: 8px; overflow: auto; box-sizing: border-box; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(103, 137, 194, .7) rgba(5, 11, 20, .62); border: 1px solid rgba(129, 154, 201, .18); border-radius: 7px; background: rgba(3, 8, 15, .28); cursor: url('../template/images/text.cur?v=f75453a5744d'), pointer; }
.equipment-items::-webkit-scrollbar, .equipment-xeon-list::-webkit-scrollbar { width: 8px; }
.equipment-items::-webkit-scrollbar-track, .equipment-xeon-list::-webkit-scrollbar-track { margin: 1px 0; border-radius: 0 6px 6px 0; background: rgba(5, 11, 20, .62); cursor: url('../template/images/text.cur?v=f75453a5744d'), pointer; }
.equipment-items::-webkit-scrollbar-thumb, .equipment-xeon-list::-webkit-scrollbar-thumb { min-height: 24px; border-radius: 5px; background: linear-gradient(180deg, rgba(112, 150, 211, .78), rgba(72, 103, 157, .78)); cursor: url('../template/images/text.cur?v=f75453a5744d'), pointer; }
.equipment-items::-webkit-scrollbar-thumb:hover, .equipment-xeon-list::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(138, 176, 234, .92), rgba(86, 120, 178, .92)); }
.equipment-xeon-option { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: start; width: 100%; padding: 7px; border: 0; border-bottom: 1px solid rgba(129, 154, 201, .13); background: transparent; color: #dce7ff; text-align: left; cursor: url('../template/images/text.cur?v=f75453a5744d'), pointer; }
.equipment-xeon-option:last-child { border-bottom: 0; }
.equipment-xeon-option:hover, .equipment-xeon-option:focus-visible { background: rgba(84, 125, 198, .2); outline: 0; }
.equipment-xeon-option.is-selected { background: linear-gradient(90deg, rgba(149, 104, 224, .36), rgba(100, 138, 204, .16)); box-shadow: inset 2px 0 #c49cff; }
.equipment-xeon-option:disabled { cursor: default; opacity: .42; }
.equipment-xeon-option img { width: 32px; height: 32px; object-fit: contain; border-radius: 5px; background: #080e18; }
.equipment-xeon-option strong { display: block; }
.equipment-xeon-option strong { color: #f4f7ff; font-size: .75rem; font-weight: 600; line-height: 1.18; }
.equipment-xeon-option strong em { color: #c49cff; font-style: normal; white-space: nowrap; }
.equipment-xeon-empty { margin: 0; padding: 10px; color: #a7c0eb; font-size: .74rem; line-height: 1.3; }
.equipment-xeon-tooltip { position: fixed; z-index: 110; width: min(310px, calc(100vw - 24px)); box-sizing: border-box; padding: 10px; border: 1px solid rgba(129, 154, 201, .56); border-radius: 7px; background: rgba(10, 16, 26, .98); box-shadow: 0 12px 28px rgba(0, 0, 0, .68); color: #e8f1ff; font: .74rem/1.35 Arial, sans-serif; pointer-events: none; }
.equipment-xeon-tooltip[hidden] { display: none; }
.equipment-xeon-tooltip-head { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding-bottom: 8px; border-bottom: 1px solid rgba(129, 154, 201, .22); }
.equipment-xeon-tooltip-head img { width: 36px; height: 36px; object-fit: contain; border-radius: 5px; background: #080e18; }
.equipment-xeon-tooltip-head strong { display: block; color: #f4f7ff; font-size: .81rem; line-height: 1.15; }
.equipment-xeon-tooltip-kind { justify-self: end; min-width: 0; text-align: right; }
.equipment-xeon-tooltip-kind > small { display: block; color: #f4f4f4; font-size: .72rem; font-weight: 400; line-height: 1.08; }
.equipment-xeon-tooltip-kind > span { display: block; color: #f4f4f4; font-size: .72rem; font-weight: 400; line-height: 1.08; }
.equipment-xeon-tooltip-description { margin-top: 8px; color: #d4e2fb; white-space: pre-line; }
.equipment-xeon-tooltip-description p { margin: 0; }
.equipment-xeon-tooltip-description-line--duration, .equipment-xeon-tooltip-description-line--modification { color: #F9CC8A; }
.equipment-xeon-tooltip-description--target { color: #e5e5e5; }
.equipment-xeon-tooltip-stats { display: grid; gap: 2px; margin-top: 8px; color: #a9c7ff; }
.equipment-xeon-tooltip-stats--before-duration { margin: 4px 0; }
.equipment-xeon-tooltip-description--after-stats { margin-top: 0; }
.equipment-xeon-tooltip-footer { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(129, 154, 201, .25); }
.equipment-xeon-tooltip-footer p { margin: 0; color: #fff; font-size: .78rem; font-weight: 400; line-height: 1.4; }
.equipment-item-tooltip.is-honor-tooltip { width: min(286px, calc(100vw - 24px)); padding: 8px; border-color: rgba(129, 154, 201, .62); border-radius: 3px; background: linear-gradient(145deg, rgba(20, 28, 42, .98), rgba(10, 15, 24, .98)); box-shadow: 0 8px 18px rgba(0, 0, 0, .74); font-family: Tahoma, Arial, sans-serif; }
.equipment-honor-tooltip-content { display: grid; gap: 7px; }
.equipment-honor-tooltip-row { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 6px; align-items: start; }
.equipment-honor-tooltip-row img { width: 34px; height: 34px; object-fit: contain; border: 1px solid rgba(129, 154, 201, .56); background: #080e18; }
.equipment-honor-tooltip-row strong { display: block; color: #FECF7D; font-size: 13px; font-weight: 700; line-height: 1.15; }
.equipment-honor-tooltip-row small { display: block; margin-top: 2px; color: #FECF7D; font-size: 11px; font-weight: 400; line-height: 1.1; }
.equipment-honor-tooltip-caption { margin-top: 2px; color: #FEFFD1; font-size: 11px; font-weight: 400; line-height: 1.15; }
.equipment-honor-tooltip-requirements { display: grid; gap: 1px; margin-top: -2px; color: #D1D1D1; font-size: 11px; font-weight: 400; line-height: 1.25; }
.equipment-honor-tooltip-requirements p { margin: 0; }
.equipment-item-tooltip[hidden] { display: none; }
.equipment-tooltip-detach { position: absolute; z-index: 2; top: -1px; right: -1px; display: none; width: 15px; min-width: 15px; height: 15px; min-height: 15px !important; padding: 0; border: 0; background: transparent; cursor: url('../template/images/text.cur?v=f75453a5744d'), pointer; }
.equipment-item-tooltip.is-stage-pinned .equipment-tooltip-detach { display: grid; place-items: center; pointer-events: auto; }
.equipment-tooltip-detach span { display: grid; width: 14px; height: 14px; place-items: center; color: #f4f7ff; font: 14px/14px "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif; transform: rotate(90deg); transform-origin: center; }
.equipment-tooltip-detach span::before { content: '◪'; }
.equipment-tooltip-detach:hover span, .equipment-tooltip-detach:focus-visible span, .equipment-item-tooltip.is-detached .equipment-tooltip-detach span { color: #fff; outline: 0; }
.equipment-item-tooltip.is-detached .equipment-tooltip-detach span { transform: rotate(270deg); }
.equipment-item-tooltip.is-detached .equipment-tooltip-detach span::before { content: '◪'; }
.equipment-item-tooltip.is-detached .equipment-tooltip-head { cursor: move; touch-action: none; user-select: none; }
.equipment-tooltip-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(120px, auto); gap: 8px; align-items: start; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid rgba(129, 154, 201, .25); }
.equipment-tooltip-head img { width: 40px; height: 40px; object-fit: contain; border: 0; background: #080e18; }
.equipment-tooltip-head > div { display: grid; grid-template-rows: max-content max-content; align-content: start; row-gap: 4px; min-height: 40px; }
.equipment-tooltip-head strong { display: block; color: #dce9ff; font-size: .94rem; font-weight: 400; line-height: 1.08; }
.equipment-tooltip-head small { display: block; margin-top: 0; color: #f4f4f4; font-size: .75rem; font-weight: 400; line-height: 1.08; }
.equipment-tooltip-kind { justify-items: end; min-width: 120px; text-align: right; transform: translateX(-10px); }
.equipment-tooltip-kind > small { color: var(--text-primary); }
.equipment-tooltip-kind > small.equipment-rarity-ordinary { color: #f3efbd; }
.equipment-tooltip-kind > small.equipment-rarity-pay { color: #d888f5; }
.equipment-tooltip-kind > small.equipment-rarity-supernus { color: #f9f932; }
.equipment-tooltip-kind > small.equipment-rarity-eximus { color: #f9c732; }
.equipment-tooltip-kind > small.equipment-rarity-rare { color: #96f9f9; }
.equipment-tooltip-kind > small.equipment-rarity-carus { color: #6464f9; }
.equipment-tooltip-kind > span { color: #f4f4f4; font-size: .72rem; font-weight: 400; line-height: 1.08; }
.equipment-tooltip-grip { color: #f4f4f4; }
.equipment-tooltip-description { margin: 0 0 7px; color: #d4e2fb; font-size: .78rem; font-weight: 400; line-height: 1.35; }
.equipment-tooltip-description p { margin: 0; }
.equipment-tooltip-description .equipment-tooltip-description--highlighted { color: #f9cc8a; }
.equipment-tooltip-description .equipment-tooltip-description--additional-attributes { color: #DDB67E; }
.equipment-tooltip-description .equipment-tooltip-description-story { margin-top: 7px; color: #F3F4AB; }
.equipment-tooltip-stats { margin-top: 0; }
.equipment-tooltip-line { color: #a9c7ff; font-size: .78rem; font-weight: 400; line-height: 1.4; }
.equipment-tooltip-line.equipment-tooltip-stat--combat { color: #e8f1ff; }
.equipment-tooltip-line.equipment-tooltip-stat--accessory-attack { color: #F3F4AB; }
.equipment-tooltip-line.equipment-tooltip-stat--priority, .equipment-tooltip-line.equipment-tooltip-stat--priority .equipment-tooltip-xeon-bonus { color: #F9F9AE; }
.equipment-tooltip-xeon-bonus { color: #c77fe6; font-style: normal; }
.equipment-tooltip-stat-gap { height: .78rem; }
.equipment-tooltip-set { margin-top: 7px; color: #d7e7ff; font-size: .78rem; font-weight: 400; }
.equipment-tooltip-set-bonus { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 12px; color: #a9c7ff; font-size: .78rem; font-weight: 400; line-height: 1.4; opacity: .34; }
.equipment-tooltip-set-requirement { white-space: nowrap; }
.equipment-tooltip-set-effect { min-width: 0; }
.equipment-tooltip-set-effects { display: grid; min-width: 0; }
.equipment-tooltip-set-bonus--active { color: #d7e7ff; opacity: 1; text-shadow: 0 0 5px rgba(169, 199, 255, .5); }
.equipment-tooltip-enchant { margin-top: 9px; color: #c77fe6; font-size: .78rem; font-weight: 400; line-height: 1.35; }
.equipment-tooltip-xeon-skills { display: grid; gap: 7px; margin-top: 7px; }
.equipment-tooltip-xeon-skill { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 7px; align-items: start; }
.equipment-tooltip-xeon-skill img { width: 32px; height: 32px; object-fit: contain; background: #080e18; }
.equipment-tooltip-xeon-skill strong { display: block; color: #fff; font-size: .78rem; font-weight: 400; line-height: 1.28; }
.equipment-tooltip-xeon-skill p { margin: 2px 0 0; color: #d4e2fb; font-size: .72rem; font-weight: 400; line-height: 1.3; }
.equipment-tooltip-upgrade { color: #d5b650 !important; font-weight: 400; }
.equipment-tooltip-footer { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(129, 154, 201, .25); }
.equipment-tooltip-footer p { margin: 0; color: #fff; font-size: .78rem; font-weight: 400; line-height: 1.4; }
.equipment-tooltip-footer p.equipment-tooltip-class-locked { color: #ff6f73; }
.equipment-tooltip-footer p.equipment-tooltip-level-locked { color: #ff6f73; }
.equipment-build-controls :is(select, input) { flex: 1; min-width: 0; }
.equipment-stats { padding: 11px; border: 1px solid var(--border); border-radius: 4px; background: rgba(7,11,14,.72); }
.equipment-stat-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 3px 0; color: #abc6fa; font-size: .81rem; line-height: 1.15; }
.equipment-stat-line b { color: var(--text-primary); font-weight: 700; white-space: nowrap; }
.equipment-element-line { display: grid; grid-template-columns: minmax(0, 1fr) 52px auto; column-gap: 20px; row-gap: 12px; align-items: baseline; padding: 3px 0; color: #abc6fa; font-size: .81rem; line-height: 1.15; }
.equipment-element-line b { color: var(--text-primary); font-weight: 700; text-align: right; white-space: nowrap; }
.equipment-stat-divider { height: 1px; margin: 10px 0 9px; background: rgba(168,187,223,.22); }
@media (max-width: 1100px) { .equipment-layout { grid-template-columns: 340px minmax(0, 1fr); } .equipment-controls { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .equipment-layout { grid-template-columns: 1fr; } .equipment-left-column { grid-template-rows: auto auto auto; } .equipment-stage-panel { max-width: 340px; margin: 0 auto; } .equipment-picker--catalog { grid-column: auto; } .equipment-picker--catalog .equipment-items { min-height: 260px; } .equipment-xeon-panel { width: 10px; } .equipment-xeon-panel.is-open { width: min(340px, calc(100vw - 16px)); } .equipment-xeon-list { max-height: 42vh; } }
@media (max-width: 620px) { .equipment-card-body { padding: 16px; } .equipment-heading { align-items: flex-start; flex-direction: column; } .equipment-controls { display: grid; grid-template-columns: 1fr 1fr; } .equipment-controls button { margin-left: 0; } .equipment-bottom-grid { grid-template-columns: 1fr; } .equipment-filters { grid-template-columns: 1fr; } .equipment-stage { transform: scale(.94); transform-origin: top center; margin-bottom: -18px; } .equipment-honor-header { align-items: flex-start; flex-direction: column; } .equipment-honor-categories, .equipment-honor-grid { width: 100%; } .equipment-honor-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; } .equipment-honor-skill, .equipment-honor-empty { width: 100%; height: auto; aspect-ratio: 1; } }