:root{
    --navy:#071A33;
    --navy2:#0B2742;
    --blue:#0E5FA8;
    --sky:#4DB8FF;
    --cyan:#20B8D4;
    --teal:#168C85;
    --green:#25A55F;
    --gold:#F2B84B;
    --orange:#E9823A;
    --purple:#7257C8;
    --pink:#C64F8C;
    --red:#B42318;
    --ice:#EEF7FF;
    --text:#17212B;
    --muted:#667788;
    --shadow:0 12px 30px rgba(7,26,51,.14);
}

*{box-sizing:border-box}

body{
    margin:0;
    min-height:100vh;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 10% 0%,rgba(77,184,255,.20),transparent 28%),
        radial-gradient(circle at 95% 8%,rgba(114,87,200,.16),transparent 25%),
        linear-gradient(180deg,#E7F3FB 0%,#DDECF5 100%);
}

header{
    background:linear-gradient(120deg,var(--navy) 0%,var(--blue) 58%,var(--purple) 130%) !important;
    color:#fff;
    padding:18px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    border-bottom:4px solid var(--sky);
    box-shadow:0 8px 26px rgba(7,26,51,.28);
}

header h1{
    margin:0;
    font-size:22px;
    letter-spacing:.01em;
}

nav{display:flex;gap:7px !important;flex-wrap:wrap}

nav a{
    color:#fff !important;
    text-decoration:none;
    font-weight:700 !important;
    padding:8px 11px;
    border-radius:9px;
    transition:.18s ease;
}

nav a:nth-child(3n+1){background:rgba(77,184,255,.14)}
nav a:nth-child(3n+2){background:rgba(114,87,200,.14)}
nav a:nth-child(3n){background:rgba(32,184,212,.14)}

nav a:hover{
    background:rgba(255,255,255,.20) !important;
    transform:translateY(-1px);
}

main{
    max-width:1180px;
    margin:28px auto;
    padding:0 18px;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:18px;
}

.card{
    border-radius:17px !important;
    padding:21px !important;
    box-shadow:var(--shadow) !important;
    border:1px solid rgba(255,255,255,.70) !important;
    transition:transform .18s ease,box-shadow .18s ease;
}

.card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 38px rgba(7,26,51,.18) !important;
}

.card h2,.card h3{margin-top:0}

.btn{
    display:inline-block;
    color:#fff !important;
    border:0;
    border-radius:9px !important;
    padding:10px 14px;
    text-decoration:none;
    cursor:pointer;
    font-weight:800;
    background:linear-gradient(135deg,var(--blue),#1677C8) !important;
    box-shadow:0 5px 12px rgba(14,95,168,.20);
    transition:.18s ease;
}

.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn.secondary{background:linear-gradient(135deg,#586A7B,#75889A) !important}
.btn.danger{background:linear-gradient(135deg,#8E1E16,var(--red)) !important}

input,select,textarea{
    width:100%;
    padding:11px 12px !important;
    border:1px solid #BDD0DD !important;
    border-radius:9px !important;
    margin:6px 0 14px;
    background:rgba(255,255,255,.90);
    color:var(--text);
}

input:focus,select:focus,textarea:focus{
    outline:none;
    border-color:var(--sky) !important;
    box-shadow:0 0 0 3px rgba(77,184,255,.20);
}

.notice{
    padding:13px 15px !important;
    border-radius:11px !important;
    margin-bottom:16px;
    background:linear-gradient(135deg,#DFF4FF,#EAE6FF) !important;
    border-left:5px solid var(--purple);
    color:var(--navy);
    box-shadow:0 8px 18px rgba(7,26,51,.08);
}

.error{
    background:#FFE9E7 !important;
    color:#8F1F16 !important;
    border-left-color:var(--red);
}

small.muted,.muted{color:var(--muted) !important}
footer{text-align:center;padding:26px;color:#607080}

/* Dashboard card colors */
.on-air-card{
    color:#fff !important;
    background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%) !important;
}
.on-air-card h2,.on-air-card h3,.on-air-card p{color:#fff !important}
.on-air-card.live{background:linear-gradient(135deg,#5A100C 0%,var(--red) 100%) !important}

.audience-card{
    color:#fff !important;
    background:linear-gradient(135deg,#0A71A8 0%,var(--cyan) 100%) !important;
}
.audience-card h3,.audience-card .pulse-label,.audience-card .pulse-note{color:#fff !important}

.location-card{
    background:linear-gradient(145deg,#DDF8F4 0%,#CDEEEA 100%) !important;
    color:#12433F;
}
.location-card h3{color:#12433F !important}

.requests-card{
    background:linear-gradient(145deg,#FFF2D5 0%,#F9D994 100%) !important;
    color:#5B3B08;
}
.requests-card h3{color:#5B3B08 !important}
.requests-card .btn{background:linear-gradient(135deg,#B46B11,var(--orange)) !important}

.news-card{
    background:linear-gradient(145deg,#E9E4FF 0%,#CEC1FF 100%) !important;
    color:#33245E;
}
.news-card h3{color:#33245E !important}
.news-card .btn{background:linear-gradient(135deg,#5A43A9,var(--purple)) !important}

.announcements-card{
    background:linear-gradient(145deg,#FFE2F0 0%,#F7B9D8 100%) !important;
    color:#64223F;
}
.announcements-card h3{color:#64223F !important}
.announcements-card .btn{background:linear-gradient(135deg,#9E3769,var(--pink)) !important}

.quick-links-card{
    background:linear-gradient(145deg,#102B47 0%,#174D73 100%) !important;
    color:#fff;
}
.quick-links-card h2{color:#fff !important}

.quick-link{
    display:block;
    padding:16px;
    border-radius:12px !important;
    text-decoration:none;
    color:#fff !important;
    font-weight:800 !important;
    border:1px solid rgba(255,255,255,.18) !important;
    transition:.18s ease;
}

.quick-link:nth-child(4n+1){background:linear-gradient(135deg,#0E5FA8,#287FC1) !important}
.quick-link:nth-child(4n+2){background:linear-gradient(135deg,#7257C8,#8B70DE) !important}
.quick-link:nth-child(4n+3){background:linear-gradient(135deg,#168C85,#20A99F) !important}
.quick-link:nth-child(4n){background:linear-gradient(135deg,#C64F8C,#DA6FA7) !important}

.quick-link:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
    box-shadow:0 8px 18px rgba(0,0,0,.15);
}

.latest-requests-card{
    background:linear-gradient(145deg,#FFF7E6,#FFE3AE) !important;
}
.latest-news-card{
    background:linear-gradient(145deg,#EEF0FF,#DDD8FF) !important;
}
.latest-announcements-card{
    background:linear-gradient(145deg,#FFF0F7,#FFD6E9) !important;
}

.type-badge{
    background:#DDF3FF !important;
    color:var(--blue) !important;
}

.dj-read{
    background:linear-gradient(135deg,#EAF8FF,#F2ECFF) !important;
    border-left-color:var(--purple) !important;
}

.tab-btn.active{
    background:linear-gradient(135deg,var(--blue),var(--purple)) !important;
}

@media(max-width:700px){
    header{padding:16px}
    nav a{padding:7px 9px}
    main{margin:20px auto}
}