:root {
	--font-sans: "Google Sans", "Product Sans", -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--layer-bg: #eaf2f6;
	--card-bg: rgba(255, 255, 255, 0.9);
	--card-border: rgba(80, 200, 255, 0.15);
	--text-primary: #1e293b;
	--text-secondary: #64748b;
	--text-error: #ef4444;
	--text-success: #10b981;
	--accent: #0087b5;
	--accent-glow: rgba(0, 135, 181, 0.15);
	--accent-hover: #00739b;
	--accent-active: #005f80;
	--accent-text: #ffffff;
	--control-fill: rgba(0, 135, 181, 0.04);
	--control-stroke: rgba(0, 135, 181, 0.1);
	--control-stroke-bottom: rgba(0, 135, 181, 0.15);
	--control-hover: rgba(0, 135, 181, 0.08);
	--control-active: rgba(0, 135, 181, 0.12);
	--dropdown-bg: rgba(255, 255, 255, 0.98);
	--radius-sm: 5px;
	--radius-md: 8px;
	--easing: cubic-bezier(0.16, 1, 0.3, 1);
	--duration-fast: 150ms;
	--duration-normal: 280ms;
	--svg-filter: brightness(0) saturate(100%) invert(18%) sepia(13%)saturate(1100%) hue-rotate(180deg) brightness(94%) contrast(93%);
	--btn-svg-filter: none;
	--code-bg: #f6f8fa;
	--code-header-bg: #eaeef2;
	--code-text: #24292e;
	--code-hover: rgba(0, 0, 0, 0.04);
	--code-keyword: #cf222e;
	--code-cmd: #0550ae;
	--code-param: #953800;
	--code-string: #0a3069;
	--code-variable: #e36209;
	--code-comment: #6e7781;
	--code-punctuation: #57606a;
}
[data-theme="dark"] {
	--layer-bg: #0a0f14;
	--card-bg: rgba(15, 23, 33, 0.85);
	--card-border: rgba(80, 200, 255, 0.12);
	--text-primary: #f1f5f9;
	--text-secondary: #94a3b8;
	--text-error: #f87171;
	--text-success: #34d399;
	--accent: rgb(80, 200, 255);
	--accent-glow: rgba(80, 200, 255, 0.2);
	--accent-hover: #7dd3fc;
	--accent-active: #38bdf8;
	--accent-text: #090d12;
	--control-fill: rgba(80, 200, 255, 0.05);
	--control-stroke: rgba(80, 200, 255, 0.12);
	--control-stroke-bottom: rgba(80, 200, 255, 0.18);
	--control-hover: rgba(80, 200, 255, 0.08);
	--control-active: rgba(80, 200, 255, 0.04);
	--dropdown-bg: rgba(15, 22, 32, 0.98);
	--svg-filter: brightness(0) invert(1);
	--btn-svg-filter: invert(1);
	--code-bg: #0d1117;
	--code-header-bg: #161b22;
	--code-text: #e2e8f0;
	--code-hover: rgba(255, 255, 255, 0.06);
	--code-keyword: #ff7b72;
	--code-cmd: #79c0ff;
	--code-param: #ffab70;
	--code-string: #a5d6ff;
	--code-variable: #ffa657;
	--code-comment: #8b949e;
	--code-punctuation: #c9d1d9;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
* {
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
}
*::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}
body {
	font-family: var(--font-sans);
	background-color: var(--layer-bg);
	color: var(--text-primary);
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	transition: background-color var(--duration-fast), color var(--duration-fast);
}
a {
	text-decoration: none;
	color: inherit;
}
h1 {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 52px;
	line-height: 1.1;
	color: var(--text-primary);
	letter-spacing: -1.5px;
}
h1 em {
	font-style: italic;
	font-weight: 300;
}
h2 {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 30px;
	letter-spacing: -0.8px;
}
h3 {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 18px;
}
h4 {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 15px;
}
.text-secondary {
	color: var(--text-secondary);
}
.accent-text {
	color: var(--accent) !important;
}
.text-success {
	color: var(--text-success) !important;
}
.font-mono {
	font-family: monospace, sans-serif;
}
.hidden {
	display: none !important;
}
.app-icon,.search-icon,.chevron-icon,.theme-toggle-svg,.guild-copy-btn,.inline-copy-icon,.subcard-title img,.board-card-header img,.btn-svg {
	filter: var(--svg-filter);
	transition: filter var(--duration-fast);
}
.ban-icon.active {
	filter: invert(61%) sepia(40%) saturate(1028%) hue-rotate(106deg)brightness(500%) contrast(85%) !important;
}
.ban-icon.banned {
	filter: invert(44%) sepia(91%) saturate(2371%) hue-rotate(338deg)brightness(94%) contrast(100%) !important;
}
.ban-icon.suspended {
	filter: invert(67%) sepia(85%) saturate(543%) hue-rotate(345deg)brightness(101%) contrast(101%) !important;
}
.fluent-btn.primary img,.btn-svg.inverted {
	filter: brightness(0) invert(1) !important;
}
[data-theme="dark"] .fluent-btn.primary img,[data-theme="dark"] .btn-svg.inverted {
	filter: brightness(0) !important;
}
.animate-fade-up {
	animation: fluentFadeIn var(--duration-normal) var(--easing) forwards;
}
@keyframes fluentFadeIn {
	0% {
		opacity: 0;
		transform: translateY(16px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.app-bar {
	background: rgba(var(--layer-bg), 0.7);
	backdrop-filter: blur(30px);
	border-bottom: 1px solid var(--card-border);
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
}
.header-inner {
	max-width: 1300px;
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.brand-group {
	display: flex;
	align-items: center;
	gap: 12px;
}
.portal-badge {
	background: var(--accent);
	color: var(--accent-text);
	font-weight: 800;
	font-size: 10px;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	box-shadow: 0 0 10px var(--accent-glow);
}
.brand-text {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.4px;
}
.accent-dim {
	font-size: 10px;
	opacity: 0.65;
	margin-left: 2px;
}
.nav-links {
	display: flex;
	gap: 6px;
}
.nav-link {
	color: var(--text-secondary);
	font-weight: 500;
	font-size: 13px;
	padding: 8px 16px;
	border-radius: var(--radius-sm);
	transition: all var(--duration-fast);
}
.nav-link:hover {
	color: var(--text-primary);
	background: var(--control-fill);
}
.nav-link.active {
	color: var(--accent);
	background: rgba(80, 200, 255, 0.08);
	font-weight: 600;
}
.app-bar-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}
.theme-toggle-compact {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}
.toggle-switch-track {
	width: 34px;
	height: 18px;
	border-radius: 9px;
	background: var(--control-fill);
	border: 1px solid var(--text-secondary);
	position: relative;
	transition: all var(--duration-fast);
}
.toggle-switch-thumb {
	width: 10px;
	height: 10px;
	background: var(--text-secondary);
	border-radius: 50%;
	position: absolute;
	top: 3px;
	left: 3px;
	transition: all var(--duration-fast) var(--easing);
}
.theme-toggle-compact[aria-checked="true"] .toggle-switch-track {
	background: var(--accent);
	border-color: var(--accent);
}
.theme-toggle-compact[aria-checked="true"] .toggle-switch-thumb {
	background: var(--accent-text);
	left: calc(100% - 13px);
}
.theme-toggle-svg {
	width: 16px;
	height: 16px;
}
.router-container {
	flex-grow: 1;
	width: 100%;
}
.view-section {
	width: 100%;
}
.home-split-hero {
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 24px;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
}
.hero-content-block {
	text-align: left;
}
.pill-label {
	background: var(--control-fill);
	border: 1px solid var(--card-border);
	color: var(--accent);
	font-size: 11px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 30px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	display: inline-block;
	margin-bottom: 24px;
}
.hero-paragraph {
	font-size: 18px;
	line-height: 1.6;
	margin-top: 24px;
	margin-bottom: 36px;
}
.hero-actions {
	display: flex;
	gap: 16px;
}
.hero-showcase-visual {
	background: radial-gradient(circle at 80% 20%,var(--accent-glow) 0%,rgba(0, 0, 0, 0) 60%),var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	padding: 32px;
	position: relative;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
}
.showcase-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}
.showcase-avatar-mock {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 2px solid var(--accent);
	background: var(--control-fill);
}
.showcase-stat-line {
	height: 8px;
	background: var(--control-fill);
	border-radius: 4px;
	margin-bottom: 12px;
}
.showcase-stat-line.accent {
	background: var(--accent);
	width: 70%;
}
.search-command-deck {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	padding: 16px 24px;
	display: grid;
	grid-template-columns: 1fr 200px auto;
	gap: 16px;
	align-items: flex-end;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);
}
@media (max-width: 768px) {
	.search-command-deck {
		grid-template-columns: 1fr !important;
	}
}
.fluent-btn {
	background: var(--control-fill);
	color: var(--text-primary);
	border: 1px solid var(--control-stroke);
	border-bottom: 2px solid var(--control-stroke-bottom);
	padding: 8px 20px;
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--duration-fast) var(--easing);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 40px;
}
.fluent-btn.primary {
	background: var(--accent);
	color: var(--accent-text);
	border: 1px solid transparent;
}
.fluent-btn.primary:hover {
	background: var(--accent-hover);
	box-shadow: 0 4px 12px var(--accent-glow);
}
.fluent-btn.standard:hover {
	background: var(--control-hover);
}
.btn-svg {
	width: 15px;
	height: 15px;
}
.portal-stats-row {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.stat-counter-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	padding: 28px;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
	border-left: 3px solid var(--accent);
}
.counter-num {
	font-size: 42px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 8px;
}
.counter-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
}
.status-warning-bar {
	max-width: 1200px;
	margin: 36px auto;
	padding: 16px 24px;
	background: rgba(80, 200, 255, 0.06);
	border: 1px solid rgba(80, 200, 255, 0.15);
	border-radius: var(--radius-md);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
.warning-left {
	display: flex;
	align-items: center;
	gap: 16px;
}
.warning-ping {
	width: 10px;
	height: 10px;
	background-color: var(--accent);
	border-radius: 50%;
	box-shadow: 0 0 12px var(--accent);
	animation: pulse 1.6s infinite;
}
@keyframes pulse {
	0% {
		transform: scale(0.9);
		opacity: 0.7;
	}
	50% {
		transform: scale(1.15);
		opacity: 1;
	}
	100% {
		transform: scale(0.9);
		opacity: 0.7;
	}
}
.warning-text {
	font-size: 13px;
}
.warning-btn {
	min-height: 32px;
	padding: 6px 16px;
	font-size: 12px;
}
.tools-portfolio-section {
	max-width: 1200px;
	margin: 64px auto;
	padding: 0 24px;
}
.portfolio-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 28px;
}
.portfolio-count {
	font-size: 13px;
}
.tools-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.tool-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.tool-gradient-banner {
	padding: 48px 24px 24px 24px;
	display: flex;
	align-items: flex-end;
}
.tool-gradient-banner h3 {
	font-size: 28px;
	font-style: italic;
	color: #ffffff !important;
}
.gradient-blue {
	background: linear-gradient(135deg, #0284c7, #38bdf8, #0369a1);
}
.gradient-cyan {
	background: linear-gradient(135deg, #0d9488, #2dd4bf);
}
.tool-card-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.tool-card-body h4 {
	font-size: 17px;
	margin-bottom: 10px;
}
.tool-card-body p {
	font-size: 13px;
	line-height: 1.55;
	margin-bottom: 20px;
}
.tool-badge-row {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 28px;
	margin-top: auto;
}
.tool-badge-row .badge {
	font-size: 10px;
	font-weight: 600;
	background: var(--control-fill);
	border: 1px solid var(--card-border);
	padding: 4px 10px;
	border-radius: 4px;
	color: var(--text-secondary);
}
.how-it-works-section {
	max-width: 1200px;
	margin: 80px auto;
	padding: 64px 24px;
	text-align: center;
	border-top: 1px solid var(--card-border);
}
.steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 40px;
}
.step-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	padding: 32px;
	text-align: left;
}
.step-num {
	font-size: 14px;
	font-weight: 700;
	color: var(--accent);
	margin-bottom: 16px;
}
.step-card h3 {
	font-size: 18px;
	margin-bottom: 10px;
}
.step-card p {
	font-size: 13px;
	line-height: 1.55;
}
.app-content {
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.search-command-deck {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	padding: 16px 24px;
	display: flex;
	align-items: flex-end;
	gap: 16px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);
}
.search-command-deck .command-group:first-child {
	width: 280px;
}
.search-command-deck .command-group:nth-child(2) {
	width: 220px;
}
.query-submit-btn {
	height: 38px;
	padding: 0 24px;
	white-space: nowrap;
}
@media (max-width: 768px) {
	.search-command-deck {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 16px;
	}
	.search-command-deck .command-group:first-child,.search-command-deck .command-group:nth-child(2) {
		width: 100%;
	}
	.query-submit-btn {
		width: 100%;
	}
}
select.fluent-input option {
	background-color: var(--dropdown-bg, #0f1620) !important;
	color: var(--text-primary, #f1f5f9) !important;
	padding: 8px 12px;
}
.command-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.compact-label {
	margin-top: 5px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--text-secondary);
}
.search-box {
	position: relative;
	display: flex;
	align-items: center;
}
.search-icon {
	position: absolute;
	left: 12px;
	width: 16px;
	height: 16px;
	opacity: 0.65;
}
.fluent-input {
	width: 100%;
	height: 38px;
	padding: 4px 12px 4px 38px;
	font-family: var(--font-sans);
	font-size: 13px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--control-stroke);
	border-bottom: 2px solid var(--control-stroke-bottom);
	background: var(--control-fill);
	color: var(--text-primary);
	outline: none;
	transition: all var(--duration-fast) var(--easing);
}
.fluent-input:focus {
	border-bottom-color: var(--accent);
	background: var(--control-hover);
	box-shadow: 0 0 10px var(--accent-glow);
}
.query-submit-btn {
	height: 38px;
	padding: 0 24px;
}
.dashboard-unified-layout {
	display: grid;
	grid-template-columns: 1fr 1.08fr 1fr;
	gap: 18px;
	align-items: start !important;
}
.dashboard-column {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.fluent-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	padding: 18px 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}
.dashboard-column > .fluent-card {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
}
.banner-hero {
	background: linear-gradient(135deg,var(--card-bg) 0%,rgba(80, 200, 255, 0.05) 100%);
	border: 1px solid var(--card-border);
	border-top: 0px solid var(--accent);
	padding: 24px;
	position: relative !important;
}
.banner-hero-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}
.avatar-container {
	position: relative;
	width: 90px;
	height: 90px;
	flex-shrink: 0;
}
.avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-md) !important;
	border: 3px solid var(--accent);
	box-shadow: 0 4px 16px var(--accent-glow);
}
.avatar-level-tag {
	position: absolute;
	bottom: -2px;
	right: -2px;
	background: var(--accent);
	color: var(--accent-text);
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 12px;
	border: 2px solid var(--layer-bg);
}
.banner-hero-meta {
	width: 100%;
}
.banner-hero-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.nickname-display {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
}
.ban-badge-wrapper {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	justify-content: center;
}
.ban-icon {
	width: 14px;
	height: 14px;
}
.ban-status-badge {
	font-size: 11px;
	font-weight: 500;
	background: rgba(16, 185, 129, 0.1);
	color: #0bf56d;
	padding: 2px 8px;
	border-radius: 10px;
	border: 1px solid rgba(11, 194, 133, 0.2);
	text-transform: uppercase;
}
.ban-status-badge.banned {
	background: rgba(239, 68, 68, 0.1);
	color: var(--text-error);
	border-color: rgba(239, 68, 68, 0.2);
}
.ban-status-badge.suspended {
	background: rgba(245, 158, 11, 0.1);
	color: #f59e0b;
	border-color: rgba(245, 158, 11, 0.2);
}
.signature-quote {
	font-size: 13px;
	font-style: italic;
	color: var(--text-secondary);
	margin-top: 12px;
	padding: 10px;
	background: var(--control-fill);
	border-radius: var(--radius-sm);
	border-bottom: 1px solid var(--text-secondary);
	text-align: left;
}
.tags-row {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 10px;
}
.tag {
	font-size: 11px;
	background: var(--control-fill);
	color: var(--text-primary);
	padding: 4px 10px;
	border-radius: 5px;
	border: 1px solid var(--card-border);
}
.tag.copyable-uid {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background-color var(--duration-fast);
}
.tag.copyable-uid:hover {
	background: var(--control-hover);
}
.inline-copy-icon {
	width: 12px;
	height: 12px;
	opacity: 0.65;
}
.detail-subcard {
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
}
.subcard-title {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--card-border);
	padding-bottom: 10px;
}
.subcard-title img {
	width: 16px;
	height: 16px;
}
.stats-metric-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.metric-tile {
	background: var(--control-fill);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	transition: transform var(--duration-fast);
}
.metric-tile:hover {
	transform: translateY(-2px);
	border-color: var(--accent);
}
.metric-title {
	font-size: 9px;
	color: var(--text-secondary);
	text-transform: uppercase;
	display: block;
	margin-bottom: 6px;
	letter-spacing: 0.8px;
}
.metric-value {
	font-size: 15px;
	font-weight: 700;
	color: var(--accent);
}
.language-wrapper {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--card-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.wardrobe-visualizer {
	background: radial-gradient(circle,var(--accent-glow) 0%,rgba(0, 0, 0, 0) 80%);
	border-radius: var(--radius-md);
	padding: 16px;
	min-height: 220px;
	display: flex;
	align-items: center;
}
.wardrobe-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	width: 100%;
}
.wardrobe-slot {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	transition: all var(--duration-fast) var(--easing);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
}
.wardrobe-slot:hover {
	transform: translateY(-4px) scale(1.05);
	border-color: var(--accent);
	box-shadow: 0 4px 14px var(--accent-glow);
}
.wardrobe-slot img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.board-card {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.board-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--card-border);
	padding-bottom: 10px;
}
.board-card-header img {
	width: 16px;
	height: 16px;
}
.board-card-header h4 {
	font-size: 11px;
	font-weight: 700;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.8px;
}
.board-card-body {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-grow: 1;
}
.rank-fallback-icon {
	font-size: 26px;
}
.rank-meta {
	flex-grow: 1;
}
.rank-name {
	display: block;
	font-size: 14px;
	font-weight: 700;
}
.rank-points {
	font-size: 11px;
	color: var(--text-secondary);
}
.rank-range-info {
	width: 100%;
	border-top: 1px solid var(--card-border);
	padding-top: 10px;
}
.metrics-comparison-labels {
	display: flex;
	justify-content: space-between;
	width: 100%;
	font-size: 11px;
	color: var(--text-secondary);
}
.rank-badge-display {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	overflow: visible;
}
.rank-badge-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	position: relative;
	filter: none;
}
.glow-badge-bronze .rank-badge-img {
	filter: drop-shadow(0 2px 4px rgba(180, 83, 9, 0.45));
}
.glow-badge-silver .rank-badge-img {
	filter: drop-shadow(0 2px 4px rgba(148, 163, 184, 0.5));
}
.glow-badge-gold .rank-badge-img {
	filter: drop-shadow(0 2px 6px rgba(234, 179, 8, 0.5));
}
.glow-badge-platinum .rank-badge-img {
	filter: drop-shadow(0 2px 6px rgba(56, 189, 248, 0.5));
}
.glow-badge-diamond .rank-badge-img {
	filter: drop-shadow(0 2px 6px rgba(236, 72, 153, 0.55));
}
.glow-badge-heroic .rank-badge-img {
	filter: drop-shadow(0 2px 8px rgba(239, 68, 68, 0.6));
}
.glow-badge-master .rank-badge-img {
	filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.6))drop-shadow(0 0 3px rgba(217, 70, 239, 0.35));
}
.glow-badge-grandmaster .rank-badge-img {
	filter: drop-shadow(0 2px 8px rgba(168, 85, 247, 0.65))drop-shadow(0 0 3px rgba(245, 158, 11, 0.4));
}
.honor-permissions {
	width: 100%;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--card-border);
	text-align: left;
}
.perm-header {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.2px;
	color: var(--text-secondary);
	margin-bottom: 10px;
	text-transform: uppercase;
}
.permission-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 12px;
	background: var(--control-fill);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	margin-bottom: 6px;
	font-size: 12px;
	transition: all var(--duration-fast);
}
.perm-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}
.permission-item.allowed {
	border-color: rgba(16, 185, 129, 0.2);
	background: rgba(16, 185, 129, 0.03);
}
.permission-item.allowed .perm-status-dot {
	background: var(--text-success);
	box-shadow: 0 0 10px var(--text-success);
}
.permission-item.allowed .perm-text {
	color: var(--text-primary);
	font-weight: 600;
}
.permission-item.restricted {
	border-color: rgba(239, 68, 68, 0.2);
	background: rgba(239, 68, 68, 0.03);
	opacity: 0.65;
}
.permission-item.restricted .perm-status-dot {
	background: var(--text-error);
	box-shadow: 0 0 10px var(--text-error);
}
.permission-item.restricted .perm-text {
	color: var(--text-secondary);
	text-decoration: line-through;
}
.guild-card-body {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}
.guild-info-title {
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	color: var(--accent);
}
.guild-info-id-strip {
	display: flex;
	align-items: center;
	gap: 15px;
	background: var(--control-fill);
	border: 1px solid var(--card-border);
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	font-size: 11px;
	font-family: var(--font-mono);
}
.guild-info-id-strip .font-mono {
	margin-left: auto;
}
.guild-copy-btn {
	width: 14px;
	height: 14px;
	cursor: pointer;
	transition: transform var(--duration-fast);
}
.guild-copy-btn:hover {
	transform: scale(1.15);
}
.guild-metrics-row {
	display: flex;
	justify-content: space-between;
	text-align: left;
	border-top: 1px solid var(--card-border);
	padding-top: 10px;
}
.badge-label {
	font-size: 9px;
	display: block;
	margin-bottom: 2px;
}
.badge-val {
	font-size: 13px;
	font-weight: 700;
}
.credit-display {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.huge-metric-val {
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 8px;
}
.huge-metric-val.success {
	color: var(--text-success);
}
.huge-metric-val.warning {
	color: #f59e0b;
}
.huge-metric-val.danger {
	color: var(--text-error);
}
.progress-ring-container {
	position: relative;
	width: 120px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.progress-ring {
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
}
.progress-ring-circle-bg {
	stroke: var(--control-stroke);
}
.progress-ring-circle-fill {
	stroke-linecap: round;
	transition: stroke-dashoffset 0.35s ease-in-out, stroke 0.35s ease-in-out;
}
.progress-ring-circle-fill.success {
	stroke: var(--text-success);
}
.progress-ring-circle-fill.warning {
	stroke: #f59e0b;
}
.progress-ring-circle-fill.danger {
	stroke: var(--text-error);
}
.progress-ring-inner-text {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.captain-card {
	padding: 22px;
}
.captain-metrics-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 12px;
}
.result-card {
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.visualizer-container {
	width: 100%;
	text-align: center;
}
.placeholder-text {
	color: var(--text-secondary);
	font-size: 13px;
	padding: 32px 0;
}
.loader-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
}
.spinner-win11 {
	width: 36px;
	height: 36px;
	border: 3px solid var(--control-stroke);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin 0.85s linear infinite;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
.docs-layout {
	max-width: 1200px;
	margin: 36px auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 36px;
}
.docs-sidebar {
	position: sticky;
	top: 100px;
	height: fit-content;
	padding-right: 20px;
	border-right: 1px solid var(--card-border);
}
.docs-sidebar-header {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin-bottom: 16px;
	letter-spacing: 1.2px;
}
.docs-sidebar-links {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.doc-side-link {
	display: block;
	color: var(--text-secondary);
	font-size: 13px;
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	transition: all var(--duration-fast);
}
.doc-side-link:hover {
	color: var(--text-primary);
	background: var(--control-fill);
}
.doc-side-link.active {
	color: var(--accent);
	font-weight: 600;
	background: rgba(80, 200, 255, 0.06);
}
.docs-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.docs-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	padding: 36px;
}
.pill-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 4px;
	margin-top: 8px;
}
.pill-badge.active {
	background: rgba(16, 185, 129, 0.1);
	color: var(--text-success);
}
.info-alert-box {
	background: rgba(80, 200, 255, 0.05);
	border: 1px solid rgba(80, 200, 255, 0.15);
	padding: 16px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	line-height: 1.6;
}
.code-box {
	background: rgba(15, 23, 33, 0.95);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	padding: 10px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}
.code-box.multi-line {
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	padding: 16px;
}
.code-box pre {
	width: 100%;
	overflow-x: auto;
}
.code-box code {
	font-size: 12px;
	color: var(--accent);
}
.mini-copy-btn {
	min-height: 26px;
	padding: 4px 10px;
	font-size: 11px;
	border-radius: 4px;
}
.params-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 14px;
	text-align: left;
}
.params-table th,.params-table td {
	padding: 12px 14px;
	font-size: 12px;
	border-bottom: 1px solid var(--card-border);
}
.params-table th {
	font-weight: 700;
	color: var(--text-secondary);
}
.endpoint-header {
	display: flex;
	align-items: center;
	gap: 12px;
}
.endpoint-path {
	font-family: monospace;
	font-size: 16px;
	font-weight: 700;
}
.badge.method-get {
	background: var(--accent);
	color: var(--accent-text);
	font-size: 10px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
}
.portal-footer {
	border-top: 1px solid var(--card-border);
	background: var(--card-bg);
	margin-top: auto;
	width: 100%;
}
.footer-bottom {
	max-width: 1200px;
	margin: 0 auto;
	padding: 54px 24px;
	display: grid;
	grid-template-columns: 2fr repeat(2, 1fr);
	gap: 36px;
}
.footer-col h4 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	color: var(--text-secondary);
	margin-bottom: 18px;
	text-transform: uppercase;
}
.footer-link {
	display: block;
	color: var(--text-secondary);
	font-size: 13px;
	margin-bottom: 12px;
	transition: color var(--duration-fast);
}
.footer-link:hover {
	color: var(--accent);
}
.footer-copyright {
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 24px 36px 24px;
	border-top: 1px solid var(--card-border);
	display: flex;
	justify-content: space-between;
	font-size: 11px;
}
.toast {
	background: var(--accent);
	color: var(--accent-text);
	padding: 10px 20px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 600;
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9999;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	animation: fluentFadeIn 150ms var(--easing);
}
.wardrobe-slot {
	position: relative !important;
	cursor: help;
}
.wardrobe-slot-tooltip {
	display: block;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	bottom: 115%;
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	background: var(--dropdown-bg);
	border: 1px solid var(--card-border);
	color: var(--text-primary);
	padding: 12px;
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-size: 11px;
	width: 210px;
	max-width: calc(100vw - 40px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	z-index: 1000;
	text-align: left;
	transition: opacity var(--duration-fast) var(--easing),transform var(--duration-fast) var(--easing);
}
.wardrobe-slot:hover .wardrobe-slot-tooltip,.pet-badge-display:hover .wardrobe-slot-tooltip,.weapon-slot:hover .wardrobe-slot-tooltip,.skill-slot-mini:hover .wardrobe-slot-tooltip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.wardrobe-grid > .wardrobe-slot:nth-child(3n + 1) .wardrobe-slot-tooltip,.weapon-slots-container > .wardrobe-slot:nth-child(3n + 1) .wardrobe-slot-tooltip,.pet-badge-display .wardrobe-slot-tooltip {
	left: 0 !important;
	transform: translateY(6px) !important;
}
.wardrobe-grid > .wardrobe-slot:nth-child(3n + 1):hover .wardrobe-slot-tooltip,.weapon-slots-container > .wardrobe-slot:nth-child(3n + 1):hover .wardrobe-slot-tooltip,.pet-badge-display:hover .wardrobe-slot-tooltip {
	transform: translateY(0) !important;
}
.wardrobe-grid > .wardrobe-slot:nth-child(3n) .wardrobe-slot-tooltip,.weapon-slots-container > .wardrobe-slot:nth-child(3n) .wardrobe-slot-tooltip {
	left: auto !important;
	right: 0 !important;
	transform: translateY(6px) !important;
}
.wardrobe-grid > .wardrobe-slot:nth-child(3n):hover .wardrobe-slot-tooltip,.weapon-slots-container > .wardrobe-slot:nth-child(3n):hover .wardrobe-slot-tooltip {
	transform: translateY(0) !important;
}
@media (max-width: 480px) {
	.wardrobe-slot-tooltip {
		width: 180px;
		font-size: 10px;
		padding: 8px 10px;
	}
}
.tooltip-rare-badge {
	display: inline-block;
	font-size: 9px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 4px;
	margin-bottom: 6px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #ffffff !important;
}
.tooltip-name {
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 4px;
	color: var(--text-primary);
}
.tooltip-desc {
	color: var(--text-secondary);
	font-size: 10px;
	line-height: 1.45;
	margin-bottom: 6px;
}
.tooltip-id {
	font-family: monospace;
	font-size: 9px;
	color: var(--text-secondary);
	opacity: 0.7;
}
.rare-white,.rare-common {
	border-color: rgba(148, 163, 184, 0.3) !important;
}
.rare-white:hover,.rare-common:hover {
	border-color: #94a3b8 !important;
	box-shadow: 0 4px 14px rgba(148, 163, 184, 0.25) !important;
}
.rare-green,.rare-uncommon {
	border-color: rgba(16, 185, 129, 0.3) !important;
}
.rare-green:hover,.rare-uncommon:hover {
	border-color: #10b981 !important;
	box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25) !important;
}
.rare-blue,.rare-rare {
	border-color: rgba(0, 135, 181, 0.3) !important;
}
[data-theme="dark"] .rare-blue,[data-theme="dark"] .rare-rare {
	border-color: rgba(80, 200, 255, 0.3) !important;
}
.rare-blue:hover,.rare-rare:hover {
	border-color: #0087b5 !important;
	box-shadow: 0 4px 14px rgba(0, 135, 181, 0.25) !important;
}
[data-theme="dark"] .rare-blue:hover,[data-theme="dark"] .rare-rare:hover {
	border-color: rgb(80, 200, 255) !important;
	box-shadow: 0 4px 14px rgba(80, 200, 255, 0.25) !important;
}
.rare-common,.rare-white {
	border-color: rgba(163, 163, 163, 0.25) !important;
}
.rare-common:hover,.rare-white:hover {
	border-color: #a3a3a3 !important;
	box-shadow: 0 4px 14px rgba(163, 163, 163, 0.2) !important;
}
.rare-uncommon,.rare-green {
	border-color: rgba(74, 222, 128, 0.3) !important;
}
.rare-uncommon:hover,.rare-green:hover {
	border-color: #4ade80 !important;
	box-shadow: 0 4px 14px rgba(74, 222, 128, 0.25) !important;
}
.rare-rare,.rare-blue {
	border-color: rgba(96, 165, 250, 0.3) !important;
}
.rare-rare:hover,.rare-blue:hover {
	border-color: #60a5fa !important;
	box-shadow: 0 4px 14px rgba(96, 165, 250, 0.25) !important;
}
.rare-epic,.rare-purple {
	border-color: rgba(168, 85, 247, 0.3) !important;
}
.rare-epic:hover,.rare-purple:hover {
	border-color: #a855f7 !important;
	box-shadow: 0 4px 14px rgba(168, 85, 247, 0.25) !important;
}
.rare-epic_plus,.rare-purple_plus {
	border-color: rgba(217, 70, 239, 0.3) !important;
}
.rare-epic_plus:hover,.rare-purple_plus:hover {
	border-color: #d946ef !important;
	box-shadow: 0 4px 14px rgba(217, 70, 239, 0.25) !important;
}
.rare-mythic,.rare-orange {
	border-color: rgba(249, 115, 22, 0.3) !important;
}
.rare-mythic:hover,.rare-orange:hover {
	border-color: #f97316 !important;
	box-shadow: 0 4px 14px rgba(249, 115, 22, 0.25) !important;
}
.rare-mythic_plus,.rare-orange_plus {
	border-color: rgba(239, 68, 68, 0.3) !important;
}
.rare-mythic_plus:hover,.rare-orange_plus:hover {
	border-color: #ef4444 !important;
	box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25) !important;
}
.rare-legendary,.rare-artifact,.rare-red {
	border-color: rgba(220, 38, 38, 0.35) !important;
}
.rare-legendary:hover,.rare-artifact:hover,.rare-red:hover {
	border-color: #dc2626 !important;
	box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
}
.rare-bg-common {
	background: #a3a3a3;
}
.rare-bg-uncommon {
	background: #4ade80;
}
.rare-bg-rare {
	background: #60a5fa;
}
.rare-bg-epic {
	background: #a855f7;
}
.rare-bg-epic_plus {
	background: #d946ef;
}
.rare-bg-mythic {
	background: #f97316;
}
.rare-bg-mythic_plus {
	background: #ef4444;
}
.rare-bg-legendary {
	background: #dc2626;
}
.banner-hero-header {
	flex-direction: row !important;
	justify-content: center;
	flex-wrap: wrap;
}
.hero-pin-img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	vertical-align: middle;
	margin-left: 8px;
	filter: none !important;
}
.weapon-slots-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	width: 100%;
	margin-top: 10px;
}
.pet-badge-display,.weapon-slot {
	position: relative;
}
.pet-badge-display:hover .wardrobe-slot-tooltip,.weapon-slot:hover .wardrobe-slot-tooltip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.hero-pin-img {
	position: absolute !important;
	top: 16px;
	right: 16px;
	width: 24px;
	height: 24px;
	object-fit: contain;
	filter: none !important;
}
.title-showcase-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 56px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	flex-shrink: 0;
}
.title-text-overlay {
	position: absolute;
	width: 100%;
	text-align: center;
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 11px;
	color: #ffffff;
	text-transform: uppercase;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 4px var(--accent);
	padding: 0 12px;
	pointer-events: none;
	box-sizing: border-box;
	z-index: 10;
	margin-bottom: 2px;
}

.title-glow-box {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	border: 1px solid var(--card-border);
	background: var(--control-fill);
	transition: all var(--duration-fast) var(--easing);
	position: relative;
	overflow: hidden;
}
.title-glow-box::after {
	content: "";
	position: absolute;
	top: 0;
	left: -150%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.15) 50%,rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	transition: none;
	animation: title-shimmer 3.5s infinite ease-in-out;
}
@keyframes title-shimmer {
	0% {
		left: -150%;
	}
	40% {
		left: 150%;
	}
	100% {
		left: 150%;
	}
}
.glow-title-great {
	border-color: rgba(239, 68, 68, 0.4) !important;
	background: radial-gradient(circle at 50% 50%,rgba(239, 68, 68, 0.08) 0%,rgba(0, 0, 0, 0) 80%),var(--card-bg);
	box-shadow: 0 0 16px rgba(239, 68, 68, 0.2) !important;
}
.glow-title-great .title-badge-name {
	color: #ef4444 !important;
	text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}
.glow-title-usual {
	border-color: rgba(234, 179, 8, 0.4) !important;
	background: radial-gradient(circle at 50% 50%,rgba(234, 179, 8, 0.08) 0%,rgba(0, 0, 0, 0) 80%),var(--card-bg);
	box-shadow: 0 0 16px rgba(234, 179, 8, 0.2) !important;
}
.glow-title-usual .title-badge-name {
	color: #eab308 !important;
	text-shadow: 0 0 8px rgba(234, 179, 8, 0.4);
}
.glow-title-weak {
	border-color: rgba(129, 140, 248, 0.4) !important;
	background: radial-gradient(circle at 50% 50%,rgba(129, 140, 248, 0.08) 0%,rgba(0, 0, 0, 0) 80%),var(--card-bg);
	box-shadow: 0 0 16px rgba(129, 140, 248, 0.15) !important;
}
.glow-title-weak .title-badge-name {
	color: #818cf8 !important;
	text-shadow: 0 0 8px rgba(129, 140, 248, 0.4);
}
.title-badge-name {
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.8px;
}
.title-badge-desc {
	font-size: 10.5px;
	color: var(--text-secondary);
	line-height: 1.45;
}
.skill-slot-mini {
	width: 44px !important;
	height: 44px !important;
	padding: 10px !important;
	border-radius: var(--radius-sm) !important;
	border: 1px solid var(--card-border);
	background: var(--control-fill);
	cursor: help;
	transition: all var(--duration-fast) var(--easing);
	margin: 0 auto;
}
.skill-slot-mini:hover {
	transform: translateY(-2px);
	border-color: var(--accent);
}
.skill-slot-mini img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.weapon-list-layout {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.weapon-list-row {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px;
	background: radial-gradient(circle at 20% 50%,rgba(80, 200, 255, 0.05) 0%,rgba(0, 0, 0, 0) 80%),var(--control-fill);
	border: none;
	border-radius: var(--radius-md);
}
.weapon-list-details {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}
.weapon-row-name {
	font-weight: 700;
	font-size: 16px;
	color: var(--text-primary);
}
.weapon-row-rarity {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.rare-text-white,.rare-text-common {
	color: #94a3b8;
}
.rare-text-green,.rare-text-uncommon {
	color: #10b981;
}
.rare-text-blue,.rare-text-rare {
	color: var(--accent);
}
.rare-text-purple,.rare-text-epic {
	color: #a855f7;
}
.rare-text-purple_plus,.rare-text-epic_plus {
	color: #d946ef;
}
.rare-text-orange,.rare-text-mythic {
	color: #f97316;
}
.rare-text-orange_plus,.rare-text-mythic_plus {
	color: #ef4444;
}
.rare-text-red,.rare-text-artifact {
	color: #dc2626;
}
.honor-score-glowing-card {
	position: relative;
	overflow: hidden;
}
[data-theme="dark"] .honor-score-glowing-card {
	background: radial-gradient(circle at 10% 100%,rgba(52, 211, 153, 0.14) 0%,rgba(15, 23, 33, 0) 65%),var(--card-bg);
}
[data-theme="light"] .honor-score-glowing-card {
	background: radial-gradient(circle at 10% 100%,rgba(16, 185, 129, 0.08) 0%,rgba(255, 255, 255, 0) 65%),var(--card-bg);
}
.honor-score-layout {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}
.honor-score-row {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	padding: 8px 0;
}
.honor-simple-eligibility {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.simple-perm-item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 500;
}
.simple-perm-item .perm-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	transition: background var(--duration-fast), box-shadow var(--duration-fast);
}
.simple-perm-item.allowed .perm-status-dot {
	background: var(--text-success);
	box-shadow: 0 0 8px var(--text-success);
}
.simple-perm-item.allowed .perm-text {
	color: var(--text-primary);
}
.simple-perm-item.restricted {
	opacity: 0.55;
}
.simple-perm-item.restricted .perm-status-dot {
	background: var(--text-error);
	box-shadow: 0 0 8px var(--text-error);
}
.simple-perm-item.restricted .perm-text {
	color: var(--text-secondary);
	text-decoration: line-through;
}
.honor-footer-text {
	font-size: 13px;
	line-height: 1.55;
	color: var(--text-secondary);
	margin-top: auto;
	text-align: left;
	padding: 0 4px;
}
.rank-badge-display.glow-badge-master,.rank-badge-display.glow-badge-elitemaster,.rank-badge-display.glow-badge-grandmaster {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	position: relative;
	overflow: visible;
}
.rank-badge-display.glow-badge-master::after,.rank-badge-display.glow-badge-elitemaster::after,.rank-badge-display.glow-badge-grandmaster::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 5;
	background: linear-gradient(120deg,rgba(255, 255, 255, 0) 35%,rgba(255, 255, 255, 0.8) 50%,rgba(255, 255, 255, 0) 65%);
	background-size: 300% 100%;
	background-position: 150% 0;
	-webkit-mask-image: var(--badge-url);
	mask-image: var(--badge-url);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	animation: rank-png-sweep-masked 2.5s infinite linear;
}
.rank-badge-display.glow-badge-grandmaster {
	animation: gm-lavender-fire 2.2s ease-in-out infinite !important;
}
.docs-code-container {
	background-color: var(--code-bg) !important;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	margin: 16px 0 24px 0;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	transition: background-color var(--duration-fast);
}
.docs-code-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--code-header-bg);
	padding: 8px 16px;
	border-bottom: 1px solid var(--card-border);
	transition: background-color var(--duration-fast);
}
.docs-code-lang {
	font-family: monospace;
	font-size: 11px;
	font-weight: 700;
	text-transform: lowercase;
	color: var(--text-secondary);
	letter-spacing: 0.5px;
}
.docs-code-copy-btn {
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	border-radius: var(--radius-sm);
	transition: background-color var(--duration-fast);
}
.docs-code-copy-btn:hover {
	background-color: var(--code-hover);
}
.docs-code-copy-icon {
	width: 14px;
	height: 14px;
	filter: var(--svg-filter);
	opacity: 0.75;
	transition: opacity var(--duration-fast), filter var(--duration-fast);
}
.docs-code-copy-btn:hover .docs-code-copy-icon {
	opacity: 1;
}
.docs-code-content {
	padding: 16px;
	margin: 0;
	overflow-x: auto;
}
.docs-code-content code {
	font-family: monospace;
	font-size: 13px;
	line-height: 1.55;
	white-space: pre;
	color: var(--code-text);
	transition: color var(--duration-fast);
}
.code-keyword {
	color: var(--code-keyword) !important;
	font-weight: 600;
}
.code-cmd {
	color: var(--code-cmd) !important;
	font-weight: 600;
}
.code-param {
	color: var(--code-param) !important;
}
.code-string {
	color: var(--code-string) !important;
}
.code-variable {
	color: var(--code-variable) !important;
}
.code-comment {
	color: var(--code-comment) !important;
	font-style: italic;
}
.code-punctuation {
	color: var(--code-punctuation) !important;
}
.docs-code-copy-btn img {
	transition: transform var(--duration-fast) var(--easing),filter var(--duration-fast) var(--easing);
}
.docs-code-copy-btn.copied {
	background-color: rgba(16, 185, 129, 0.12) !important;
	border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
.docs-code-copy-btn.copied img {
	filter: invert(64%) sepia(85%) saturate(347%) hue-rotate(107deg)brightness(97%) contrast(93%) !important;
	transform: scale(1.15);
}
#hero-vip-badge,#captain-vip-badge,.ban-status-badge.prime {
	background: rgba(234, 179, 8, 0.12) !important;
	color: #eab308 !important;
	border-color: rgba(234, 179, 8, 0.35) !important;
	box-shadow: 0 0 12px rgba(234, 179, 8, 0.15) !important;
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
}
#hero-vip-badge::before,#captain-vip-badge::before,.ban-status-badge.prime::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: url("icons/Shine.svg") no-repeat center / contain;
	mask: url("icons/Shine.svg") no-repeat center / contain;
	flex-shrink: 0;
}
#hero-vip-badge.no-prime,#captain-vip-badge.no-prime,.ban-status-badge.no-prime {
	background: rgba(148, 163, 184, 0.08) !important;
	color: #64748b !important;
	border-color: rgba(148, 163, 184, 0.2) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	opacity: 0.65;
}
#hero-vip-badge.no-prime::before,#captain-vip-badge.no-prime::before,.ban-status-badge.no-prime::before {
	opacity: 0.5;
}
.tag.pass-active {
	background: rgba(16, 185, 129, 0.15) !important;
	color: var(--text-success) !important;
	border-color: rgba(16, 185, 129, 0.35) !important;
	font-weight: 700;
}
.spark-card-body {
	display: flex;
	align-items: center;
	gap: 16px;
}
.spark-pyro-avatar {
	position: relative;
	width: 68px;
	height: 68px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle,rgba(249, 115, 22, 0.25) 0%,rgba(0, 0, 0, 0) 70%);
	border-radius: 50%;
}
.spark-pyro-img {
	width: 60px;
	height: 60px;
	object-fit: contain;
	filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.5));
}
.spark-meta {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.spark-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 8px;
}
.spark-badge {
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 10px;
	background: rgba(249, 115, 22, 0.15);
	color: #f97316;
	border: 1px solid rgba(249, 115, 22, 0.3);
}
.spark-pyro-avatar.state-active {
	background: radial-gradient(circle,rgba(249, 115, 22, 0.35) 0%,rgba(0, 0, 0, 0) 70%) !important;
}
.spark-pyro-avatar.state-active .spark-pyro-img {
	filter: drop-shadow(0 0 14px rgba(249, 115, 22, 0.65)) !important;
}
.spark-pyro-avatar.state-dormant {
	background: radial-gradient(circle,rgba(56, 189, 248, 0.35) 0%,rgba(0, 0, 0, 0) 70%) !important;
}
.spark-pyro-avatar.state-dormant .spark-pyro-img {
	filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.65)) !important;
}
.spark-pyro-avatar.state-extinguished {
	background: radial-gradient(circle,rgba(148, 163, 184, 0.35) 0%,rgba(0, 0, 0, 0) 70%) !important;
}
.spark-pyro-avatar.state-extinguished .spark-pyro-img {
	filter: drop-shadow(0 0 14px rgba(148, 163, 184, 0.65)) !important;
}
.spark-badge.state-active {
	background: rgba(249, 115, 22, 0.15) !important;
	color: #f97316 !important;
	border-color: rgba(249, 115, 22, 0.3) !important;
}
.spark-badge.state-dormant {
	background: rgba(56, 189, 248, 0.15) !important;
	color: #38bdf8 !important;
	border-color: rgba(56, 189, 248, 0.3) !important;
}
.spark-badge.state-extinguished {
	background: rgba(148, 163, 184, 0.15) !important;
	color: #94a3b8 !important;
	border-color: rgba(148, 163, 184, 0.3) !important;
}
.tag-pill-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.battle-tag-pill {
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 12px;
	background: rgba(80, 200, 255, 0.08);
	color: var(--accent);
	border: 1px solid rgba(80, 200, 255, 0.2);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.social-tag-pill {
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 12px;
	background: var(--control-fill);
	color: var(--text-secondary);
	border: 1px solid var(--card-border);
}
.ep-history-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}
.ep-season-tile {
	background: var(--control-fill);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	padding: 8px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.ep-season-tile.owned {
	border-color: rgba(16, 185, 129, 0.3);
	background: rgba(16, 185, 129, 0.04);
}
.ep-badge-num {
	font-size: 13px;
	font-weight: 700;
	color: var(--accent);
}
.career-milestone-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.highlight-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--control-fill);
	border: 1px solid var(--card-border);
	padding: 6px 12px;
	border-radius: var(--radius-sm);
	font-size: 11px;
	font-weight: 600;
}
.highlight-pill .highlight-val {
	color: var(--accent);
	font-family: monospace;
	font-weight: 700;
}
.cs-stars-row {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
}
.cs-star-icon {
	width: 13px;
	height: 13px;
	display: inline-block;
	vertical-align: middle;
	background-color: #ffaf02;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	transition: transform var(--duration-fast);
}
.cs-star-icon:hover {
	transform: scale(1.18);
}
.cs-star-icon.star-filled {
	-webkit-mask-image: url("icons/Star%20Fill.svg");
	mask-image: url("icons/Star%20Fill.svg");
	filter: brightness(0) saturate(100%) invert(70%) sepia(90%) saturate(2500%) hue-rotate(352deg) brightness(100%) contrast(100%);
}
.cs-star-icon.star-empty {
	-webkit-mask-image: url("icons/Star.svg");
	mask-image: url("icons/Star.svg");
	opacity: 100%;
	filter: brightness(100) saturate(100%) invert(0%) sepia(100%) saturate(100%) hue-rotate(352deg) brightness(102%) contrast(102%) opacity(0.25);
}
.cs-star-count {
	font-size: 13px;
	font-weight: 700;
	color: #ffb370;
	margin-left: 4px;
	font-family: var(--font-mono);
}
.cs-star-count {
	font-size: 13px;
	font-weight: 700;
	color: #ffc257;
	margin-left: 2px;
	font-family: var(--font-mono);
}
.br-progress-box {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 8px;
	width: 100%;
}
.br-progress-track {
	width: 100%;
	height: 7px;
	background: var(--control-fill);
	border: 0px solid var(--control-stroke);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}
.br-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #0087b5, #38bdf8);
	border-radius: 4px;
	transition: width 0.4s var(--easing);
	box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}
[data-theme="dark"] .br-progress-fill {
	background: linear-gradient(90deg, #ff960c, #f8f538);
}
.br-progress-text {
	font-size: 10px;
	color: var(--text-secondary);
	font-weight: 600;
	letter-spacing: 0.3px;
}
.tools-grid-4 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 24px;
}
@media (max-width: 768px) {
	.tools-grid-4 {
		grid-template-columns: 1fr;
	}
}
.showcase-row-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--control-fill);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	padding: 8px 12px;
	margin-bottom: 8px;
	font-size: 11px;
}
.signature-split-layout,.token-split-layout {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 24px;
	align-items: start;
}
@media (max-width: 900px) {
	.signature-split-layout,.token-split-layout {
		grid-template-columns: 1fr;
	}
}
.tutorial-img {
	width: 100%;
	max-width: 420px;
	height: auto;
	border-radius: var(--radius-md);
	border: 1px solid var(--card-border);
	margin-top: 14px;
	display: block;
}
.step-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 14px;
}
.step-item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.step-badge {
	background: var(--accent);
	color: var(--accent-text);
	font-family: monospace;
	font-weight: 700;
	font-size: 12px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.step-text {
	font-size: 13px;
	line-height: 1.5;
	width: 100%;
}
.view-section {
	animation: pageFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes pageFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes rank-png-sweep-masked {
	0% {
		background-position: 150% 0;
	}
	100% {
		background-position: -50% 0;
	}
}
@keyframes gm-lavender-fire {
	0% {
		filter: drop-shadow(0 0 3px rgba(186, 104, 200, 0.5))drop-shadow(0 -2px 6px rgba(149, 117, 205, 0.7))drop-shadow(0 2px 6px rgba(103, 58, 183, 0.3));
	}
	50% {
		filter: drop-shadow(0 0 5px rgba(200, 120, 220, 0.7))drop-shadow(0 -5px 12px rgba(149, 117, 205, 0.9))drop-shadow(0 3px 8px rgba(103, 58, 183, 0.5));
	}
	100% {
		filter: drop-shadow(0 0 3px rgba(186, 104, 200, 0.5))drop-shadow(0 -2px 6px rgba(149, 117, 205, 0.7))drop-shadow(0 2px 6px rgba(103, 58, 183, 0.3));
	}
}
.nickname-display.prime-user {
	color: #ffd54f;
	position: relative;
	display: inline-block;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.nickname-display.prime-user {
		background: linear-gradient(90deg,#bd8a00 0%,#ffd54f 35%,#ffffff 50%,#ffd54f 65%,#bd8a00 100%);
		background-size: 200% auto;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: prime-text-sweep 5s linear infinite;
	}
}
@keyframes prime-text-sweep {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}
@media (max-width: 1024px) {
	.dashboard-unified-layout {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
	.home-split-hero {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 32px;
	}
	.hero-content-block {
		text-align: center;
	}
	.hero-actions {
		justify-content: center;
	}
	.portal-stats-row {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 768px) {
	h1 {
		font-size: 32px;
		letter-spacing: -0.8px;
	}
	h2 {
		font-size: 22px;
	}
	.app-content {
		padding: 16px 12px;
		gap: 16px;
	}
	.header-inner {
		display: grid !important;
		grid-template-columns: 1fr auto !important;
		grid-template-areas:"brand actions""nav nav" !important;
		gap: 12px 16px !important;
		padding: 12px 16px !important;
	}
	.brand-group {
		grid-area: brand;
		align-self: center;
	}
	.app-bar-actions {
		grid-area: actions;
		align-self: center;
	}
	.nav-links {
		grid-area: nav;
		width: 100% !important;
		display: flex !important;
		gap: 6px !important;
		overflow-x: auto !important;
		white-space: nowrap !important;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
		scrollbar-width: none;
	}
	.nav-links::-webkit-scrollbar {
		display: none;
	}
	.nav-link {
		padding: 6px 12px !important;
		font-size: 12px !important;
	}
	.dashboard-unified-layout {
		grid-template-columns: 1fr !important;
		gap: 16px;
	}
	.search-command-deck {
		grid-template-columns: 1fr !important;
		gap: 12px;
		padding: 16px;
	}
	.query-submit-btn {
		width: 100%;
	}
	.tools-grid,.steps-grid {
		grid-template-columns: 1fr;
	}
	.banner-hero-header {
		flex-direction: column !important;
		align-items: center;
	}
	.nickname-display {
		font-size: 18px;
		word-break: break-word;
		text-align: center;
	}
	.honor-score-row {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		text-align: center;
	}
	.honor-simple-eligibility {
		width: 100%;
		align-items: flex-start;
	}
	.footer-bottom {
		grid-template-columns: 1fr !important;
		gap: 28px;
		text-align: center;
		padding: 36px 16px;
	}
	.brand-col {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.footer-copyright {
		flex-direction: column;
		gap: 8px;
		align-items: center;
		text-align: center;
	}
	.docs-layout {
		display: flex !important;
		flex-direction: column !important;
		gap: 20px !important;
		padding: 0 16px !important;
	}
	.docs-sidebar {
		width: 100% !important;
		border-right: none !important;
		border-bottom: 1px solid var(--card-border) !important;
		padding-bottom: 12px !important;
		position: relative !important;
		top: 0 !important;
	}
	.docs-sidebar-links {
		flex-direction: row;
		overflow-x: auto;
		white-space: nowrap;
	}
}
@media (max-width: 480px) {
	.portal-stats-row {
		grid-template-columns: 1fr;
	}
	.stats-metric-grid,.captain-metrics-grid,.career-milestone-grid {
		grid-template-columns: 1fr !important;
	}
	.metric-tile[style*="grid-column: span 2"] {
		grid-column: span 1 !important;
	}
	.wardrobe-grid,.weapon-slots-container {
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}
	.ep-history-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.tags-row {
		justify-content: center;
	}
	.tag.copyable-uid {
		font-size: 10px;
	}
	.spark-card-body {
		flex-direction: column;
		text-align: center;
	}
}
.mode-tab-pills {
	display: flex;
	gap: 4px;
	background: var(--control-fill);
	padding: 3px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--card-border);
}
.mode-tab-pill {
	background: transparent;
	border: none;
	color: var(--text-secondary);
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 4px;
	cursor: pointer;
	transition: all var(--duration-fast) var(--easing);
	text-transform: uppercase;
}
.mode-tab-pill:hover {
	color: var(--text-primary);
}
.mode-tab-pill.active {
	background: var(--accent);
	color: var(--accent-text);
	box-shadow: 0 2px 8px var(--accent-glow);
}
.combat-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 10px;
}
.combat-stat-box {
	background: var(--control-fill);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	padding: 10px 8px;
	text-align: center;
	transition: transform var(--duration-fast);
}
.combat-stat-box:hover {
	transform: translateY(-2px);
	border-color: var(--accent);
}
.combat-stat-box .stat-val {
	font-size: 16px;
	font-weight: 800;
	color: var(--accent);
	font-family: var(--font-mono);
}
.combat-stat-box .stat-lbl {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin-top: 4px;
	letter-spacing: 0.5px;
}
/* =========================================================
   FIXED-HEIGHT DASHBOARD ARCHITECTURE (CLEANED)
   ========================================================= */

/* 1. Heroic Seasons Mastered */
#heroic-timeline-card {
  min-height: 220px;
}
.season-badges-cloud {
  max-height: 70px;
  min-height: 38px;
  overflow-y: auto;
  overflow-x: hidden;
}

.season-badge {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 4px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 5px;
}
.season-badge.cs-mode {
  background: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.25);
}
.season-badge-icon {
  width: 12px;
  height: 12px;
  display: inline-block;
  background-color: currentColor !important;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}
.season-badge .season-badge-icon.icon-br {
  -webkit-mask-image: url("icons/Rank status.svg");
  mask-image: url("icons/Rank status.svg");
}
.season-badge.cs-mode .season-badge-icon.icon-cs {
  -webkit-mask-image: url("icons/Star Fill.svg");
  mask-image: url("icons/Star Fill.svg");
}

/* 2. Weapon Glory Power (Cleaned single rule - fixed height 180px) */
#weapon-glory-card {
  min-height: 240px;
}
.glory-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 8px;
  height: 180px;
  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden !important;
  padding: 4px 2px;
}
.glory-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--control-fill);
  border: 1px solid var(--card-border);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: transform var(--duration-fast);
}
.glory-row:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.glory-weapon-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.glory-power-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #f59e0b;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 3. Tactical Role Matrix */
#tactical-mastery-card .compact-stack-list {
  max-height: 155px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.wishlist-scroll-frame {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  gap: 10px;
  height: auto !important; 
  min-height: 80px;
  max-height: 220px !important; 
  overflow-y: auto;
  overflow-x: hidden !important;
  padding: 8px 6px;
  background: radial-gradient(circle, var(--accent-glow) 0%, rgba(0, 0, 0, 0) 80%);
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
}

.wishlist-scroll-frame .wardrobe-slot {
  aspect-ratio: 1 / 1; 
  width: 100%;
}

#team-roles-container {
  max-height: 85px;
  overflow-y: auto;
  overflow-x: hidden;
}
.tag-pill-cloud {
  max-height: 60px;
  overflow-y: auto;
  overflow-x: hidden;
}
#social-highlights-container {
  margin-top: 5px;
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}
#battle-tags-container {
  margin-top: 5px;
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}

.season-badges-cloud,
.glory-list,
.compact-stack-list,
.wishlist-scroll-frame,
#team-roles-container,
.tag-pill-cloud,
#social-highlights-container {
  scrollbar-width: thin !important;
  scrollbar-color: var(--card-border) transparent !important;
}

.season-badges-cloud::-webkit-scrollbar,
.glory-list::-webkit-scrollbar,
.compact-stack-list::-webkit-scrollbar,
.wishlist-scroll-frame::-webkit-scrollbar,
#team-roles-container::-webkit-scrollbar,
.tag-pill-cloud::-webkit-scrollbar,
#social-highlights-container::-webkit-scrollbar {
  display: block !important;
  width: 4px !important;
}

.season-badges-cloud::-webkit-scrollbar-thumb,
.glory-list::-webkit-scrollbar-thumb,
.compact-stack-list::-webkit-scrollbar-thumb,
.wishlist-scroll-frame::-webkit-scrollbar-thumb,
#team-roles-container::-webkit-scrollbar-thumb,
.tag-pill-cloud::-webkit-scrollbar-thumb,
#social-highlights-container::-webkit-scrollbar-thumb {
  background: var(--card-border);
  border-radius: 4px;
}

#global-portal-tooltip {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  background: var(--dropdown-bg);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  padding: 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 11px;
  width: 200px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms var(--easing), transform 120ms var(--easing);
}
#global-portal-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
.wardrobe-slot-tooltip {
  display: none !important;
}
.wardrobe-slot.empty-slot {
  background: var(--control-fill);
  border: 1px dashed var(--card-border);
  opacity: 0.5;
  cursor: default;
}
.wardrobe-slot.empty-slot:hover {
  transform: none;
  border-color: var(--card-border);
  box-shadow: none;
}

.card-inner-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inner-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.inner-section-title img {
  width: 14px;
  height: 14px;
}
.compact-stack-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 1024px) {
  .dashboard-unified-layout {
    grid-template-columns: 1fr 1fr !important;
  }
  .clan-roster-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .dashboard-unified-layout {
    grid-template-columns: 1fr !important;
  }
  .search-results-grid, .clan-roster-grid {
    grid-template-columns: 1fr !important;
  }
}

.dashboard-unified-layout {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
	align-items: start !important;
}
.search-type-switch {
	display: flex;
	gap: 4px;
	background: var(--control-fill);
	padding: 3px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--card-border);
	width: fit-content;
	margin-bottom: 12px;
}
.search-type-pill {
	background: transparent;
	border: none;
	color: var(--text-secondary);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 4px;
	cursor: pointer;
	transition: all var(--duration-fast) var(--easing);
}
.search-type-pill.active {
	background: var(--accent);
	color: var(--accent-text);
	box-shadow: 0 2px 8px var(--accent-glow);
}
.search-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(8px);
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.search-modal-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	width: 100%;
	max-width: 780px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.search-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid var(--card-border);
}
.search-results-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	padding: 18px 20px;
	overflow-y: auto;
}
.player-search-card {
	background: var(--control-fill);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	transition: all var(--duration-fast) var(--easing);
}
.player-search-card:hover {
	transform: translateY(-2px);
	border-color: var(--accent);
	background: var(--control-hover);
	box-shadow: 0 4px 14px var(--accent-glow);
}
.player-search-avatar {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	border: 2px solid var(--accent);
	object-fit: cover;
}
.player-search-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow: hidden;
}
.player-search-name {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.player-search-sub {
	font-size: 10px;
	color: var(--text-secondary);
}
.clan-hero-banner {
	background: linear-gradient(135deg, var(--card-bg) 0%, rgba(80, 200, 255, 0.08) 100%);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	padding: 28px;
	margin-bottom: 24px;
}
.clan-hero-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}
.clan-badge-display {
	width: 80px;
	height: 80px;
	background: var(--control-fill);
	border: 2px solid var(--accent);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}
.clan-roster-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 12px;
}
.roster-card {
	background: var(--control-fill);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.activeness-log-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
	font-size: 12px;
}
.activeness-log-table th,.activeness-log-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--card-border);
	text-align: left;
}
.activeness-log-table th {
	color: var(--text-secondary);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
}
#wishlist-card {
	overflow: visible !important;
}
#wishlist-card .wardrobe-visualizer {
	overflow: visible !important;
	min-height: auto;
	padding: 12px;
}
#wishlist-card .wardrobe-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	width: 100%;
}
.glory-list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 8px;
	max-height: 250px;
	overflow-y: auto;
	overflow-x: hidden !important;
	padding: 4px 2px;
}
#tactical-mastery-card .compact-stack-list {
  max-height: 155px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.wishlist-scroll-frame {
  height: 220px !important;
  max-height: 220px !important;
  overflow-y: auto;
  overflow-x: hidden;
}

.wishlist-scroll-frame .wardrobe-slot {
	aspect-ratio: 1;
}


#global-portal-tooltip {
	position: fixed;
	z-index: 999999;
	pointer-events: none;
	background: var(--dropdown-bg);
	border: 1px solid var(--card-border);
	color: var(--text-primary);
	padding: 12px;
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-size: 11px;
	width: 200px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 120ms var(--easing), transform 120ms var(--easing);
}
#global-portal-tooltip.visible {
	opacity: 1;
	transform: translateY(0);
}
.wardrobe-slot-tooltip {
	display: none !important;
}
.wardrobe-slot.empty-slot {
  background: var(--control-fill);
  border: 1px dashed var(--card-border);
  opacity: 0.5;
  cursor: default;
}
.wardrobe-slot.empty-slot:hover {
  transform: none;
  border-color: var(--card-border);
  box-shadow: none;
}

#regional-titles-card .glory-row {
  padding: 6px 10px;
}
#weapon-class-mastery-list .showcase-row-item {
  padding: 6px 10px;
  background: var(--control-fill);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
}

.card-inner-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inner-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.inner-section-title img {
  width: 14px;
  height: 14px;
}

.compact-stack-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.capped-scroll-container {
  max-height: 175px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
}

.glory-row.compact {
  padding: 6px 10px;
}

.showcase-row-item {
  padding: 6px 10px;
  background: var(--control-fill);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
}

@media (max-width: 1024px) {
	.dashboard-unified-layout {
		grid-template-columns: 1fr 1fr !important;
	}
	.clan-roster-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 768px) {
	.dashboard-unified-layout {
		grid-template-columns: 1fr !important;
	}
	.search-results-grid,.clan-roster-grid {
		grid-template-columns: 1fr !important;
	}
}