* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Светлая тема (по умолчанию) */
    --bg-primary: #e5d8c0;
    --bg-gradient-start: #f0e7d5;
    --bg-gradient-end: #cbb99a;
    --receiver-bg-start: #cfb690;
    --receiver-bg-end: #a5835c;
    --receiver-border: #7b623e;
    --receiver-shadow: #f8e6c6;
    --receiver-shadow-dark: #6f5237;
    --leg-bg-start: #a5834b;
    --leg-bg-end: #5f4a2b;
    --leg-border: #4f3a1f;
    --leg-shadow: #efdba2;
    --antenna-cap: #f5f2da;
    --antenna-cap-border: #5e4b2b;
    --antenna-cap-shadow: #5f4f32;
    --antenna-wire-start: #8f8465;
    --antenna-wire-mid: #cdc5b2;
    --antenna-wire-end: #e8e1cf;
    --brand-bar-start: #736546;
    --brand-bar-end: #544a33;
    --brand-bar-border: #bc9b6b;
    --brand-bar-shadow: #eadbbb;
    --brand-bar-text: #fff2ce;
    --brand-bar-text-shadow: #5f4e31;
    --now-playing-bg: #4f4332;
    --now-playing-border: #be9f6b;
    --station-name: #fff2d8;
    --station-freq: #eedbba;
    --freq-value-bg: #2f2519;
    --freq-value-border: #cfaa6a;
    --freq-value-text: #b3ecff;
    --equalizer-bg: #3b311f;
    --equalizer-border: #9e833c;
    --eq-bar: #88ff88;
    --scale-container-bg: #403521;
    --scale-container-border: #9f854a;
    --scale-header: #eedcb0;
    --scale-graduation-bg-start: #3a3225;
    --scale-graduation-bg-end: #262014;
    --scale-graduation-border: #826f3f;
    --major-tick: #f5deac;
    --minor-tick: #cab68b;
    --tick-label: #eadbb4;
    --station-dot: #ffcf7a;
    --station-dot-active: #ffffff;
    --slider-bg-start: #4f4535;
    --slider-bg-mid: #e0bd77;
    --slider-bg-end: #4f4535;
    --slider-border: #8e753d;
    --slider-thumb-start: #faf3db;
    --slider-thumb-end: #cfb787;
    --slider-thumb-border: #ffe9b6;
    --control-panel-bg-start: #8a764d;
    --control-panel-bg-end: #655435;
    --control-panel-border: #5f4f2e;
    --knob-bg-start: #dfc58b;
    --knob-bg-end: #9f8447;
    --knob-border: #b5975a;
    --knob-text: #352d1c;
    --knob-shadow: #f3dbaa;
    --play-switch-on-start: #88cc88;
    --play-switch-on-end: #2d5a2d;
    --volume-panel-bg: #756339;
    --volume-panel-border: #cbad68;
    --volume-icon: #fcf1d3;
    --volume-slider-bg: #3f351f;
    --volume-slider-border: #e2ba6a;
    --volume-slider-thumb-start: #fff1c3;
    --volume-slider-thumb-end: #cfa552;
    --volume-value: #fef2d6;
    --playlist-section-bg: #4f4432;
    --playlist-section-border: #ccb185;
    --playlist-title: #fff5d8;
    --playlist-title-border: #b5924b;
    --playlist-item-bg: #2d251b;
    --playlist-item-border: #7b643b;
    --playlist-item-hover: #4e3f2b;
    --playlist-item-active: #4a7a4a;
    --playlist-item-name: #ffefcf;
    --playlist-item-freq: #b2ecff;
    --scrollbar-track: #3d311d;
    --scrollbar-thumb: #ffcf7a;
    --footer-text: #fff2d8;
    --footer-link: #fff2d8;
    --timer-modal-bg: #4f4432;
    --timer-modal-border: #ccb185;
    --timer-modal-text: #fff5d8;
    --timer-preset-bg: #2d251b;
    --timer-preset-border: #7b643b;
    --timer-preset-hover: #4e3f2b;
    --timer-preset-active: #4a7a4a;
    --timer-indicator-bg: #2d251b;
    --timer-indicator-border: #ffcf7a;
    --timer-indicator-text: #ffefcf;
    --search-input-bg: #2d251b;
    --search-input-border: #7b643b;
    --search-input-text: #ffefcf;
    --search-input-placeholder: #8b7a5a;
    --search-clear-bg: #5e4f33;
    --search-clear-color: #ffefcf;
    --search-clear-hover: #ff6b6b;
    --favorite-star: #ffcf7a;
    --favorite-star-active: #ffd700;
    --playlist-favorite-star: #ffcf7a;
    --playlist-favorite-star-active: #ffd700;

    /* Нижняя панель */
    --door-bg: #2d251b;
    --door-border: #b5924b;
    --door-text: #ffefcf;
    --door-handle-bg: #5e4f33;
    --door-handle-color: #ffefcf;
    --door-handle-hover: #ff6b6b;
    --door-section-bg: #3d3223;
    --door-section-border: #7b643b;
    --door-label: #ffcf7a;
    --door-stamp-color: #aa0000;

    /* Уведомления */
    --notification-error-bg: #4a2a2a;
    --notification-error-border: #ff6b6b;
    --notification-info-bg: #2a4a2a;
    --notification-info-border: #88ff88;
    --loading-spinner-color: #ffffff;
}

:root[data-theme="dark"] {
    /* Темная тема */
    --bg-primary: #1a1a1a;
    --bg-gradient-start: #2d2d2d;
    --bg-gradient-end: #1f1f1f;
    --receiver-bg-start: #3d3d3d;
    --receiver-bg-end: #2a2a2a;
    --receiver-border: #4a4a4a;
    --receiver-shadow: #5a5a5a;
    --receiver-shadow-dark: #1a1a1a;
    --leg-bg-start: #4a4a4a;
    --leg-bg-end: #2d2d2d;
    --leg-border: #3a3a3a;
    --leg-shadow: #6a6a6a;
    --antenna-cap: #4a4a4a;
    --antenna-cap-border: #5a5a5a;
    --antenna-cap-shadow: #3a3a3a;
    --antenna-wire-start: #6a6a6a;
    --antenna-wire-mid: #7a7a7a;
    --antenna-wire-end: #8a8a8a;
    --brand-bar-start: #2a2a2a;
    --brand-bar-end: #1a1a1a;
    --brand-bar-border: #4a4a4a;
    --brand-bar-shadow: #3a3a3a;
    --brand-bar-text: #cccccc;
    --brand-bar-text-shadow: #2a2a2a;
    --now-playing-bg: #2a2a2a;
    --now-playing-border: #4a4a4a;
    --station-name: #cccccc;
    --station-freq: #aaaaaa;
    --freq-value-bg: #1a1a1a;
    --freq-value-border: #4a4a4a;
    --freq-value-text: #88aaff;
    --equalizer-bg: #2a2a2a;
    --equalizer-border: #4a4a4a;
    --eq-bar: #88aa88;
    --scale-container-bg: #2a2a2a;
    --scale-container-border: #4a4a4a;
    --scale-header: #aaaaaa;
    --scale-graduation-bg-start: #2a2a2a;
    --scale-graduation-bg-end: #1a1a1a;
    --scale-graduation-border: #4a4a4a;
    --major-tick: #aaaaaa;
    --minor-tick: #6a6a6a;
    --tick-label: #aaaaaa;
    --station-dot: #88aa88;
    --station-dot-active: #ffffff;
    --slider-bg-start: #2a2a2a;
    --slider-bg-mid: #6a6a6a;
    --slider-bg-end: #2a2a2a;
    --slider-border: #4a4a4a;
    --slider-thumb-start: #6a6a6a;
    --slider-thumb-end: #4a4a4a;
    --slider-thumb-border: #8a8a8a;
    --control-panel-bg-start: #3a3a3a;
    --control-panel-bg-end: #2a2a2a;
    --control-panel-border: #4a4a4a;
    --knob-bg-start: #4a4a4a;
    --knob-bg-end: #2a2a2a;
    --knob-border: #5a5a5a;
    --knob-text: #cccccc;
    --knob-shadow: #6a6a6a;
    --play-switch-on-start: #2a5a2a;
    --play-switch-on-end: #1a3a1a;
    --volume-panel-bg: #3a3a3a;
    --volume-panel-border: #5a5a5a;
    --volume-icon: #cccccc;
    --volume-slider-bg: #2a2a2a;
    --volume-slider-border: #5a5a5a;
    --volume-slider-thumb-start: #6a6a6a;
    --volume-slider-thumb-end: #4a4a4a;
    --volume-value: #cccccc;
    --playlist-section-bg: #2a2a2a;
    --playlist-section-border: #4a4a4a;
    --playlist-title: #cccccc;
    --playlist-title-border: #5a5a5a;
    --playlist-item-bg: #1a1a1a;
    --playlist-item-border: #3a3a3a;
    --playlist-item-hover: #2a2a2a;
    --playlist-item-active: #2a4a2a;
    --playlist-item-name: #cccccc;
    --playlist-item-freq: #88aaff;
    --scrollbar-track: #2a2a2a;
    --scrollbar-thumb: #5a5a5a;
    --footer-text: #aaaaaa;
    --footer-link: #aaaaaa;
    --timer-modal-bg: #2a2a2a;
    --timer-modal-border: #4a4a4a;
    --timer-modal-text: #cccccc;
    --timer-preset-bg: #1a1a1a;
    --timer-preset-border: #3a3a3a;
    --timer-preset-hover: #2a2a2a;
    --timer-preset-active: #2a4a2a;
    --timer-indicator-bg: #1a1a1a;
    --timer-indicator-border: #5a5a5a;
    --timer-indicator-text: #cccccc;
    --search-input-bg: #1a1a1a;
    --search-input-border: #3a3a3a;
    --search-input-text: #cccccc;
    --search-input-placeholder: #6a6a6a;
    --search-clear-bg: #3a3a3a;
    --search-clear-color: #cccccc;
    --search-clear-hover: #ff6b6b;
    --favorite-star: #ffcf7a;
    --favorite-star-active: #ffd700;
    --playlist-favorite-star: #ffcf7a;
    --playlist-favorite-star-active: #ffd700;

    /* Темные переменные для панели */
    --door-bg: #1a1a1a;
    --door-border: #5a5a5a;
    --door-text: #cccccc;
    --door-handle-bg: #3a3a3a;
    --door-handle-color: #cccccc;
    --door-handle-hover: #ff6b6b;
    --door-section-bg: #2a2a2a;
    --door-section-border: #4a4a4a;
    --door-label: #ffcf7a;
    --door-stamp-color: #ff8888;

    /* Темные версии уведомлений */
    --notification-error-bg: #3a2a2a;
    --notification-info-bg: #2a3a2a;
}

body {
    font-family: 'Arial', monospace;
    background: var(--bg-primary);
    background-image: radial-gradient(circle at 30% 40%, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    margin: 0;
    transition: background-color 0.3s, background-image 0.3s;
}

.radio-receiver {
    max-width: 1000px; /* немного увеличил, чтобы вместить 300px правую колонку */
    width: 100%;
    background: linear-gradient(145deg, var(--receiver-bg-start), var(--receiver-bg-end));
    border-radius: 30px 30px 20px 20px;
    padding: 0px 20px 20px 20px;
    box-shadow: 0 20px 30px rgba(0,0,0,0.5), inset 0 2px 8px var(--receiver-shadow), inset 0 -4px 8px var(--receiver-shadow-dark);
    border: 3px solid var(--receiver-border);
    position: relative;
    padding-top: 5px;
    transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
    margin-bottom: 0;
    z-index: 10;
}

.radio-receiver::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px 30px 20px 20px;
    background: repeating-linear-gradient(45deg, rgba(140, 110, 70, 0.08) 0px, rgba(140, 110, 70, 0.08) 2px, transparent 2px, transparent 12px);
    pointer-events: none;
}

.leg-left, .leg-right {
    position: absolute;
    bottom: -16px;
    width: 36px;
    height: 22px;
    background: linear-gradient(145deg, var(--leg-bg-start), var(--leg-bg-end));
    border-radius: 20% 20% 8px 8px;
    box-shadow: 0 6px 5px rgba(0,0,0,0.4), inset 0 -2px 4px #3d2e18, inset 0 2px 4px var(--leg-shadow);
    border-bottom: 2px solid var(--leg-border);
    z-index: 5;
    transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.leg-left { left: 30px; }
.leg-right { right: 30px; }

.antenna-on-wood {
    position: absolute;
    top: -25px;
    left: 0;
    width: 100%;
    height: 30px;
    z-index: 100;
    pointer-events: none;
}

.antenna-left-cap {
    position: absolute;
    left: 33px;
    top: 5px;
    width: 24px;
    height: 24px;
    background: radial-gradient(circle at 35% 35%, var(--antenna-cap), var(--antenna-cap-shadow));
    border-radius: 50%;
    border: 3px solid var(--antenna-cap-border);
    box-shadow: inset -3px -3px 8px var(--antenna-cap-shadow), 0 4px 8px rgba(0,0,0,0.4);
    z-index: 101;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.antenna-left-cap::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 5px;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #ffffff, transparent 80%);
    border-radius: 50%;
    opacity: 0.9;
}

.antenna-right-cap {
    position: absolute;
    right: 29px;
    top: 5px;
    width: 26px;
    height: 26px;
    background: linear-gradient(145deg, var(--antenna-cap), var(--antenna-cap-shadow));
    border-radius: 40% 40% 20% 20%;
    border: 2px solid var(--antenna-cap-border);
    box-shadow: 0 4px 8px rgba(0,0,0,0.4), inset 0 2px 6px var(--antenna-cap);
    z-index: 101;
    transform: rotate(-360deg);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.antenna-rivet {
    position: absolute;
    right: 36px;
    top: 12px;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 30% 30%, var(--antenna-cap), var(--antenna-cap-shadow));
    border-radius: 50%;
    border: 2px solid var(--antenna-cap-border);
    box-shadow: inset -2px -2px 5px var(--antenna-cap-shadow);
    z-index: 102;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.antenna-wire {
    position: absolute;
    left: 52px;
    right: 52px;
    top: 17px;
    height: 4px;
    background: linear-gradient(90deg, 
        var(--antenna-wire-start) 0%,
        var(--antenna-wire-mid) 15%,
        var(--antenna-wire-end) 30%,
        var(--antenna-wire-end) 70%,
        var(--antenna-wire-mid) 85%,
        var(--antenna-wire-start) 100%
    );
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 0 10px rgba(220,210,180,0.7);
    border-radius: 4px;
    z-index: 100;
    transform: rotate(0.2deg);
    transition: background 0.3s, box-shadow 0.3s;
}

.antenna-wire::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20%;
    width: 60%;
    height: 6px;
    background: radial-gradient(ellipse at 50% 0%, rgba(230,220,190,0.3), transparent 70%);
    border-radius: 50%;
    filter: blur(1px);
}

.antenna-shadow {
    position: absolute;
    left: 50px;
    right: 50px;
    top: 16px;
    height: 2px;
    background: rgba(0,0,0,0.1);
    filter: blur(2px);
    z-index: 99;
    border-radius: 2px;
}

.brand-bar {
    background: linear-gradient(0deg, var(--brand-bar-start), var(--brand-bar-end));
    border-radius: 20px 20px 8px 8px;
    padding: 8px 0;
    margin-top: 25px;
    margin-bottom: 20px;
    border: 2px solid var(--brand-bar-border);
    box-shadow: inset 0 1px 5px var(--brand-bar-shadow), 0 4px 0 #4a3f2b;
    position: relative;
    z-index: 10;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.brand-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 15px;
}

.brand-text {
    font-family: 'Impact', fantasy;
    font-size: 1.8rem;
    letter-spacing: 4px;
    color: var(--brand-bar-text);
    /* Убрано размытое свечение, оставлена только чёткая тень */
    text-shadow: 2px 2px 0 var(--brand-bar-text-shadow);
    transition: color 0.3s, text-shadow 0.3s;
    margin-right: auto;
}

.theme-toggle {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 30% 30%, var(--knob-bg-start), var(--knob-bg-end));
    border-radius: 50%;
    border: 2px solid var(--knob-border);
    box-shadow: 0 4px 0 #4f3f28, 0 6px 10px rgba(0,0,0,0.4), inset 0 1px 3px rgba(255,255,200,0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: all 0.2s ease, background 0.3s, border-color 0.3s;
    user-select: none;
    flex-shrink: 0;
}

.theme-toggle:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #4f3f28, 0 4px 8px rgba(0,0,0,0.4);
}

.theme-toggle-knob {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Рекламные блоки */
.ad-banner {
    background: #4f4432;
    border: 2px solid #b5924b;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    color: #ffefcf;
    font-size: 0.9rem;
    margin: 15px 0;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

.ad-banner-header {
    margin: 10px 20px 20px 20px;
}

.ad-banner-footer {
    margin: 20px 20px 10px 20px;
}

.ad-banner-control {
    width: 100%;
    margin-top: 15px;
}

.main-content {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    position: relative;
    z-index: 5;
}

.radio-section {
    flex: 1; /* занимает оставшееся место после фиксированной правой колонки */
    min-width: 0;
}

/* Блок текущей станции (компактный) */
.current-station {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--now-playing-bg);
    border-radius: 20px;
    padding: 10px 15px;
    margin-bottom: 20px;
    border: 2px solid var(--now-playing-border);
    box-shadow: inset 0 0 15px #19150e, 0 5px 0 #5f4f33;
}

.current-station .station-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: #30271c;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid #f5d492;
    box-shadow: 0 0 0 2px #997f4e, inset 0 0 10px #2a1f13;
}

.current-station .station-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.current-station .station-info {
    flex: 1;
    min-width: 0;
}

.current-station .station-name {
    color: var(--station-name);
    font-size: 1.2rem;
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    transition: color 0.3s;
}

.current-station .station-freq {
    color: var(--station-freq);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s;
}

.current-station .freq-value {
    background: var(--freq-value-bg);
    padding: 2px 8px;
    border-radius: 20px;
    color: var(--freq-value-text);
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    border: 2px solid var(--freq-value-border);
    box-shadow: inset 0 2px 5px black;
    letter-spacing: 1px;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.current-station .station-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.current-station .equalizer {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    background: var(--equalizer-bg);
    padding: 3px 6px;
    border-radius: 16px;
    border: 2px solid var(--equalizer-border);
    transition: background 0.3s, border-color 0.3s;
}

.current-station .eq-bar {
    width: 5px;
    height: 20px;
    background: var(--eq-bar);
    border-radius: 3px;
    transition: height 0.15s ease, background 0.3s;
    box-shadow: 0 0 8px var(--eq-bar);
}

.current-station .eq-bar.playing {
    animation: eqVintage 0.5s infinite alternate;
}

@keyframes eqVintage {
    0% { height: 8px; background: #88ff88; }
    50% { height: 28px; background: #ffff88; }
    100% { height: 12px; background: #ff8866; }
}

.current-station .eq-bar:nth-child(1) { animation-delay: 0.0s; }
.current-station .eq-bar:nth-child(2) { animation-delay: 0.2s; }
.current-station .eq-bar:nth-child(3) { animation-delay: 0.4s; }

.current-station .favorite-star {
    font-size: 1.8rem;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--favorite-star);
    line-height: 1;
}

.current-station .favorite-star:hover {
    transform: scale(1.1);
    color: var(--favorite-star-active);
}

.current-station .favorite-star.active {
    color: var(--favorite-star-active);
    text-shadow: 0 0 15px #ffaa00;
}

/* Плейлист (теперь в левой колонке) */
.playlist-section {
    background: var(--playlist-section-bg);
    border-radius: 20px;
    border: 2px solid var(--playlist-section-border);
    box-shadow: inset 0 0 15px #211c12, 0 5px 0 #5e4f33;
    padding: 15px 8px;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Новый заголовок плейлиста с поиском справа */
.playlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 0 5px;
}

.playlist-title {
    color: var(--playlist-title);
    font-size: 1.1rem;
    font-weight: bold;
    text-shadow: 1px 1px 0 #3b2e1b;
    transition: color 0.3s, border-color 0.3s;
    margin: 0;
    white-space: nowrap;
}

.stations-count {
    font-size: 0.8rem;
    color: var(--playlist-title);
    transition: color 0.3s;
    margin-left: 2px;
}

.playlist-search {
    width: 160px; /* поиск уже, примерно в 3 раза меньше прежнего */
}

.search-wrapper {
    position: relative;
    width: 100%;
}

.search-input {
    width: 100%;
    padding: 6px 28px 6px 10px;
    background: var(--search-input-bg);
    border: 2px solid var(--search-input-border);
    border-radius: 20px;
    color: var(--search-input-text);
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    outline: none;
    transition: all 0.2s ease, background 0.3s, border-color 0.3s, color 0.3s;
}

.search-input:focus {
    border-color: var(--station-dot);
    box-shadow: 0 0 10px var(--station-dot);
}

.search-input::placeholder {
    color: var(--search-input-placeholder);
}

.search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--search-clear-bg);
    border: 1px solid var(--search-input-border);
    color: var(--search-clear-color);
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

.search-clear.visible {
    opacity: 1;
    visibility: visible;
}

.search-clear:hover {
    background: var(--search-clear-hover);
    color: white;
    border-color: white;
}

.playlist-items {
    overflow-y: auto;
    max-height: 320px;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    transition: scrollbar-color 0.3s;
}

.playlist-items::-webkit-scrollbar {
    width: 6px;
}

.playlist-items::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 10px;
}

.playlist-items::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 10px;
}

.playlist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    margin-bottom: 4px;
    border-radius: 12px;
    background: var(--playlist-item-bg);
    border: 1px solid var(--playlist-item-border);
    cursor: pointer;
    transition: all 0.1s ease, background 0.3s, border-color 0.3s;
    position: relative;
}

.playlist-item:hover {
    background: var(--playlist-item-hover);
    border-color: var(--station-dot);
}

.playlist-item.active {
    background: var(--playlist-item-active);
    border-color: #ffffff;
    box-shadow: 0 0 15px #88ff88;
}

.playlist-item img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid var(--station-dot);
    transition: border-color 0.3s;
    flex-shrink: 0;
}

.playlist-item-info {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.playlist-item-name {
    color: var(--playlist-item-name);
    font-size: 0.9rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
}

.playlist-item-freq {
    color: var(--playlist-item-freq);
    font-size: 0.75rem;
    font-family: monospace;
    transition: color 0.3s;
}

.playlist-item.active .playlist-item-name,
.playlist-item.active .playlist-item-freq {
    color: #ffffff;
    text-shadow: 0 0 5px #000;
}

/* Разделитель между избранными и обычными станциями */
.playlist-separator {
    text-align: center;
    color: var(--playlist-title);
    font-size: 0.8rem;
    margin: 12px 0 8px 0;
    opacity: 0.7;
    letter-spacing: 2px;
    border-top: 1px dashed var(--playlist-title-border);
    padding-top: 8px;
}

/* Звездочка избранного в плейлисте */
.playlist-favorite-star {
    font-size: 1.2rem;
    color: var(--playlist-favorite-star);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-shadow: 0 0 5px currentColor;
    z-index: 10;
}

.playlist-favorite-star:hover {
    transform: scale(1.2);
    color: var(--playlist-favorite-star-active);
}

.playlist-favorite-star.active {
    color: var(--playlist-favorite-star-active);
    text-shadow: 0 0 10px #ffaa00;
}

/* Правая колонка управления — теперь ширина 300px */
.control-section {
    width: 300px;
    background: var(--playlist-section-bg);
    border-radius: 20px;
    border: 2px solid var(--playlist-section-border);
    box-shadow: inset 0 0 15px #211c12, 0 5px 0 #5e4f33;
    padding: 15px 15px;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.control-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 8px 6px;
    background: linear-gradient(165deg, var(--control-panel-bg-start), var(--control-panel-bg-end));
    border-radius: 28px;
    border: 2px solid var(--control-panel-border);
    box-shadow: 0 4px 0 #4b3e24, inset 0 1px 4px #fbe3b5;
    transition: background 0.3s, border-color 0.3s;
}

.knob, .play-switch {
    border-radius: 16px;
    transition: all 0.1s ease, background 0.3s, border-color 0.3s, color 0.3s;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 0 #4f3f28, 0 6px 10px rgba(0,0,0,0.4), inset 0 1px 3px rgba(255,255,200,0.6);
    border: 1px solid var(--knob-border);
    cursor: pointer;
    user-select: none;
    background: radial-gradient(circle at 30% 30%, var(--knob-bg-start), var(--knob-bg-end));
    color: var(--knob-text);
    text-shadow: 0 1px 0 var(--knob-shadow);
}

.knob {
    width: 52px;
    height: 48px;
    font-size: 1.6rem;
}

.play-switch {
    width: 62px;
    height: 56px;
    font-size: 2.2rem;
    background: radial-gradient(circle at 30% 30%, var(--knob-bg-start), var(--knob-bg-end));
    border: 2px solid #ffd98c;
    position: relative;
}

.play-switch.on {
    background: radial-gradient(circle at 30% 30%, var(--play-switch-on-start), var(--play-switch-on-end));
    box-shadow: 0 0 15px #88ff88, 0 4px 0 #1f4a1f, 0 6px 10px black;
    color: #ffffff;
    border-color: #ffffff;
}

.play-switch.loading {
    animation: pulse 1.5s infinite;
    color: #cccccc;
}

.play-switch.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid transparent;
    border-top-color: var(--loading-spinner-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.timer-knob {
    font-size: 1.4rem;
}

.knob:active, .play-switch:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #4f3f28, 0 4px 8px rgba(0,0,0,0.4);
}

.volume-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    padding: 8px 12px;
    background: var(--volume-panel-bg);
    border-radius: 30px;
    border: 2px solid var(--volume-panel-border);
    box-shadow: inset 0 1px 6px #fbeecc;
    transition: background 0.3s, border-color 0.3s;
}

.volume-icon {
    color: var(--volume-icon);
    font-size: 1.5rem;
    width: 30px;
    text-align: center;
    text-shadow: 2px 2px 0 #3e311b;
    transition: color 0.3s;
}

.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    flex-grow: 1;
    height: 8px;
    background: var(--volume-slider-bg);
    border-radius: 8px;
    outline: none;
    border: 2px solid var(--volume-slider-border);
    transition: background 0.3s, border-color 0.3s;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 30% 30%, var(--volume-slider-thumb-start), var(--volume-slider-thumb-end));
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff5cf;
    box-shadow: 0 3px 5px black;
    transition: background 0.3s, border-color 0.3s;
}

.volume-value {
    color: var(--volume-value);
    font-family: monospace;
    font-size: 1.1rem;
    min-width: 45px;
    text-align: right;
    text-shadow: 2px 2px 0 #3f311c;
    font-weight: bold;
    transition: color 0.3s;
    /* Добавляем отступ, чтобы не налезало на корпус */
    margin-left: auto;
    white-space: nowrap;
}

.timer-indicator {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--timer-indicator-bg);
    border: 2px solid var(--timer-indicator-border);
    border-radius: 20px;
    color: var(--timer-indicator-text);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.timer-indicator.active {
    border-color: #ffcf7a;
    box-shadow: 0 0 10px #ffcf7a;
}

.timer-stop {
    background: none;
    border: none;
    color: var(--timer-indicator-text);
    font-size: 1rem;
    cursor: pointer;
    padding: 0 5px;
    margin-left: 5px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.timer-stop:hover {
    background: rgba(255, 107, 107, 0.3);
    color: #ff6b6b;
}

/* Модальное окно таймера */
.timer-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.timer-modal.show {
    display: flex;
}

.timer-modal-content {
    background: var(--timer-modal-bg);
    border: 3px solid var(--timer-modal-border);
    border-radius: 20px;
    padding: 25px;
    max-width: 300px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: background 0.3s, border-color 0.3s;
}

.timer-modal-content h3 {
    color: var(--timer-modal-text);
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.3rem;
    transition: color 0.3s;
}

.timer-presets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.timer-preset {
    padding: 10px;
    background: var(--timer-preset-bg);
    border: 2px solid var(--timer-preset-border);
    border-radius: 12px;
    color: var(--timer-modal-text);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease, background 0.3s, border-color 0.3s, color 0.3s;
}

.timer-preset:hover {
    background: var(--timer-preset-hover);
    border-color: var(--station-dot);
}

.timer-preset.active {
    background: var(--timer-preset-active);
    border-color: #ffffff;
    box-shadow: 0 0 15px #88ff88;
}

.timer-custom {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.timer-custom label {
    color: var(--timer-modal-text);
    font-size: 0.9rem;
    transition: color 0.3s;
}

.timer-custom input {
    padding: 10px;
    background: var(--search-input-bg);
    border: 2px solid var(--search-input-border);
    border-radius: 12px;
    color: var(--search-input-text);
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    outline: none;
    transition: all 0.2s ease, background 0.3s, border-color 0.3s, color 0.3s;
}

.timer-custom input:focus {
    border-color: var(--station-dot);
    box-shadow: 0 0 10px var(--station-dot);
}

.timer-set {
    padding: 10px;
    background: var(--knob-bg-start);
    border: 2px solid var(--knob-border);
    border-radius: 12px;
    color: var(--knob-text);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease, background 0.3s, border-color 0.3s, color 0.3s;
}

.timer-set:hover {
    background: var(--knob-bg-end);
    border-color: var(--station-dot);
}

.timer-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: var(--timer-modal-text);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    transition: color 0.3s;
}

.timer-close:hover {
    color: #ff6b6b;
}

/* Скрытые SEO элементы */
.seo-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Уведомления */
.notification-area {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--notification-error-bg);
    border: 2px solid var(--notification-error-border);
    color: #fff2d8;
    padding: 12px 24px;
    border-radius: 40px;
    font-size: 1rem;
    z-index: 1000;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    animation: slideDown 0.3s ease;
    max-width: 90%;
    text-align: center;
}

.notification-area.info {
    background: var(--notification-info-bg);
    border-color: var(--notification-info-border);
}

@keyframes slideDown {
    from { transform: translate(-50%, -100%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* Основной футер (видимый) */
.main-footer {
    margin-top: 20px;
    text-align: center;
    color: var(--footer-text);
    font-size: 0.8rem;
    transition: color 0.3s;
    position: relative;
    z-index: 15;
    padding: 10px 0;
}

.main-footer nav {
    margin-top: 10px;
}

.main-footer a {
    color: var(--footer-link);
    text-decoration: none;
    transition: color 0.3s, text-shadow 0.3s;
    padding: 0 5px;
}

.main-footer a:hover {
    text-decoration: underline;
    color: var(--station-dot);
}

/* Сама панель-дверца */
.receiver-door {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--door-bg);
    border-top: 4px solid var(--door-border);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    z-index: 100;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    padding-top: 15px;
}

.receiver-door.open {
    transform: translateY(0);
}

.door-handle {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 30px;
    background: var(--door-handle-bg);
    border: 2px solid var(--door-border);
    border-radius: 20px 20px 0 0;
    color: var(--door-handle-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
    transition: background 0.2s, color 0.2s;
    z-index: 101;
}

.door-handle:hover {
    background: var(--door-handle-hover);
    color: white;
}

.door-content {
    padding: 25px 20px 30px 20px;
    color: var(--door-text);
    font-family: 'Courier New', monospace;
    max-width: 800px;
    margin: 0 auto;
}

/* Общие стили для всех страниц внутри панели */
.door-page h2 {
    font-size: 1.6rem;
    margin-bottom: 20px;
    color: var(--door-label);
    text-align: center;
    border-bottom: 2px dashed var(--door-border);
    padding-bottom: 10px;
    font-family: 'Impact', fantasy;
    letter-spacing: 2px;
}

.door-page h3 {
    font-size: 1.2rem;
    margin: 20px 0 10px 0;
    color: var(--door-label);
}

.door-section {
    background: var(--door-section-bg);
    border: 1px solid var(--door-section-border);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

.door-section ul {
    list-style-type: none;
    padding-left: 0;
}

.door-section li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.door-section li::before {
    content: '📻';
    position: absolute;
    left: 0;
    color: var(--door-label);
}

.door-label {
    color: var(--door-label);
    font-weight: bold;
    margin-right: 8px;
}

.door-footer {
    text-align: center;
    margin-top: 30px;
    font-style: italic;
    color: var(--door-text);
    opacity: 0.7;
    border-top: 1px dashed var(--door-border);
    padding-top: 15px;
}

/* Стили для страницы "Политика конфиденциальности" */
.privacy-page {
    position: relative;
}

.privacy-seal {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 4rem;
    opacity: 0.3;
    transform: rotate(15deg);
    color: var(--door-stamp-color);
    pointer-events: none;
}

.privacy-stamp {
    display: inline-block;
    border: 3px double var(--door-stamp-color);
    color: var(--door-stamp-color);
    padding: 8px 20px;
    font-size: 1.2rem;
    font-weight: bold;
    transform: rotate(-5deg);
    margin-top: 15px;
    opacity: 0.8;
}

/* Стили для страницы "Контакты" */
.contact-page .telegram-header {
    display: flex;
    justify-content: space-between;
    background: #2a2a2a;
    color: #ffcf7a;
    padding: 5px 10px;
    border: 1px solid var(--door-border);
    margin-bottom: 15px;
    font-weight: bold;
    font-family: monospace;
}

.telegram-content {
    font-family: 'Courier New', monospace;
    line-height: 1.8;
}

.telegram-content a {
    color: var(--door-label);
    text-decoration: none;
}

.telegram-content a:hover {
    text-decoration: underline;
}

.telegram-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-top: 15px;
}

/* Стили для страницы "О проекте" */
.about-page {
    background-image: repeating-linear-gradient(45deg, rgba(255,215,130,0.05) 0px, rgba(255,215,130,0.05) 4px, transparent 4px, transparent 8px);
}

/* Заголовок дверцы с крестиком */
.door-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 2px dashed var(--door-border);
    padding-bottom: 10px;
}

.door-header h2 {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.door-close-btn {
    background: var(--door-handle-bg);
    border: 2px solid var(--door-border);
    color: var(--door-handle-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s;
}

.door-close-btn:hover {
    background: var(--door-handle-hover);
    color: white;
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 700px) {
    .main-content {
        flex-direction: column;
    }
    
    .control-section {
        width: 100%;
        margin-top: 20px;
    }
    
    .playlist-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .playlist-search {
        width: 100%;
    }
    
    .current-station {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .current-station .station-controls {
        margin-left: auto;
    }
    
    .ad-banner-header,
    .ad-banner-footer {
        margin: 10px 10px;
    }
    
    .brand-bar { 
        margin-top: 15px;
    }
    
    .brand-text {
        font-size: 1.4rem;
    }
    
    .playlist-section {
        max-height: 350px;
    }
    
    .playlist-items {
        max-height: 250px;
    }
    
    .knob {
        width: 44px;
        height: 40px;
        font-size: 1.4rem;
    }
    
    .play-switch {
        width: 52px;
        height: 48px;
        font-size: 1.8rem;
    }
    
    .timer-knob {
        font-size: 1.2rem;
    }
    
    .volume-panel {
        padding: 6px 10px;
    }
    
    .volume-icon {
        font-size: 1.4rem;
        width: 30px;
    }
    
    .volume-slider::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
    }
    
    .volume-value {
        font-size: 1rem;
        min-width: 35px;
    }
    
    .antenna-on-wood {
        top: -18px;
    }
    
    .antenna-left-cap {
        left: 12px;
        width: 18px;
        height: 18px;
        top: 8px;
        border-width: 2px;
    }
    
    .antenna-left-cap::after {
        top: 3px;
        left: 4px;
        width: 4px;
        height: 4px;
    }
    
    .antenna-right-cap {
        right: 10px;
        width: 20px;
        height: 20px;
        top: 7px;
    }
    
    .antenna-rivet {
        right: 16px;
        width: 10px;
        height: 10px;
        top: 12px;
    }
    
    .antenna-wire {
        left: 28px;
        right: 28px;
        top: 18px;
        height: 3px;
    }
    
    .antenna-shadow {
        left: 28px;
        right: 28px;
        top: 17px;
    }

    .door-content {
        padding: 20px 15px;
    }

    .door-page h2 {
        font-size: 1.3rem;
    }

    .privacy-seal {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .current-station .station-icon {
        width: 45px;
        height: 45px;
    }
    
    .current-station .station-name {
        font-size: 1rem;
    }
    
    .playlist-section {
        max-height: 300px;
    }
    
    .playlist-items {
        max-height: 200px;
    }
    
    .antenna-on-wood {
        top: -15px;
    }
    
    .antenna-left-cap {
        left: 8px;
        width: 16px;
        height: 16px;
    }
    
    .antenna-right-cap {
        right: 6px;
        width: 18px;
        height: 18px;
    }
    
    .antenna-wire {
        left: 22px;
        right: 22px;
    }
}

/* (весь предыдущий код style.css остаётся без изменений, добавляем в конец) */

/* Стили для заголовка страницы (h1) */
.page-title {
    font-size: 1.2rem;
    color: var(--station-name);
    margin: 0 0 5px 0;
    font-weight: normal;
    line-height: 1.2;
    transition: color 0.3s;
}

/* Адаптация для мобильных */
@media (max-width: 700px) {
    .page-title {
        font-size: 1rem;
    }
}

/* Если заголовок страницы находится внутри .station-info, корректируем отступы */
.station-info .page-title {
    margin-bottom: 2px;
}

/* Скрываем блок частоты, когда нет станции */
#stationFreqBlock[style*="display: none"] {
    display: none !important;
}