body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: #2d2d2d; /* Темный фон */
    color: #e0e0e0; /* Светлый текст */
}

h1 {
    color: #fafafa;
    margin-bottom: 30px;
}

.circle-container {
    margin-bottom: 30px;
    /* Тень для круга */
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
}

/* Стили для сегментов SVG */
#circle-of-fifths .segment {
    fill: #5a5a5a; /* Базовый серый цвет сегмента */
    stroke: #333; /* Темная обводка */
    stroke-width: 1.5;
    cursor: pointer;
    transition: fill 0.2s ease-out, stroke 0.2s ease-out; /* Плавный переход */
    /* Указываем, что события должен ловить сам сегмент, а не его прозрачные части */
    pointer-events: bounding-box;
}

/* Осветление сегмента при наведении мыши */
#circle-of-fifths .segment:hover {
    fill: #6b6b6b;
}

/* --- Стили подсветки --- */

/* Выбранный МАЖОРНЫЙ сегмент */
#circle-of-fifths .segment.highlight-selected-major {
    fill: #e9c46a; /* Золотистый */
    stroke: #f4a261; /* Оранжевая обводка */
    stroke-width: 2.5; /* Чуть толще обводка */
}

/* Выбранный МИНОРНЫЙ сегмент */
#circle-of-fifths .segment.highlight-selected-minor {
    fill: #a8dadc; /* Светло-голубой */
    stroke: #457b9d; /* Темно-синяя обводка */
    stroke-width: 2.5; /* Чуть толще обводка */
}

/* Сегмент IV ступени (Субдоминанта) */
#circle-of-fifths .segment.highlight-iv {
    fill: #2a9d8f; /* Бирюзовый */
    opacity: 0.9; /* Небольшая прозрачность, чтобы не спорить с выбранным */
}

/* Сегмент V ступени (Доминанта) */
#circle-of-fifths .segment.highlight-v {
    fill: #e76f51; /* Коралловый */
    opacity: 0.9; /* Небольшая прозрачность */
}

/* Класс для параллельной тональности (на всякий случай, если решим стилизовать) */
/* Пока не используется активно, но можно добавить обводку или эффект */
#circle-of-fifths .segment.highlight-relative {
    /* Например: */
    /* stroke-dasharray: 4; */
    /* stroke-opacity: 0.7; */
}


/* --- Стили для текста внутри SVG --- */
#circle-of-fifths text {
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /* Явно укажем шрифт */
    text-anchor: middle; /* Горизонтальное центрирование */
    dominant-baseline: central; /* Вертикальное центрирование (лучше чем dy) */
    pointer-events: none; /* Текст не должен мешать кликам */
    fill: #f0f0f0; /* Светлый цвет текста */
    font-weight: bold;
    /* Трюк для создания обводки текста для лучшей читаемости на любом фоне */
    paint-order: stroke;
    stroke: #2d2d2d; /* Цвет фона как обводка */
    stroke-width: 2px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
}

/* Опционально: можно немного менять стиль текста при подсветке */
/* #circle-of-fifths .segment.highlight-selected-major + text {
    fill: #fff; // Мажорный текст чуть ярче
} */
/* #circle-of-fifths .segment.highlight-selected-minor + text + text { // Второй text - минорный
    fill: #fff; // Минорный текст чуть ярче
} */


/* --- Стили для Инфо-панели --- */
/* ... (предыдущие стили) ... */

/* --- Стили для Инфо-панели --- */
.info-panel {
    text-align: center; /* Оставляем центр для заголовка аккордов и самих аккордов */
    background-color: #3f3f3f;
    padding: 20px 25px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    min-width: 350px;
    max-width: 450px; /* Ограничим максимальную ширину */
    line-height: 1.2; /* Увеличим межстрочный интервал для лучшей читаемости */
}

/* Стилизуем параграфы с метками-значениями */
.info-panel p:has(span.info-label) { /* Выбираем P, содержащие .info-label */
    text-align: left; /* Выравниваем текст в этих параграфах по левому краю */
    margin: 6px 0; /* Небольшой вертикальный отступ */
    margin-left: 20px; /* Добавим небольшой отступ слева для всей строки */
}

/* Стили для МЕТОК */
.info-label {
    display: inline-block; /* Чтобы применить ширину */
    width: 190px;
    padding-right: 10px; /* Отступ между меткой и значением */
    color: #cccccc; /* Сделаем метки чуть бледнее */
    text-align: left; /* Выравниваем текст по левому краю */
    font-weight: normal; /* Уберем жирность у меток */
}

/* Стили для ЗНАЧЕНИЙ (тональностей, знаков) */
#selected-key, #key-signature, #relative-key, #iv-key, #v-key {
     color: #e9c46a; /* Оставляем золотистый */
     font-weight: bold; /* Оставляем жирность */
     /* display: inline-block; */ /* Обычно не требуется, но можно добавить */
}

/* Горизонтальная линия */
hr {
    border: none;
    height: 1px;
    background-color: #555;
    margin: 20px 0; /* Увеличим отступы */
}

/* Стили для заголовка аккордов (он остается по центру) */
.info-panel hr + p {
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: bold; /* Можно сделать жирнее */
}

/* Стили для строки с аккордами (она остается по центру) */
.info-panel p:has(span.chord-label) {
     text-align: center; /* Явно указываем центр */
}

/* Стили для самих аккордов */
.chord-label {
    color: #ccc;
    font-weight: normal;
    margin-right: 2px;
}
.chord-name {
    color: #e9c46a;
    font-weight: bold;
    padding: 0 5px; /* Чуть больше отступ вокруг аккорда */
}

/* Убираем лишние пробелы или переносы, если они есть */
.info-panel span {
    vertical-align: middle; /* Попробуем выровнять по вертикали */
}