:root {

    --background: #ffffff;

    --surface: #2f5f7;

    --surface-soft: #f7f9fa;

    --border: #dce3e8;

    --border-dark: #cbd5dc;

    --text: #17212b;

    --muted: #71808d;

    --green: #13a866;

    --green-dark: #07824d;

    --green-light: #e7f8ef;

    --blue: #287dcc;

    --blue-light: #eaf3fc;

    --shadow:
        0 4px 18px rgba(
            27,
            48,
            64,
            0.08
        );

}


/* ==========================================================
   RESET
   ========================================================== */

* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
}


body {

    margin: 0;

    min-height: 100vh;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


/* ==========================================================
   WRAPPER
   ========================================================== */

.radiodx-wrapper {

    width:
        min(
            1450px,
            calc(100% - 32px)
        );

    margin:
        auto;

    padding:
        24px 0 40px;

}


/* ==========================================================
   HEADER
   ========================================================== */

.radiodx-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    padding:
        0 0 20px;

    margin-bottom:
        20px;

    border-bottom:
        1px solid var(--border);

}


.radiodx-logo {

    font-size:
        30px;

    font-weight:
        800;

    letter-spacing:
        -1px;

}


.radiodx-logo > span:last-child {

    color:
        var(--green);

}


.radio-symbol {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        32px;

    margin-right:
        7px;

    border:
        2px solid var(--green);

    border-radius:
        50%;

    color:
        var(--green);

    font-size:
        17px;

}


.radiodx-subtitle {

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        13px;

}


.clock {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        9px 13px;

    border:
        1px solid var(--border);

    border-radius:
        8px;

    background:
        var(--surface);

    color:
        var(--text);

    font-family:
        monospace;

    font-size:
        13px;

    box-shadow:
        var(--shadow);

}


.clock small {

    color:
        var(--muted);

    font-family:
        inherit;

    font-size:
        10px;

}


.live-indicator {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
         #e53935;

    animation:
        pulse 1.5s infinite;

}


/* ==========================================================
   ON AIR ANIMATION
   ========================================================== */

@keyframes pulse {

    0% {
        opacity: 1;
        box-shadow:
            0 0 0 0
            rgba(19, 168, 102, 0.55);
    }

    50% {
        opacity: 0.45;
    }

    100% {
        opacity: 1;
        box-shadow:
            0 0 0 7px
            rgba(19, 168, 102, 0);
    }

}


/* ==========================================================
   STATUS
   ========================================================== */

.status-bar {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    margin-bottom:
        15px;

    padding:
        11px 14px;

    border:
        1px solid var(--border);

    border-radius:
        7px;

    background:
        var(--surface);

    color:
        var(--muted);

    font-size:
        12px;

}


.status-bar strong {

    color:
        var(--green);

    font-size:
        15px;

}


/* ==========================================================
   FILTER PANEL
   ========================================================== */

.filter-panel {

    margin-bottom:
        22px;

    padding:
        15px;

    border:
        1px solid var(--border);

    border-radius:
        9px;

    background:
        var(--surface);

    box-shadow:
        var(--shadow);

}


.filter-label {

    margin-bottom:
        8px;

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.band-label {

    margin-top:
        15px;

}


.target-buttons,
.band-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

}


.target-button,
.band-button {

    padding:
        8px 13px;

    border:
        1px solid var(--border-dark);

    border-radius:
        6px;

    background:
        var(--surface-soft);

    color:
        #52616d;

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        650;

    transition:
        all 0.15s ease;

}


.target-button:hover,
.band-button:hover {

    border-color:
        var(--green);

    color:
        var(--green-dark);

}


.target-button.active,
.band-button.active {

    border-color:
        var(--green);

    background:
        var(--green);

    color:
        white;

}


/* ==========================================================
   STATION LIST
   ========================================================== */

.station-list {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(315px, 1fr)
        );

    gap:
        14px;

}


/* ==========================================================
   STATION CARD
   ========================================================== */

.station-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        300px;

    padding:
        17px;

    border:
        1px solid var(--border);

    border-radius:
        9px;

    background:
        var(--surface);

    box-shadow:
        var(--shadow);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.2s ease;

}


.station-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px rgba(
            27,
            48,
            64,
            0.12
        );

}


.filtered-out {

    display:
        none;

}


/* ==========================================================
   ON AIR
   ========================================================== */

.onair {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    margin-bottom:
        7px;

    color:
        var(--green-dark);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.8px;

}


.onair-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #e53935;

    animation:
        pulse 1.5s infinite;

}


/* ==========================================================
   FREQUENCY
   ========================================================== */

.frequency {

    color:
        #1769aa;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size:
        30px;

    font-weight:
        800;

    letter-spacing:
        -1px;
}


.frequency span {

    color:
        #596772;

    font-size:
        12px;

    font-weight:
        600;
}


/* ==========================================================
   BAND
   ========================================================== */

.card-band {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    align-self:
        flex-start;

    margin:
        7px 0 12px;

    padding:
        4px 7px;

    border:
        1px solid var(--border);

    border-radius:
        4px;

    background:
        var(--surface-soft);

    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        10px;

}


.card-band span {

    padding-left:
        6px;

    border-left:
        1px solid var(--border-dark);

    color:
        #7a8893;

}


/* ==========================================================
   STATION NAME
   ========================================================== */

.station-name {

    min-height:
        25px;

    margin:
        0 0 14px;

    color:
        #17212b;

    font-size:
        20px;

    font-weight:
        750;

    line-height:
        1.3;
}

/* ==========================================================
   DETAILS
   ========================================================== */

.details {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0;

    margin-bottom:
        14px;

}


.details > div {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        15px;

    padding:
        7px 0;

    border-bottom:
        1px solid #edf0f2;

}


.details > div:last-child {

    border-bottom:
        0;

}


.details span {

    color:
        #596772;

    font-size:
        12px;

}


.details strong {

    color:
        #26343e;

    font-family:
        monospace;

    font-size:
        13px;

    font-weight:
        650;

    text-align:
        right;
}


.details .target-code {

    color:
        var(--green-dark);

}


/* ==========================================================
   WEB SDR
   ========================================================== */

.websdr {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    width:
        100%;

    margin-top:
        auto;

    padding:
        10px;

    border:
        1px solid var(--green);

    border-radius:
        6px;

    background:
        var(--green-light);

    color:
        var(--green-dark);

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        750;

    transition:
        all 0.15s ease;

}


.websdr:hover {

    background:
        var(--green);

    color:
        white;

}


.websdr b {

    margin-left:
        auto;

    font-size:
        14px;

}


.no-websdr {

    margin-top:
        auto;

    padding:
        10px;

    border:
        1px solid var(--border);

    border-radius:
        6px;

    background:
        var(--surface-soft);

    color:
        #9aa6ae;

    font-size:
        10px;

    text-align:
        center;

}


/* ==========================================================
   EMPTY / ERROR
   ========================================================== */

.empty {

    grid-column:
        1 / -1;

    padding:
        60px 20px;

    border:
        1px solid var(--border);

    border-radius:
        9px;

    background:
        var(--surface);

    text-align:
        center;

}


.empty-symbol {

    margin-bottom:
        10px;

    color:
        var(--muted);

    font-size:
        35px;

}


.empty h2 {

    margin:
        0 0 6px;

    font-size:
        20px;

}


.empty p {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        12px;

}


.error-box {

    padding:
        25px;

    border:
        1px solid #f0b7b7;

    border-radius:
        8px;

    background:
        #fff5f5;

    color:
        #b53636;

}


/* ==========================================================
   FOOTER
   ========================================================== */

footer {

    margin-top:
        25px;

    padding-top:
        15px;

    border-top:
        1px solid var(--border);

    color:
        #8b98a2;

    font-size:
        10px;

    text-align:
        center;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 700px) {

    .radiodx-wrapper {

        width:
            calc(100% - 16px);

        padding-top:
            15px;

    }


    .radiodx-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .clock {

        align-self:
            flex-start;

    }


    .status-bar {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            4px;

    }


    .station-list {

        grid-template-columns:
            1fr;

    }


    .target-buttons,
    .band-buttons {

        gap:
            5px;

    }


    .target-button,
    .band-button {

        padding:
            8px 10px;

    }

}