:root {
    --color-primary: #f7e88f;
    --color-primary-rgb: 247, 232, 143;
    --color-secondary: #9a693c;
    --color-secondary-rgb: 154, 105, 60;
    --color-dark: #181010;
    --color-text: #f8f3ec;
    --color-muted: #d3c4b2;
    --color-bg: #211413;
    --color-card: #2b1c19;
    --color-border: #4a312b;
    --color-primary-contrast: #2f1f0c;
    --color-header-bg: #351b17;
    --color-hero-start: rgba(247, 232, 143, 0.32);
    --color-hero-end: rgba(154, 105, 60, 0.26);
    --color-hero-wave-1: rgba(247, 232, 143, 0.2);
    --color-hero-wave-2: rgba(154, 105, 60, 0.28);
    --color-hero-heading: #fff5d3;
    --color-text-soft: rgba(248, 243, 236, 0.66);
    --color-surface-soft: rgba(43, 28, 25, 0.68);
    --color-overlay: rgba(247, 232, 143, 0.14);
    --color-overlay-strong: rgba(154, 105, 60, 0.2);
    --color-panel-gradient-start: rgba(43, 28, 25, 0.93);
    --color-panel-gradient-end: rgba(22, 14, 13, 0.97);
    --color-feature-gradient-end: rgb(34, 22, 20);
    --hero-mic-flag-top: #201313;
    --hero-mic-flag-middle: #f7e88f;
    --hero-mic-flag-bottom: #9a693c;
    --hero-mic-wave: rgba(247, 232, 143, 0.38);
    --hero-blob-color-1: rgba(247, 232, 143, 0.34);
    --hero-blob-color-2: rgba(154, 105, 60, 0.32);
    --hero-disc-glow: rgba(247, 232, 143, 0.42);
    --hero-disc-highlight: rgba(255, 245, 211, 0.9);
    --hero-orbit-color: rgba(247, 232, 143, 0.2);
    --chip-bg: rgba(247, 232, 143, 0.12);
    --chip-border: rgba(247, 232, 143, 0.26);
    --chip-bg-hover: rgba(247, 232, 143, 0.22);
    --chip-border-hover: rgba(247, 232, 143, 0.42);
    --chip-text: #f7e88f;
    --chip-text-hover: #2f1f0c;
    --chip-shadow: 0 12px 26px rgba(247, 232, 143, 0.16);
    --chip-shadow-hover: 0 16px 32px rgba(247, 232, 143, 0.24);
    --badge-bg: rgba(154, 105, 60, 0.22);
    --badge-text: #ebd5ba;
    --icon-bg: rgba(247, 232, 143, 0.14);
    --icon-color: #f7e88f;
    --player-button-bg: linear-gradient(135deg, #f7e88f, #9a693c);
    --player-button-color: #2f1f0c;
    --player-button-shadow: 0 10px 20px rgba(247, 232, 143, 0.22);
    --player-button-shadow-hover: 0 14px 26px rgba(154, 105, 60, 0.24);
    --favorite-toggle-bg: rgba(32, 21, 19, 0.82);
    --favorite-toggle-bg-hover: rgba(40, 27, 24, 0.92);
    --favorite-toggle-color: #f7e88f;
    --favorite-toggle-color-hover: #ffeeb2;
    --info-item-bg: rgba(32, 21, 19, 0.8);
    --info-item-border: rgba(247, 232, 143, 0.16);
    --info-link-color: #f7e88f;
    --comment-section-bg: linear-gradient(135deg, rgba(43, 28, 25, 0.9), rgba(22, 14, 13, 0.96));
    --comment-section-shadow: 0 24px 56px rgba(0, 0, 0, 0.38);
    --comment-form-bg: rgba(43, 28, 25, 0.65);
    --comment-form-border: rgba(247, 232, 143, 0.16);
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.28);
    --transition: all 0.25s ease;
}

.station-comments {
    background: linear-gradient(145deg, rgba(43, 28, 25, 0.92), rgba(22, 14, 13, 0.96));
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.35);
}

.comment-form {
    background: rgba(39, 26, 23, 0.85);
    border-color: rgba(247, 232, 143, 0.16);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.comment-form input,
.comment-form textarea {
    background: rgba(18, 12, 11, 0.35);
    border-color: rgba(255, 255, 255, 0.08);
}

.comment-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.comment-empty {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}