.account-shell {
    position: relative;
    overflow: hidden;
    padding: 48px 0 72px;
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 0 10px;
}

.account-grid-profile {
    grid-template-columns: 320px minmax(0, 1fr);
}

.account-panel {
    background: rgba(8, 10, 14, 0.82);
    border: 1px solid rgba(112, 140, 114, 0.18);
    padding: 24px;
}

.account-panel-wide {
    grid-column: 1 / -1;
}

.account-panel-narrow {
    max-width: 520px;
    margin: 0 auto;
}

.account-form {
    display: grid;
    gap: 16px;
}

.account-form label {
    display: grid;
    gap: 8px;
}

.account-form-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.account-button {
    appearance: none;
    border: 1px solid rgba(112, 140, 114, 0.55);
    background: rgba(112, 140, 114, 0.12);
    color: #fff;
    padding: 12px 18px;
    font: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.account-button-primary {
    background: rgba(112, 140, 114, 0.2);
}

.account-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.account-inline-check {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.account-callout,
.account-steam-cta {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.account-profile-image {
    width: 100%;
    display: block;
    margin: 18px 0;
    border: 1px solid rgba(112, 140, 114, 0.2);
}

.account-steam-profile {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 18px 0 22px;
}

.account-steam-profile h2 {
	margin: 0 0 8px;
	color: #f0f4f7;
	font-size: 28px;
	line-height: 1.2;
}

.account-steam-avatar {
	width: 112px;
	height: 112px;
	border: 1px solid rgba(112, 140, 114, 0.36);
	object-fit: cover;
	flex: 0 0 auto;
}

.account-meta-list {
    display: grid;
    gap: 12px;
}

.account-meta-list > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.ruin-account-page .account-shell {
	padding-top: 54px;
	padding-bottom: 84px;
	overflow: visible;
}

.account-layout {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	align-items: start;
	gap: 20px;
	max-width: 1220px;
	margin: 0 auto;
	padding: 0 10px;
}

.account-content {
	min-width: 0;
}

.ruin-account-page .account-grid {
	grid-template-columns: minmax(0, 1fr);
	max-width: none;
	margin: 0 auto;
	padding: 0;
}

.account-mobile-menu,
.account-navigation-overlay,
.account-navigation-close {
	display: none;
}

.account-navigation {
	position: sticky;
	top: 24px;
	min-width: 0;
	background: rgba(16, 24, 20, 0.94);
}

.account-navigation-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 22px 20px 16px;
}

.account-navigation-header div {
	display: grid;
	gap: 5px;
}

.account-navigation-header span {
	color: #86a389;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
}

.account-navigation-header strong {
	color: #f2f6f3;
	font-family: Oxanium, Arial, sans-serif;
	font-size: 20px;
}

.account-navigation-links {
	display: grid;
	padding: 6px 0 12px;
}

.account-navigation-link {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 18px;
	background: transparent;
	color: rgba(220, 228, 223, 0.78);
	font-family: Oxanium, Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

a.account-navigation-link:hover {
	background: rgba(112, 140, 114, 0.1);
	color: #ffffff;
}

.account-navigation-link.is-current {
	background: rgba(112, 140, 114, 0.2);
	color: #ffffff;
}

.account-navigation-icon {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.045);
}

.account-navigation-link.is-current .account-navigation-icon {
	background: #78947b;
	color: #050907;
}

.account-navigation-icon svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.ruin-account-page .account-public-panel {
	padding: 36px;
	border: 0;
	border-radius: 0;
	background: rgba(16, 24, 20, 0.92);
}

.account-section-intro {
	max-width: 720px;
}

.account-section-intro h2 {
	margin: 10px 0 0;
	color: #f0f4f1;
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: 0;
}

.account-section-intro p,
.account-profile-copy p {
	margin: 14px 0 0;
	color: rgba(201, 210, 204, 0.82);
	line-height: 1.75;
}

.account-profile-link {
	display: inline-block;
	margin-top: 12px;
	color: #a9c2ac;
	font-family: Oxanium, Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-underline-offset: 4px;
}

.account-profile-link:hover {
	color: #ffffff;
}

.ruin-account-page .account-steam-profile {
	align-items: center;
	margin: 0;
}

.ruin-account-page .account-steam-avatar {
	width: 104px;
	height: 104px;
	border: 0;
	border-radius: 0;
	background: rgba(112, 140, 114, 0.18);
}

.account-steam-avatar-fallback {
	display: grid;
	place-items: center;
	color: #f0f4f1;
	font-family: Oxanium, Arial, sans-serif;
	font-size: 38px;
	font-weight: 700;
}

.account-profile-copy {
	min-width: 0;
}

.ruin-account-page .account-profile-copy h2 {
	margin: 8px 0 0;
	color: #f0f4f1;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

.ruin-account-page .account-meta-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 30px 0 0;
}

.ruin-account-page .account-meta-list > div {
	display: block;
	min-width: 0;
	padding: 16px;
	border: 0;
	background: rgba(255, 255, 255, 0.045);
}

.ruin-account-page .account-meta-list dt {
	color: #8fa992;
	font-family: Oxanium, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.ruin-account-page .account-meta-list dd {
	margin: 7px 0 0;
	color: #e5ebe7;
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.ruin-account-page .account-steam-cta {
	margin-top: 28px;
}

.ruin-account-page .account-button {
	min-height: 44px;
	border: 1px solid rgba(112, 140, 114, 0.52);
	border-radius: 0;
	background: rgba(112, 140, 114, 0.1);
	font-family: Oxanium, Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
}

.ruin-account-page .account-button-primary,
.ruin-account-page .account-button:hover {
	background: #8ca68e;
	color: #050907;
}

.ruin-account-page .account-button:focus-visible {
	outline: 2px solid #9bb39d;
	outline-offset: 2px;
}

.account-alert {
	margin: 0 0 24px;
	padding: 13px 15px;
	border: 0;
	background: rgba(112, 45, 45, 0.34);
	color: #f2d7d7;
	line-height: 1.6;
}

.account-table-wrap {
    overflow-x: auto;
}

.account-table {
    width: 100%;
    border-collapse: collapse;
    color: white;
}

.account-table th,
.account-table td {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.account-modal {
    max-width: 420px;
    border: 1px solid rgba(112, 140, 114, 0.35);
    background: rgba(0, 0, 0, 0.94);
    position: fixed;
    z-index: 7;
}

.account-modal-body {
    padding: 18px;
}

.points-grid {
	grid-template-columns: minmax(0, 1fr);
	max-width: none;
	margin: 0 auto;
	padding: 0;
}

.ruin-points-icon {
	display: inline-block;
	width: 1.3em;
	height: 1.3em;
	margin-right: 0.22em;
	object-fit: contain;
	vertical-align: -0.28em;
}

.ruin-points-icon.is-compact {
	width: 18px;
	height: 18px;
	margin-right: 5px;
	vertical-align: -4px;
}

.ruin-points-icon.is-navigation {
	width: 25px;
	height: 25px;
	margin: 0;
	vertical-align: middle;
}

.bug-alert {
	margin-bottom: 16px;
	padding: 14px 16px;
	border: 0;
	background: rgba(48, 12, 12, 0.48);
	color: #ffd0d0;
}

.bug-alert.is-success {
	border-color: rgba(95, 208, 135, 0.36);
	background: rgba(24, 72, 40, 0.36);
	color: #c9f0d5;
}

@media (max-width: 900px) {
	.account-grid,
	    .account-grid-profile,
	    .account-form-columns {
	        grid-template-columns: 1fr;
	    }

	.account-layout {
			display: block;
			padding: 0 10px;
		}

	.account-mobile-menu {
			display: inline-flex;
			min-height: 42px;
			align-items: center;
			gap: 8px;
			margin: 0 0 14px;
			padding: 0 13px;
			border: 1px solid rgba(145, 170, 148, 0.42);
			border-radius: 0;
			background: #0a110e;
			color: #ffffff;
			font: inherit;
			font-family: Oxanium, Arial, sans-serif;
			font-size: 13px;
			cursor: pointer;
		}

	.account-mobile-menu span:first-child {
			font-size: 19px;
		}

	.account-navigation {
			position: fixed;
			inset: 0 auto 0 0;
			z-index: 120;
			width: min(290px, 86vw);
			padding-top: 10px;
			transform: translateX(-105%);
			transition: transform 0.2s ease;
		}

	.account-navigation-close {
			width: 38px;
			height: 38px;
			align-items: center;
			justify-content: center;
			border: 1px solid rgba(145, 170, 148, 0.38);
			border-radius: 0;
			background: transparent;
			color: #ffffff;
			font: inherit;
			font-size: 24px;
			cursor: pointer;
		}

	body.ruin-account-menu-open {
			overflow: hidden;
		}

	.ruin-account-menu-open .account-navigation {
			transform: translateX(0);
		}

	.account-navigation-overlay {
			position: fixed;
			inset: 0;
			z-index: 110;
			background: rgba(0, 0, 0, 0.68);
		}

	.ruin-account-menu-open .account-navigation-overlay,
		.ruin-account-menu-open .account-navigation-close {
			display: flex;
		}

	.account-steam-profile {
			align-items: flex-start;
			flex-direction: column;
		}
}

@media (max-width: 620px) {
	.ruin-account-page .account-shell {
			padding-top: 34px;
			padding-bottom: 54px;
		}

	.ruin-account-page .account-public-panel {
			padding: 22px;
		}

	.ruin-account-page .account-steam-avatar {
			width: 84px;
			height: 84px;
		}

	.ruin-account-page .account-profile-copy h2,
		.account-section-intro h2 {
			font-size: 26px;
		}

	.ruin-account-page .account-meta-list {
			grid-template-columns: minmax(0, 1fr);
		}

	.ruin-account-page .account-actions {
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			width: 100%;
		}

	.ruin-account-page .account-button {
			width: 100%;
		}
}