:root {
	--background-color: #272A31;
	--color: #BDC2FB;
	--energy-light: #4499F8;
	--energy-dark: #3B5CC0;
	--health-light: #D10007;
	--health-dark: #8F002F;
	--ui-spritesheet: url("https://game.fantasyonline2.com/UI-spritesheet.png");
	--ui-dimensions: 512px;

    font-family: fo2font, sans-serif;
    font-size: 12px;
    line-height: 1.2;
}

body {
    background-color: #222;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    color: white;
    margin: 0;
}

body.app-loading {
	overflow: hidden;
}

body.app-loading > :not(#loading-overlay):not(script) {
	visibility: hidden;
}

* {
	scrollbar-width: auto;
	scrollbar-color: #3B5CC0 #141013;
}

*::-webkit-scrollbar {
	width: 14px;
	height: 14px;
}

*::-webkit-scrollbar-track {
	background: #141013;
	border: 1px solid #1A1B21;
	border-radius: 5px;
}

*::-webkit-scrollbar-thumb {
	background: #3B5CC0;
	border: 2px solid #141013;
	border-radius: 5px;
}

*::-webkit-scrollbar-thumb:hover {
	background: #4499F8;
}

*::-webkit-scrollbar-corner {
	background: #141013;
}

.header {
    position: sticky;
	top: 0;
	z-index: 1700;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	column-gap: 12px;
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
    background-color: #3B5CC0;
    padding: 5px 10px;
    box-shadow: 0 0 5px black;
}

.header .title {
	grid-column: 1;
	justify-self: start;
	display: inline-flex;
	align-items: flex-start;
	gap: 3px;
	min-width: 0;
	font-size: 1.5rem;
	white-space: nowrap;
}

.header .version {
	display: none;
}

.title-version {
	font-size: 0.6em;
	line-height: 1;
	transform: translateY(-0.15em);
}

.nav-center {
	grid-column: 2;
	justify-self: center;
	min-width: 0;
}

.nav-actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.player-selector {
    position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.nav-character-group {
	display: inline-flex;
	align-items: stretch;
	min-width: 0;
	background: #141013;
	border: 1px solid #141013;
	border-radius: 5px;
	overflow: hidden;
}

.player-build-actions {
    display: none;
    gap: 5px;
    align-items: center;
}

.player-button,
.nav-button {
    cursor: pointer;
    background-color: #1A1B21;
    color: var(--color);
    border: 1px solid #141013;
    border-radius: 5px;
    padding: 5px 10px;
    font-family: inherit;
}

.nav-character-name {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	min-width: 0;
	max-width: min(22vw, 220px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nav-character-segment {
	border-radius: 0;
	border: 0;
	padding: 5px 9px;
}

.nav-character-name-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	max-width: min(26vw, 240px);
}

.nav-character-dropdown-button {
	min-width: 32px;
	justify-content: center;
	border-left: 1px solid #333844;
	padding-inline: 8px;
}

.nav-character-edit {
	flex: 0 0 auto;
	color: #BDC2FB;
}

.nav-dropdown {
	position: absolute;
	z-index: 2600;
	top: calc(100%);
	left: 0;
	right: 0;
	display: grid;
	gap: 3px;
	padding: 3px;
	background: #141013;
	border: 1px solid #444;
	border-radius: 5px;
	width: max-content;
}

.nav-dropdown-item {
	text-align: left;
}

.player-button.is-active {
    border-color: white;
    background-color: color-mix(in srgb, #1A1B21 100%, white 10%);
}

.nav-dropdown-item:hover {
    background-color: color-mix(in srgb, #1A1B21 100%, white 8%);
}

.nav-options-button {
	width: 32px;
	padding-inline: 0;
}

.player-action-button {
    cursor: pointer;
    background-color: #1A1B21;
    color: var(--color);
    border: 1px solid #141013;
    border-radius: 5px;
    padding: 4px 8px;
    font-family: inherit;
}

.player-action-button:hover {
    border-color: white;
}

.rename-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.65);
}

.rename-dialog {
    display: grid;
    gap: 8px;
    min-width: 260px;
    padding: 10px;
    background-color: var(--background-color);
    border: 1px solid #141013;
    border-radius: 5px;
}

.rename-title {
    color: var(--color);
}

.rename-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 1.4em;
    padding: 8px;
    background-color: #222;
    color: white;
    border: 1px solid #444;
    border-radius: 5px;
    outline: none;
    font: inherit;
}

.rename-actions {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}

.rename-actions button {
    cursor: pointer;
    background-color: #1A1B21;
    color: var(--color);
    border: 1px solid #141013;
    border-radius: 5px;
    padding: 5px 10px;
    font-family: inherit;
}

.nav-button.is-active {
	border-color: white;
	background-color: color-mix(in srgb, #1A1B21 100%, white 10%);
}

.faction-exp-dialog {
	width: min(560px, calc(100vw - 24px));
	max-height: min(80vh, calc(100vh - 24px));
}

.faction-exp-subtitle {
	color: #f0c15a;
	text-align: center;
}

.faction-exp-list {
	display: grid;
	gap: 5px;
	max-height: min(56vh, calc(100vh - 220px));
	overflow: auto;
	padding-right: 2px;
}

.faction-exp-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 130px;
	gap: 8px;
	align-items: center;
}

.faction-exp-name {
	justify-content: flex-start;
	min-width: 0;
}

.faction-exp-input {
	width: 100%;
	text-align: right;
}

.box {
    background-color: var(--background-color);
	border: 1px solid black;
	border-radius: 5px;
	padding: 5px;
	max-width: 900px;
}

.input-area {
    display: grid;
    justify-content: center;
    justify-items: center;
    width: fit-content;
	gap: 10px;
}

.input-area [data-value] {
    cursor: pointer;
}

.input-area [data-value]:empty::before {
    content: "0";
}

.input-top,
.input-bottom {
	width: fit-content;
}

.input-top {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	justify-items: stretch;
	align-items: start;
	gap: 10px;
}

.input-bottom {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	justify-items: stretch;
	align-items: start;
	gap: 10px;
}

.input-panel {
	display: grid;
	gap: 5px;
	align-content: start;
}

.input-section-label,
.mob-selection-label {
	width: 100%;
	text-align: center;
	color: var(--color);
	background-color: #141013;
	border: 1px solid #1A1B21;
	border-radius: 5px;
	padding: 2px 0;
}

.equipment-panel-content {
	display: grid;
	grid-template-columns: auto auto auto;
	align-items: start;
	gap: 10px;
}

.character-panel-content,
.buffs-panel-content {
	display: grid;
	gap: 10px;
}

.fitting-room {
	display: grid;
	grid-template-columns: auto minmax(260px, 1fr) minmax(260px, 320px);
	align-items: stretch;
	gap: 12px;
	width: fit-content;
}

.fitting-room .outfit-grid {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 5px;
	align-content: start;
}

.fitting-room-preview {
	display: grid;
	grid-template-columns: auto minmax(220px, 1fr) auto;
	align-items: center;
	gap: 10px;
}

.fitting-room-appearance {
	display: grid;
	align-content: start;
	gap: 10px;
	min-width: 260px;
	padding: 10px;
	background: color-mix(in srgb, #1A1B21 94%, white 6%);
	border: 1px solid #141013;
	border-radius: 5px;
}

.fitting-room-appearance-section {
	display: grid;
	gap: 8px;
	padding: 8px;
	background: color-mix(in srgb, #111217 94%, white 4%);
	border: 1px solid #141013;
	border-radius: 5px;
}

.fitting-room-appearance-title {
	color: #f0c15a;
}

.fitting-room-appearance-mode {
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 0;
	border: 1px solid #141013;
	border-radius: 5px;
	overflow: hidden;
}

.fitting-room-appearance-mode-button {
	cursor: pointer;
	padding: 6px 8px;
	background: #1A1B21;
	color: var(--color);
	border: 0;
	font: inherit;
}

.fitting-room-appearance-mode-button + .fitting-room-appearance-mode-button {
	border-left: 1px solid #141013;
}

.fitting-room-appearance-mode-button.is-active {
	background: color-mix(in srgb, #1A1B21 100%, white 10%);
	color: white;
}

.fitting-room-appearance-field {
	display: grid;
	gap: 4px;
}

.fitting-room-appearance-field-label {
	color: #ccc;
	font-size: 0.82rem;
}

.fitting-room-appearance-field select {
	width: 100%;
	min-width: 0;
	padding: 6px 8px;
	background: #222;
	color: white;
	border: 1px solid #444;
	border-radius: 5px;
	font: inherit;
}

.fitting-room-appearance-field select:disabled {
	opacity: 0.6;
}

.fitting-room-character-panel {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 8px;
	min-width: 240px;
}

.fitting-room-character-view {
	display: grid;
	place-items: center;
	width: 260px;
	min-height: 360px;
	padding: 12px;
	background: color-mix(in srgb, #1A1B21 94%, white 6%);
	border: 1px solid #141013;
	border-radius: 5px;
}

.fitting-room-character-sprite {
	display: grid;
	place-items: center;
	width: 170px;
	height: 250px;
	background: color-mix(in srgb, #111217 94%, white 4%);
	background-repeat: no-repeat;
	border: 1px solid #141013;
	border-radius: 5px;
	color: color-mix(in srgb, var(--color) 70%, transparent);
	image-rendering: pixelated;
	text-transform: uppercase;
	letter-spacing: 0;
}

.fitting-room-character-caption {
	color: #f0c15a;
}

.fitting-room-turn {
	cursor: pointer;
	align-self: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background-color: #1A1B21;
	color: var(--color);
	border: 1px solid #141013;
	border-radius: 5px;
	font: inherit;
}

.fitting-room .slot.outfit-placeholder-slot {
	opacity: 0.55;
}

.fitting-room .slot.is-fallback-display {
	box-shadow: inset 0 0 0 1px rgba(240, 193, 90, 0.45);
}

.input-area .stats-input .data-group {
    cursor: pointer;
    user-select: none;
}

.input-area .stats-input .data-group .value {
    text-align: end;
}

.input-area .stats-input .data-group .value:focus {
    outline: none;
}

.level-status-control {
	grid-row: 1 / span 2;
	grid-column: 1;
	display: flex;
	align-items: center;
	gap: 5px;
    padding: 5px;
	background-color: #1A1B21;
	border-radius: 5px;
}

.status-skull-button {
	appearance: none;
	-webkit-appearance: none;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	background-image: var(--ui-spritesheet);
	background-repeat: no-repeat;
	image-rendering: pixelated;
	cursor: pointer;
}

.status-skull-button.is-empty {
	filter: brightness(0);
}

.status-value {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
}

.status-skull-inline {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: transparent;
	background-image: var(--ui-spritesheet);
	background-repeat: no-repeat;
	image-rendering: pixelated;
}

.status-skull-inline.is-empty {
	filter: brightness(0);
}

.level-status-level {
	color: white;
	cursor: pointer;
	user-select: none;
}

.level-status-level .value {
	min-width: 3ch;
	text-align: end;
}

.level-status-level .value:focus {
	outline: none;
}

.equipment-panel-content > .equipment {
	grid-template-columns: repeat(2, auto);
	display: grid;
	gap: 5px;
}

.equipment-panel-content > .left {
	grid-column: 1;
}

.equipment-panel-content > .right {
	grid-column: 3;
}

.equipment-panel-content > .implants {
	grid-column: 2;
	display: grid;
	gap: 5px;
}

.equipment-panel-content > .implants [data-index="0"] { grid-row: 1; grid-column: 2; }
.equipment-panel-content > .implants [data-index="1"] { grid-row: 2; grid-column: 1; }
.equipment-panel-content > .implants [data-index="2"] { grid-row: 2; grid-column: 2; }
.equipment-panel-content > .implants [data-index="3"] { grid-row: 2; grid-column: 3; }
.equipment-panel-content > .implants [data-index="4"] { grid-row: 3; grid-column: 1; }
.equipment-panel-content > .implants [data-index="5"] { grid-row: 3; grid-column: 3; }

.character-panel-content > .stats-input {
	display: grid;
	gap: 5px;
}

.character-panel-content > .attributes-control {
	display: grid;
	--attribute-icon-w: 10px;
	--attribute-icon-h: 10px;
	--attribute-icon-x: 111px;
	--attribute-icon-y: 278px;
	--attribute-icon-scale: 2;
}

.character-panel-content > .attributes-control > .data-group .label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.character-panel-content > .attributes-control > .data-group .label::before {
	content: "";
	display: inline-block;
	width: calc(var(--attribute-icon-w) * var(--attribute-icon-scale));
	height: calc(var(--attribute-icon-h) * var(--attribute-icon-scale));
	flex: 0 0 calc(var(--attribute-icon-w) * var(--attribute-icon-scale));
	background-image: var(--ui-spritesheet);
	background-repeat: no-repeat;
	background-size: calc(var(--ui-dimensions) * var(--attribute-icon-scale)) calc(var(--ui-dimensions) * var(--attribute-icon-scale));
	background-position:
		calc(var(--attribute-icon-x) * -1 * var(--attribute-icon-scale))
		calc(var(--attribute-icon-y) * -1 * var(--attribute-icon-scale));
	image-rendering: pixelated;
}

.character-panel-content > .attributes-control > .data-group-stamina {
	--attribute-icon-y: 278px;
}

.character-panel-content > .attributes-control > .data-group-strength {
	--attribute-icon-y: 293px;
}

.character-panel-content > .attributes-control > .data-group-agility {
	--attribute-icon-y: 309px;
}

.character-panel-content > .attributes-control > .data-group-intellect {
	--attribute-icon-y: 323px;
}

.character-panel-content > .attributes-control > .attributes-reset-button {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	height: 2rem;
	background-color: #1A1B21;
	color: var(--color);
	border: 1px solid #141013;
	border-radius: 5px;
	font: inherit;
	text-align: center;
	margin-top: 2px;
}

.character-panel-content > .faction-exp-controls {
	display: grid;
	gap: 5px;
	justify-items: stretch;
}

.faction-exp-button {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	border: 1px solid #141013;
	height: 2rem;
	cursor: pointer;
	font: inherit;
}

.faction-exp-button .value {
	color: #f0c15a;
}

.skills-panel > .skills {
	grid-column: 1;
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 5px;
	align-items: center;
}

.buffs-panel-content {
	gap: 8px;
}

.buffs-panel-content > .buffs,
.buffs-panel-content > .debuffs {
	display: grid;
	grid-auto-flow: column;
	gap: 5px;
	justify-content: start;
}

.skill-behavior-control {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	grid-column: 1 / -1;
	min-height: 3rem;
	padding: 2px;
	background-color: #1A1B21;
	color: var(--color);
	border: 1px solid #141013;
	border-radius: 5px;
	text-align: center;
}

.skill-behavior-control select {
	min-width: 9rem;
	background-color: #222;
	color: white;
	border: 1px solid #444;
	border-radius: 5px;
	padding: 4px;
	font-family: inherit;
	font-size: 0.9rem;
	outline: none;
	cursor: pointer;
}

.mob-selection {
    width: fit-content;
	display: grid;
	gap: 5px;
	justify-items: center;
}

.mob-selection > .mobs {
	display: grid;
	grid-template-columns: repeat(6, auto);
	gap: 5px;
}

.slot {
	--slot-size: 50px;
	box-sizing: border-box;
	min-height: var(--slot-size);
	min-width: var(--slot-size);
    background-color: #1A1B21;
    color: white;
    border: 2px solid #141013;
    padding: 2px;
	border-radius: 5px;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    gap: 4px;
    overflow: hidden;
}

.slot:empty::before {
    content: var(--placeholder);
    color: lightslategray;
}

.input-area .slot {
	width: var(--slot-width, var(--slot-size));
	height: var(--slot-height, var(--slot-size));
	min-width: var(--slot-width, var(--slot-size));
	min-height: var(--slot-height, var(--slot-size));
	padding: 0;
	background-color: #1A1B21;
	background-image: none;
	background-repeat: no-repeat;
	image-rendering: pixelated;
}

.input-area .slot.has-slot-sprite {
	background-image: var(--ui-spritesheet);
	background-size: calc(var(--ui-dimensions) * var(--slot-sprite-scale, 2)) calc(var(--ui-dimensions) * var(--slot-sprite-scale, 2));
}

.input-area .slot:empty::before {
	content: "";
}

.slot-icon {
    width: var(--slot-size);
    height: var(--slot-size);
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
    flex: 0 0 auto;
}

.slot-icon-wrap {
	position: relative;
	display: inline-flex;
	width: var(--slot-size);
	height: var(--slot-size);
	flex: 0 0 auto;
	pointer-events: none;
}

.slot-rank-overlay {
	position: absolute;
	top: 2px;
	right: 2px;
	color: white;
    background-color: black;
    padding: 0 2px;
	pointer-events: none;
    line-height: 1.3;
}

.slot-label {
    pointer-events: none;
    overflow-wrap: anywhere;
}

.input-area .slot.has-item {
    min-width: var(--slot-size);
    min-height: var(--slot-size);
}

.input-area .slot.has-item.has-slot-icon .slot-label {
    display: none;
}

.slot.slot-warning {
    border-color: #ff3b3b;
    box-shadow: 0 0 0 2px color-mix(in srgb, #ff3b3b 55%, transparent);
    filter: grayscale(1);
    opacity: 0.55;
}

.slot.is-disabled {
    filter: grayscale(1);
    opacity: 0.5;
    text-decoration: line-through;
}

.slot.requirement-disabled {
    border-color: #777982;
    box-shadow: inset 0 0 0 2px rgba(20, 16, 19, 0.65);
}

.select-menu .select-option.requirement-disabled {
    border-color: #8b3a42;
    background-color: color-mix(in srgb, #1A1B21 82%, #8f002f);
    opacity: 0.65;
}

.slot-context-menu {
    position: fixed;
    z-index: 2500;
    min-width: 124px;
    background-color: #141013;
    border: 1px solid #444;
    border-radius: 5px;
    padding: 3px;
    color: var(--color);
}

.slot-context-menu-item {
    cursor: pointer;
    padding: 6px 10px;
    background-color: #1A1B21;
    border-radius: 4px;
    user-select: none;
    white-space: nowrap;
}

.slot-context-menu-item:hover {
    color: white;
    background-color: color-mix(in srgb, #1A1B21 100%, white 10%);
}

.search-container {
    display: grid;
    grid-template-columns: minmax(180px, 1fr);
	grid-auto-flow: column;
	grid-auto-columns: max-content;
    gap: 5px;
    align-items: stretch;
}

.mob-image-frame {
	--mob-frame-width: 50px;
	display: inline-block;
	width: var(--mob-frame-width);
	height: calc(var(--mob-frame-width) * 1.5);
	flex: 0 0 auto;
	background-repeat: no-repeat;
	background-position: calc(var(--mob-frame-width) * -1) calc(var(--mob-frame-width) * -3);
	background-size: calc(var(--mob-frame-width) * 3) calc(var(--mob-frame-width) * 6);
	image-rendering: pixelated;
	pointer-events: none;
}

.mob-selection .slot.has-mob-image .slot-label {
	display: none;
}

.search-input,
.stat-select,
.stat-filter-button,
.mob-target-select {
    border: 1px solid #444;
    padding: 8px;
    background: #222;
    color: white;
    outline: none;
    min-height: 1.2em;
    border-radius: 5px;
	transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.search-input {
    display: flex;
    align-items: center;
}

.stat-select {
    cursor: pointer;
    font-family: inherit;
    max-width: 180px;
}

.mob-target-select {
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8rem;
    min-height: unset;
    padding: 1px 2px;
    line-height: 1;
}

.sort-direction-select {
    min-width: 130px;
    max-width: 160px;
}

.stat-filter-menu {
    position: relative;
}

.stat-filter-button {
    cursor: pointer;
    font-family: inherit;
    min-width: 120px;
    height: 100%;
}

.stat-filter-button:hover,
.stat-filter-button:focus-visible,
.stat-select:hover,
.stat-select:focus-visible,
.mob-target-select:hover,
.mob-target-select:focus-visible {
	border-color: #f0c15a;
	background: color-mix(in srgb, #222 88%, #f0c15a);
	box-shadow: 0 0 0 1px rgba(240, 193, 90, 0.2);
}

.search-input:hover,
.search-input:focus-within {
	border-color: #6c7a92;
	background: color-mix(in srgb, #222 92%, #6c7a92);
}

.stat-filter-panel {
    position: fixed;
    z-index: 2001;
    display: grid;
    gap: 2px;
    min-width: 180px;
    max-height: 260px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #3B5CC0 #141013;
    padding: 5px;
    background-color: #1A1B21;
    border: 1px solid #444;
    border-radius: 5px;
}

.stat-filter-search {
	position: sticky;
	top: 0;
	z-index: 1;
	min-height: 32px;
	padding: 5px 8px;
	background: #222;
}

.stat-filter-panel::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.stat-filter-panel::-webkit-scrollbar-track {
	background: #141013;
	border-left: 1px solid #2a2330;
}

.stat-filter-panel::-webkit-scrollbar-thumb {
	background: #3B5CC0;
	border: 1px solid #1f2f66;
	border-radius: 999px;
}

.stat-filter-panel::-webkit-scrollbar-thumb:hover {
	background: #6c7a92;
}

.stat-filter-panel::-webkit-scrollbar-corner {
	background: #141013;
}

.stat-filter-option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 4px;
    cursor: pointer;
    user-select: none;
}

.stat-filter-option:hover {
    background-color: color-mix(in srgb, #1A1B21 100%, white 8%);
}

.stat-filter-option-label {
	flex: 1 1 8rem;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stat-filter-range {
	display: none;
	align-items: center;
	flex: 0 0 auto;
	grid-template-columns: 40px auto 40px;
	gap: 4px;
	width: auto;
	margin-left: auto;
}

.stat-filter-option.is-checked .stat-filter-range {
	display: grid;
}

.stat-filter-range-input {
	box-sizing: border-box;
	width: 40px;
	min-width: 0;
	height: 22px;
	padding: 2px 4px;
	font: inherit;
	font-size: 0.75rem;
	color: white;
	background: #141013;
	border: 1px solid #333844;
	border-radius: 4px;
	outline: none;
}

.stat-filter-range-input:hover,
.stat-filter-range-input:focus {
	border-color: #f0c15a;
	background: color-mix(in srgb, #141013 88%, #f0c15a);
}

.stat-filter-range-separator {
	color: #6c7a92;
	font-size: 0.75rem;
	line-height: 1;
}

.stat-filter-reset-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	padding: 4px;
	cursor: pointer;
	user-select: none;
	font: inherit;
	color: #f0c15a;
	background: #222;
	border: 1px solid #444;
	border-radius: 5px;
	min-height: 32px;
}

.stat-filter-reset-button:hover,
.stat-filter-reset-button:focus-visible {
	border-color: #f0c15a;
	background: color-mix(in srgb, #222 88%, #f0c15a);
	box-shadow: 0 0 0 1px rgba(240, 193, 90, 0.2);
	outline: none;
}

/* Placeholder logic for contenteditable div */
.search-input:empty::before {
    content: attr(data-placeholder);
    color: #999;
    cursor: text;
}

[data-results] {
    display: grid;
    gap: 5px;
    width: min(1120px, calc(100vw - 16px));
    max-width: 1120px;
    box-sizing: border-box;
}

[data-results] .build-summary {
    display: grid;
	grid-auto-flow: column;
	align-items: start;
    gap: 5px;
}

[data-results] .build-summary .data-group {
	height: 1.5rem;
}

[data-results] .build-summary .implant-bonuses {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(6, minmax(0, auto));
	gap: 0 5px;
}

[data-results] .build-summary .data-group.has-summary-icon {
	--summary-icon-w: 10px;
	--summary-icon-h: 10px;
	--summary-icon-x: 0px;
	--summary-icon-y: 0px;
	--summary-icon-scale: 2;
}

[data-results] .build-summary .data-group.has-summary-icon .label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

[data-results] .build-summary .data-group.has-summary-icon .label::before {
	content: "";
	display: inline-block;
	width: calc(var(--summary-icon-w) * var(--summary-icon-scale));
	height: calc(var(--summary-icon-h) * var(--summary-icon-scale));
	flex: 0 0 calc(var(--summary-icon-w) * var(--summary-icon-scale));
	background-image: var(--ui-spritesheet);
	background-repeat: no-repeat;
	background-size: calc(var(--ui-dimensions) * var(--summary-icon-scale)) calc(var(--ui-dimensions) * var(--summary-icon-scale));
	background-position:
		calc(var(--summary-icon-x) * -1 * var(--summary-icon-scale))
		calc(var(--summary-icon-y) * -1 * var(--summary-icon-scale));
	image-rendering: pixelated;
}

.results-container {
	--select-option-column-min: 150px;
	--select-option-row-height: 58px;
	min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--select-option-column-min), 1fr));
	grid-auto-rows: var(--select-option-row-height);
	align-content: start;
    gap: 5px;
	overflow: hidden;
}

.results-container.mob-select-results {
	--select-option-row-height: 104px;
}

.select-menu {
	min-width: 0;
	min-height: 0;
}

.select-menu-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.select-menu-count {
	color: var(--color);
	background-color: #1A1B21;
	border: 1px solid #141013;
	border-radius: 5px;
	padding: 4px 8px;
	min-width: 110px;
	text-align: center;
}

.select-menu-pager {
	justify-content: end;
}

.select-menu-empty {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color);
	background-color: #1A1B21;
	border: 1px solid #141013;
	border-radius: 5px;
	min-height: 3rem;
}

.select-menu .select-option {
    user-select: none;
	box-sizing: border-box;
	min-height: 0;
	height: 100%;
	overflow: hidden;
    padding: 3px 5px;
    background-color: #1A1B21;
    color: #ccc;
    border: 1px solid #141013;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: start;
    align-items: center;
	gap: 5px;
    text-align: left;
}

.select-menu .remove-option {
	justify-content: center;
	text-align: center;
}

.select-menu .select-option:not(.mob-select-option).has-drop-strip {
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	text-align: center;
}

.select-menu .mob-select-option {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	justify-content: start;
	column-gap: 5px;
	text-align: left;
}

.select-menu .mob-select-sprite {
	align-self: center;
}

.select-menu .mob-select-details {
	min-width: 0;
	max-width: 100%;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	align-items: center;
	row-gap: 3px;
}

.select-menu .mob-select-name {
	align-self: center;
	max-width: 100%;
	overflow: hidden;
	overflow-wrap: anywhere;
	white-space: normal;
}

.select-menu .mob-select-drops {
	align-self: center;
	flex-wrap: wrap;
	justify-content: start;
	max-width: 100%;
}

.mob-drop-icon-strip {
	--slot-size: 18px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2px;
	max-width: 100%;
	overflow: hidden;
	pointer-events: none;
}

.mob-drop-icon-strip .slot-icon-wrap,
.mob-drop-icon-strip .slot-icon {
	width: var(--slot-size);
	height: var(--slot-size);
}

.target-node-drop-icons {
	--slot-size: 16px;
	flex-wrap: wrap;
	max-width: 112px;
	margin: 2px auto 0;
}

.select-menu .select-option.invalid-selection {
    border-color: red !important;
    background-color: darkred;
}

.select-menu .select-separator {
    grid-column: 1 / -1;
    height: 1px;
    margin: 4px 0;
    background-color: color-mix(in srgb, #CCCCCC 45%, transparent);
}

#select-option-tooltip {
    position: fixed;
    flex-direction: column;
    pointer-events: none;
    display: none;
    z-index: 2000;
    color: var(--color);
    border: 2px solid #141013;
    justify-content: space-around;
    max-width: 400px;
    max-height: calc(100vh - 16px);
    overflow: hidden;
    line-height: 1.4;
}

#select-option-tooltip > .data-group {
    border-radius: unset;
}

#select-option-tooltip > .data-group:nth-child(2n) {
    background: color-mix(in srgb, #1A1B21 100%, white 3%);
}

#select-option-tooltip.item-tooltip {
    gap: 1px;
    background-color: #141013;
}

#select-option-tooltip.item-tooltip.has-preview-column {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    max-width: min(720px, calc(100vw - 16px));
    padding: 6px;
}

#select-option-tooltip .item-tooltip-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

#select-option-tooltip .item-tooltip-main {
    flex: 1 1 0;
    min-width: min(320px, calc(100vw - 32px));
}

#select-option-tooltip .item-tooltip-preview {
    flex: 0 0 240px;
    width: 240px;
}

#select-option-tooltip.item-tooltip .tooltip-section-title {
    background: #050506;
    color: #ffffff;
}

#select-option-tooltip.item-tooltip .tooltip-section-title .value {
    display: none;
}

#select-option-tooltip .data-group.is-blocking-requirement .label,
#select-option-tooltip .data-group.is-blocking-requirement .requirement-shortfall {
	color: #ff6b6b;
	text-decoration: underline;
	text-decoration-color: #ff6b6b;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

#select-option-tooltip .data-group.is-warning-requirement .label,
#select-option-tooltip .data-group.is-warning-requirement .requirement-shortfall {
	color: #f0c15a;
	text-decoration: underline;
	text-decoration-color: #f0c15a;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

#select-option-tooltip .data-group .requirement-main-value {
	color: inherit;
	text-decoration: none;
}

#select-option-tooltip .data-group.is-preview-sorted-stat {
	box-shadow: inset 0 0 0 1px rgba(240, 193, 90, 0.55);
	background: color-mix(in srgb, #1A1B21 84%, #f0c15a);
}

#select-option-tooltip .data-group.is-preview-sorted-stat .label,
#select-option-tooltip .data-group.is-preview-sorted-stat .value {
	text-decoration: underline;
	text-decoration-color: #f0c15a;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

#select-option-tooltip .tooltip-preview-note {
	padding: 4px 6px;
	line-height: 1.25;
}

#select-option-tooltip .tooltip-preview-note.requirement-blocked {
	color: #ff6b6b;
}

#select-option-tooltip .tooltip-preview-note.requirement-warning {
	color: #f0c15a;
}

#select-option-tooltip .item-tooltip-column > .data-group {
	border-radius: unset;
}

#select-option-tooltip .item-tooltip-column > .data-group:nth-child(2n) {
	background: color-mix(in srgb, #1A1B21 100%, white 3%);
}

#select-option-tooltip.item-tooltip .item-tooltip-column > .tooltip-section-title,
#select-option-tooltip.item-tooltip .item-tooltip-column > .tooltip-section-title:nth-child(2n) {
	background: #050506;
	color: #ffffff;
}

#select-option-tooltip.attribute-breakdown-tooltip,
#select-option-tooltip.damage-breakdown-tooltip,
#select-option-tooltip.dps-breakdown-tooltip,
#select-option-tooltip.regen-breakdown-tooltip {
    gap: 1px;
    min-width: 220px;
    background-color: #141013;
}

#select-option-tooltip.attribute-breakdown-tooltip > .data-group:first-child,
#select-option-tooltip.damage-breakdown-tooltip > .data-group:first-child,
#select-option-tooltip.dps-breakdown-tooltip > .data-group:first-child,
#select-option-tooltip.regen-breakdown-tooltip > .data-group:first-child {
    background: black;
}

#select-option-tooltip.attribute-breakdown-tooltip > .tooltip-section-title,
#select-option-tooltip.damage-breakdown-tooltip > .tooltip-section-title,
#select-option-tooltip.dps-breakdown-tooltip > .tooltip-section-title,
#select-option-tooltip.regen-breakdown-tooltip > .tooltip-section-title {
	background: black;
	color: #ffffff;
}

#select-option-tooltip.attribute-breakdown-tooltip > .tooltip-section-title .value,
#select-option-tooltip.damage-breakdown-tooltip > .tooltip-section-title .value,
#select-option-tooltip.dps-breakdown-tooltip > .tooltip-section-title .value,
#select-option-tooltip.regen-breakdown-tooltip > .tooltip-section-title .value {
	display: none;
}

[data-results] .value.has-tooltip {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.select-menu .remove-option {
    background-color: rgb(255, 71, 71);
    color: #fecaca;
    border-color: darkred;
}

.select-menu .select-option:hover {
	border: 1px solid white;
}

.select-menu .select-option.is-active {
    border-color: white;
    background-color: color-mix(in srgb, #1A1B21 100%, white 10%);
}

.equipment .equipment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

.equipment .equipment-grid:nth-child(3) {
    grid-template-columns: repeat(3, 1fr);
}

.equipment .equipment-grid .slot[data-index="0"].slot[data-slot="implant"] {
    grid-column: 2;
    grid-row: 1;
}
.equipment .equipment-grid .slot[data-index="1"].slot[data-slot="implant"] {
    grid-column: 1;
    grid-row: 2;
}
.equipment .equipment-grid .slot[data-index="2"].slot[data-slot="implant"] {
    grid-column: 2;
    grid-row: 2;
}
.equipment .equipment-grid .slot[data-index="3"].slot[data-slot="implant"] {
    grid-column: 3;
    grid-row: 2;
}
.equipment .equipment-grid .slot[data-index="4"].slot[data-slot="implant"] {
    grid-column: 1;
    grid-row: 3;
}
.equipment .equipment-grid .slot[data-index="5"].slot[data-slot="implant"] {
    grid-column: 3;
    grid-row: 3;
}

.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.65);
    z-index: 999;
}

.hidden {
    display: none !important;
}

.data-group {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: space-between;
    background-color: #1A1B21;
    color: var(--color);
    border-radius: 5px;
    padding: 2px;
}

[data-value="stamina"] {
    color: #20AD54;
}
[data-value="strength"] {
    color: #B4202A;
}
[data-value="agility"] {
    color: #285CC4;
}
[data-value="intellect"] {
    color: #C16CEE;
}

[data-value="energy"] {
	background: linear-gradient(
		to bottom,
		var(--energy-light) 0%,
		var(--energy-light) 40%,
		var(--energy-dark) 40%,
		var(--energy-dark) 100%
	);
}
[data-value="health"], [data-value="Health"] {
	background: linear-gradient(
		to bottom,
		var(--health-light) 0%,
		var(--health-light) 50%,
		var(--health-dark) 50%,
		var(--health-dark) 100%
	);
}

[data-value="health"], [data-value="Health"], [data-value="energy"] {
	color: white;
	padding: 1px;
	text-align: center;
	outline: 2px solid black;
	border-radius: 2px;
	min-width: 8rem;
}

[data-results] .sets {
    grid-row: 1;
    grid-column: 1;
}

[data-results] .build-summary {
    grid-row: 1;
    grid-column: 2;
}

[data-results] .skill-analysis {
    grid-row: 2;
    grid-column: 1 / 3;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    align-items: stretch;
}

.open-graphs-button {
	cursor: pointer;
	background-color: #1A1B21;
	color: var(--color);
	border: 1px solid #444;
	border-radius: 5px;
	padding: 7px 14px;
	font-family: inherit;
}

.open-graphs-button:hover {
	border-color: white;
}

.graph-overlay {
	position: fixed;
	inset: 0;
	z-index: 1800;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(0, 0, 0, 0.72);
	overscroll-behavior: contain;
}

.detail-overlay {
	position: fixed;
	inset: 0;
	z-index: 1900;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(0, 0, 0, 0.72);
	line-height: normal;
	overscroll-behavior: contain;
}

.item-browser-overlay {
	position: fixed;
	inset: 0;
	z-index: 1850;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(0, 0, 0, 0.72);
	overscroll-behavior: contain;
}

.graph-dialog {
	box-sizing: border-box;
	width: min(1200px, calc(100vw - 36px));
	height: min(80vh, calc(100vh - 36px));
	max-height: calc(100vh - 36px);
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	gap: 8px;
	padding: 8px;
	background: var(--background-color);
	border: 1px solid #141013;
	border-radius: 6px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.detail-dialog {
	box-sizing: border-box;
	width: min(980px, calc(100vw - 36px));
	max-height: calc(100vh - 36px);
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	gap: 8px;
	padding: 8px;
	background: var(--background-color);
	border: 1px solid #141013;
	border-radius: 6px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.item-browser-dialog {
	box-sizing: border-box;
	width: min(1080px, calc(100vw - 36px));
	height: min(720px, calc(100vh - 36px));
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr) auto;
	gap: 8px;
	padding: 8px;
	background: var(--background-color);
	border: 1px solid #141013;
	border-radius: 6px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.graph-dialog-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	align-items: center;
	gap: 8px;
}

.detail-dialog-header {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 8px;
}

.item-browser-header {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 8px;
}

.graph-dialog-title {
	color: var(--color);
	font-size: 1.1rem;
}

.detail-dialog-title {
	color: var(--color);
	font-size: 1.1rem;
}

.item-browser-title {
	color: var(--color);
	font-size: 1.1rem;
}

.graph-dialog-controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.graph-dialog-navigation,
.graph-encounter-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
}

.graph-encounter-button {
	cursor: pointer;
	background-color: #1A1B21;
	color: var(--color);
	border: 1px solid #444;
	border-radius: 5px;
	padding: 5px 8px;
	font-family: inherit;
	font-size: 0.82rem;
	white-space: nowrap;
}

.graph-encounter-button:hover:not(:disabled) {
	border-color: white;
}

.graph-encounter-button:disabled {
	cursor: default;
	opacity: 0.45;
}

.graph-encounter-status {
	color: #f0c15a;
	font-size: 0.85rem;
	white-space: nowrap;
}

.graph-kill-control {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--color);
}

.ui-close-button {
	--close-button-frame-width: var(--close-button-normal-width, 20);
	--close-button-frame-height: var(--close-button-normal-height, 22);
	--close-button-box-width: var(--close-button-pressed-width, 22);
	--close-button-box-height: var(--close-button-normal-height, 22);
	--close-button-offset-x: var(--close-button-normal-offset-x, 1);
	--close-button-offset-y: var(--close-button-normal-offset-y, 0);
	--close-button-scale: 1.5;
	--close-button-sprite-x: var(--close-button-normal-x, 64);
	--close-button-sprite-y: var(--close-button-normal-y, 113);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	width: calc(var(--close-button-box-width) * 1px * var(--close-button-scale));
	height: calc(var(--close-button-box-height) * 1px * var(--close-button-scale));
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	background-image: var(--ui-spritesheet);
	background-repeat: no-repeat;
	background-size: calc(var(--ui-dimensions) * var(--close-button-scale)) calc(var(--ui-dimensions) * var(--close-button-scale));
	background-position:
		calc((var(--close-button-offset-x) - var(--close-button-sprite-x)) * 1px * var(--close-button-scale))
		calc((var(--close-button-offset-y) - var(--close-button-sprite-y)) * 1px * var(--close-button-scale));
	color: transparent;
	font: inherit;
	line-height: 0;
	image-rendering: pixelated;
}

.ui-close-button:hover {
	--close-button-frame-width: var(--close-button-hover-width, 20);
	--close-button-frame-height: var(--close-button-hover-height, 22);
	--close-button-offset-x: var(--close-button-hover-offset-x, 1);
	--close-button-offset-y: var(--close-button-hover-offset-y, 0);
	--close-button-sprite-x: var(--close-button-hover-x, 64);
	--close-button-sprite-y: var(--close-button-hover-y, 137);
}

.ui-close-button:active {
	--close-button-frame-width: var(--close-button-pressed-width, 22);
	--close-button-frame-height: var(--close-button-pressed-height, 21);
	--close-button-offset-x: var(--close-button-pressed-offset-x, 0);
	--close-button-offset-y: var(--close-button-pressed-offset-y, 0.5);
	--close-button-sprite-x: var(--close-button-pressed-x, 63);
	--close-button-sprite-y: var(--close-button-pressed-y, 162);
}

.ui-close-button:focus-visible {
	outline: 1px solid #9fb7ff;
	outline-offset: 2px;
}

.graph-dialog-body {
	min-height: 0;
	display: grid;
	gap: 8px;
	overflow: auto;
	padding-right: 2px;
	overscroll-behavior: contain;
}

.detail-dialog-body {
	min-height: 0;
	overflow: auto;
	padding-right: 2px;
	overscroll-behavior: contain;
}

.item-browser-controls {
	display: grid;
	gap: 6px;
	justify-content: stretch;
}

.browser-window-list,
.browser-window-footer {
	min-width: 0;
	min-height: 0;
}

.browser-window-footer-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: row-reverse;
	gap: 10px;
}

.item-browser-search {
	flex: 1 1 220px;
}

.item-browser-count {
	display: grid;
	place-items: center;
	min-width: 72px;
	padding: 3px 6px;
	background: #141013;
	border: 1px solid #333844;
	border-radius: 4px;
	color: #f0c15a;
	white-space: nowrap;
}

.item-browser-pager {
	display: grid;
	grid-template-columns: auto minmax(68px, auto) auto;
	gap: 4px;
	align-items: stretch;
}

.item-browser-page-button {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	min-width: 28px;
	padding: 2px 6px;
	background: #141013;
	color: #f0c15a;
	border: 1px solid #333844;
	border-radius: 4px;
	font-family: inherit;
}

.item-browser-page-button:hover:not(:disabled) {
	border-color: #f0c15a;
}

.item-browser-page-button:disabled {
	cursor: default;
	opacity: 0.45;
}

.item-browser-page-text {
	display: grid;
	place-items: center;
	padding: 2px 6px;
	background: #141013;
	border: 1px solid #333844;
	border-radius: 4px;
	color: var(--color);
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}

.item-browser-page-text:hover,
.item-browser-page-text.is-editing {
	border-color: #f0c15a;
}

.item-browser-page-text.is-editing {
	min-width: 68px;
	color: white;
	user-select: text;
}

.item-browser-toggle .stat-filter-option {
	box-sizing: border-box;
	min-height: 0;
	padding: 3px 6px;
	background: #141013;
	border: 1px solid #333844;
	border-radius: 4px;
}

.item-browser-toggle {
	display: flex;
	align-items: stretch;
}

.item-browser-sort-panel {
	display: grid;
	gap: 5px;
	min-width: 260px;
}

.item-browser-sort-row {
	display: grid;
	grid-template-columns: minmax(120px, 1fr) auto;
	gap: 5px;
}

.item-browser-list {
	--item-browser-column-min: 210px;
	--item-browser-row-height: 40px;
	min-height: 0;
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--item-browser-column-min), 1fr));
	grid-auto-rows: var(--item-browser-row-height);
	align-content: start;
	gap: 5px;
}

.item-browser-row {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 6px;
	align-items: center;
	min-width: 0;
	padding: 4px;
	background: #1A1B21;
	color: var(--color);
	border: 1px solid #141013;
	border-radius: 5px;
	font-family: inherit;
	text-align: left;
}

.item-browser-row .slot-rank-overlay {
	font-size: 0.75rem;
}

.item-browser-row:hover {
	border-color: white;
}

.item-browser-equip {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	align-self: stretch;
	padding: 2px 6px;
	background: #141013;
	color: #f0c15a;
	border: 1px solid #3f4658;
	border-radius: 4px;
	font-family: inherit;
}

.item-browser-equip:hover {
	border-color: #f0c15a;
}

.item-browser-icon {
	width: 28px;
	height: 28px;
}

.item-browser-icon .slot-icon-wrap,
.item-browser-icon .slot-icon {
	--slot-size: 28px;
	width: var(--slot-size);
	height: var(--slot-size);
}

.item-browser-row-text {
	display: grid;
	min-width: 0;
}

.item-browser-row-name,
.item-browser-row-meta {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.item-browser-row-name {
	color: white;
}

.item-browser-row-meta {
	color: #f0c15a;
	font-size: 0.85rem;
}

.item-browser-empty {
	grid-column: 1 / -1;
	padding: 8px;
	background: #141013;
	border: 1px solid #333844;
	border-radius: 5px;
	color: var(--color);
}

.detail-content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	color: var(--color);
}

.detail-hero {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px;
	align-items: center;
	padding: 6px;
	background: #141013;
	border: 1px solid #333844;
	border-radius: 5px;
}

.detail-visual {
	display: grid;
	place-items: center;
	width: 58px;
	min-height: 58px;
	background: #1A1B21;
	border: 1px solid #333844;
	border-radius: 5px;
	color: #777982;
}

.detail-visual .slot-icon-wrap,
.detail-visual .slot-icon {
	--slot-size: 44px;
	width: var(--slot-size);
	height: var(--slot-size);
}

.detail-visual .mob-image-frame {
	--mob-frame-width: 44px;
}

.detail-hero-text {
	min-width: 0;
	display: grid;
	gap: 3px;
}

.detail-name {
	color: white;
	font-size: 1.08rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.detail-meta {
	color: #f0c15a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.detail-description {
	grid-column: 1 / -1;
	padding: 6px;
	background: #141013;
	border: 1px solid #333844;
	border-radius: 5px;
	color: white;
}

.detail-section {
	display: grid;
    align-content: start;
	gap: 5px;
	min-width: 0;
}

.detail-section-title {
	color: #f0c15a;
}

.detail-section-wide {
	grid-column: 1 / -1;
}

.detail-obtain-source-groups {
	display: grid;
	gap: 8px;
}

.detail-obtain-source-group {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.detail-obtain-source-title {
	color: #BDC2FB;
	font-size: 0.88rem;
}

.detail-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 5px;
}

.detail-row {
	display: grid;
	grid-template-columns: minmax(80px, 0.8fr) minmax(0, 1fr);
	gap: 6px;
	align-items: center;
	min-height: 1.55rem;
	padding: 3px 5px;
	background: #1A1B21;
	border: 1px solid #141013;
	border-radius: 4px;
}

@media (max-width: 760px) {
	.detail-content {
		grid-template-columns: minmax(0, 1fr);
	}
}

.detail-row-label,
.detail-row-value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.detail-row-label {
	color: #BDC2FB;
}

.detail-row-value {
	color: white;
	text-align: right;
}

.inline-faction-value {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	justify-content: flex-end;
}

.inline-faction-icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
	image-rendering: pixelated;
	flex: 0 0 auto;
}

.detail-drop-list {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) 56px minmax(0, 0.6fr) minmax(0, 0.7fr) minmax(0, 0.65fr);
	align-items: stretch;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	overflow: auto;
	border: 1px solid #333844;
	border-radius: 5px;
	background: #141013;
}

.detail-drop-list.detail-drop-list-toggle {
	grid-template-columns: 48px minmax(0, 1.2fr) 56px minmax(0, 0.6fr) minmax(0, 0.7fr) minmax(0, 0.65fr);
}

.detail-drop-list.detail-drop-list-obtain {
	grid-template-columns: minmax(0, 1.2fr) 56px minmax(0, 0.65fr) minmax(0, 0.75fr) minmax(0, 0.45fr);
}

.detail-drop-list.detail-drop-list-obtained-from {
	grid-template-columns: minmax(0, 1.05fr) 56px minmax(0, 0.9fr) minmax(0, 0.42fr) minmax(0, 0.55fr) minmax(0, 0.5fr) minmax(0, 0.6fr);
}

.detail-obtain-list {
	display: grid;
	gap: 5px;
}

.detail-equip-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 5px;
}

.detail-equip-button {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	min-height: 1.7rem;
	padding: 3px 6px;
	background: #1A1B21;
	color: #f0c15a;
	border: 1px solid #333844;
	border-radius: 4px;
	font-family: inherit;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.detail-equip-button:hover {
	border-color: #f0c15a;
}

.detail-drop-header,
.detail-drop-cell {
	min-width: 0;
	min-height: 2rem;
	display: grid;
	align-content: center;
	justify-content: center;
	background: #1A1B21;
	border-right: 1px solid #333844;
	border-bottom: 1px solid #333844;
}

.detail-drop-header:nth-child(5n),
.detail-drop-cell:nth-of-type(5n) {
	border-right: 0;
}

.detail-drop-list.detail-drop-list-toggle .detail-drop-header:nth-child(5n),
.detail-drop-list.detail-drop-list-toggle .detail-drop-cell:nth-of-type(5n) {
	border-right: 1px solid #333844;
}

.detail-drop-list.detail-drop-list-toggle .detail-drop-header:nth-child(6n),
.detail-drop-list.detail-drop-list-toggle .detail-drop-cell:nth-of-type(6n) {
	border-right: 0;
}

.detail-drop-list.detail-drop-list-obtained-from .detail-drop-header:nth-child(5n),
.detail-drop-list.detail-drop-list-obtained-from .detail-drop-cell:nth-of-type(5n) {
	border-right: 1px solid #333844;
}

.detail-drop-list.detail-drop-list-obtained-from .detail-drop-header:nth-child(6n),
.detail-drop-list.detail-drop-list-obtained-from .detail-drop-cell:nth-of-type(6n) {
	border-right: 1px solid #333844;
}

.detail-drop-list.detail-drop-list-obtained-from .detail-drop-header:nth-child(7n),
.detail-drop-list.detail-drop-list-obtained-from .detail-drop-cell:nth-of-type(7n) {
	border-right: 0;
}

.detail-drop-header {
	justify-items: center;
	color: #f0c15a;
	font-size: 0.88rem;
	line-height: 1.15;
	text-align: center;
	white-space: normal;
	overflow-wrap: anywhere;
}

.detail-drop-stat {
	justify-items: center;
	color: var(--color);
	line-height: 1.15;
	text-align: center;
	white-space: normal;
	overflow-wrap: anywhere;
}

.detail-drop-cell.is-clickable {
	cursor: pointer;
	outline: none;
}

.detail-drop-cell.is-clickable.is-row-hover,
.detail-drop-cell.is-clickable:hover,
.detail-drop-cell.is-clickable:focus-visible {
	background: #26212a;
}

.detail-drop-toggle-cell {
	justify-items: center;
}

.detail-drop-toggle-cell .mob-drop-toggle {
	min-width: 0;
}

.item-browser-sort-warning {
	padding: 5px 6px 2px;
	color: #f0c15a;
	font-size: 0.88rem;
	text-align: center;
	overflow-wrap: anywhere;
}

.selection-sort-mode-button {
	min-width: 7.5rem;
}

.selection-sort-button-group {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	padding: 2px;
	background: #141013;
	border: 1px solid #444;
	border-radius: 6px;
	transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.selection-sort-button-group:hover,
.selection-sort-button-group:focus-within {
	border-color: #f0c15a;
	box-shadow: 0 0 0 1px rgba(240, 193, 90, 0.18);
}

.selection-sort-button-group > .stat-filter-button,
.selection-sort-button-group > .stat-filter-menu > .stat-filter-button {
	border: 0;
	border-radius: 4px;
}

.selection-sort-button-group > .stat-filter-menu {
	position: relative;
}

.selection-sort-button-group > .stat-filter-button + .stat-filter-menu > .stat-filter-button {
	border-left: 1px solid #333844;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.selection-sort-button-group > .stat-filter-button {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.detail-obtain-row {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: auto minmax(90px, 1fr) minmax(70px, 0.8fr) repeat(2, auto);
	gap: 6px;
	align-items: center;
	padding: 4px;
	background: #1A1B21;
	color: var(--color);
	border: 1px solid #141013;
	border-radius: 4px;
	font-family: inherit;
	text-align: left;
	min-width: 0;
}

.detail-obtain-row:hover {
	border-color: #f0c15a;
}

.detail-drop-icon {
	justify-items: center;
}

.detail-obtain-icon {
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.detail-drop-icon .slot-icon-wrap,
.detail-drop-icon .slot-icon {
	--slot-size: 30px;
	width: var(--slot-size);
	height: var(--slot-size);
}

.detail-obtain-icon .mob-image-frame {
	--mob-frame-width: 24px;
}

.detail-drop-name,
.detail-obtain-name,
.detail-obtain-meta {
	min-width: 0;
	line-height: 1.15;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.detail-drop-name,
.detail-obtain-name {
	color: white;
}

.detail-obtain-meta {
	color: #f0c15a;
}

.detail-drop-total {
	grid-column: 1 / -1;
	padding: 7px 8px;
	background: #1A1B21;
	color: white;
	text-align: center;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.damage-timeline {
    position: relative;
    min-width: min(800px, calc(100vw - 78px));
    padding: 2px;
    background-color: #1A1B21;
    border-radius: 5px;
}

.damage-timeline-header {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.damage-timeline-title {
    flex: 1;
    background-color: #141013;
    color: var(--color);
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    user-select: none;
}

.damage-timeline-refresh {
    position: absolute;
    left: 5px;
    bottom: 5px;
    z-index: 1;
    cursor: pointer;
    background-color: #222;
    color: var(--color);
    border: 1px solid #444;
    border-radius: 5px;
    padding: 3px 7px;
    font-family: inherit;
    font-size: 0.85rem;
}

.damage-timeline-refresh:hover {
    border-color: white;
}

.damage-timeline-collapse {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color);
    border-radius: 5px;
    user-select: none;
}

.damage-timeline-collapse:hover {
    border-color: white;
}

.damage-timeline.is-collapsed .damage-timeline-refresh,
.damage-timeline.is-collapsed .damage-timeline-body {
    display: none;
}

.damage-timeline-body {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr);
	grid-template-areas:
		"graph events"
		"summary summary";
	gap: 6px;
	align-items: stretch;
	min-height: 0;
}

.damage-timeline-graph-pane {
	grid-area: graph;
	position: relative;
	min-width: 0;
}

.damage-timeline canvas {
    display: block;
    width: 100%;
    height: clamp(360px, 48vh, 620px);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.damage-timeline canvas.is-panning {
    cursor: grabbing;
}

.damage-timeline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 4px 6px 6px 80px;
    color: var(--color);
}

.damage-timeline-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
}

.damage-timeline-legend-item.is-hidden {
    opacity: 0.45;
    text-decoration: line-through;
}

.damage-timeline-legend-item.is-selected {
    color: #ffffff;
}

.damage-timeline-legend-item.is-selected .damage-timeline-legend-swatch {
    outline: 1px solid #ffffff;
    outline-offset: 2px;
}

.damage-timeline-legend-swatch {
    width: 28px;
    height: 0;
    border: 0;
    border-top: 3px solid currentColor;
    background-repeat: repeat-x;
    background-size: 6px 3px;
}

.damage-event-panel {
	grid-area: events;
	box-sizing: border-box;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	justify-items: stretch;
	gap: 5px;
	height: clamp(360px, 48vh, 620px);
	min-width: 0;
	padding: 4px;
	background: #141013;
	border: 1px solid #333844;
	border-radius: 5px;
	color: var(--color);
}

.damage-timeline-summary {
	grid-area: summary;
	min-height: 0;
	max-height: 190px;
	overflow: auto;
	background: #141013;
	border: 1px solid #333844;
	border-radius: 5px;
	color: var(--color);
}

.damage-summary-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82rem;
}

.damage-summary-table th,
.damage-summary-table td {
	padding: 5px 7px;
	border-bottom: 1px solid #2b303a;
	text-align: right;
	white-space: nowrap;
}

.damage-summary-table th:first-child,
.damage-summary-table td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: #141013;
	text-align: left;
}

.damage-summary-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #1A1B21;
	color: #f0c15a;
}

.damage-summary-table thead th:first-child {
	z-index: 3;
	background: #1A1B21;
}

.damage-event-filters {
	display: grid;
	gap: 4px;
	justify-items: center;
	min-width: 0;
}

.damage-event-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	min-width: 0;
}

.damage-event-filter-label {
	color: #f0c15a;
}

.damage-event-filter-chip {
	cursor: pointer;
	max-width: 100%;
	padding: 1px 5px;
	color: var(--color);
	background: #1A1B21;
	border: 1px solid #444;
	border-radius: 4px;
	font-family: inherit;
	font-size: 0.75rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.damage-event-filter-chip.is-off {
	opacity: 0.45;
	text-decoration: line-through;
}

.damage-event-list {
	min-height: 0;
	overflow: auto;
	display: grid;
	align-content: start;
	justify-items: stretch;
	gap: 3px;
	padding-right: 4px;
}

.damage-event-row {
	display: grid;
	grid-template-columns: minmax(3.8rem, 0.75fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(3.8rem, 0.8fr);
	gap: 4px;
	align-items: center;
	min-height: 1.45rem;
	padding: 2px 3px;
	background: #1A1B21;
	border-left: 2px solid #444;
	font-size: 0.75rem;
	min-width: 0;
}

.damage-event-row.is-tick {
	opacity: 0.85;
}

.damage-event-row.is-jumped {
	border-color: #f0c15a;
	box-shadow: 0 0 0 1px #f0c15a inset;
}

.damage-event-time {
	color: #f0c15a;
}

.damage-event-row > span {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.damage-event-value {
	color: white;
	text-align: right;
}

.damage-event-empty {
	padding: 6px;
	color: #aaa;
	background: #1A1B21;
}

@media (max-width: 900px) {
	.graph-dialog-header {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.graph-dialog-controls,
	.graph-dialog-navigation {
		grid-column: 1 / -1;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.damage-timeline-body {
		grid-template-columns: 1fr;
		grid-template-areas:
			"graph"
			"events"
			"summary";
	}

	.damage-timeline canvas,
	.damage-event-panel {
		height: 340px;
	}
}

[data-results] .targeting {
    grid-row: 3;
    grid-column: 1 / 3;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    width: 100%;
}

.target-graph-layout {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-flow: column;
    gap: 6px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.target-graph-sidebar {
	box-sizing: border-box;
	display: grid;
	align-content: start;
	gap: 6px;
	min-width: 0;
	width: clamp(206px, 20vw, 220px);
	max-width: 100%;
}

[data-results] .party-dps {
    grid-row: 5;
    grid-column: 1 / 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

[data-results] .farming-results {
    grid-row: 4;
    grid-column: 1 / 3;
    display: grid;
    gap: 5px;
}

.farming-summary,
.farming-party-result,
.farming-player-result,
.farming-mob-result {
    display: grid;
	width: fit-content;
}

.farming-summary {
	grid-column: 2;
}

.farming-summary .data-group {
    min-height: 0;
    padding: 3px 5px;
}

.farming-party-groups {
    display: flex;
	flex-wrap: wrap;
    gap: 5px;
	justify-content: center;
	grid-column: 1 / 4;
}

.farming-party-group {
    display: grid;
	grid-auto-flow: column;
    gap: 5px;
    padding: 5px;
    background: color-mix(in srgb, #1A1B21 85%, #f0c15a 15%);
    border: 1px solid #f0c15a;
    border-radius: 5px;
}

#select-option-tooltip .tooltip-section-row {
    margin-top: 3px;
    color: #f0c15a;
    background: #111217;
    border: 1px solid #444;
}

@media (max-width: 760px) {
    [data-results] .farming-results {
        grid-template-columns: 1fr;
    }
}

.farming-party-group-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    color: #f0c15a;
    background: #141013;
    border-radius: 4px;
    padding: 5px;
}

.target-graph {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 460px;
    background-color: #1A1B21;
    border: 1px solid #333844;
    border-radius: 5px;
    overflow: hidden;
    touch-action: none;
}

.target-graph-lines,
.target-graph-nodes {
    position: absolute;
    inset: 0;
}

.target-graph-nodes {
    pointer-events: none;
}

.target-graph-lines {
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.target-edge {
    stroke-width: 3;
    fill: none;
    pointer-events: stroke;
    filter: drop-shadow(0 0 2px #000);
}

.target-edge-attack {
    stroke: #ff4f58;
}

.target-edge-mob {
    stroke: #f0c15a;
}

.target-edge-support {
    stroke: #54d36a;
}

.target-edge-draft {
    stroke: #BDC2FB;
    stroke-dasharray: 5 4;
}

.target-edge.is-removable {
    cursor: pointer;
    pointer-events: stroke;
}

.target-edge.is-removable:hover {
    stroke-width: 5;
}

.target-graph-legend {
    box-sizing: border-box;
    display: grid;
    gap: 4px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    color: #ccc;
    background: #1A1B21;
    border: 1px solid #333844;
    border-radius: 4px;
    padding: 6px;
    font-size: 0.75rem;
}

@media (max-width: 1180px) {
    .target-graph-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
    }

    .target-graph-sidebar,
    .target-graph-legend {
        width: 100%;
        max-width: none;
    }
}

.target-graph-legend-title {
    color: var(--color);
}

.target-graph-reset-button {
	box-sizing: border-box;
	cursor: pointer;
	width: 100%;
	min-width: 0;
	padding: 4px 6px;
	background: #141013;
	color: var(--color);
	border: 1px solid #333844;
	border-radius: 4px;
	font-family: inherit;
	font-size: 0.75rem;
}

.target-graph-reset-button:hover {
	border-color: #f0c15a;
}

.target-graph-legend-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
}

.target-graph-node-guide {
    display: grid;
    grid-template-columns: minmax(0, 122px) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.legend-player-guide-node {
    box-sizing: border-box;
    display: grid;
    gap: 2px;
    width: 122px;
    padding: 5px;
    color: white;
    background-color: #222;
    border: 2px solid #4499F8;
    border-radius: 5px;
    text-align: center;
}

.legend-guide-row {
    box-sizing: border-box;
    justify-self: center;
    max-width: 100%;
    padding: 2px 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #1A1B21;
    color: white;
    white-space: nowrap;
}

.legend-guide-name {
    background: transparent;
    border-color: transparent;
    overflow: hidden;
    text-overflow: ellipsis;
}

.legend-guide-leader {
    color: #f0c15a;
    border-color: #f0c15a;
    text-shadow: 0 0 5px #f0c15a;
}

.legend-guide-mode {
    color: var(--color);
    border-color: #444;
}

.legend-guide-party {
    color: #f0c15a;
    border-color: #f0c15a;
}

.legend-guide-delay {
    color: white;
    background: #141013;
    border-color: #444;
}

.legend-guide-cast-delay {
    color: white;
    background: #141013;
    border-color: #444;
}

.legend-guide-socket {
    padding-inline: 6px;
    color: white;
    background: transparent;
    border-color: white;
    border-radius: 999px;
}

.legend-node {
    width: 46px;
    height: 20px;
    min-width: 0;
    min-height: 0;
    max-width: none;
    box-sizing: border-box;
    background: #222;
    border: 2px solid #555;
    border-radius: 4px;
}

.legend-edge {
    width: 46px;
    height: 0;
    border-top: 3px solid currentColor;
}

.legend-delay {
    width: 46px;
    box-sizing: border-box;
    padding: 2px 3px;
    color: white;
    background: #141013;
    border: 1px solid #444;
    border-radius: 3px;
    text-align: center;
    gap: 6px;
}

.legend-party {
    width: 46px;
    box-sizing: border-box;
    padding: 2px 3px;
    color: #f0c15a;
    background: #1A1B21;
    border: 1px solid #f0c15a;
    border-radius: 3px;
    text-align: center;
}

.legend-edge-attack {
    color: #ff4f58;
}

.legend-edge-mob {
    color: #f0c15a;
}

.legend-edge-support {
    color: #54d36a;
}

.target-graph-legend-name {
    color: var(--color);
}

.target-graph-legend-text,
.target-graph-legend-detail,
.target-graph-help-text {
    min-width: 0;
    color: #aaa;
    overflow-wrap: anywhere;
}

.target-node {
    position: absolute;
    box-sizing: border-box;
    width: max-content;
    min-width: 82px;
    max-width: 180px;
    min-height: 82px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    padding: 6px 8px;
    color: white;
    background-color: #222;
    border: 2px solid #555;
    border-radius: 6px;
    text-align: center;
    cursor: move;
    user-select: none;
    z-index: 2;
    pointer-events: auto;
    transition: left 60ms ease-out, top 60ms ease-out;
    will-change: left, top;
}

.target-node.is-dragging {
    transition: none;
}

.target-node.player-node {
    width: 132px;
    border-color: #4499F8;
}

.target-node.mob-node {
    width: 124px;
    border-color: #f0c15a;
}

.target-node-mob-image {
	margin-block: -2px;
}

.target-node-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
}

.target-node-mode {
    border: 1px solid #444;
    border-radius: 4px;
    background: #1A1B21;
    color: var(--color);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.target-node-mode.is-kite {
    border-color: #54d36a;
    color: #54d36a;
}

.target-node-leader,
.target-node-party,
.target-node-drops {
    border: 1px solid #444;
    border-radius: 4px;
    background: #1A1B21;
    color: var(--color);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.target-node-leader {
    color: #6b6250;
}

.target-node-leader.is-leader {
    border-color: #f0c15a;
    color: #f0c15a;
    text-shadow: 0 0 5px #f0c15a;
}

.target-node-party.is-party {
    border-color: #f0c15a;
    color: #f0c15a;
}

.target-node-delay {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #ccc;
    font-size: 0.7rem;
}

.target-node-party-select {
    width: 74px;
    text-align: center;
}

.inline-number-value {
    width: 38px;
    padding: 1px;
    border: 1px solid #444;
    border-radius: 3px;
    background: #141013;
    color: white;
    font-family: inherit;
    font-size: 0.7rem;
    text-align: center;
    outline: none;
    cursor: ns-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.inline-number-value:focus {
    border-color: var(--color);
}

.inline-number-value.is-dragging {
    border-color: #f0c15a;
    color: #f0c15a;
}

.custom-toggle-box {
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border: 1px solid #777;
    border-radius: 2px;
    background: #141013;
}

.is-checked > .custom-toggle-box {
    border-color: #54d36a;
    background: linear-gradient(135deg, #54d36a 0 48%, #141013 48% 58%, #54d36a 58% 100%);
}

.mob-drop-panel {
    position: fixed;
    z-index: 2600;
    display: grid;
    gap: 2px;
    min-width: 260px;
    max-width: min(520px, calc(100vw - 16px));
    max-height: min(520px, calc(100vh - 16px));
    overflow: auto;
    padding: 5px;
    background-color: #141013;
    border: 1px solid #444;
    border-radius: 5px;
    color: var(--color);
}

.mob-drop-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
}

.target-node-socket {
    width: 15px;
    height: 15px;
    border: 2px solid white;
    border-radius: 50%;
    background: #111;
    cursor: crosshair;
}

[data-results] .party-dps-title {
    min-width: 120px;
}

.party-dps-result {
    display: grid;
}

.mob-result {
    display: grid;
}

.combat-result-card {
    align-content: start;
    gap: 3px;
    min-width: min(720px, calc(100vw - 28px));
    padding: 4px;
    background: #141013;
    border: 1px solid #333844;
    border-radius: 5px;
}

.combat-result-card .data-group {
    border-radius: 3px;
    padding: 3px 5px;
}

.combat-result-heading {
    color: #ffffff;
    background: #1A1B21;
    border: 1px solid #333844;
    border-radius: 3px;
    padding: 4px 6px;
    text-align: center;
}

.combat-result-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 5px;
}

.combat-result-column {
    display: grid;
    align-content: start;
    gap: 3px;
}

.combat-result-section-label {
    padding: 2px 6px;
    color: #f0c15a;
    background: #111217;
    border: 1px solid #444;
    border-radius: 3px;
    text-align: center;
}

@media (max-width: 760px) {
    .combat-result-card {
        min-width: calc(100vw - 28px);
    }

    .combat-result-columns {
        grid-template-columns: 1fr;
    }
}

[data-results] .mobs {
    grid-row: 6;
    grid-column: 1 / 3;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

#loading-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(10, 10, 14, 0.92);
	color: var(--color);
}

#loading-overlay.is-hidden {
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 180ms ease, visibility 180ms ease;
}

.loading-panel {
	display: grid;
	width: min(360px, calc(100vw - 40px));
	min-height: 180px;
	justify-items: center;
	gap: 12px;
	min-width: min(360px, calc(100vw - 40px));
	padding: 18px;
	background: #1A1B21;
	border: 1px solid #3B5CC0;
	border-radius: 5px;
	box-shadow: 0 0 0 2px #141013, 0 18px 50px rgba(0, 0, 0, 0.45);
	text-align: center;
}

.loading-title {
	font-size: 1.5rem;
	color: white;
}

.loading-spinner {
	width: 46px;
	height: 46px;
	border: 3px solid #141013;
	border-top-color: #f0c15a;
	border-right-color: #4499F8;
	border-radius: 50%;
	animation: loading-spin 850ms steps(16) infinite;
}

.loading-status {
	min-height: 1.25em;
	color: var(--color);
}

#loading-overlay.has-error .loading-panel {
	border-color: #D10007;
}

#loading-overlay.has-error .loading-spinner {
	animation: none;
	border-color: #D10007;
}

@keyframes loading-spin {
	to { transform: rotate(360deg); }
}

body .buttons {
	display: grid;
	gap: 5px;
}

.button {
	user-select: none;
	cursor: pointer;
	background-color: #990000;
	border: 3px solid #CCCCCC;
	padding: 5px;
	font-size: 1.5rem;
	min-width: 200px;
	text-align: center;
}

.button:hover {
	background-color: #8A0000;
	border-color: #B8B8B8;
}

#reset-data-btn.confirm-reset {
    color: red;
    border-color: darkred;
	background-color: rgb(37, 0, 0);
}