@import "tailwindcss";
:root{
    --bg1:#2a0b3d;
    --bg2:#4b1570;
    --bg3:#1b0a2a;

    --glass: rgba(255,255,255,.08);
    --glass2: rgba(0,0,0,.25);
    --border: rgba(255,255,255,.14);

    --yellow:#ffd200;
    --cyan:#00e0ff;
    --pink:#ff2e88;
    --green:#00d17c;
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.65);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:
            radial-gradient(1200px 800px at 15% 20%, rgba(255,46,136,.35), transparent 55%),
            radial-gradient(900px 700px at 85% 10%, rgba(0,224,255,.22), transparent 55%),
            radial-gradient(900px 700px at 60% 90%, rgba(255,210,0,.16), transparent 55%),
            linear-gradient(135deg, var(--bg1), var(--bg2) 45%, var(--bg3));
}

.container{
    width:min(1100px, 92vw);
    margin:0 auto;
    padding:32px 0 60px;
}

.header{
    border:1px solid var(--border);
    background:var(--glass);
    backdrop-filter: blur(14px);
    border-radius:24px;
    padding:22px 22px;
    box-shadow: 0 25px 55px rgba(0,0,0,.45);
    position:relative;
    overflow:hidden;
}

.header::before{
    content:"";
    position:absolute; inset:-2px;
    background: radial-gradient(circle at 20% 30%, rgba(255,46,136,.35), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(0,224,255,.22), transparent 55%),
    radial-gradient(circle at 60% 90%, rgba(255,210,0,.14), transparent 55%);
    opacity:.55;
    pointer-events:none;
}

.header-inner{
    position:relative;
    display:flex;
    gap:18px;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    color:rgba(255,255,255,.85);
    font-weight:800;
    font-size:12px;
}

.dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--pink);
    box-shadow:0 0 12px rgba(255,46,136,.75);
    animation:pulse 1.6s ease-in-out infinite;
}

@keyframes pulse{
    0%,100%{transform:scale(1); opacity:1}
    50%{transform:scale(1.35); opacity:.6}
}

.h1{
    margin:10px 0 0;
    font-size:34px;
    line-height:1.05;
    letter-spacing:-.5px;
}

.sub{
    margin:10px 0 0;
    color:var(--muted);
    font-size:14px;
}

.mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    padding:2px 8px;
    border-radius:10px;
    background:rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.85);
}

.actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.btn{
    appearance:none;
    border:0;
    cursor:pointer;
    border-radius:16px;
    padding:10px 14px;
    font-weight:900;
    font-size:14px;
    transition:.18s;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.btn:disabled{opacity:.6; cursor:not-allowed}

.btn-white{
    background:#fff;
    color:#2a0b3d;
    box-shadow:0 10px 22px rgba(0,0,0,.25);
}

.btn-yellow{
    background:var(--yellow);
    color:#111;
    box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 14px 28px rgba(0,0,0,.28);
}

.btn-white:hover{filter:brightness(.96)}
.btn-yellow:hover{filter:brightness(.96)}

.notice{
    margin-top:16px;
    padding:12px 14px;
    border-radius:16px;
    background:rgba(0, 209, 124, .12);
    border:1px solid rgba(0, 209, 124, .25);
    color:rgba(214,255,240,.95);
}

.section{
    margin-top:18px;
    border:1px solid var(--border);
    background:var(--glass);
    backdrop-filter: blur(14px);
    border-radius:24px;
    padding:18px;
    box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}

.pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.14);
    color:rgba(255,255,255,.86);
    font-weight:900;
    font-size:12px;
}

.pill .dot-red{
    width:9px;height:9px;border-radius:50%;
    background:#ff3b3b;
    box-shadow:0 0 14px rgba(255,59,59,.75);
    animation:pulse 1.6s ease-in-out infinite;
}

.onair-card{
    border-radius:20px;
    padding:14px;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(255,46,136,.30);
    box-shadow:0 0 0 1px rgba(255,46,136,.12), 0 22px 45px rgba(0,0,0,.35);
}

.card{
    border-radius:20px;
    padding:14px;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.12);
    transition:.16s;
}

.card:hover{
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.card-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}

.who{
    font-weight:900;
    font-size:14px;
}

.where{
    color:rgba(255,255,255,.62);
    font-weight:700;
}

.body{
    margin-top:8px;
    font-size:16px;
    line-height:1.35;
}

.meta{
    margin-top:10px;
    font-size:12px;
    color:rgba(255,255,255,.52);
}

.btn-group{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.btn-green{background:var(--green); color:#fff}
.btn-dark{background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.14)}
.btn-cyan{background:var(--cyan); color:#111}

.btn-green:hover{filter:brightness(.95)}
.btn-dark:hover{background:rgba(255,255,255,.16)}
.btn-cyan:hover{filter:brightness(.95)}

.tabs{
    display:flex;
    gap:10px;
    background:rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:6px;
    width:max-content;
}

.tab{
    border:0;
    cursor:pointer;
    border-radius:14px;
    padding:10px 14px;
    font-weight:950;
    color:rgba(255,255,255,.75);
    background:transparent;
    transition:.15s;
}

.tab:hover{color:#fff}

.tab.active{
    background:var(--yellow);
    color:#111;
    box-shadow:0 0 0 1px rgba(0,0,0,.10), 0 12px 22px rgba(0,0,0,.25);
}

.count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:26px;
    padding:2px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:950;
    background:rgba(0,0,0,.18);
    color:inherit;
    margin-left:8px;
}

.hidden{display:none!important}

.grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:14px;
}

@media (min-width: 900px){
    .grid{grid-template-columns: 1fr}
}