.grid p {
    text-align: justify;
}

html[lang="en-US"] .grid p {
    text-align: left;
}

.card-pre {
	background-color: var(--card-bg);
	border-radius: var(--card-radius);
	padding: 20px;
	box-shadow: var(--card-shadow);
	text-decoration: none;
	color: var(--text-main);
	display: flex;
	align-items: center;
	justify-content: center;
	translate: 0;
	border: 1px solid var(--item-border);
	transition: transform 0.3s ease, translate 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
	height: 100%;
	flex-direction: column;
}


.scale-card { 
    padding: 25px; 
    align-items: flex-start; 
    justify-content: flex-start; 
    text-align: left;
    width: auto; /* 在 Grid 中自适应 */
}

.scale-header { width: 100%; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 10px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
.scale-name { font-size: 1.2rem; font-weight: 700; color: var(--primary-blue); }
.scale-type { font-size: 0.8rem; color: var(--text-sub); font-weight: normal; }
.musical-key { font-family: 'Musical', sans-serif; font-feature-settings: normal; }
.note-list { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; }
.note-badge { display: flex; align-items: center; background: rgba(30, 102, 198, 0.08); color: var(--primary-blue); padding: 6px 15px; border-radius: 6px; font-weight: 600; font-size: 1.4rem; }
.note-badge i { font-style: normal; font-size: 0.5rem; opacity: 0.4; width: 1.6rem; text-align: left; font-weight: 400; }
.note-badge span { flex: 1; text-align: center; margin-right: 1.6rem; font-family: 'Musical', sans-serif; font-feature-settings: normal; }
[data-theme='dark'] .note-badge { background: rgba(147, 197, 253, 0.15); }