:root{
    --javo-bg:#ffffff;
    --javo-surface:#ffffff;
    --javo-border:#E9EEF5;
    --javo-text:#101828;
    --javo-text-light:#667085;
    --javo-primary:#0F5FFF;
    --javo-primary-light:#EDF4FF;
    --javo-radius:18px;
}
.javo-podcasters-page{
    max-width:1400px;
    margin:10px auto;
    padding:0 24px;
}
/* ===========================
        HERO
=========================== */
.javo-podcasters-hero{
    margin-bottom:22px;
    text-align:center;
}
.javo-podcasters-title{
    font-size:34px;
    font-weight:800;
    line-height:1.25;
    margin:0;
}
.javo-podcasters-count{
    max-width:720px;
    margin:10px auto 0;
    color:var(--javo-text-light);
    font-size:15px;
    line-height:1.8;
}
/* ===========================
        FILTERS
=========================== */
.javo-podcasters-filters{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin:0 auto 28px;
    padding:8px;
    width:fit-content;
    max-width:100%;
    background:#F7F9FC;
    border:1px solid #E7ECF3;
    border-radius:999px;
}
.javo-filter-button{
    appearance:none;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background:transparent;
    color:#667085;
    padding:11px 20px;
    border-radius:999px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    will-change:transform, background-color, color, box-shadow;
    transform:translateZ(0);
    transition:all .05s cubic-bezier(.4,0,.2,1);
}
.javo-filter-button.active{
    background:#7ad5ff;
    color:#1F2937;
    border:1px solid #3CBFFF;
    box-shadow:
        0 4px 10px rgba(15,95,255,.10),
        0 0 0 3px rgba(122,213,255,.18);
    transform:translateY(-1px) scale(1.02);
}
/* ===========================
        SEARCH
=========================== */
.javo-podcasters-search{
    /* display:flex; */
    display:none;
    justify-content:center;
    margin:0 auto 38px;
}
#javo-podcaster-search{
    width:100%;
    max-width:700px;
    height:58px;
    padding:0 26px;
    font-size:15px;
    color:#111827;
    background:rgba(248,248,248,.29);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.8);
    border-radius:35px;
    box-shadow:0 8px 32px rgba(31,38,135,.07);
    outline:none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}
#javo-podcaster-search::placeholder{
    color:#98A2B3;
}
#javo-podcaster-search:focus{
    border-color:#7AD5FF;
    background:rgba(255,255,255,.45);
    box-shadow:
        0 8px 32px rgba(31,38,135,.08),
        0 0 0 4px rgba(122,213,255,.16);
}
/* ===========================
        GRID
=========================== */
.javo-podcasters-grid{
    display:grid;
    grid-template-columns:100%;
    gap:20px;
}
/* ===================================================
                PODCASTER CARD
=================================================== */
.javo-podcaster-card{
    background: rgba(248, 248, 248, 0.72);
    border:1px solid #EDF2F7;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 35px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    transition:.18s ease;
}
.javo-podcaster-card:hover{
    transform:translateY(-2px);
    border-color:#DCE6F2;
    box-shadow:0 12px 32px rgba(15,23,42,.05);
}
/* ===================================================
                    LINK
=================================================== */
.javo-podcaster-link{
    display:grid;
    grid-template-columns:120px 1fr 120px;
    align-items:center;
    min-height:165px;
    text-decoration:none;
    color:inherit;
}
/* ===================================================
                    RIGHT
=================================================== */
.javo-podcaster-media{
    height:100%;
    padding:14px 10px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:10px;
    border-left:1px solid #F3F4F6;
}
.javo-podcaster-cover{
    width:100px;
    height:100px;
    border-radius:20px;
    overflow:hidden;
    flex-shrink:0;
    background:#F8FAFC;
    border:2px solid rgba(255,255,255,.9);
    box-shadow:0 6px 18px rgba(15,23,42,.08);
}
.javo-podcaster-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
    vertical-align:middle;
}
.javo-podcaster-category{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    color:#000;
    font-size:11px;
    font-weight:600;
    white-space:nowrap;
    line-height:1.2;
}
/* ===================================================
                    CENTER
=================================================== */
.javo-podcaster-body{
    height:100%;
    padding:20px 32px 20px 24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.javo-podcaster-name{
    margin:0;
    font-size:18px;
    font-weight:700;
    color:#111827;
    line-height:1.4;
}
.javo-podcaster-description{
    margin-top:12px;
    width:100%;
    color:#667085;
    font-size:14px;
    line-height:1.95;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    text-overflow:ellipsis;
    min-height:56px;
    max-height:56px;
    flex:1;
}
/* ===================================================
                    LEFT
=================================================== */
.javo-podcaster-action{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:26px;
    border-right:1px solid #F3F4F6;
}
.javo-podcaster-stats{
    display:flex;
    flex-direction:column;
    gap:18px;
    width:100%;
}
.javo-podcaster-stats span{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    color:#667085;
    font-size:13px;
    font-weight:500;
}
.javo-podcaster-stats span::first-line{
    font-size:22px;
    font-weight:700;
    color:#111827;
}
/* ===========================
    EMPTY
=========================== */
.javo-empty-state{
    grid-column:1/-1;
    padding:80px 20px;
    text-align:center;
    border:1px dashed var(--javo-border);
    border-radius:20px;
}