:root {
    --wp--preset--aspect-ratio--square: 1;
    --wp--preset--aspect-ratio--4-3: 4/3;
    --wp--preset--aspect-ratio--3-4: 3/4;
    --wp--preset--aspect-ratio--3-2: 3/2;
    --wp--preset--aspect-ratio--2-3: 2/3;
    --wp--preset--aspect-ratio--16-9: 16/9;
    --wp--preset--aspect-ratio--9-16: 9/16;
    --wp--preset--color--black: #000000;
    --wp--preset--color--cyan-bluish-gray: #abb8c3;
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--pale-pink: #f78da7;
    --wp--preset--color--vivid-red: #cf2e2e;
    --wp--preset--color--luminous-vivid-orange: #ff6900;
    --wp--preset--color--luminous-vivid-amber: #fcb900;
    --wp--preset--color--light-green-cyan: #7bdcb5;
    --wp--preset--color--vivid-green-cyan: #00d084;
    --wp--preset--color--pale-cyan-blue: #8ed1fc;
    --wp--preset--color--vivid-cyan-blue: #0693e3;
    --wp--preset--color--vivid-purple: #9b51e0;
    --wp--preset--color--palette-color-1: var(--theme-palette-color-1, #2872fa);
    --wp--preset--color--palette-color-2: var(--theme-palette-color-2, #1559ed);
    --wp--preset--color--palette-color-3: var(--theme-palette-color-3, #3A4F66);
    --wp--preset--color--palette-color-4: var(--theme-palette-color-4, #192a3d);
    --wp--preset--color--palette-color-5: var(--theme-palette-color-5, #e1e8ed);
    --wp--preset--color--palette-color-6: var(--theme-palette-color-6, #f2f5f7);
    --wp--preset--color--palette-color-7: var(--theme-palette-color-7, #FAFBFC);
    --wp--preset--color--palette-color-8: var(--theme-palette-color-8, #ffffff);
    --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
    --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
    --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
    --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%);
    --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
    --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
    --wp--preset--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
    --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
    --wp--preset--gradient--luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
    --wp--preset--gradient--pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
    --wp--preset--gradient--electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
    --wp--preset--gradient--midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
    --wp--preset--gradient--juicy-peach: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
    --wp--preset--gradient--young-passion: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
    --wp--preset--gradient--true-sunset: linear-gradient(to right, #fa709a 0%, #fee140 100%);
    --wp--preset--gradient--morpheus-den: linear-gradient(to top, #30cfd0 0%, #330867 100%);
    --wp--preset--gradient--plum-plate: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --wp--preset--gradient--aqua-splash: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
    --wp--preset--gradient--love-kiss: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
    --wp--preset--gradient--new-retrowave: linear-gradient(to top, #3b41c5 0%, #a981bb 49%, #ffc8a9 100%);
    --wp--preset--gradient--plum-bath: linear-gradient(to top, #cc208e 0%, #6713d2 100%);
    --wp--preset--gradient--high-flight: linear-gradient(to right, #0acffe 0%, #495aff 100%);
    --wp--preset--gradient--teen-party: linear-gradient(-225deg, #FF057C 0%, #8D0B93 50%, #321575 100%);
    --wp--preset--gradient--fabled-sunset: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
    --wp--preset--gradient--arielle-smile: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
    --wp--preset--gradient--itmeo-branding: linear-gradient(180deg, #2af598 0%, #009efd 100%);
    --wp--preset--gradient--deep-blue: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
    --wp--preset--gradient--strong-bliss: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
    --wp--preset--gradient--sweet-period: linear-gradient(to top, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%);
    --wp--preset--gradient--purple-division: linear-gradient(to top, #7028e4 0%, #e5b2ca 100%);
    --wp--preset--gradient--cold-evening: linear-gradient(to top, #0c3483 0%, #a2b6df 100%, #6b8cce 100%, #a2b6df 100%);
    --wp--preset--gradient--mountain-rock: linear-gradient(to right, #868f96 0%, #596164 100%);
    --wp--preset--gradient--desert-hump: linear-gradient(to top, #c79081 0%, #dfa579 100%);
    --wp--preset--gradient--ethernal-constance: linear-gradient(to top, #09203f 0%, #537895 100%);
    --wp--preset--gradient--happy-memories: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
    --wp--preset--gradient--grown-early: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
    --wp--preset--gradient--morning-salad: linear-gradient(-225deg, #B7F8DB 0%, #50A7C2 100%);
    --wp--preset--gradient--night-call: linear-gradient(-225deg, #AC32E4 0%, #7918F2 48%, #4801FF 100%);
    --wp--preset--gradient--mind-crawl: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);
    --wp--preset--gradient--angel-care: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);
    --wp--preset--gradient--juicy-cake: linear-gradient(to top, #e14fad 0%, #f9d423 100%);
    --wp--preset--gradient--rich-metal: linear-gradient(to right, #d7d2cc 0%, #304352 100%);
    --wp--preset--gradient--mole-hall: linear-gradient(-20deg, #616161 0%, #9bc5c3 100%);
    --wp--preset--gradient--cloudy-knoxville: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
    --wp--preset--gradient--soft-grass: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
    --wp--preset--gradient--saint-petersburg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --wp--preset--gradient--everlasting-sky: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
    --wp--preset--gradient--kind-steel: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
    --wp--preset--gradient--over-sun: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
    --wp--preset--gradient--premium-white: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
    --wp--preset--gradient--clean-mirror: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
    --wp--preset--gradient--wild-apple: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
    --wp--preset--gradient--snow-again: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
    --wp--preset--gradient--confident-cloud: linear-gradient(to top, #dad4ec 0%, #dad4ec 1%, #f3e7e9 100%);
    --wp--preset--gradient--glass-water: linear-gradient(to top, #dfe9f3 0%, white 100%);
    --wp--preset--gradient--perfect-white: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
    --wp--preset--font-size--small: 13px;
    --wp--preset--font-size--medium: 20px;
    --wp--preset--font-size--large: clamp(22px, 1.375rem + ((1vw - 3.2px) * 0.625), 30px);
    --wp--preset--font-size--x-large: clamp(30px, 1.875rem + ((1vw - 3.2px) * 1.563), 50px);
    --wp--preset--font-size--xx-large: clamp(45px, 2.813rem + ((1vw - 3.2px) * 2.734), 80px);
    --wp--preset--spacing--20: 0.44rem;
    --wp--preset--spacing--30: 0.67rem;
    --wp--preset--spacing--40: 1rem;
    --wp--preset--spacing--50: 1.5rem;
    --wp--preset--spacing--60: 2.25rem;
    --wp--preset--spacing--70: 3.38rem;
    --wp--preset--spacing--80: 5.06rem;
    --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
    --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
}

:root {
    --wp--style--global--content-size: 1200px;
    --wp--style--global--wide-size: 1200px;
    --theme-content-spacing: 1.5em;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

* {
    box-sizing: border-box;
}

/* Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header */
header {
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.site-logo img {
    max-height: 80px;
    width: auto;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

.main-nav a {
    font-weight: 600;
    color: var(--wp--preset--color--palette-color-3);
    text-transform: uppercase;
    font-size: 0.9rem;
}

.main-nav a:hover {
    color: var(--wp--preset--color--palette-color-1);
}

/* Hero / Title */
.page-header {
    background: var(--wp--preset--gradient--deep-blue);
    color: white;
    padding: 3rem 0;
    text-align: center;
    margin-bottom: 2rem;
}

.page-title {
    margin: 0;
    font-size: 2.5rem;
}

/* Grid */
.station-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 4rem;
}

.search-container {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

#station-search {
    width: 100%;
    max-width: 500px;
    padding: 0.8rem 1.2rem;
    border: 2px solid #eee;
    border-radius: 50px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

#station-search:focus {
    outline: none;
    border-color: var(--wp--preset--color--palette-color-1);
}

.station-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    gap: 1rem;
}

.station-card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.station-link-wrapper {
    display: flex;
    align-items: center;
    flex-grow: 1;
    gap: 1.5rem;
}

.station-thumb {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: #f9f9f9;
    border-radius: 4px;
    flex-shrink: 0;
}

.station-info {
    text-align: left;
    flex-grow: 1;
}

.station-title {
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
    font-weight: 700;
}

.station-location {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1rem;
}

.play-station-btn {
    background: var(--wp--preset--color--palette-color-1);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s, transform 0.2s;
}

.play-station-btn:hover {
    background: var(--wp--preset--color--palette-color-2);
    transform: scale(1.05);
}

/* Footer */
footer {
    background: #222;
    color: #fff;
    padding: 2rem 0;
    margin-top: auto;
    text-align: center;
}

.footer-links a {
    color: #ccc;
    margin: 0 0.5rem;
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: #fff;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 3rem;
}

.page-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    border-radius: 4px;
}

.page-btn.active {
    background: var(--wp--preset--color--palette-color-1);
    color: white;
    border-color: var(--wp--preset--color--palette-color-1);
}

/* Player Bar */
.sticky-player {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    transform: translateY(100%);
    /* Hidden by default */
    transition: transform 0.3s ease-in-out;
}

.sticky-player.visible {
    transform: translateY(0);
}

.player-container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    gap: 2rem;
}

.player-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 300px;
}

.player-thumb {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: #f0f0f0;
    border-radius: 4px;
}

.player-meta h4 {
    margin: 0;
    font-size: 1rem;
}

.player-meta span {
    font-size: 0.8rem;
    color: #777;
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-grow: 1;
    justify-content: center;
}

.ctrl-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctrl-btn.play-pause {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--wp--preset--color--palette-color-1);
    color: white;
    font-size: 1.2rem;
}

.player-volume {
    width: 200px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.player-volume input {
    width: 100%;
}

@media (max-width: 768px) {
    .site-header-inner {
        flex-direction: column;
        gap: 1rem;
    }

    .player-container {
        flex-direction: column;
        /* Or simplify for mobile */
        height: auto;
        padding: 1rem;
    }

    .sticky-player {
        height: auto;
    }
}