body {
	font-family: system-ui, -apple-system, sans-serif;
	margin: 0;
	padding: 1rem;
	background-color: #2b2c31;
	color: #e8e8e8;
}

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

.loading,
.error {
	padding: 2rem;
	text-align: center;
}

.error {
	padding: 2rem;
	text-align: center;
	max-width: 40rem;
	margin: 0 auto;
}

.error-title {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
	color: #ff8a8a;
}

.error-message {
	color: #ddd;
	white-space: pre-wrap;
	line-height: 1.5;
	margin-bottom: 1rem;
}

.error-retry {
	color: #8ab4f8;
	text-decoration: none;
}

.error-retry:hover {
	text-decoration: underline;
}

.periodic-table-wrapper {
	overflow-x: auto;
}

.periodic-table-title {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1rem;
	text-align: center;
}

.periodic-table {
	display: grid;
	grid-template-columns: 2rem repeat(18, minmax(2.4rem, 1fr));
	grid-template-rows: 1.5rem repeat(10, minmax(2.4rem, 1fr));
	gap: 2px;
	min-width: 720px;
}

.corner-label,
.group-header,
.period-label {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.65rem;
	color: #aaa;
}

.group-header {
	font-weight: 600;
}

.period-label {
	font-weight: 600;
}

.element {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	padding: 2px;
	aspect-ratio: 1;
	line-height: 1.1;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		transform 0.1s ease,
		box-shadow 0.1s ease;
	text-decoration: none;
	background-color: #3e3f48;
	color: #d4d5da;
	border: 1px solid #555660;
	box-shadow: inset 4px 0 0 var(--category-accent, #6a6b74);
}

.element.clickable {
	cursor: pointer;
}

.element:hover {
	transform: scale(1.06);
	border-color: #686974;
	box-shadow:
		inset 4px 0 0 var(--category-accent, #7a7b84),
		0 2px 10px rgba(0, 0, 0, 0.35);
	z-index: 1;
}

.element.alkali-metal,
.legend-swatch.alkali-metal,
.element-detail-symbol.alkali-metal {
	--category-accent: #c47a7a;
	background-color: #553a3c;
}

.element.alkaline-earth-metal,
.legend-swatch.alkaline-earth-metal,
.element-detail-symbol.alkaline-earth-metal {
	--category-accent: #c4a86a;
	background-color: #554a38;
}

.element.transition-metal,
.legend-swatch.transition-metal,
.element-detail-symbol.transition-metal {
	--category-accent: #8a9ab4;
	background-color: #3a4454;
}

.element.lanthanide,
.legend-swatch.lanthanide,
.element-detail-symbol.lanthanide {
	--category-accent: #a88ec4;
	background-color: #483a52;
}

.element.actinide,
.legend-swatch.actinide,
.element-detail-symbol.actinide {
	--category-accent: #b47a9e;
	background-color: #523a48;
}

.element.post-transition-metal,
.legend-swatch.post-transition-metal,
.element-detail-symbol.post-transition-metal {
	--category-accent: #a0a0aa;
	background-color: #484850;
}

.element.metalloid,
.legend-swatch.metalloid,
.element-detail-symbol.metalloid {
	--category-accent: #8eb47a;
	background-color: #424c3a;
}

.element.diatomic-nonmetal,
.element.polyatomic-nonmetal,
.legend-swatch.diatomic-nonmetal,
.legend-swatch.polyatomic-nonmetal,
.element-detail-symbol.diatomic-nonmetal,
.element-detail-symbol.polyatomic-nonmetal {
	--category-accent: #72b494;
	background-color: #3a4e44;
}

.element.noble-gas,
.legend-swatch.noble-gas,
.element-detail-symbol.noble-gas {
	--category-accent: #72b0b8;
	background-color: #3a4c52;
}

.element.placeholder {
	font-size: 0.55rem;
	font-weight: 600;
}

.element-number {
	font-size: 0.5rem;
	align-self: flex-start;
	opacity: 0.55;
	color: #a8a9b0;
}

.element-symbol {
	font-size: clamp(0.7rem, 1.8vw, 1rem);
	font-weight: 600;
	color: #ececf0;
}

.element-mass {
	font-size: 0.45rem;
	opacity: 0.5;
	color: #a8a9b0;
}

.element-range {
	font-size: 0.55rem;
	font-weight: 600;
	text-align: center;
}

.category-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-top: 1.5rem;
	justify-content: center;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	color: #ccc;
}

.legend-swatch {
	width: 1rem;
	height: 1rem;
	border-radius: 2px;
	border: 1px solid #555660;
	box-shadow: inset 3px 0 0 var(--category-accent, #6a6b74);
}

.element-detail-symbol {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	border-radius: 6px;
	flex-shrink: 0;
	border: 1px solid #555660;
	box-shadow: inset 5px 0 0 var(--category-accent, #6a6b74);
}

.element-detail {
	max-width: 900px;
	margin: 0 auto;
}

.element-detail-back {
	display: inline-block;
	margin-bottom: 1.5rem;
	color: #8ab4f8;
	text-decoration: none;
}

.element-detail-back:hover {
	text-decoration: underline;
}

.element-detail-header {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.element-detail-symbol .element-symbol {
	font-size: 1.75rem;
	font-weight: 700;
}

.element-detail-title h1 {
	margin: 0 0 0.25rem;
	font-size: 2rem;
}

.element-detail-category {
	margin: 0;
	color: #aaa;
}

.element-detail-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-bottom: 2rem;
}

@media (max-width: 700px) {
	.element-detail-content {
		grid-template-columns: 1fr;
	}
}

.element-detail-info {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.detail-field {
	font-size: 0.9rem;
}

.detail-label {
	color: #aaa;
}

.detail-value {
	color: #e8e8e8;
}

.element-detail-model h2 {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
}

.element-detail-model model-viewer {
	height: 320px;
	border-radius: 6px;
	overflow: hidden;
}

.element-detail-model-unavailable {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 320px;
	background: #1e1f24;
	border-radius: 6px;
	color: #aaa;
	text-align: center;
	padding: 1rem;
}

.element-detail-model-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 320px;
	background: #1e1f24;
	border-radius: 6px;
	color: #aaa;
}

.element-detail-summary {
	line-height: 1.6;
	color: #ccc;
}

.element-detail-photo {
	margin-top: 1.5rem;
}

.element-detail-photo img {
	max-width: 100%;
	border-radius: 6px;
}

.not-found {
	text-align: center;
	padding: 3rem 1rem;
}