:root {
	--bg0: #0f1115;
	--bg1: #171b22;
	--panel: #12202b;
	--panel-2: #162838;
	--border: #274056;
	--text: #e8f1f7;
	--muted: #9cb1c1;
	--accent: #7bb8ff;
	--accent-2: #5e9de8;
	--danger: #ff5d67;
	--shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

body {
	margin: 0;
	font-family:
		system-ui,
		-apple-system,
		'Segoe UI',
		Roboto,
		'Apple Color Emoji',
		'Segoe UI Emoji',
		'Noto Color Emoji',
		sans-serif;
	background:
		radial-gradient(circle at top left, rgba(123, 184, 255, 0.08), transparent 34%),
		radial-gradient(circle at top right, rgba(94, 157, 232, 0.08), transparent 28%),
		linear-gradient(180deg, #0b0f13 0%, #0f1115 100%);
	color: var(--text);
	min-height: 100vh;
}

body.menu-open {
	overflow: hidden;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding: 8px 12px;
	background: linear-gradient(180deg, rgba(13, 24, 33, 0.98), rgba(10, 18, 25, 0.95));
	border-bottom: 1px solid var(--border);
	backdrop-filter: blur(8px);
}

.topbar-title {
	font-size: 14px;
	font-weight: 700;
	color: #d8e8f5;
	letter-spacing: 0.02em;
}

.menu-toggle-btn,
.menu-close-btn {
	width: 34px;
	height: 34px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	font-size: 16px;
	line-height: 1;
}

body.app-loading #menuToggleBtn {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.side-menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.42);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	z-index: 1190;
}

.side-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: min(320px, 86vw);
	height: 100dvh;
	z-index: 1201;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	background: linear-gradient(180deg, rgba(10, 18, 25, 0.98), rgba(12, 21, 30, 0.98));
	border-right: 1px solid var(--border);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
	transform: translateX(-102%);
	transition: transform 0.2s ease;
	overscroll-behavior: contain;
	touch-action: pan-y;
}

body.menu-open .side-menu {
	transform: translateX(0);
}

body.menu-open .side-menu-overlay {
	opacity: 1;
	visibility: visible;
}

.side-menu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 10px 8px 12px;
	border-bottom: 1px solid rgba(123, 184, 255, 0.16);
}

.side-menu-title {
	font-size: 14px;
	font-weight: 700;
	color: #d7e6f3;
}

/* Tabs */
.tabs {
	display: flex;
	overflow-x: auto;
	background:
		linear-gradient(180deg, rgba(13, 24, 33, 0.96), rgba(10, 18, 25, 0.9));
	border-bottom: 1px solid var(--border);
	backdrop-filter: blur(8px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.side-tabs {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	padding: 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: transparent;
	border-bottom: 0;
	box-shadow: none;
}

.side-tabs .tab {
	border-bottom: 0;
	border-left: 2px solid transparent;
	border-radius: 10px;
	padding: 10px 12px;
}

.side-tabs .tab.active {
	border-bottom: 0;
	border-left-color: var(--accent);
	background: linear-gradient(90deg, rgba(123, 184, 255, 0.18), rgba(123, 184, 255, 0.06));
}

.side-tabs .tab:hover {
	background: linear-gradient(90deg, rgba(123, 184, 255, 0.12), rgba(123, 184, 255, 0.03));
}

.side-tab-icon {
	display: inline-flex;
	width: 18px;
	min-width: 18px;
	justify-content: center;
	margin-right: 8px;
	font-size: 13px;
	line-height: 1;
	opacity: 0.92;
}

.side-tab-label {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.bot-meta-panel {
	border-top: 1px solid rgba(123, 184, 255, 0.16);
	padding: 10px;
	display: grid;
	gap: 8px;
	background: rgba(8, 15, 22, 0.45);
}

.bot-meta-title {
	font-size: 12px;
	font-weight: 700;
	color: #a7bfd3;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.bot-meta-list {
	display: grid;
	gap: 5px;
}

.bot-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	color: #c2d6e8;
}

.bot-meta-row strong {
	color: #eaf5ff;
	font-size: 12px;
}

.bot-meta-refresh-btn {
	padding: 7px 10px;
	font-size: 12px;
	border-radius: 8px;
}
.tab {
	padding: 14px 16px;
	cursor: pointer;
	white-space: nowrap;
	color: var(--muted);
	font-weight: 600;
	border-bottom: 2px solid transparent;
	transition:
		color 0.2s ease,
		background 0.2s ease,
		border-color 0.2s ease;
}
.tab.active {
	color: var(--text);
	background:
		linear-gradient(180deg, rgba(123, 184, 255, 0.16), rgba(123, 184, 255, 0.04));
	border-bottom: 2px solid var(--accent);
}

/* Content */
.content {
	padding: 14px;
	padding-bottom: 90px;
	max-width: 860px;
	margin: 0 auto;
}

.boss {
	position: relative;
	background:
		linear-gradient(180deg, rgba(18, 32, 43, 0.98), rgba(14, 26, 36, 0.98));
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 14px;
	margin-bottom: 12px;
	box-shadow:
		0 14px 30px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.02);
	overflow: hidden;
}

.boss::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(123, 184, 255, 0.32), transparent);
	pointer-events: none;
}

.mode-slider {
	display: inline-flex;
	padding: 3px;
	border-radius: 999px;
	background: rgba(9, 18, 24, 0.85);
	border: 1px solid #335166;
}

.mode-slider-btn {
	border: none;
	background: transparent;
	color: var(--muted);
	padding: 7px 14px;
	border-radius: 999px;
	font-weight: 700;
	cursor: pointer;
}

.mode-slider-btn.active {
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
	color: #03222d;
}

.boss-control-btn {
	padding: 10px 14px;
	border: 1px solid #335166;
	border-radius: 10px;
	font-weight: 700;
	cursor: pointer;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		transform 0.15s ease,
		box-shadow 0.2s ease;
}

.boss-control-btn:active {
	transform: translateY(1px);
}

.boss-control-btn-start {
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
	border-color: rgba(123, 184, 255, 0.28);
	color: #03222d;
	box-shadow: 0 6px 14px rgba(94, 157, 232, 0.18);
}

.boss-control-btn-stop {
	background: rgba(255, 93, 103, 0.14);
	border-color: rgba(255, 93, 103, 0.4);
	color: #ffd7da;
	box-shadow: 0 6px 14px rgba(255, 93, 103, 0.1);
}

.schedule-header {
	gap: 10px;
}

.schedule-delay-panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.schedule-delay-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
}

.schedule-delay-time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
}

.schedule-time-select {
	width: 64px;
	min-width: 64px;
	padding-left: 8px;
	padding-right: 8px;
}

.schedule-time-zone {
	color: var(--muted);
	font-size: 12px;
	white-space: nowrap;
}

.boss-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
	margin-bottom: 8px;
	font-size: 15px;
	letter-spacing: 0.01em;
}

.info-card .boss-header {
	justify-content: flex-start;
}

.row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.row label {
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

button {
	padding: 10px 14px;
	border: 1px solid #335166;
	border-radius: 12px;
	background:
		linear-gradient(180deg, rgba(20, 35, 48, 0.96), rgba(11, 21, 29, 0.96));
	color: var(--text);
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.03),
		0 8px 18px rgba(0, 0, 0, 0.16);
	transition:
		transform 0.14s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		background 0.18s ease;
}

button:hover {
	border-color: rgba(123, 184, 255, 0.46);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 10px 22px rgba(0, 0, 0, 0.2);
}

button:active {
	transform: translateY(1px);
}

button:focus-visible,
.tab:focus-visible,
.battle-profile-icon-btn:focus-visible,
.battle-profile-mini-btn:focus-visible,
.players-result-row:focus-visible {
	outline: 2px solid rgba(123, 184, 255, 0.8);
	outline-offset: 1px;
}

button:disabled {
	opacity: 0.58;
	cursor: default;
	box-shadow: none;
}

button[id*='Save'],
button[id='saveBtn'],
button[id='friendsSaveBtn'],
button[id='adminSaveLogRetention'],
.boss-control-btn-start {
	background:
		linear-gradient(180deg, rgba(135, 197, 255, 0.98), rgba(94, 157, 232, 0.98));
	color: #03222d;
	border-color: rgba(123, 184, 255, 0.36);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		0 10px 22px rgba(94, 157, 232, 0.2);
}

button[id*='Cancel'],
button[id='closeBossCombos'],
button[id='friendsRunOnceBtn'] {
	background:
		linear-gradient(180deg, rgba(21, 36, 48, 0.96), rgba(10, 18, 25, 0.96));
}

input[type='text'],
input[type='number'],
input[type='search'],
select,
textarea {
	background:
		linear-gradient(180deg, rgba(10, 18, 25, 0.96), rgba(16, 27, 36, 0.94));
	color: var(--text);
	border: 1px solid #335166;
	border-radius: 12px;
	padding: 9px 10px;
	font-size: 13px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.02),
		0 4px 10px rgba(0, 0, 0, 0.08);
	outline: none;
	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		background 0.18s ease;
}

input[type='text']:focus,
input[type='number']:focus,
input[type='search']:focus,
select:focus,
textarea:focus {
	border-color: rgba(123, 184, 255, 0.58);
	box-shadow:
		0 0 0 3px rgba(123, 184, 255, 0.14),
		0 8px 18px rgba(0, 0, 0, 0.14);
}

input::placeholder,
textarea::placeholder {
	color: rgba(156, 177, 193, 0.72);
}

select {
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--muted) 50%),
		linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-position:
		calc(100% - 18px) calc(50% - 2px),
		calc(100% - 12px) calc(50% - 2px);
	background-size:
		6px 6px,
		6px 6px;
	background-repeat: no-repeat;
	padding-right: 28px;
}

input[type='checkbox'] {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border-radius: 7px;
	border: 1px solid #3a5e77;
	background:
		linear-gradient(180deg, rgba(21, 35, 47, 0.96), rgba(12, 22, 31, 0.96));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 4px 10px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	display: inline-grid;
	place-items: center;
	transition:
		border-color 0.18s ease,
		background 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.12s ease;
}

input[type='checkbox']::after {
	content: '';
	width: 10px;
	height: 6px;
	border-left: 2px solid transparent;
	border-bottom: 2px solid transparent;
	transform: rotate(-45deg) scale(0.7);
	opacity: 0;
	transition:
		opacity 0.14s ease,
		transform 0.14s ease,
		border-color 0.14s ease;
}

input[type='checkbox']:hover {
	border-color: rgba(123, 184, 255, 0.6);
}

input[type='checkbox']:active {
	transform: translateY(1px);
}

input[type='checkbox']:checked {
	border-color: rgba(123, 184, 255, 0.7);
	background:
		linear-gradient(180deg, rgba(123, 184, 255, 0.95), rgba(94, 157, 232, 0.95));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 6px 14px rgba(94, 157, 232, 0.2);
}

input[type='checkbox']:checked::after {
	opacity: 1;
	transform: rotate(-45deg) scale(1);
	border-color: #03222d;
}

input[type='checkbox']:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 3px rgba(123, 184, 255, 0.2),
		0 6px 14px rgba(0, 0, 0, 0.18);
}

input[type='checkbox']:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.manual-refresh-wrap {
	display: inline-flex;
	margin-left: 8px;
}

.manual-refresh-btn {
	--refresh-progress: 100;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid #335166;
	background:
		radial-gradient(
			circle at center,
			rgba(9, 18, 24, 0.96) 58%,
			transparent 60%
		),
		conic-gradient(
			var(--accent) calc(var(--refresh-progress) * 1%),
			rgba(39, 64, 86, 0.45) 0
		);
	color: var(--text);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

.manual-refresh-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.manual-refresh-icon {
	font-size: 18px;
	line-height: 1;
}

#openComboModal {
	padding: 10px 14px;
	border: 1px solid rgba(123, 184, 255, 0.28);
	border-radius: 10px;
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
	color: #03222d;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(94, 157, 232, 0.18);
}

#openComboModal:active {
	transform: translateY(1px);
}

#comboSave {
	padding: 10px 14px;
	border: 1px solid rgba(123, 184, 255, 0.28);
	border-radius: 10px;
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
	color: #03222d;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(94, 157, 232, 0.18);
}

#comboSave:active {
	transform: translateY(1px);
}

#comboCancel,
#closeBossCombos {
	padding: 10px 14px;
	border: 1px solid #335166;
	border-radius: 10px;
	background: rgba(9, 18, 24, 0.85);
	color: var(--text);
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

#comboCancel:active,
#closeBossCombos:active {
	transform: translateY(1px);
}

.common-subblock {
	margin-top: 8px;
	margin-left: 12px;
	padding-left: 12px;
	border-left: 2px solid rgba(123, 184, 255, 0.2);
}

.common-subrow {
	margin-top: 6px;
}

.common-subrow-note span {
	color: var(--muted);
	font-size: 13px;
	text-align: right;
}

.boss-subblock {
	margin-top: 8px;
	margin-left: 12px;
	padding-left: 12px;
	border-left: 2px solid rgba(123, 184, 255, 0.24);
	padding-top: 2px;
	padding-bottom: 2px;
}

.boss-subtitle {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #9bb2c8;
}

.boss-subtitle-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-top: 0;
	margin-bottom: 6px;
}

.boss-subtitle-row label {
	color: #9bb2c8;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.boss-subblock .row:not(.boss-subtitle-row) {
	margin-left: 8px;
	padding-left: 8px;
	border-left: 1px solid rgba(123, 184, 255, 0.16);
}

.boss-subblock.comboSection {
	border-left-color: rgba(111, 168, 220, 0.45);
}

.boss-subblock.finisherSection {
	border-left-color: rgba(255, 217, 102, 0.42);
}

.boss-subblock.keysSection {
	border-left-color: rgba(156, 240, 180, 0.42);
}

.boss-subblock.tattooSection {
	border-left-color: rgba(255, 157, 163, 0.42);
}

.schedule-profiles-head {
	flex-wrap: nowrap;
	align-items: center;
}

.boss.boss-schedule-card {
	overflow: visible;
}

.schedule-profiles-block {
	position: relative;
	overflow: visible;
}

.schedule-help {
	position: relative;
	margin: 0;
	flex-shrink: 0;
	margin-left: auto;
	align-self: flex-start;
}

.schedule-help-summary {
	list-style: none;
	cursor: pointer;
	color: #9bb2c8;
	font-weight: 700;
	border: 1px solid #335166;
	border-radius: 999px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #101820;
}

.schedule-help-summary::-webkit-details-marker {
	display: none;
}

.schedule-help-body {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 20;
	color: #9bb2c8;
	font-size: 12px;
	line-height: 1.45;
	width: min(640px, calc(100vw - 24px));
	max-width: calc(100vw - 24px);
	background: #0f1a24;
	border: 1px solid #335166;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
	max-height: none;
	overflow: visible;
	overscroll-behavior: auto;
}

.schedule-profiles-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
}

.scheduleProfileBtn {
	min-width: 0;
	width: 100%;
	padding: 8px 10px;
	font-size: 12px;
}

.account-card {
	max-width: 520px;
	margin: 0 auto;
	padding: 16px;
}

.account-title {
	margin: 0 0 14px;
}

.account-muted {
	margin-bottom: 14px;
	font-size: 14px;
	color: var(--muted);
}

.account-muted strong {
	color: var(--text);
}

.account-label {
	margin-bottom: 6px;
	font-size: 14px;
}

.account-textarea {
	width: 100%;
	max-width: 100%;
	min-height: 86px;
	background: rgba(9, 18, 24, 0.85);
	color: var(--text);
	border: 1px solid #335166;
	border-radius: 10px;
	padding: 10px;
	font-size: 13px;
	resize: vertical;
}

.account-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
}

.secondary-btn {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #335166;
	border-radius: 10px;
	background: rgba(9, 18, 24, 0.85);
	color: var(--text);
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.secondary-btn:active {
	transform: translateY(1px);
}

.account-help {
	margin-top: 14px;
	padding: 12px;
	border: 1px solid rgba(123, 184, 255, 0.18);
	border-radius: 14px;
	background:
		linear-gradient(180deg, rgba(10, 18, 25, 0.72), rgba(15, 25, 35, 0.72));
}

.account-case {
	margin-top: 12px;
	border: 1px solid rgba(123, 184, 255, 0.18);
	border-radius: 14px;
	background:
		linear-gradient(180deg, rgba(10, 18, 25, 0.72), rgba(15, 25, 35, 0.72));
	overflow: hidden;
}

.account-case-head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border: none;
	border-bottom: 1px solid rgba(123, 184, 255, 0.12);
	background: rgba(9, 18, 24, 0.55);
	color: var(--text);
	padding: 12px;
	cursor: pointer;
}

.account-case:not(.is-open) .account-case-head {
	border-bottom-color: transparent;
}

.account-case-title {
	font-size: 14px;
	font-weight: 700;
	text-align: left;
}

.account-case-arrow {
	font-size: 14px;
	font-weight: 800;
	color: #a9cfff;
}

.account-case-body {
	padding: 12px;
}

.account-help-title {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 8px;
}

.account-step-list {
	margin: 0;
	padding-left: 18px;
	color: var(--muted);
	line-height: 1.45;
	font-size: 13px;
}

.account-step-list li + li {
	margin-top: 4px;
}

.account-help-note {
	margin-top: 10px;
	font-size: 12px;
	color: var(--text);
	opacity: 0.9;
}

.account-promo-history {
	margin-top: 8px;
	display: grid;
	gap: 6px;
}

.account-promo-history-item {
	font-size: 12px;
	color: var(--muted);
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid rgba(123, 184, 255, 0.14);
	background: rgba(7, 16, 23, 0.36);
	line-height: 1.4;
}

.account-payment-list {
	margin-top: 10px;
	display: grid;
	gap: 8px;
}

.account-payment-plan {
	padding: 10px;
	border-radius: 12px;
	border: 1px solid rgba(123, 184, 255, 0.18);
	background: rgba(9, 18, 24, 0.5);
}

.account-payment-plan-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 8px;
}

.account-payment-plan-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--text);
}

.account-payment-plan-sub {
	font-size: 12px;
	color: var(--muted);
	margin-top: 2px;
}

.account-payment-price-wrap {
	text-align: right;
}

.account-payment-price-old {
	font-size: 11px;
	color: #ffb5bb;
	text-decoration: line-through;
}

.account-payment-price {
	font-size: 16px;
	font-weight: 800;
	color: #d7ecff;
}

.account-queue-flow {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.account-queue-item-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.account-queue-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid rgba(123, 184, 255, 0.2);
	background: rgba(7, 16, 23, 0.45);
	min-height: 40px;
}

.account-queue-pos {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	font-size: 11px;
	font-weight: 800;
	border-radius: 999px;
	background: rgba(123, 184, 255, 0.2);
	color: #d7ecff;
}

.account-queue-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
	white-space: nowrap;
}

.account-queue-arrow-btn {
	border: 1px solid rgba(123, 184, 255, 0.28);
	background: rgba(12, 25, 34, 0.9);
	color: #8cc1ff;
	border-radius: 10px;
	min-width: 34px;
	height: 34px;
	padding: 0;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
}

.account-queue-arrow-btn:active {
	transform: translateY(1px);
}

#accountMenuSectionsFlow.account-queue-flow {
	display: grid;
	gap: 8px;
	flex-wrap: nowrap;
}

.account-menu-drag-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	touch-action: none;
}

.account-menu-drag-item {
	width: 100%;
	min-width: 0;
}

.account-menu-drag-handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid rgba(123, 184, 255, 0.24);
	background: rgba(12, 25, 34, 0.8);
	color: #8cc1ff;
	font-size: 14px;
	letter-spacing: 1px;
}

.account-menu-drag-row.is-dragging .account-menu-drag-item {
	opacity: 0.6;
	border-color: rgba(131, 220, 170, 0.45);
}

.account-menu-drag-row.is-drop-target .account-menu-drag-item {
	border-color: rgba(131, 220, 170, 0.55);
	box-shadow: 0 0 0 1px rgba(131, 220, 170, 0.25) inset;
}

.account-menu-drag-row.is-touch-active .account-menu-drag-item {
	border-color: rgba(140, 193, 255, 0.62);
	box-shadow: 0 0 0 1px rgba(140, 193, 255, 0.28) inset;
	background: rgba(16, 34, 48, 0.8);
}

.account-menu-drag-row.is-touch-active .account-menu-drag-handle {
	border-color: rgba(140, 193, 255, 0.55);
	background: rgba(21, 42, 58, 0.95);
	color: #c9e5ff;
}

.damage-stock-card {
	background:
		linear-gradient(180deg, rgba(16, 34, 46, 0.98), rgba(12, 28, 39, 0.98));
}

.damage-stock-list {
	display: grid;
	gap: 10px;
}

.damage-stock-item {
	padding: 10px;
	border: 1px solid rgba(123, 184, 255, 0.12);
	border-radius: 12px;
	background: rgba(8, 17, 24, 0.38);
}

.damage-stock-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.damage-stock-weapon {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.damage-stock-name {
	font-weight: 700;
	color: var(--text);
}

.damage-stock-meta {
	margin-top: 3px;
	font-size: 12px;
	color: var(--muted);
}

.damage-stock-values {
	display: grid;
	gap: 6px;
	min-width: 130px;
}

.damage-stock-value {
	padding: 8px 10px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.04);
	text-align: right;
}

.damage-stock-value span {
	display: block;
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.damage-stock-value strong {
	display: block;
	margin-top: 3px;
	font-size: 15px;
	color: var(--text);
}

.damage-stock-value-accent {
	background: linear-gradient(180deg, rgba(123, 184, 255, 0.14), rgba(94, 157, 232, 0.08));
	border-color: rgba(123, 184, 255, 0.22);
}

.damage-stock-boost {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	flex-wrap: wrap;
}

.damage-stock-boost-label {
	min-width: auto;
	color: var(--muted);
	font-size: 13px;
}

.damage-boost-percent {
	width: 110px;
	flex: 0 0 auto;
}

.damage-boost-suffix {
	color: var(--muted);
	font-size: 12px;
}

.damage-stock-total {
	margin-top: 12px;
	padding: 12px;
	border-radius: 12px;
	border: 1px solid rgba(123, 184, 255, 0.14);
	background: rgba(7, 16, 23, 0.5);
}

.damage-stock-total-label {
	font-size: 12px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 8px;
}

.damage-stock-total-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.damage-stock-total-box {
	padding: 10px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.04);
}

.damage-stock-total-box strong {
	display: block;
	margin-top: 4px;
	font-size: 16px;
}

.damage-stock-total-box span {
	display: block;
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.damage-stock-total-box-accent {
	background:
		linear-gradient(180deg, rgba(123, 184, 255, 0.14), rgba(94, 157, 232, 0.08));
	border-color: rgba(123, 184, 255, 0.22);
}

.damage-stock-note {
	margin-top: 8px;
	font-size: 12px;
	color: var(--muted);
}

.combo-dots {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.combo-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	padding: 3px 6px;
	border-radius: 999px;
	border: 1px solid rgba(123, 184, 255, 0.16);
	background: rgba(8, 17, 24, 0.36);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.02),
		0 4px 10px rgba(0, 0, 0, 0.12);
}

.combo-badge-count {
	margin-left: 5px;
	font-size: 12px;
	font-weight: 700;
	color: var(--text);
}

.common-subblock,
.account-help,
.damage-stock-item,
.damage-stock-total {
	backdrop-filter: blur(6px);
}

body > div[style*='position:fixed'][style*='z-index:999'] {
	backdrop-filter: blur(8px);
}

body > div[style*='position:fixed'][style*='z-index:999'] > div {
	border: 1px solid rgba(123, 184, 255, 0.16) !important;
	border-radius: 18px !important;
	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body > div[style*='position:fixed'][style*='z-index:999'] h3 {
	margin: 0 0 4px;
	font-size: 18px;
	letter-spacing: 0.01em;
}

@media (max-width: 720px) {
	.content {
		padding: 12px;
		padding-bottom: 84px;
	}

	.boss {
		padding: 12px;
		border-radius: 14px;
	}

	.row {
		gap: 8px;
	}

	.schedule-profiles-head {
		flex-direction: row;
		align-items: center;
	}

	.schedule-profiles-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.schedule-help-body {
		position: fixed;
		left: 12px;
		right: 12px;
		top: max(72px, env(safe-area-inset-top));
		width: auto;
		max-width: none;
		max-height: calc(100vh - 92px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	button {
		padding: 10px 12px;
	}

	.damage-stock-top {
		flex-direction: column;
		align-items: stretch;
	}

	.damage-stock-values {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		min-width: 0;
	}
}

.damage-stock-total-box span {
	display: block;
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.damage-stock-total-box strong {
	display: block;
	margin-top: 4px;
	font-size: 18px;
	color: var(--text);
}

.damage-stock-total-box-accent {
	background: linear-gradient(180deg, rgba(123, 184, 255, 0.16), rgba(94, 157, 232, 0.1));
	border-color: rgba(123, 184, 255, 0.24);
}

.calc-seg {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
	padding: 2px;
	border-radius: 12px;
	border: 1px solid rgba(123, 184, 255, 0.22);
	background: linear-gradient(180deg, rgba(7, 16, 23, 0.94), rgba(10, 20, 30, 0.94));
	overflow: hidden;
}

.calc-seg-thumb {
	position: absolute;
	top: 2px;
	bottom: 2px;
	width: calc(50% - 4px);
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(123, 184, 255, 0.28), rgba(94, 157, 232, 0.2));
	box-shadow:
		0 8px 20px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transition: left 0.24s ease;
	pointer-events: none;
}

.calc-seg-btn {
	position: relative;
	z-index: 1;
	border: none;
	background: transparent;
	box-shadow: none;
	color: var(--muted);
	font-weight: 700;
	font-size: 13px;
	padding: 10px 12px;
	border-radius: 10px;
}

.calc-seg-btn:hover {
	border: none;
	box-shadow: none;
	color: #d5e8fb;
}

.calc-seg-btn.active {
	color: #f3f9ff;
}

.calc-details {
	border-color: rgba(123, 184, 255, 0.2);
	background:
		linear-gradient(180deg, rgba(16, 30, 41, 0.98), rgba(12, 24, 34, 0.98));
}

.calc-details > summary::-webkit-details-marker {
	display: none;
}

.calc-summary {
	cursor: pointer;
	user-select: none;
	margin-bottom: 0;
	padding: 4px 2px 4px 0;
	justify-content: flex-start;
	gap: 6px;
}

.calc-summary::after {
	content: '▾';
	margin-left: auto;
	color: #9bb2c8;
	font-size: 13px;
	transition: transform 0.2s ease;
}

.calc-details[open] .calc-summary::after {
	transform: rotate(180deg);
}

.calc-subblock {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(123, 184, 255, 0.12);
}

.calc-panel {
	padding: 12px;
	border-radius: 12px;
	border: 1px solid rgba(123, 184, 255, 0.14);
	background: linear-gradient(180deg, rgba(14, 25, 34, 0.78), rgba(10, 20, 28, 0.78));
}

.calc-talents-panel {
	background:
		radial-gradient(circle at 90% 0%, rgba(123, 184, 255, 0.12), transparent 38%),
		linear-gradient(180deg, rgba(14, 25, 34, 0.86), rgba(10, 20, 28, 0.84));
}

.calc-formula-badge {
	display: inline-block;
	width: fit-content;
	padding: 6px 10px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: #ecf9ff;
	background: linear-gradient(180deg, rgba(58, 169, 255, 0.26), rgba(58, 169, 255, 0.12));
	border: 1px solid rgba(126, 210, 255, 0.62);
	box-shadow:
		0 0 10px rgba(116, 212, 255, 0.6),
		0 0 22px rgba(88, 191, 255, 0.32),
		inset 0 0 14px rgba(176, 232, 255, 0.14);
}

.calc-seg-compact {
	max-width: 300px;
}

.calc-seg-compact .calc-seg-btn {
	padding: 8px 10px;
	font-size: 12px;
}

.calc-weapon-line {
	display: grid;
	grid-template-columns: minmax(120px, 1fr) minmax(90px, 120px) 34px;
	gap: 8px;
	align-items: center;
}

.calc-weapon-line-remove {
	padding: 0;
	height: 34px;
	min-height: 34px;
	border-radius: 10px;
	font-size: 20px;
	line-height: 1;
	background: linear-gradient(180deg, rgba(44, 17, 20, 0.9), rgba(33, 12, 14, 0.92));
	border-color: rgba(255, 93, 103, 0.4);
	color: #ffd1d5;
}

.calc-weapon-add-btn {
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 700;
	background: linear-gradient(180deg, rgba(123, 184, 255, 0.2), rgba(94, 157, 232, 0.16));
	border-color: rgba(123, 184, 255, 0.34);
	color: #deefff;
}

.calculators-hero {
	background:
		radial-gradient(circle at 15% 0%, rgba(120, 205, 255, 0.16), transparent 36%),
		radial-gradient(circle at 85% 100%, rgba(126, 255, 189, 0.14), transparent 34%),
		linear-gradient(180deg, rgba(18, 34, 46, 0.98), rgba(13, 24, 34, 0.98));
}

.calc-stat-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
}

.calc-accent-number {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.01em;
	color: #f4fbff;
	text-shadow: 0 0 14px rgba(123, 184, 255, 0.28);
}

.calc-panel .damage-stock-total-box strong {
	font-size: 21px;
	font-weight: 800;
}

.calc-panel input[type='text'],
.calc-panel input[type='number'] {
	font-size: 15px;
	font-weight: 700;
}

.calc-title-icon {
	width: 20px;
	height: 20px;
	object-fit: contain;
	margin-right: 6px;
	vertical-align: -3px;
	filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.2));
}

.calc-inline-icon {
	width: 16px;
	height: 16px;
	object-fit: contain;
	margin-right: 5px;
	vertical-align: -3px;
	filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.2));
}

@media (max-width: 480px) {
	.schedule-header {
		flex-direction: column;
		align-items: stretch;
	}

	.schedule-header .boss-control-btn {
		width: 100%;
	}

	.schedule-delay-panel {
		flex-direction: column;
		align-items: stretch;
	}

	.schedule-delay-time {
		justify-content: flex-start;
	}

	.damage-stock-top {
		flex-direction: column;
	}

	.damage-stock-values {
		width: 100%;
		min-width: 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.damage-stock-total-grid {
		grid-template-columns: 1fr;
	}

	.calc-weapon-line {
		grid-template-columns: 1fr 94px 34px;
	}
}

select,
input,
button {
	font-family: inherit;
}

select,
input[type='number'],
input[type='text'],
input[type='password'] {
	flex: 1;
	background: rgba(9, 18, 24, 0.85);
	color: var(--text);
	border: 1px solid #335166;
	border-radius: 8px;
	padding: 8px 10px;
}

/* Save bar */
.save-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(10, 20, 27, 0.9);
	border-top: 1px solid var(--border);
	padding: 10px 12px;
	backdrop-filter: blur(10px);
}

.save-bar button {
	width: 100%;
	padding: 12px;
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
	color: #03222d;
	border: none;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(94, 157, 232, 0.2);
}

.app {
	max-width: 520px;
	margin: 0 auto;
}

.app-loading-screen {
	min-height: 55vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.app-loading-spinner {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 3px solid rgba(120, 170, 210, 0.25);
	border-top-color: #7ab4e0;
	animation: app-spin 0.9s linear infinite;
}

.app-loading-text {
	color: #9bb6c8;
	font-size: 14px;
}

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

.modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.6);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 1000;
}

.modal-content {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 14px;
	width: 100%;
	max-width: 520px;
	margin: auto 0;
	max-height: calc(100vh - 24px);
	max-height: calc(100dvh - 24px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	box-shadow: var(--shadow);
}

.modal-content h3 {
	margin-top: 0;
	text-align: center;
}

.modal-content label {
	margin-top: 10px;
	display: block;
	font-size: 14px;
	color: var(--muted);
}

.modal-content select,
.modal-content input[type="number"],
.modal-content input[type="text"] {
	width: 100%;
	margin-top: 4px;
	padding: 8px 10px;
	background: rgba(9, 18, 24, 0.85);
	color: var(--text);
	border: 1px solid #335166;
	border-radius: 8px;
}

.modal-content .actions {
	display: flex;
	gap: 8px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.modal-content button {
	flex: 1 1 140px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid #335166;
	cursor: pointer;
	font-weight: 700;
}

.modal-content .actions > button:first-child {
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
	color: #03222d;
}

.modal-content .actions > button:last-child {
	background:
		linear-gradient(180deg, rgba(21, 36, 48, 0.96), rgba(10, 18, 25, 0.96));
	color: var(--text);
}

.boss-reward-progress-modal {
	max-width: 860px;
}

.reward-progress-body {
	max-height: 62vh;
	max-height: 62dvh;
	overflow: auto;
	padding-right: 4px;
	color: #9bb2c8;
}

.reward-progress-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

.reward-progress-divider {
	background: linear-gradient(
		180deg,
		rgba(63, 94, 119, 0.25) 0%,
		rgba(82, 123, 158, 0.7) 50%,
		rgba(63, 94, 119, 0.25) 100%
	);
	border-radius: 999px;
	min-height: 100%;
}

.reward-progress-column {
	min-width: 0;
}

.reward-progress-title {
	font-weight: 700;
	color: #d8e8f6;
	margin-bottom: 8px;
}

.reward-progress-empty {
	font-size: 12px;
	color: #8ea6bc;
	padding: 10px 12px;
	border: 1px dashed rgba(71, 103, 133, 0.55);
	border-radius: 10px;
	background: rgba(12, 23, 31, 0.5);
}

.reward-mode-card {
	border: 1px solid rgba(56, 92, 120, 0.75);
	background: linear-gradient(180deg, rgba(14, 31, 42, 0.86), rgba(10, 21, 30, 0.86));
	border-radius: 12px;
	padding: 10px;
	margin-bottom: 8px;
}

.reward-mode-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.reward-mode-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: #cde2f4;
	min-width: 0;
}

.reward-mode-total {
	font-size: 12px;
	font-weight: 700;
	color: #c7d7e6;
	background: rgba(23, 44, 61, 0.55);
	border: 1px solid rgba(73, 108, 139, 0.5);
	border-radius: 999px;
	padding: 2px 8px;
	white-space: nowrap;
}

.reward-type-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.reward-type-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border-radius: 999px;
	border: 1px solid rgba(60, 94, 122, 0.7);
	background: rgba(14, 30, 40, 0.68);
	color: #c7d7e6;
	font-size: 12px;
}

.reward-type-chip-empty {
	color: #8ba3b8;
	border-style: dashed;
}

.reward-type-chip-text {
	font-variant-numeric: tabular-nums;
}

.reward-bonus-block {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed rgba(67, 98, 126, 0.55);
}

.reward-bonus-title {
	font-size: 11px;
	color: #9fb3c8;
	margin-bottom: 6px;
}

.reward-bonus-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.reward-bonus-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid rgba(82, 123, 158, 0.55);
	background: rgba(19, 36, 50, 0.72);
	color: #cfe2f3;
	font-size: 11px;
}

.reward-progress-value.is-complete {
	color: #7fe09f;
}

.reward-progress-value.is-incomplete {
	color: #ff9a9a;
}

.deleteTask {
	background: none;
	border: none;
	color: var(--danger);
	font-size: 18px;
	cursor: pointer;
}

.editTask {
	background: none;
	border: none;
	color: var(--text);
	font-size: 18px;
	cursor: pointer;
}

.boss-stats {
	display: flex;
	gap: 10px;
	font-size: 12px;
	opacity: 0.92;
	margin-top: 2px;
	color: #c8d8e5;
}

.boss-rewards-done-badge {
	display: inline-flex;
	align-items: center;
	appearance: none;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid rgba(86, 184, 124, 0.7);
	background: rgba(24, 74, 44, 0.45);
	color: #96efb4;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.boss-rewards-missing-badge {
	display: inline-flex;
	align-items: center;
	appearance: none;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid rgba(226, 102, 102, 0.7);
	background: rgba(96, 29, 29, 0.45);
	color: #ffadad;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.boss-away-badge {
	display: inline-flex;
	align-items: center;
	appearance: none;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid rgba(94, 162, 226, 0.7);
	background: rgba(20, 54, 86, 0.45);
	color: #b9e0ff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.modal-content .boss-rewards-done-badge,
.modal-content .boss-rewards-missing-badge {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
}

.combo-dots {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	flex-wrap: wrap;
}

.combo-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 32px;
	min-height: 32px;
	padding: 3px 6px;
	border-radius: 999px;
	border: 1px solid rgba(123, 184, 255, 0.16);
	background: rgba(8, 17, 24, 0.36);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.02),
		0 4px 10px rgba(0, 0, 0, 0.12);
}

.combo-badge-count {
	line-height: 1;
	font-size: 12px;
	font-weight: 700;
	color: var(--text);
}

#battleHitBtn,
#battleSurrenderBtn {
	flex: 1;
	padding: 10px 12px;
	border-radius: 12px;
	font-weight: 700;
	cursor: pointer;
}

#battleHitBtn {
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
	color: #03222d;
}

#battleStartBtn {
	flex: 1;
	padding: 10px 12px;
	border-radius: 12px;
	font-weight: 700;
	cursor: pointer;
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
	color: #03222d;
}

.battle-mini-log {
	margin-top: 10px;
	font-size: 12px;
	color: var(--muted);
	line-height: 1.35;
}

.battle-friends-wrap {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid rgba(123, 184, 255, 0.18);
}

.battle-friends-title {
	font-size: 12px;
	font-weight: 700;
	color: #a7bfd3;
	margin-bottom: 6px;
}

.battle-friends-top {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.battle-friends-details {
	border: 1px solid rgba(123, 184, 255, 0.2);
	border-radius: 10px;
	background: rgba(15, 35, 57, 0.35);
	padding: 6px 8px;
}

.battle-friends-summary {
	cursor: pointer;
	font-size: 12px;
	color: #a7bfd3;
	font-weight: 700;
	outline: none;
}

.battle-friends-list {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.battle-friends-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	column-gap: 8px;
	font-size: 12px;
	color: #d7e6f3;
}

.battle-friends-row-btn {
	width: 100%;
	border: 0;
	background: transparent;
	text-align: left;
	padding: 0;
	cursor: pointer;
}

.battle-friends-row-btn:hover {
	background: rgba(123, 184, 255, 0.08);
	border-radius: 6px;
}

.battle-friends-nick {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.battle-friends-id {
	color: #9bb2c8;
}

.battle-friends-dmg {
	color: #7ee08e;
	font-weight: 700;
}

.battle-friends-empty {
	font-size: 12px;
	color: #9bb2c8;
}

.players-search-hint {
	font-size: 12px;
	color: #aec6db;
	margin-bottom: 8px;
	line-height: 1.45;
}

.players-panel {
	gap: 10px;
}

.players-search-box {
	border: 1px solid rgba(123, 184, 255, 0.2);
	border-radius: 10px;
	background: rgba(12, 29, 45, 0.32);
	padding: 10px;
}

.players-daily-case {
	margin-bottom: 12px;
	border: 1px solid rgba(123, 184, 255, 0.2);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(12, 29, 45, 0.54), rgba(9, 22, 35, 0.52));
	padding: 10px;
}

.players-daily-case summary {
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	color: #d6e9fa;
}

.players-daily-actions {
	margin-top: 8px;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
}

.players-daily-body {
	margin-top: 8px;
	display: grid;
	gap: 8px;
}

.players-daily-totals {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.players-daily-total-box {
	border: 1px solid rgba(123, 184, 255, 0.22);
	border-radius: 8px;
	background: rgba(10, 23, 36, 0.8);
	padding: 9px;
	display: grid;
	gap: 5px;
}

.players-daily-total-box span {
	font-size: 11px;
	color: #9bb2c8;
	text-transform: uppercase;
}

.players-daily-total-box strong {
	font-size: 15px;
	color: #eaf5ff;
}

.players-daily-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	font-size: 11px;
	color: #a7bfd4;
}

.players-daily-meta-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid rgba(123, 184, 255, 0.25);
	background: rgba(12, 34, 54, 0.44);
	color: #c5dbed;
	font-weight: 700;
}

.players-daily-chart-wrap {
	border: 1px solid rgba(123, 184, 255, 0.2);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(11, 21, 31, 0.8), rgba(8, 16, 24, 0.8));
	padding: 8px;
	overflow: hidden;
}

.players-daily-chart {
	width: 100%;
	height: 205px;
	display: block;
}

.players-daily-grid-line {
	stroke: rgba(144, 195, 255, 0.34);
	stroke-width: 1.8;
}

.players-daily-axis-line {
	stroke: rgba(123, 184, 255, 0.55);
	stroke-width: 2.2;
}

.players-daily-axis-text {
	fill: #c2d9ec;
	font-size: 12px;
	font-weight: 700;
}

.players-daily-hour-bar {
	opacity: 0.92;
	transition: opacity 0.12s ease, filter 0.12s ease;
	pointer-events: none;
}

.players-daily-hour-bar--yesterday {
	fill: #ff6d6d;
}

.players-daily-hour-bar--today {
	fill: #5ae088;
}

.players-daily-hour-hit {
	fill: rgba(0, 0, 0, 0.001);
	cursor: pointer;
	pointer-events: all;
}

.players-daily-hour-bar.is-active {
	opacity: 1;
	filter: brightness(1.15);
}

.players-daily-hour-hit.is-active {
	fill: rgba(123, 184, 255, 0.09);
}

.players-daily-point-info {
	margin-top: 8px;
	font-size: 12px;
	color: #bdd5e8;
	line-height: 1.35;
}

.players-search-bar {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.players-search-bar input {
	flex: 1 1 220px;
	min-width: 0;
	background: #1c1c1c;
	color: #fff;
	border: 1px solid #333;
	border-radius: 8px;
	padding: 8px 10px;
}

.players-search-results {
	margin-top: 10px;
	display: grid;
	gap: 7px;
}

.players-result-row {
	justify-content: space-between;
}

.players-result-main {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.players-result-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(123, 184, 255, 0.35);
	background: rgba(11, 26, 40, 0.65);
	flex: 0 0 22px;
}

.players-result-avatar--empty {
	display: inline-block;
}

@media (max-width: 560px) {
	.players-daily-chart {
		height: 240px;
	}

	.players-daily-total-box strong {
		font-size: 16px;
	}

	.players-daily-meta {
		font-size: 12px;
	}
}

@media (max-width: 720px) {
	.reward-progress-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.reward-progress-divider {
		width: 100%;
		height: 1px;
		min-height: 1px;
	}

	.reward-mode-card {
		padding: 9px;
	}
}

.trader-case {
	margin-top: 8px;
	border: 1px solid rgba(123, 184, 255, 0.22);
	border-radius: 12px;
	background: rgba(12, 29, 45, 0.45);
	padding: 8px;
}

.trader-case summary {
	cursor: pointer;
	font-weight: 700;
	color: #d7e6f3;
	font-size: 14px;
}

.trader-case-body {
	margin-top: 8px;
	display: grid;
	gap: 8px;
}

.trader-row {
	display: flex;
	gap: 8px;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: 12px;
	color: #d7e6f3;
}

.trader-row img {
	width: 14px;
	height: 14px;
	object-fit: contain;
	vertical-align: -2px;
}

.trader-progress-wrap {
	display: grid;
	gap: 4px;
}

.trader-progress-text {
	font-size: 12px;
	color: #9bb2c8;
}

.trader-progress {
	height: 10px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(9, 18, 24, 0.9);
	border: 1px solid rgba(123, 184, 255, 0.22);
}

.trader-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #5e9de8 0%, #7bb8ff 100%);
}

.trader-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.trader-open-result {
	margin-top: 4px;
	border-top: 1px dashed rgba(123, 184, 255, 0.22);
	padding-top: 8px;
}

.trader-main-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	margin-bottom: 6px;
	border: 1px solid rgba(123, 184, 255, 0.22);
	border-radius: 8px;
	background: rgba(12, 29, 45, 0.42);
}

.trader-main-item img {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	object-fit: cover;
	background: rgba(9, 18, 24, 0.8);
}

.trader-main-item-title {
	font-size: 12px;
	color: #d7e6f3;
}

.achievements-hero {
	display: grid;
	gap: 10px;
}

.achievements-title-icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
	vertical-align: -3px;
	margin-right: 6px;
}

.achievements-subtitle {
	font-size: 13px;
	color: #9bb2c8;
}

.achievement-groups {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.achievement-group-btn {
	padding: 7px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.achievement-group-btn.active {
	background: linear-gradient(180deg, rgba(135, 197, 255, 0.98), rgba(94, 157, 232, 0.98));
	color: #03222d;
	border-color: rgba(123, 184, 255, 0.36);
}

.achievements-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px;
}

.achievement-reward-progress-wrap {
	border: 1px solid rgba(255, 214, 110, 0.3);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(63, 47, 13, 0.35), rgba(28, 23, 8, 0.35));
	padding: 8px;
	display: grid;
	gap: 6px;
}

.achievement-reward-progress-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 12px;
	color: #e9d7a0;
}

.achievement-reward-progress-head strong {
	font-size: 13px;
	color: #ffe8a6;
}

.achievement-reward-progress {
	height: 12px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(20, 16, 8, 0.9);
	border: 1px solid rgba(255, 214, 110, 0.28);
}

.achievement-reward-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #d39b2e 0%, #f3c35a 40%, #f9de8c 100%);
}

.achievements-overview-card {
	border: 1px solid rgba(123, 184, 255, 0.22);
	border-radius: 10px;
	padding: 8px;
	background: rgba(12, 29, 45, 0.42);
	display: grid;
	gap: 4px;
}

.achievements-overview-card span {
	font-size: 12px;
	color: #9bb2c8;
}

.achievements-overview-card strong {
	font-size: 15px;
	color: #eaf5ff;
}

.achievement-global-progress {
	height: 10px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(9, 18, 24, 0.9);
	border: 1px solid rgba(123, 184, 255, 0.22);
}

.achievement-global-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #5e9de8 0%, #7bb8ff 100%);
}

.achievements-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 12px;
	color: #9bb2c8;
}

.achievements-meta-row button {
	padding: 7px 10px;
	font-size: 12px;
	border-radius: 8px;
}

.achievement-category {
	margin-top: 10px;
	border: 1px solid rgba(123, 184, 255, 0.22);
	border-radius: 12px;
	background: rgba(12, 29, 45, 0.38);
	padding: 10px;
}

.achievement-category-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.achievement-category-title {
	font-size: 14px;
	font-weight: 700;
	color: #dbeaf6;
}

.achievement-category-count {
	font-size: 12px;
	color: #9bb2c8;
}

.achievement-category-progress {
	margin-top: 8px;
	height: 8px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(9, 18, 24, 0.9);
	border: 1px solid rgba(123, 184, 255, 0.22);
}

.achievement-category-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, rgba(110, 190, 120, 0.95), rgba(74, 162, 255, 0.95));
}

.achievement-grid {
	margin-top: 10px;
	display: grid;
	gap: 8px;
}

.achievement-grid-tracks {
	gap: 10px;
}

.achievement-track {
	border: 1px solid rgba(123, 184, 255, 0.2);
	border-radius: 10px;
	background: rgba(8, 20, 30, 0.42);
	padding: 8px;
	display: grid;
	gap: 8px;
}

.achievement-track-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.achievement-track-title {
	font-size: 12px;
	font-weight: 700;
	color: #d7e6f3;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.achievement-track-meta {
	font-size: 12px;
	color: #9bb2c8;
}

.achievement-track-actions {
	display: flex;
	justify-content: flex-end;
}

.achievement-track-toggle-btn {
	padding: 6px 10px;
	font-size: 12px;
	border-radius: 8px;
}

.achievement-card {
	border: 1px solid rgba(123, 184, 255, 0.2);
	border-radius: 10px;
	padding: 8px;
	background: rgba(8, 20, 30, 0.6);
	display: grid;
	gap: 8px;
}

.achievement-card.is-unlocked {
	border-color: rgba(110, 190, 120, 0.36);
	background: linear-gradient(180deg, rgba(13, 36, 27, 0.5), rgba(8, 20, 30, 0.6));
}

.achievement-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.achievement-card-main {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 180px;
	flex: 1 1 auto;
}

.achievement-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	object-fit: cover;
	border: 1px solid rgba(123, 184, 255, 0.24);
	background: rgba(9, 18, 24, 0.8);
}

.achievement-text {
	min-width: 0;
}

.achievement-title {
	font-size: 13px;
	font-weight: 700;
	color: #e3f0fb;
	line-height: 1.25;
}

.achievement-name {
	font-size: 12px;
	color: #9bb2c8;
}

.achievement-meta {
	display: grid;
	justify-items: end;
	gap: 4px;
}

.achievement-reward {
	font-size: 12px;
	color: #ffd978;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.achievement-reward-icon {
	width: 14px;
	height: 14px;
	object-fit: contain;
	vertical-align: middle;
}

.achievement-status {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 999px;
	border: 1px solid transparent;
}

.achievement-status.is-done {
	color: #c6f2d6;
	border-color: rgba(110, 190, 120, 0.4);
	background: rgba(43, 112, 71, 0.3);
}

.achievement-status.is-pending {
	color: #d4e6f4;
	border-color: rgba(123, 184, 255, 0.28);
	background: rgba(28, 62, 92, 0.32);
}

.achievement-progress-row {
	display: grid;
	gap: 4px;
}

.achievement-progress-bar {
	height: 8px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(9, 18, 24, 0.9);
	border: 1px solid rgba(123, 184, 255, 0.22);
}

.achievement-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #5e9de8 0%, #7bb8ff 100%);
}

.achievement-card.is-unlocked .achievement-progress-fill {
	background: linear-gradient(90deg, rgba(110, 190, 120, 0.95), rgba(74, 162, 255, 0.95));
}

.achievement-progress-text {
	font-size: 11px;
	color: #9bb2c8;
}

.trader-main-item-meta {
	font-size: 10px;
	color: #9bb2c8;
}

.trader-subtitle {
	font-size: 12px;
	font-weight: 700;
	color: #c6dbef;
	margin-bottom: 6px;
}

.trader-reward-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #d7e6f3;
	padding: 3px 0;
}

.trader-reward-extra {
	font-size: 10px;
	color: #9bb2c8;
	margin: -1px 0 4px 20px;
}

.trader-reward-left {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.trader-reward-left img {
	width: 14px;
	height: 14px;
	object-fit: contain;
}

.trader-hides-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 8px;
}

.trader-hide-card {
	border: 1px solid rgba(123, 184, 255, 0.2);
	border-radius: 8px;
	background: rgba(11, 26, 40, 0.4);
	padding: 6px;
}

.trader-hide-card img {
	width: 100%;
	height: 72px;
	object-fit: cover;
	border-radius: 6px;
	background: rgba(9, 18, 24, 0.8);
}

.trader-hide-meta {
	margin-top: 4px;
	font-size: 10px;
	color: #9bb2c8;
}

.trader-clothing-card {
	border: 1px solid rgba(123, 184, 255, 0.2);
	border-radius: 8px;
	background: rgba(11, 26, 40, 0.4);
	padding: 8px;
	font-size: 12px;
	color: #d7e6f3;
}

.trader-clothing-card pre {
	margin: 6px 0 0 0;
	max-height: 220px;
	overflow: auto;
	background: rgba(5, 13, 20, 0.55);
	border: 1px solid rgba(123, 184, 255, 0.2);
	border-radius: 8px;
	padding: 8px;
	font-size: 10px;
	line-height: 1.3;
	white-space: pre-wrap;
	word-break: break-word;
}

.trader-baul-rect {
	border: 1px solid rgba(123, 184, 255, 0.22);
	border-radius: 12px;
	background: rgba(11, 26, 40, 0.45);
	padding: 10px;
	margin-top: 10px;
}

.trader-baul-rect-title {
	font-size: 12px;
	font-weight: 700;
	color: #d7e6f3;
	margin-bottom: 8px;
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.trader-baul-rect-title span {
	font-size: 11px;
	font-weight: 500;
	color: #9bb2c8;
}

.trader-baul-rect-body {
	display: grid;
	grid-template-columns: 112.5px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}

.trader-baul-preview-wrap {
	width: 112.5px;
	min-width: 112.5px;
	max-width: 112.5px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.trader-baul-preview {
	border: 1px solid rgba(123, 184, 255, 0.2);
	border-radius: 8px;
	background: rgba(6, 14, 22, 0.7);
	width: 112.5px;
	min-width: 112.5px;
	max-width: 112.5px;
	height: 112.5px;
	min-height: 112.5px;
	max-height: 112.5px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	overflow: hidden;
}

.trader-baul-preview img {
	width: 112.5px;
	height: 112.5px;
	object-fit: contain;
	border-radius: 6px;
	flex: 0 0 112.5px;
}

.trader-baul-preview-title {
	font-size: 10px;
	line-height: 1.25;
	color: #a9c1d9;
	text-align: center;
	word-break: break-word;
}

.trader-baul-no-reward {
	font-size: 12px;
	color: #9bb2c8;
	text-align: center;
}

.trader-baul-rewards {
	flex: 1 1 auto;
	border: 1px solid rgba(123, 184, 255, 0.16);
	border-radius: 8px;
	background: rgba(7, 17, 26, 0.4);
	padding: 6px 8px;
}

.trader-baul-reward-flow {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.trader-baul-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 7px;
	border-radius: 999px;
	border: 1px solid rgba(123, 184, 255, 0.18);
	background: rgba(14, 28, 44, 0.52);
	font-size: 10px;
	color: #d7e6f3;
}

.trader-baul-chip img {
	width: 14px;
	height: 14px;
	object-fit: contain;
	flex: 0 0 auto;
}

.trader-baul-chip-label {
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #b9cde2;
}

.trader-baul-empty {
	font-size: 12px;
	color: #9bb2c8;
}

@media (max-width: 700px) {
	.trader-baul-rect-body {
		grid-template-columns: 112.5px minmax(0, 1fr);
		gap: 8px;
	}
	.trader-baul-chip {
		font-size: 9px;
		padding: 3px 6px;
	}
	.trader-baul-chip-label {
		max-width: 90px;
	}
}

.battle-profile-modal-content {
	max-width: 560px;
	width: min(560px, calc(100vw - 12px));
	overflow-x: hidden;
}

.battle-profile-body {
	margin-top: 10px;
	max-height: 70vh;
	overflow: auto;
	overflow-x: hidden;
}

.battle-profile-head {
	display: grid;
	gap: 8px;
	margin-bottom: 10px;
}

.battle-profile-topline {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: auto;
	max-width: 100%;
}

.battle-profile-avatar-wrap {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 72px;
	flex: 0 0 72px;
}

.battle-profile-avatar {
	width: 64px;
	height: 64px;
	border-radius: 10px;
	object-fit: cover;
	border: 1px solid rgba(123, 184, 255, 0.35);
	background: rgba(11, 26, 40, 0.65);
	justify-self: center;
}

.battle-profile-mini-ach-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
}

.battle-profile-mini-ach-list--inline {
	margin-top: 2px;
	max-width: 420px;
}

.battle-profile-side-ach {
	display: flex;
	align-items: flex-start;
	flex: 0 0 auto;
	width: max-content;
	max-width: none;
}

.battle-profile-mini-ach-list--side {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: fit-content;
	max-width: 100%;
}

.battle-profile-mini-ach {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid rgba(123, 184, 255, 0.22);
	background: rgba(12, 29, 45, 0.5);
	font-size: 12px;
	color: #d7e6f3;
	min-width: 0;
	max-width: none;
	overflow: visible;
	white-space: nowrap;
}

.battle-profile-mini-ach img {
	width: 14px;
	height: 14px;
	object-fit: contain;
}

.battle-profile-mini-ach span {
	font-size: 12px;
	white-space: nowrap;
}

@media (max-width: 520px) {
	.battle-profile-topline {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 8px;
		align-items: start;
	}

	.battle-profile-avatar-wrap {
		width: 64px;
		flex: 0 0 64px;
		justify-content: flex-start;
	}

	.battle-profile-side-ach {
		width: auto;
		max-width: 100%;
		min-width: 0;
	}

	.battle-profile-mini-ach-list--side {
		width: fit-content;
		max-width: 100%;
	}

	.battle-profile-mini-ach {
		font-size: 11px;
		padding: 3px 7px;
	}

	.battle-profile-mini-ach span {
		font-size: 11px;
	}
}

.battle-profile-main {
	display: grid;
	gap: 6px;
	font-size: 13px;
	color: #d7e6f3;
	min-width: 0;
}

.battle-profile-stat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.battle-profile-status {
	font-size: 11px;
	color: #9bb2c8;
	max-width: 560px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.battle-profile-actions-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 6px;
}

.battle-profile-action-btn {
	flex: 0 1 auto;
	min-width: 148px;
	max-width: 100%;
	border: 1px solid rgba(123, 184, 255, 0.35);
	background: rgba(19, 44, 70, 0.75);
	color: #d7e6f3;
	border-radius: 8px;
	padding: 8px 8px;
	min-height: 40px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	white-space: normal;
	word-break: break-word;
	transition: transform 0.14s ease, filter 0.18s ease, background 0.18s ease;
}

.battle-profile-action-btn:hover {
	background: rgba(36, 71, 107, 0.8);
	filter: brightness(1.05);
}

.battle-profile-action-btn:active {
	transform: translateY(1px);
}

.battle-profile-action-btn--friend {
	background: linear-gradient(180deg, rgba(35, 96, 152, 0.8), rgba(24, 70, 112, 0.8));
}

.battle-profile-action-btn--white {
	background: linear-gradient(180deg, rgba(65, 89, 110, 0.86), rgba(45, 63, 80, 0.86));
}

.battle-profile-action-btn--black {
	background: linear-gradient(180deg, rgba(73, 42, 60, 0.86), rgba(53, 29, 44, 0.86));
	border-color: rgba(255, 132, 171, 0.3);
}

.battle-profile-section {
	margin-top: 8px;
	border: 1px solid rgba(123, 184, 255, 0.2);
	border-radius: 10px;
	padding: 8px;
	background: rgba(11, 26, 40, 0.45);
}

.battle-profile-section summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 13px;
	color: #b9cce0;
}

.battle-profile-ach-list {
	margin-top: 8px;
	display: grid;
	gap: 6px;
}

.battle-profile-ach-row {
	display: grid;
	grid-template-columns: minmax(120px, 220px) minmax(0, 1fr);
	gap: 8px;
	font-size: 12px;
	color: #d7e6f3;
}

.battle-combo-table {
	margin-top: 8px;
	display: grid;
	grid-template-columns: minmax(108px, 1fr) minmax(78px, auto) minmax(78px, auto) minmax(78px, auto);
	gap: 5px;
	align-items: center;
	width: 100%;
}

.battle-combo-head {
	font-size: 10px;
	font-weight: 700;
	color: #9bb2c8;
	text-transform: uppercase;
}

.battle-combo-boss {
	font-size: 11px;
	color: #d7e6f3;
	padding: 5px 7px;
	border: 1px solid rgba(123, 184, 255, 0.18);
	border-radius: 8px;
	background: rgba(11, 26, 40, 0.35);
}

.battle-combo-cell {
	font-size: 11px;
	color: #d7e6f3;
	text-align: center;
	padding: 5px 6px;
	border: 1px solid rgba(123, 184, 255, 0.22);
	border-radius: 8px;
	background: rgba(15, 35, 57, 0.45);
}

.battle-profile-id-row,
.battle-profile-rep-row {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	max-width: 100%;
}

.battle-profile-rep-icon {
	width: 14px;
	height: 14px;
	object-fit: contain;
}

.battle-profile-rep-emoji {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	font-size: 14px;
	line-height: 1;
}

.battle-profile-rep-label {
	font-size: 12px;
	color: #9bb2c8;
}

.battle-profile-rep-pos {
	color: #82e09c;
}

.battle-profile-rep-neg {
	color: #ff6b6b;
}

.battle-profile-copy-btn {
	width: 30px !important;
	min-width: 30px !important;
	max-width: 30px !important;
	height: 30px !important;
	flex: 0 0 30px !important;
	border: 1px solid rgba(123, 184, 255, 0.35);
	border-radius: 8px;
	background: rgba(15, 35, 57, 0.55);
	color: #d7e6f3;
	font-size: 13px;
	line-height: 1;
	padding: 0 !important;
	cursor: pointer;
	opacity: 0.95;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.battle-profile-copy-btn:hover {
	opacity: 1;
	color: #eaf5ff;
	background: rgba(36, 71, 107, 0.8);
}

.battle-profile-mini-btn {
	width: 30px !important;
	min-width: 30px !important;
	max-width: 30px !important;
	height: 30px !important;
	flex: 0 0 30px !important;
	border-radius: 6px;
	border: 1px solid rgba(123, 184, 255, 0.42);
	background: rgba(19, 44, 70, 0.82);
	color: #d7e6f3;
	font-size: 16px;
	line-height: 1;
	padding: 0 !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.battle-profile-mini-btn:hover {
	background: rgba(36, 71, 107, 0.9);
}

.battle-profile-interactions-wrap {
	margin: 8px 0 6px;
	padding: 8px;
	border: 1px solid rgba(123, 184, 255, 0.18);
	border-radius: 10px;
	background: rgba(11, 26, 40, 0.35);
}

.battle-profile-interactions-title {
	font-size: 11px;
	color: #9bb2c8;
	margin-bottom: 5px;
}

.battle-profile-interactions {
	display: grid;
	grid-template-columns: repeat(4, minmax(34px, 1fr));
	gap: 8px;
	width: 100%;
	justify-items: center;
}

.battle-profile-icon-btn {
	width: 34px;
	height: 34px;
	border-radius: 7px;
	border: 1px solid rgba(123, 184, 255, 0.35);
	background: rgba(15, 35, 57, 0.55);
	padding: 5px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.14s ease, background 0.18s ease, border-color 0.18s ease;
	flex: 0 0 34px;
}

.battle-profile-icon-btn img {
	max-width: 20px;
	max-height: 20px;
	object-fit: contain;
}

.battle-profile-action-result {
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid rgba(123, 184, 255, 0.25);
	background: rgba(12, 29, 45, 0.45);
	color: #d7e6f3;
	font-size: 12px;
	line-height: 1.35;
}

.battle-profile-action-result--ok {
	border-color: rgba(52, 211, 153, 0.45);
	background: rgba(11, 44, 33, 0.42);
	color: #bbf7d0;
}

.battle-profile-action-result--warn {
	border-color: rgba(251, 191, 36, 0.45);
	background: rgba(60, 44, 15, 0.42);
	color: #fde68a;
}

.battle-profile-action-result--err {
	border-color: rgba(248, 113, 113, 0.45);
	background: rgba(64, 21, 21, 0.42);
	color: #fecaca;
}

.battle-profile-icon-btn:hover {
	background: rgba(36, 71, 107, 0.8);
	border-color: rgba(123, 184, 255, 0.6);
	transform: translateY(-1px);
}

.battle-profile-pre {
	margin: 8px 0 0 0;
	max-height: 360px;
	overflow: auto;
	background: rgba(5, 13, 20, 0.55);
	border: 1px solid rgba(123, 184, 255, 0.2);
	border-radius: 8px;
	padding: 8px;
	font-size: 11px;
	line-height: 1.35;
	white-space: pre-wrap;
	word-break: break-word;
}

.battle-profile-all-ach-list {
	margin-top: 8px;
	display: grid;
	gap: 6px;
}

.battle-profile-all-ach-row {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 8px;
	align-items: start;
	padding: 6px 8px;
	border: 1px solid rgba(123, 184, 255, 0.18);
	border-radius: 8px;
	background: rgba(12, 29, 45, 0.42);
}

.battle-profile-all-ach-icon {
	width: 16px;
	height: 16px;
	object-fit: contain;
	margin-top: 1px;
}

.battle-profile-all-ach-text {
	min-width: 0;
}

.battle-profile-all-ach-title {
	font-size: 12px;
	color: #d7e6f3;
	line-height: 1.25;
}

.battle-profile-all-ach-id {
	margin-top: 2px;
	font-size: 10px;
	color: #8fa9c0;
	word-break: break-all;
}

@media (max-width: 640px) {
	.battle-profile-modal-content {
		width: calc(100vw - 8px);
		padding: 8px;
	}

	.battle-profile-status {
		max-width: 100%;
		white-space: normal;
		word-break: break-word;
	}

	.battle-profile-actions-grid { justify-content: flex-start; }

	.battle-profile-interactions {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		justify-items: center;
	}

	.battle-combo-table {
		grid-template-columns: minmax(86px, 1fr) repeat(3, minmax(0, 1fr));
	}

	.battle-combo-boss,
	.battle-combo-cell {
		font-size: 10px;
		padding: 4px 5px;
	}
}

@media (max-width: 520px) {
	.battle-profile-head {
		display: grid;
		gap: 8px;
	}

	.battle-profile-avatar-wrap {
		width: 64px;
		flex: 0 0 64px;
		justify-content: flex-start;
	}

	.battle-profile-main {
		width: 100%;
	}

	.battle-profile-action-btn { min-width: 136px; font-size: 12px; }
}

.friends-search-input {
	width: 100%;
	background: #1c1c1c;
	color: #fff;
	border: 1px solid #333;
	border-radius: 8px;
	padding: 9px 10px;
	margin-bottom: 8px;
	font-size: 14px;
}

.friends-list {
	display: grid;
	gap: 6px;
}

.friends-list-row-btn {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	width: 100%;
	border: 1px solid rgba(123, 184, 255, 0.22);
	border-radius: 10px;
	background: rgba(12, 29, 45, 0.45);
	color: #d7e6f3;
	text-align: left;
	padding: 8px 10px;
	cursor: pointer;
}

.friends-list-row-btn:hover {
	background: rgba(26, 53, 81, 0.58);
}

.friends-list-main {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.friends-list-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(123, 184, 255, 0.35);
	background: rgba(11, 26, 40, 0.65);
	flex: 0 0 24px;
}

.friends-list-avatar--empty {
	display: inline-block;
}

.friends-list-name {
	font-size: 13px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.friends-list-id {
	color: #9bb2c8;
	font-size: 12px;
}

.friends-activity-details {
	border: 1px solid rgba(123, 184, 255, 0.2);
	border-radius: 10px;
	background: rgba(12, 29, 45, 0.35);
	padding: 8px;
}

.friends-activity-details summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	color: #c7d9ea;
}

.friends-activity-list {
	font-size: 11px;
	color: #aeb7c2;
	line-height: 1.4;
	margin-top: 8px;
}

.friends-activity-row {
	padding: 4px 0;
	border-bottom: 1px solid #222;
}

.friends-activity-date {
	color: #7f8a96;
}

.friends-empty {
	color: #888;
	font-size: 12px;
}

.my-damage {
	color: #ff5d67;
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

.brigades-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.brigades-subtitle {
	margin-top: 6px;
	font-size: 12px;
	color: #9bb2c8;
	line-height: 1.4;
	word-break: break-word;
}

.brigades-error {
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid rgba(255, 114, 120, 0.45);
	background: rgba(60, 9, 13, 0.45);
	color: #ffadb2;
	font-size: 12px;
}

.brigades-empty {
	color: #8fa0b2;
	font-size: 13px;
}

.brigades-card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.brigades-card-item {
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid rgba(123, 184, 255, 0.2);
	background: rgba(12, 29, 45, 0.35);
	min-width: 0;
}

.brigades-card-item span {
	display: block;
	font-size: 11px;
	color: #8fa9c0;
	margin-bottom: 2px;
}

.brigades-card-item strong {
	font-size: 13px;
	color: #d7e6f3;
	word-break: break-word;
}

.brigades-member-list,
.brigades-log-list,
.brigades-recruit-list {
	display: grid;
	gap: 6px;
}

.brigades-member-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 8px;
	width: 100%;
	border: 1px solid rgba(123, 184, 255, 0.2);
	border-radius: 10px;
	padding: 8px 10px;
	background: rgba(12, 29, 45, 0.42);
	color: #d7e6f3;
	text-align: left;
	cursor: pointer;
}

.brigades-member-main {
	min-width: 0;
	display: grid;
	gap: 1px;
}

.brigades-member-name {
	font-size: 13px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.brigades-member-rank,
.brigades-member-id {
	font-size: 11px;
	color: #92abc2;
}

.brigades-member-dmg {
	font-size: 12px;
	font-weight: 700;
	color: #83e7a0;
}

.brigades-log-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px;
	padding: 7px 8px;
	border-radius: 8px;
	border: 1px solid rgba(123, 184, 255, 0.18);
	background: rgba(12, 29, 45, 0.25);
}

.brigades-log-time {
	font-size: 11px;
	color: #8ea5bb;
	white-space: nowrap;
}

.brigades-log-text {
	font-size: 12px;
	color: #d0deec;
	word-break: break-word;
}

.brigades-recruit-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid rgba(123, 184, 255, 0.2);
	background: rgba(12, 29, 45, 0.35);
}

.brigades-recruit-main {
	min-width: 0;
}

.brigades-recruit-name {
	font-size: 13px;
	font-weight: 700;
	color: #d7e6f3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.brigades-recruit-meta {
	font-size: 11px;
	color: #90a8bf;
}

.brigades-recruit-count {
	font-size: 12px;
	font-weight: 700;
	color: #bcd7ef;
}

@media (max-width: 680px) {
	.brigades-card-grid {
		grid-template-columns: 1fr;
	}

	.brigades-member-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.brigades-member-name {
		white-space: normal;
	}

	.brigades-log-row,
	.brigades-recruit-row {
		grid-template-columns: 1fr;
	}
}