.MistAugmentApp {
	--augment-ink: #2d2117;
	--augment-muted: #665747;
	--augment-line: #b69c6d;
	color: var(--augment-ink);
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.MistAugmentStats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 2px 0 10px;
}

.MistAugmentStat {
	padding: 5px 10px;
	border: 1px solid #8f896b;
	background: #e9ddc5;
	font-size: 11px;
	line-height: 1.3;
}

.MistAugmentStat strong {
	color: #38291c;
	font-size: 13px;
}

.MistAugmentStat span {
	margin-left: 4px;
	color: #65533f;
}

.MistAugmentChips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 4px;
}

.MistAugmentChip {
	padding: 4px 10px;
	border: 1px solid #8f896b;
	border-radius: 12px;
	background: #f6f0e3;
	color: #4b3c28;
	font: 11px/1.2 Verdana, Arial, Helvetica, sans-serif;
	cursor: pointer;
}

.MistAugmentChip small {
	color: #7a6a54;
}

.MistAugmentChip:hover {
	background: #eee4cc;
}

.MistAugmentChip.is-active {
	border-color: #6b2d14;
	background: #6b2d14;
	color: #ffffff;
}

.MistAugmentChip.is-active small {
	color: #e9d9b8;
}

.MistAugmentChip:focus-visible {
	outline: 2px solid #b47a1d;
	outline-offset: 2px;
}

.MistAugmentFilters {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 9px;
	margin: 8px 0 0;
	padding: 12px;
	border: 1px solid var(--augment-line);
	background: #e9ddc5;
}

.MistAugmentFilters label {
	display: flex;
	flex: 1 1 160px;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	color: #38291c;
	font-size: 11px;
	font-weight: bold;
}

.MistAugmentFilters label > span {
	line-height: 1.25;
}

.MistAugmentFilters input,
.MistAugmentFilters select {
	box-sizing: border-box;
	width: 100%;
	min-height: 36px;
	padding: 7px 9px;
	border: 1px solid #927b56;
	border-radius: 3px;
	background: #fffdf8;
	color: #22170f;
	font: 12px/1.3 Verdana, Arial, Helvetica, sans-serif;
}

.MistAugmentFilters input::placeholder {
	color: #685b4d;
	opacity: 1;
}

.MistAugmentFilters input:focus-visible,
.MistAugmentFilters select:focus-visible,
.MistAugmentClear:focus-visible {
	outline: 2px solid #b47a1d;
	outline-offset: 2px;
}

.MistAugmentFilters .MistAugmentSearch {
	flex-basis: 240px;
}

.MistAugmentClear {
	flex: 0 0 auto;
	min-height: 36px;
	padding: 7px 12px;
	border: 1px solid #70501f;
	border-radius: 3px;
	background: #fffaf0;
	color: #3c2b18;
	font: bold 11px/1.3 Verdana, Arial, Helvetica, sans-serif;
	cursor: pointer;
}

.MistAugmentClear:hover {
	background: #f3e4c7;
}

.MistAugmentResultBar {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 2px 7px;
	color: var(--augment-muted);
	font-size: 11px;
}

.MistAugmentResultBar strong {
	color: #352518;
}

.MistAugmentTableWrap {
	overflow-x: auto;
	border: 1px solid #8f774f;
	background: #fffdf8;
}

.MistAugmentTable {
	width: 100%;
	min-width: 860px;
	border-collapse: collapse;
	color: #302419;
	font-size: 11px;
}

.MistAugmentTable th {
	padding: 8px;
	background: #afab89;
	color: #ffffff;
	font-size: 10px;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.MistAugmentTable td {
	padding: 7px 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	vertical-align: middle;
}

.MistAugmentTable tr:nth-child(odd) td {
	background: #e5e3d7;
}

.MistAugmentTable tr:nth-child(even) td {
	background: #d0cdb4;
}

.MistAugmentTable tr[hidden] {
	display: none;
}

.MistAugmentItemName {
	display: block;
	color: #22170f;
	font-weight: bold;
}

.MistAugmentPool {
	display: block;
	margin-top: 2px;
	color: #665747;
	font-size: 9px;
}

.MistAugmentSetBonus {
	display: block;
	margin-top: 3px;
	color: #6b2d14;
	font-size: 9px;
	font-weight: bold;
}

.MistAugmentBadge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 9px;
	font-size: 9px;
	font-weight: bold;
	line-height: 1.35;
	white-space: nowrap;
}

.MistAugmentBadge--slot {
	border: 1px solid #b69c6d;
	background: #e6d8bb;
	color: #4b3c28;
}

.MistAugmentEffect--focus {
	background: #6d5b8f;
	color: #ffffff;
}

.MistAugmentEffect--guard {
	background: #4f6f8f;
	color: #ffffff;
}

.MistAugmentEffect--resolve {
	background: #4f7a5e;
	color: #ffffff;
}

.MistAugmentEffect--stride {
	background: #3f7d7a;
	color: #ffffff;
}

.MistAugmentEffect--edge {
	background: #9a4f2a;
	color: #ffffff;
}

.MistAugmentEffect--deadeye {
	background: #8a6f3f;
	color: #ffffff;
}

.MistAugmentEffect--arcane {
	background: #5a5f9e;
	color: #ffffff;
}

.MistAugmentTier {
	white-space: nowrap;
}

.MistAugmentCost {
	color: #3c2b18;
	font-size: 10px;
	line-height: 1.45;
	white-space: nowrap;
}

.MistAugmentEffectFilterHint {
	color: #6b2d14;
	font-size: 9px;
	font-weight: bold;
	white-space: nowrap;
}

tr[data-augment-effect-link] td {
	transition: background-color 120ms ease;
}

tr[data-augment-effect-link]:hover td {
	background: #f0e8d2 !important;
}

.MistAugmentEmpty {
	padding: 18px 8px;
	color: #665747;
	font-size: 11px;
	text-align: center;
}

.MistAugmentEffectsTable {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.MistAugmentEffectsTable th {
	padding: 7px 8px;
	background: #8f896b;
	color: #ffffff;
	font-size: 10px;
	text-align: left;
}

.MistAugmentEffectsTable th:nth-child(1) {
	width: 20%;
}

.MistAugmentEffectsTable th:nth-child(2) {
	width: 32%;
}

.MistAugmentEffectsTable th:nth-child(4) {
	width: 12%;
}

.MistAugmentEffectsTable td {
	padding: 7px 8px;
	overflow-wrap: anywhere;
	vertical-align: middle;
}

.MistTableFrame--augmentation {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	table-layout: fixed !important;
}

.MistTableFrame--augmentation > tbody > tr > td,
.MistTableFrame--augmentation .MistTableScrollWrap,
.MistTableFrame--augmentation .MistTableViewport,
.MistTableFrame--augmentation .MistAugmentApp,
.MistTableFrame--augmentation .MistAugmentTableWrap {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.MistTableFrame--augmentation > tbody > tr > td,
.MistTableFrame--augmentation .MistTableViewport {
	overflow-x: hidden !important;
}

@media (max-width: 720px) {
	.MistAugmentStats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.MistAugmentStat {
		box-sizing: border-box;
		min-width: 0;
		padding: 8px;
	}

	.MistAugmentStat strong,
	.MistAugmentStat span {
		display: block;
		margin-left: 0;
	}

	.MistAugmentChips {
		flex-wrap: nowrap;
		max-width: 100%;
		overflow-x: auto;
		padding: 2px 1px 8px;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	.MistAugmentChip {
		flex: 0 0 auto;
		min-height: 44px;
		padding: 8px 12px;
	}

	.MistAugmentFilters {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
		padding: 10px;
	}

	.MistAugmentFilters label,
	.MistAugmentFilters .MistAugmentSearch,
	.MistAugmentClear {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
	}

	.MistAugmentFilters input,
	.MistAugmentFilters select,
	.MistAugmentClear {
		min-height: 44px;
		font-size: 16px;
	}

	.MistAugmentResultBar {
		align-items: flex-start;
		flex-direction: column;
		gap: 3px;
	}

	.MistAugmentEffectsTable,
	.MistAugmentEffectsTable tbody,
	.MistAugmentEffectsTable tr,
	.MistAugmentEffectsTable td {
		display: block;
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	.MistAugmentEffectsTable thead {
		display: none;
	}

	.MistAugmentEffectsTable tr[data-augment-effect-link] {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 7px 10px;
		padding: 10px;
		border-bottom: 1px solid rgba(107, 45, 20, 0.18);
	}

	.MistAugmentEffectsTable tr[data-augment-effect-link] td {
		padding: 0;
		background: transparent !important;
	}

	.MistAugmentEffectsTable tr[data-augment-effect-link] td:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
	}

	.MistAugmentEffectsTable tr[data-augment-effect-link] td:nth-child(4) {
		grid-column: 2;
		grid-row: 1;
		text-align: right;
	}

	.MistAugmentEffectsTable tr[data-augment-effect-link] td:nth-child(2),
	.MistAugmentEffectsTable tr[data-augment-effect-link] td:nth-child(3) {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: 70px minmax(0, 1fr);
		gap: 8px;
	}

	.MistAugmentEffectsTable tr[data-augment-effect-link] td:nth-child(2)::before,
	.MistAugmentEffectsTable tr[data-augment-effect-link] td:nth-child(3)::before,
	.MistAugmentTier::before,
	.MistAugmentCost::before {
		content: attr(data-label);
		color: #58442f;
		font-weight: bold;
	}

	.MistAugmentTableWrap {
		overflow: hidden;
		border: 0;
		background: transparent;
	}

	.MistAugmentTable,
	.MistAugmentTable tbody {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.MistAugmentTable thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.MistAugmentTable tr[data-augment-row] {
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr) auto;
		gap: 6px 9px;
		margin-bottom: 8px;
		padding: 10px;
		border: 1px solid #a7926c;
		background: #e5e3d7;
	}

	.MistAugmentTable tr[data-augment-row]:nth-child(even) {
		background: #d8d4bd;
	}

	.MistAugmentTable tr[data-augment-row][hidden] {
		display: none;
	}

	.MistAugmentTable tr[data-augment-row] td {
		display: block;
		box-sizing: border-box;
		min-width: 0;
		padding: 0;
		border: 0;
		background: transparent !important;
	}

	.MistAugmentPic {
		grid-column: 1;
		grid-row: 1 / 3;
		align-self: center;
	}

	.MistAugmentIdentity {
		grid-column: 2 / -1;
		grid-row: 1;
	}

	.MistAugmentSlot {
		grid-column: 2;
		grid-row: 2;
	}

	.MistAugmentEffect {
		grid-column: 3;
		grid-row: 2;
		text-align: right;
	}

	.MistAugmentTier,
	.MistAugmentCost {
		display: grid !important;
		grid-column: 1 / -1;
		grid-template-columns: 82px minmax(0, 1fr);
		gap: 8px;
		padding-top: 7px !important;
		border-top: 1px solid rgba(107, 45, 20, 0.16) !important;
		white-space: normal;
	}

	.MistAugmentEmpty {
		box-sizing: border-box;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	tr[data-augment-effect-link] td {
		transition: none;
	}
}