body {
    font-family: sans-serif;
    background-color: #f4f4f4;
    color: #333;
    padding: 10px 0; /* Reduced vertical padding */
    margin: 0; /* Reset default body margin */
    box-sizing: border-box;
    /* Removed scaling properties */
    /* transform: scale(0.9); */
    /* transform-origin: top center; */
    /* width: calc(100% / 0.9); */ 
}

header {
    text-align: center;
    padding: 10px 0;
    background-color: #33CC99; /* New background color from playback buttons */
    color: white;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px; /* Reduced margin */
}

.header-content {
    display: flex;
    justify-content: space-between; /* Title left, selector right */
    align-items: center;
    width: 100%;
    max-width: 1450px; /* Match main's max-width */
    margin: 0 auto; /* Center the content */
    padding: 5px 20px; /* Add horizontal padding */
    box-sizing: border-box;
}

/* Container for title and subtitle */
.title-group {
    display: flex;
    flex-direction: column; /* Stack title and subtitle vertically */
    align-items: flex-start; /* Align items to the start (left) */
}

.app-title {
    margin: 0; /* Reset margin */
    font-size: 1.6em; /* Slightly adjusted size */
    font-weight: bold;
    color: white;
    line-height: 1.2;
}

.app-subtitle { /* Style for the new subtitle */
    margin: 0; /* Reset margin */
    font-size: 0.9em;
    font-weight: normal;
    color: white; /* Changed to white */
    line-height: 1.2;
}

/* Removed rule for h1[data-i18n-key="pageTitle"] as it's now p.app-subtitle */
/* h1[data-i18n-key="pageTitle"] { ... } */

.language-selector {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically align label and select */
    gap: 8px; /* Increased gap */
}

.language-label { /* Style for the new label */
    /* font-size: 1.0em; */ /* Reverting user change */
    font-size: 0.9em; /* Match select box size */
    color: white; /* Changed to white */
    margin: 0; /* Reset margin */
    font-weight: bold; /* Added bold */
}

#language-select {
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8; /* Slightly off-white background */
    color: #333;
    font-size: 0.9em;
    cursor: pointer;
    margin-left: 0; /* Remove margin now that gap is used */
}

#language-select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

main {
    width: 100%;
    /* max-width: 1450px; */ /* Removed max-width */
    background-color: #fff;
    padding: 40px; /* Further Increased padding */
    border-radius: 8px; /* Keep border-radius for visual separation */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    box-sizing: border-box;
    /* margin: 0 auto; */ /* Removed margin auto for full width */
}

#controls {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
    width: 100%; /* Occupy full width of main content area */
    max-width: 100%;
    box-sizing: border-box; /* Prevent padding from causing overflow */
}

#controls label {
    margin-right: 10px;
}

#controls select {
    padding: 5px;
    margin-right: 20px;
}

/* Style for the new button in controls */
.control-button {
    padding: 5px 10px;
    /* margin-left: 10px; Remove specific margin if flex handles spacing */
    border: 1px solid #ccc;
    background-color: #e9e9e9;
    border-radius: 4px;
    cursor: pointer;
}

.control-button:hover {
    background-color: #dcdcdc;
}

#fretboard-container {
    width: 100%; /* Fill the width of the main container */
    /* max-width: 1220px; */ /* REMOVED to allow adapting to main container's width */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* To center the h2 */
}

#fretboard-svg {
    display: block;   
    margin: 0 auto;   
    width: 100%; /* Make SVG take full width of its container */
    /* max-width: 1220px; */ /* REMOVED to allow scaling beyond this if container is wider */
    height: auto; /* Height will be set based on width and viewBox aspect ratio */
}

/* New styles for chromatic notes display */
.chromatic-notes-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    padding: 10px 0;
    margin-bottom: 20px;
    /* border: 1px solid #ddd; 
    border-radius: 8px; */
}

.chromatic-note-indicator {
    box-sizing: border-box;
    min-width: 40px; /* Minimum width for each note item */
    padding: 8px 12px;
    margin: 4px;
    border: 1px solid #555;
    border-radius: 20px; /* More rounded, pill-like shape */
    text-align: center;
    font-weight: bold;
    font-size: 0.9em;
    color: #333333; /* CHANGED: Text color for readability */
    background-color: #f0f0f0; /* Default background for non-active notes */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    cursor: default; /* Indicates it's not directly clickable for an action */
}

.chromatic-note-indicator.active-chromatic-note {
    color: #ffffff; /* White text for better contrast on colored background */
    /* Background color will be set by JS */
    border-color: transparent; /* Remove border for active notes or make it darker */
    transform: scale(1.05); /* Slightly larger when active */
    box-shadow: 0 0 10px rgba(0,0,0,0.2); /* Add a subtle shadow for active notes */
    background-color: #4CAF50; /* Example active color, will be overridden by JS */
    color: #333333; /* CHANGED: Ensure text is readable on active background */
    border-color: #3e8e41;
}

/* Controls Container - General styling for the controls area */
.controls-container {
    width: 100%;
    margin: 0 auto;
    padding: 16px 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* 横向排列根音和和弦类型选择 */
.selection-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px;
}

.selection-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fcfcfc;
    box-sizing: border-box;
}

#root-notes-display-container {
    flex-basis: 260px; /* 稍微减小 */
    flex-shrink: 0;
    /* Inherits .selection-group */
}

#chord-types-display-container {
    flex: 1;
    min-width: 0; /* 允许收缩 */
    overflow: hidden; /* 防止内容溢出破坏布局 */
    /* Inherits .selection-group */
    width: auto;
}

.selection-label {
    font-size: 1rem;
    font-weight: bold;
    color: #444;
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
}

#root-notes-display.root-notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(45px, 1fr));
    gap: 5px;
    padding: 6px; /* Match root note padding */
    background-color: #fff;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

#chord-types-display.chord-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, auto)); /* 调整网格列 */
    gap: 4px; /* 减小间距 */
    padding: 8px;
    background-color: #fff;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    /* border: none; /* Consider removing if parent has border */
}

hr.controls-divider {
    margin: 18px 0 12px 0;
    border: none;
    border-top: 1.5px solid #eee;
}

.actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    align-items: center;
}

.control-button.primary {
    background: #4caf50;
    color: #fff;
    font-weight: bold;
}

.control-button {
    min-width: 90px;
    padding: 8px 18px;
    border-radius: 5px;
    border: none;
    background: #f5f5f5;
    color: #333;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}
.control-button:hover, .control-button:focus {
    background: #e0e0e0;
}

/* Chord Types Display Specific Styles */
#chord-types-display.chord-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 0.5fr));
    gap: 4px;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    justify-items: center;
}

.chord-type-button {
    min-width: 54px;
    padding: 6px 0;
    font-size: 0.95em;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f0f0f0;
    color: #333;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.chord-type-button:hover {
    background-color: #e0e0e0;
    border-color: #bbb;
}

.chord-type-button.active-chord-type {
    background-color: #339999; /* New active color */
    color: white;
    border-color: #2d8686; /* Darker shade of new active color */
    font-weight: bold;
}

/* Ensure select elements and buttons in controls have consistent styling */
.controls-container select,
.controls-container button.control-button {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
    /* cursor: pointer; */ /* Moved to general .control-button or specific button classes */
    /* transition: background-color 0.2s ease; */ /* Moved to general .control-button or specific button classes */
}

/* REMOVED background-color and color from this general rule, as specific classes will handle it. */
.controls-container button.control-button {
    /* background-color: #5cb85c; */ /* REMOVED - Greenish color for action buttons */
    /* color: white; */ /* REMOVED */
    cursor: pointer; /* Retain cursor and transition if needed here, or ensure they are in .control-button */
    transition: background-color 0.2s ease;
}

.controls-container button.control-button:hover {
    /* background-color: #4cae4c; */ /* REMOVED hover color */
}

/* Root Notes Display Specific Styles */
#root-notes-display-container {
    /* flex-grow: 1; /* Uncomment if it should grow like chord types */
    /* flex-basis: 200px; /* Suggest an initial width */
    min-width: 150px; /* Prevent it from becoming too small */
    /* Styles are mostly inherited from .controls-container > div */
}

.root-note-label {
    font-weight: bold;
    font-size: 0.9em;
    color: #333;
    margin-bottom: 4px; /* Consistent with original label spacing */
}

.root-note-button {
    padding: 8px 5px; /* More padding vertically, less horizontally for compact fit */
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f0f0f0;
    color: #333;
    cursor: pointer;
    text-align: center;
    font-size: 0.9em; /* Match chromatic indicators */
    font-weight: bold; /* Match chromatic indicators */
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
}

.root-note-button:hover {
    background-color: #e0e0e0;
    border-color: #bbb;
}

.root-note-button.active-root-note {
    background-color: #339999; /* New active color */
    color: white;
    border-color: #2d8686; /* Darker shade of new active color */
    font-weight: bold;
    transform: scale(1.05);
}

/* Container for the toggle accidentals button */
#accidentals-toggle-container {
    display: flex;            /* Use flexbox to easily center the button */
    justify-content: center;  /* Center button horizontally */
    width: 100%;              /* Take full width to allow centering within main */
    padding: 10px 0;          /* Add some vertical padding */
    margin-bottom: 15px;      /* Space before the chromatic notes display */
}

/* Container for Fretboard Action Buttons (Clear, Show All) */
.fretboard-actions-container {
    display: flex;
    justify-content: center; /* Center buttons horizontally */
    gap: 15px; /* Space between the buttons */
    width: 100%;
    padding: 10px 0;
    margin-bottom: 15px; /* Space before the chromatic notes display */
}

.action-button {
    padding: 8px 15px;
    font-size: 0.9em;
    /* Inherits .control-button styles, can add specific overrides here if needed */
    /* Example: a different background color for these actions */
    /* background-color: #f8f9fa; */
    /* border-color: #ced4da; */
    /* color: #495057; */
}

.action-button:hover {
    /* background-color: #e2e6ea; */
    /* border-color: #b1bbc4; */
}

/* Styles for the new action buttons group inside the chord types container */
.action-buttons-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%; /* Ensure it takes full width of its parent */
    margin-top: 15px; /* Add space above the buttons */
}

/* Adjust control button styles if necessary - current ones might be okay */
.control-button.action-button {
    min-width: 90px; /* Maintain consistent width */
    /* padding: 8px 15px; */ /* Already defined elsewhere, potentially? */
    /* border: 1px solid #ddd; */ /* Already defined elsewhere, potentially? */
    /* border-radius: 4px; */ /* Already defined elsewhere, potentially? */
    /* font-size: 0.9rem; */ /* Already defined elsewhere, potentially? */
    /* cursor: pointer; */ /* Already defined elsewhere, potentially? */
    /* transition: all 0.2s; */ /* Already defined elsewhere, potentially? */
}

/* Playback Buttons (Greenish-Cyan) */
.control-button.btn-playback {
    background-color: #33CC99; /* New Greenish-Cyan */
    color: white;
    border-color: #29a37d; /* Darker shade for border */
    min-height: 38px; /* Add min-height */
    display: flex; /* Add flex */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
}

.control-button.btn-playback:hover {
    background-color: #2ca67f; /* Darker shade on hover */
    border-color: #248a6b;
}

/* Display Mode Button (Blue) */
.control-button.btn-display-mode {
    background-color: #0099CC; /* New Blue */
    color: white;
    border-color: #007fad; /* Darker shade for border */
    min-height: 38px; /* Add min-height */
    display: flex; /* Add flex */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
}

.control-button.btn-display-mode:hover {
    background-color: #007fad; /* Darker shade on hover */
    border-color: #00668a;
}

/* Fretboard Action Buttons (Orange) */
.control-button.btn-fretboard-action {
    background-color: #FF9966; /* New Orange */
    color: white; /* Change text to white for better contrast */
    border-color: #e68a5c; /* Darker shade for border */
    min-height: 38px; /* Add min-height */
    display: flex; /* Add flex */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
}

.control-button.btn-fretboard-action:hover {
    background-color: #FFB899; /* Lighter orange on hover */
}

/* NEW: Active state for display mode buttons */
.control-button.active-display-mode {
    background-color: #007bff; /* Blue background for active display mode */
    color: white;
    border-color: #0056b3; /* Darker blue border */
}

/* NEW: Default style for selectable display mode buttons */
.control-button.display-mode-option-button {
    background-color: #f0f0f0; /* Default gray background */
    color: #333; /* Default dark text */
    border-color: #ccc; /* Default light gray border */
}

/* Hover state for selectable display mode buttons */
.control-button.display-mode-option-button:hover {
    background-color: #e0e0e0; /* Darker gray on hover */
    border-color: #bbb;
}

/* Active state needs to override the default gray */
/* Ensure specificity or make sure active-display-mode is applied correctly */
.control-button.display-mode-option-button.active-display-mode {
    background-color: #339999; /* Changed to Teal background like active chord type */
    color: white; /* White text for active */
    border-color: #2d8686; /* Changed to darker Teal border */
}

/* Adjust selection group styling if needed */
.selection-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 220px; /* Might need adjustment if content overflows */
    /* Consider removing min-width or setting flex-basis if things wrap awkwardly */
}

.selection-label {
    font-size: 1rem;
    font-weight: bold;
    color: #444;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.action-buttons-group .control-button {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    min-height: 38px; /* Add min-height to prevent height changes */
    display: flex; /* Add flex to center text vertically if needed */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
}