/*==================================================
  THEME: DEFAULT
==================================================*/

:root,
[data-theme="default"]{
    --sr-bg:#f4f5f7;
    --sr-panel:#ffffff;
    --sr-panel-soft:#f8f9fb;
    --sr-text:#1d2330;
    --sr-muted:#687282;
    --sr-border:#dde3ea;
    --sr-primary:#d63c3c;
    --sr-primary-dark:#b82d2d;
    --sr-primary-light:#fff1f1;
    --sr-success:#28a36a;
    --sr-warning:#e5a623;
    --sr-danger:#d63c3c;
    --sr-radius:8px;
    --sr-container:1340px;
}


/*==================================================
  THEME: REGGAE
==================================================*/
[data-theme="reggae"]{
    --sr-bg:#0d0d09;
    --sr-panel:#17150f;
    --sr-panel-soft:#221d14;
    --sr-text:#f8f3dd;
    --sr-muted:#b7ab84;
    --sr-border:#3d3116;
    --sr-primary:#d6ad32;
    --sr-primary-dark:#b48818;
    --sr-primary-light:#30240d;
    --sr-success:#2ea44f;
    --sr-warning:#d6ad32;
    --sr-danger:#d33939;
}
[data-theme="reggae"] .site-header{
    border-bottom:2px solid var(--sr-primary);
}

[data-theme="reggae"] .card{
    box-shadow:0 0 0 1px rgba(214,173,50,.08);
}

[data-theme="reggae"] .live-now{
    color:var(--sr-success);
}

[data-theme="reggae"] .post-avatar{
    background:linear-gradient(
        135deg,
        #2ea44f 0%,
        #d6ad32 55%,
        #d33939 100%
    );
}

[data-theme="reggae"] .btn-primary{
    background:linear-gradient(
        135deg,
        #2ea44f,
        #d6ad32
    );
    color:#111;
}

[data-theme="reggae"] .btn-primary:hover{
    background:linear-gradient(
        135deg,
        #249040,
        #bf951c
    );
}

[data-theme="reggae"] .side-menu a:hover{
    color:var(--sr-success);
}

[data-theme="reggae"] .show-time{
    border-color:var(--sr-success);
    color:var(--sr-success);
}

[data-theme="reggae"] .note-box{
    border-left-color:var(--sr-success);
}


/*==================================================
  THEME: DANCE / EDM
==================================================*/
[data-theme="dance"]{
    --sr-bg:#080712;
    --sr-panel:#131325;
    --sr-panel-soft:#1b1b34;
    --sr-text:#f7f9ff;
    --sr-muted:#9ca7d5;
    --sr-border:#2b2d52;
    --sr-primary:#00e5ff;
    --sr-primary-dark:#00b8d9;
    --sr-primary-light:#112b45;
    --sr-success:#8dff4f;
    --sr-warning:#ffb347;
    --sr-danger:#ff3da2;
}

/*==================================================
  THEME: HIP HOP
==================================================*/
[data-theme="hiphop"]{
    --sr-bg:#111111;
    --sr-panel:#1a1a1a;
    --sr-panel-soft:#242424;
    --sr-text:#f5f5f5;
    --sr-muted:#9e9e9e;
    --sr-border:#333333;
    --sr-primary:#d4af37;
    --sr-primary-dark:#b78b1d;
    --sr-primary-light:#2d2412;
    --sr-success:#4caf50;
    --sr-warning:#ffb300;
    --sr-danger:#e53935;
}
[data-theme="hiphop"] .site-header{
    border-bottom:2px solid var(--sr-primary);
}

[data-theme="hiphop"] .card{
    box-shadow:0 0 0 1px rgba(212,175,55,.08);
}

[data-theme="hiphop"] .btn-primary{
    background:linear-gradient(135deg,#d4af37,#8c6a17);
    color:#111;
}

[data-theme="hiphop"] .btn-primary:hover{
    background:linear-gradient(135deg,#e5bf47,#a77d18);
}

[data-theme="hiphop"] .post-avatar{
    background:linear-gradient(
        135deg,
        #d4af37,
        #444444
    );
}

[data-theme="hiphop"] .live-now{
    color:var(--sr-danger);
}

[data-theme="hiphop"] .side-menu a:hover{
    color:var(--sr-primary);
}

[data-theme="hiphop"] .show-time{
    color:var(--sr-primary);
    border-color:var(--sr-primary);
}


/*==================================================
  THEME: ROCK
==================================================*/
[data-theme="rock"]{
    --sr-bg:#101113;
    --sr-panel:#1b1c1f;
    --sr-panel-soft:#25262a;
    --sr-text:#f2f2f2;
    --sr-muted:#9ca1a8;
    --sr-border:#393b40;
    --sr-primary:#b32020;
    --sr-primary-dark:#851717;
    --sr-primary-light:#2f1717;
    --sr-success:#5f8f66;
    --sr-warning:#c28b2c;
    --sr-danger:#d32f2f;
}
[data-theme="rock"] .site-header{
    border-bottom:2px solid var(--sr-primary);
}

[data-theme="rock"] .card{
    box-shadow:0 0 0 1px rgba(179,32,32,.08);
}

[data-theme="rock"] .btn-primary{
    background:linear-gradient(135deg,#b32020,#5e1010);
}

[data-theme="rock"] .btn-primary:hover{
    background:linear-gradient(135deg,#cf2d2d,#741414);
}

[data-theme="rock"] .post-avatar{
    background:linear-gradient(
        135deg,
        #b32020,
        #4b4b4b
    );
}

[data-theme="rock"] .live-now{
    color:var(--sr-danger);
}

[data-theme="rock"] .side-menu a:hover{
    color:var(--sr-primary);
}

[data-theme="rock"] .show-time{
    color:var(--sr-primary);
    border-color:var(--sr-primary);
}

[data-theme="rock"] .note-box{
    border-left-color:var(--sr-primary);
}




[data-theme="pop"]{
    --sr-bg:#fff5fb;
    --sr-panel:#ffffff;
    --sr-panel-soft:#fff0f8;
    --sr-text:#302033;
    --sr-muted:#806f84;
    --sr-border:#f0d7e8;
    --sr-primary:#ec4fa3;
    --sr-primary-dark:#c73582;
    --sr-primary-light:#ffe8f4;
    --sr-success:#28a36a;
    --sr-warning:#f2a93b;
    --sr-danger:#df3f58;
}

[data-theme="soul"]{
    --sr-bg:#f8efe4;
    --sr-panel:#fffaf4;
    --sr-panel-soft:#f3e2cd;
    --sr-text:#322015;
    --sr-muted:#7d6553;
    --sr-border:#e3c9aa;
    --sr-primary:#b45f2a;
    --sr-primary-dark:#873f17;
    --sr-primary-light:#fff0df;
    --sr-success:#3b8f5a;
    --sr-warning:#d99a2b;
    --sr-danger:#b93b2f;
}

[data-theme="country"]{
    --sr-bg:#f4eadc;
    --sr-panel:#fffaf2;
    --sr-panel-soft:#efe0c9;
    --sr-text:#2d2117;
    --sr-muted:#766858;
    --sr-border:#dcc6a7;
    --sr-primary:#9b5a2e;
    --sr-primary-dark:#703d1d;
    --sr-primary-light:#f8eadb;
    --sr-success:#4b8f53;
    --sr-warning:#cf8f2f;
    --sr-danger:#b93c32;
}

[data-theme="classical"]{
    --sr-bg:#f4f1ec;
    --sr-panel:#ffffff;
    --sr-panel-soft:#faf7f2;
    --sr-text:#25212b;
    --sr-muted:#756f7c;
    --sr-border:#ded7cc;
    --sr-primary:#6f4a8e;
    --sr-primary-dark:#503269;
    --sr-primary-light:#f3ecf8;
    --sr-success:#4a8f6a;
    --sr-warning:#c99a3d;
    --sr-danger:#b94444;
}

[data-theme="chillout"]{
    --sr-bg:#edf7f6;
    --sr-panel:#ffffff;
    --sr-panel-soft:#f3fbfa;
    --sr-text:#173235;
    --sr-muted:#60787b;
    --sr-border:#cfe4e3;
    --sr-primary:#3aa6a6;
    --sr-primary-dark:#247d7d;
    --sr-primary-light:#e7f8f8;
    --sr-success:#35a96d;
    --sr-warning:#d7a23c;
    --sr-danger:#cf4d4d;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:var(--sr-bg);
    color:var(--sr-text);
    font-family:Arial, sans-serif;
    font-size:14px;
}

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

.container{
    max-width:var(--sr-container);
    margin:0 auto;
}

/* HEADER */

.site-header{
    background:var(--sr-panel);
    border-bottom:1px solid var(--sr-border);
}

.header-inner{
    min-height:98px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 12px;
}

.site-logo{
    font-size:22px;
    font-weight:800;
    color:var(--sr-text);
}

.site-logo img{
    max-height:92px;
    display:block;
}

.site-nav{
    display:flex;
    gap:28px;
    align-items:center;
    font-weight:700;
}

.site-nav a{
    color:var(--sr-text);
}

.site-nav a:hover{
    color:var(--sr-primary);
}

.nav-btn{
    background:var(--sr-primary);
    color:#fff !important;
    padding:9px 14px;
    border-radius:var(--sr-radius);
}

.nav-btn:hover{
    background:var(--sr-primary-dark);
}

/* PAGE GRID */

.page-grid{
    display:grid;
    grid-template-columns:290px minmax(0, 1fr) 315px;
    gap:22px;
    padding:26px 12px;
}



/* CARDS */

.card{
    background:var(--sr-panel);
    border:1px solid var(--sr-border);
    border-radius:var(--sr-radius);
    padding:18px;
    margin-bottom:18px;
}

/* BUTTONS */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:var(--sr-radius);
    padding:11px 14px;
    font:inherit;
    font-weight:700;
    cursor:pointer;
}

.btn-primary,
.small-link-btn{
    background:var(--sr-primary);
    color:#fff;
}

.btn-primary:hover,
.small-link-btn:hover{
    background:var(--sr-primary-dark);
}

.btn-full{
    width:100%;
}

/* NOW PLAYING */

.now-playing-card{
    padding:0;
    overflow:hidden;
}

.np-track{
    display:flex;
    gap:14px;
    align-items:center;
    padding:16px;
}

.np-track img{
    width:82px;
    height:82px;
    border-radius:6px;
    object-fit:cover;
    flex-shrink:0;
    background:var(--sr-panel-soft);
}

.np-track-info strong{
    display:block;
    font-size:19px;
    line-height:1.2;
}

.np-track-info span{
    display:block;
    margin-top:4px;
    color:var(--sr-muted);
}

.np-show{
    border-top:1px solid var(--sr-border);
    border-bottom:1px solid var(--sr-border);
    padding:14px 16px;
}

.live-now{
    color:var(--sr-danger);
    font-size:12px;
    font-weight:700;
    letter-spacing:.4px;
    margin-bottom:6px;
}

.live-now i{
    font-size:8px;
    margin-right:6px;
}

.np-show strong{
    display:block;
    font-size:15px;
}

.np-show small{
    display:block;
    margin-top:5px;
    color:var(--sr-muted);
}

.now-playing-card button{
    border-radius:0;
    padding:15px;
    font-size:15px;
}

/* LEFT MENU */

.side-menu a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 6px;
    font-weight:700;
    color:var(--sr-text);
}

.side-menu a i{
    width:20px;
    text-align:center;
    color:var(--sr-primary);
}

.side-menu a:hover{
    color:var(--sr-primary);
}

/* THEME BOX */

.theme-box{
    margin-top:16px;
}

.theme-box h3{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 8px;
    font-size:15px;
}

.theme-box h3 i{
    color:var(--sr-primary);
}

.theme-box p{
    margin:0 0 12px;
    color:var(--sr-muted);
    font-size:13px;
    line-height:1.5;
}

.theme-select{
    width:100%;
    border:1px solid var(--sr-border);
    border-radius:var(--sr-radius);
    padding:10px 12px;
    background:var(--sr-panel-soft);
    color:var(--sr-text);
    font-weight:700;
    outline:none;
}

.theme-select:focus{
    border-color:var(--sr-primary);
}

/* FOOTER LINKS */

.left-footer{
    text-align:center;
    font-size:12px;
    color:var(--sr-muted);
}

.left-footer a{
    margin:0 8px;
}

.left-footer a:hover{
    color:var(--sr-primary);
}

/* COMPOSER */

.composer{
    padding:0;
}

.composer-input{
    padding:18px;
}

.composer textarea{
    width:100%;
    min-height:64px;
    resize:vertical;
    border:1px solid var(--sr-border);
    background:var(--sr-panel-soft);
    color:var(--sr-text);
    border-radius:var(--sr-radius);
    padding:14px;
    font:inherit;
    outline:none;
}

.composer textarea::placeholder{
    color:var(--sr-muted);
}

.composer textarea:focus{
    border-color:var(--sr-primary);
    background:var(--sr-panel);
}

.composer-actions{
    border-top:1px solid var(--sr-border);
    padding:14px 18px 18px;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
}

.composer-actions button,
.composer-actions span{
    border:0;
    background:var(--sr-panel-soft);
    color:var(--sr-text);
    border-radius:var(--sr-radius);
    padding:12px;
    font-weight:700;
    cursor:pointer;
}

.composer-actions button:hover,
.composer-actions span:hover{
    background:var(--sr-primary-light);
    color:var(--sr-primary-dark);
}

/* JOIN CARD */

.join-card h3{
    margin:0 0 8px;
    font-size:20px;
}

.small-link-btn{
    display:inline-flex;
    border-radius:var(--sr-radius);
    padding:10px 13px;
    font-weight:700;
    margin-top:6px;
}

/* POSTS */

.feed-post h3{
    margin:0;
    font-size:16px;
}

.post-head{
    display:flex;
    align-items:center;
    gap:12px;
}

.post-avatar{
    width:42px;
    height:42px;
    border-radius:6px;
    background:var(--sr-primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    overflow:hidden;
    flex-shrink:0;
}

.post-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.post-meta{
    color:var(--sr-muted);
    font-size:13px;
    margin-top:4px;
}

.post-content{
    margin-top:16px;
    line-height:1.65;
    color:var(--sr-text);
}

.post-media{
    width:100%;
    max-height:420px;
    object-fit:cover;
    border-radius:var(--sr-radius);
    margin-top:14px;
    border:1px solid var(--sr-border);
}

.post-actions{
    display:flex;
    justify-content:space-between;
    gap:12px;
    border-top:1px solid var(--sr-border);
    padding-top:12px;
    margin-top:18px;
    color:var(--sr-muted);
    font-size:13px;
}

.post-actions span{
    white-space:nowrap;
}

/* RIGHT SIDEBAR */

.side-card h3{
    margin:0 0 14px;
    font-size:16px;
}

.stat-row,
.track-row,
.show-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:11px 0;
    border-bottom:1px solid var(--sr-border);
}

.stat-row:last-child,
.track-row:last-child,
.show-row:last-child{
    border-bottom:0;
}

.stat-row strong{
    margin-left:auto;
}

.track-row,
.show-row{
    display:block;
    font-weight:400;
}

.track-row small,
.show-row small{
    display:block;
    margin-top:4px;
    color:var(--sr-muted);
    font-weight:200;
}

.muted{
    color:var(--sr-muted);
    line-height:1.6;
}

/* TODAY SHOWS */

.today-show-row{
    display:grid;
    grid-template-columns:58px 1fr;
    gap:12px;
    align-items:center;
    padding:11px 0;
    border-bottom:1px solid var(--sr-border);
}

.today-show-row:last-child{
    border-bottom:0;
}

.today-show-row strong{
    display:block;
    font-size:14px;
}

.today-show-row small{
    display:block;
    margin-top:4px;
    color:var(--sr-muted);
    font-size:13px;
}

.show-time{
    background:var(--sr-panel-soft);
    border:1px solid var(--sr-border);
    border-radius:6px;
    padding:7px 5px;
    text-align:center;
    font-size:13px;
    font-weight:800;
    color:var(--sr-primary);
}

/* CONTENT PAGES */

.content-page{
    display:flex;
    flex-direction:column;
    gap:20px;
    width:100%;
}

.content-wrapper{
    width:100%;
    max-width:1200px;
    margin:50px auto;
    padding:0 12px;
}

.content-hero{
    padding:42px;
    border-radius:22px;
    background:linear-gradient(135deg,var(--sr-panel),var(--sr-panel-soft));
    border:1px solid var(--sr-border);
    margin-top:30px;
}

.content-hero span{
    display:inline-flex;
    gap:8px;
    align-items:center;
    color:var(--sr-primary);
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.content-hero h1{
    margin:10px 0;
    font-size:42px;
    line-height:1.15;
}

.content-hero p{
    max-width:820px;
    color:var(--sr-muted);
    line-height:1.8;
    font-size:16px;
}

.content-card{
    padding:42px;
}

.content-card h2{
    margin:36px 0 12px;
    font-size:26px;
}

.content-card h2:first-child{
    margin-top:0;
}

.content-card h3{
    margin:26px 0 10px;
    font-size:20px;
}

.content-card p,
.content-card li{
    color:var(--sr-muted);
    line-height:1.8;
}

.content-card ul{
    margin:10px 0 0;
    padding-left:20px;
}

.note-box{
    margin:22px 0;
    padding:18px 20px;
    background:var(--sr-primary-light);
    border-left:4px solid var(--sr-primary);
    border-radius:var(--sr-radius);
    color:var(--sr-text);
}

.note-box strong{
    color:var(--sr-text);
}

.platform-credit,
.content-note{
    font-size:13px;
    color:var(--sr-muted);
    text-align:center;
}

.platform-credit{
    margin-top:40px;
    padding-top:20px;
    border-top:1px solid var(--sr-border);
}

/* MOBILE */

@media (max-width:1050px){

    .page-grid{
        grid-template-columns:1fr;
    }

    .left-column{
        display:none;
    }

    .feed-column{
        width:100%;
        order:1;
    }

    .header-inner{
        flex-direction:column;
        align-items:flex-start;
        padding:16px 12px;
    }

    .site-nav{
        gap:14px;
        flex-wrap:wrap;
    }
}


@media(max-width:600px){
    .composer-actions{
        grid-template-columns:1fr 1fr;
    }

    .site-nav{
        gap:10px;
    }

    .site-nav a{
        font-size:13px;
    }

    .post-actions{
        flex-wrap:wrap;
        justify-content:flex-start;
    }

    .content-hero,
    .content-card{
        padding:26px;
    }

    .content-hero h1{
        font-size:32px;
    }
}

/* FOOTER */

.sr-footer{
    margin-top:40px;
    padding:18px 12px;
    background:var(--sr-panel);
    border-top:1px solid var(--sr-border);
    color:var(--sr-muted);
    font-size:13px;
}

.sr-footer-inner{
    max-width:var(--sr-container);
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
}

.sr-footer a{
    color:var(--sr-primary);
    font-weight:700;
}

.sr-footer a:hover{
    color:var(--sr-primary-dark);
}

@media(max-width:600px){
    .sr-footer-inner{
        flex-direction:column;
        text-align:center;
    }
}

/* SCHEDULE PAGE */

.schedule-layout{
    display:grid;
    grid-template-columns:290px minmax(0, 1fr);
    gap:22px;
    align-items:start;
    padding:26px 12px;
}

.schedule-column{
    min-width:0;
}

.schedule-hero{
    padding:26px;
}

.schedule-day{
    padding:0;
    overflow:hidden;
}

.schedule-day h2{
    margin:0;
    padding:18px 22px;
    background:var(--sr-panel-soft);
    border-bottom:1px solid var(--sr-border);
    font-size:22px;
}

.schedule-show{
    display:grid;
    grid-template-columns:110px 150px 1fr;
    gap:18px;
    align-items:center;
    padding:18px 22px;
    border-bottom:1px solid var(--sr-border);
}

.schedule-show:last-child{
    border-bottom:0;
}

.schedule-show-time{
    text-align:center;
    background:var(--sr-primary-light);
    border:1px solid var(--sr-border);
    border-radius:10px;
    padding:12px 8px;
}

.schedule-show-time strong{
    display:block;
    color:var(--sr-primary);
    font-size:18px;
}

.schedule-show-time small{
    display:block;
    margin-top:4px;
    color:var(--sr-muted);
    font-size:13px;
}

.schedule-show-image{
    width:110px;
    height:110px;
    border-radius:10px;
    overflow:hidden;
    background:var(--sr-panel-soft);
    border:1px solid var(--sr-border);
}

.schedule-show-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.schedule-show-info h3{
    margin:0;
    font-size:20px;
}

.schedule-show-info span{
    display:block;
    margin-top:5px;
    color:var(--sr-primary);
    font-weight:700;
}

.schedule-show-info p{
    margin:8px 0 0;
    color:var(--sr-muted);
    line-height:1.5;
}

.schedule-show:hover{
    background:var(--sr-panel-soft);
}

@media(max-width:700px){
    .schedule-show{
        grid-template-columns:1fr;
    }

    .schedule-show-time{
        text-align:left;
    }

    .schedule-show-image{
        width:100%;
        height:180px;
    }
}

/*==================================================
  EMPTY STATES
==================================================*/

.schedule-empty{
    padding:50px 30px;
    text-align:center;
    background:var(--sr-primary-light);
    border-color:var(--sr-primary-light);
    color:var(--sr-text);
    border-radius:8px;
}

.schedule-empty i{
    font-size:42px;
    color:var(--sr-primary);
    margin-bottom:18px;
    display:block;
    opacity:.8;
}

.schedule-empty strong{
    display:block;
    margin-bottom:8px;
    font-size:20px;
    font-weight:700;
    color:var(--sr-text);
}

.schedule-empty span{
    display:block;
    max-width:420px;
    margin:0 auto;
    color:var(--sr-muted);
    line-height:1.6;
    font-size:15px;
}

.notifications-card h3{
    display:flex;
    align-items:center;
    gap:8px;
}

.notification-row{
    display:flex;
    gap:10px;
    padding:11px 0;
    border-bottom:1px solid var(--sr-border);
    text-decoration:none;
    color:inherit;
}

.notification-row:last-child{
    border-bottom:0;
}

.notification-icon{
    width:36px;
    height:36px;
    border-radius:8px;
    background:var(--sr-primary-light);
    color:var(--sr-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:15px;
    transition:.2s;
}

.notification-row:hover .notification-icon{
    transform:scale(1.08);
}
.notification-text{
    min-width:0;
}

.notification-text strong{
    display:block;
    font-size:13px;
    margin-bottom:2px;
}

.notification-text small{
    display:block;
    color:var(--sr-muted);
    font-size:12px;
    line-height:1.35;
}

.notification-text span{
    display:block;
    color:var(--sr-muted);
    font-size:11px;
    margin-top:4px;
}

.post-type-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:0 0 10px;
    padding:5px 10px;
    border-radius:999px;
    background:var(--sr-primary-light);
    color:var(--sr-primary);
    font-size:12px;
    font-weight:700;
}

.post-link{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    padding:12px 14px;
    border-radius:12px;
    background:var(--sr-panel-soft);
    color:var(--sr-primary);
    text-decoration:none;
    font-weight:700;
    font-size:13px;
}

.post-link:hover{
    background:var(--sr-primary-light);
}

.youtube-link{
    color:#ff0033;
}

.event-link,
.show-link{
    color:var(--sr-primary);
}

.youtube-embed{
    margin-top:14px;
    border-radius:14px;
    overflow:hidden;
    background:#000;
}

.youtube-embed iframe{
    width:100%;
    aspect-ratio:16 / 9;
    border:0;
    display:block;
}

.notification-avatar{
    width:40px;
    height:40px;
    flex-shrink:0;
}

.notification-avatar img{
    width:40px;
    height:40px;
    border-radius:8px;
    object-fit:cover;
    display:block;
}

.composer-extra{
    display:grid;
    grid-template-columns:160px 1fr;
    gap:10px;
    margin-top:12px;
}

.composer-extra input[type="file"]{
    grid-column:1 / -1;
}

.composer-extra select,
.composer-extra input{
    width:100%;
    border:1px solid var(--sr-border);
    border-radius:10px;
    padding:10px 12px;
    background:var(--sr-panel-soft);
    color:var(--sr-text);
}

.inline-action-form{
    display:inline;
}

.inline-action-form button{
    border:0;
    background:none;
    color:inherit;
    cursor:pointer;
    font:inherit;
}

.inline-action-form button.liked{
    color:var(--sr-primary);
    font-weight:700;
}

.post-comments{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--sr-border);
}

.feed-comment{
    display:flex;
    gap:10px;
    margin-bottom:10px;
}

.comment-avatar{
    width:34px;
    height:34px;
    border-radius:8px;
    background:var(--sr-primary-light);
    color:var(--sr-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-weight:800;
    overflow:hidden;
}

.comment-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.comment-body{
    background:var(--sr-panel-soft);
    padding:9px 12px;
    border-radius:12px;
    flex:1;
}

.comment-body strong{
    font-size:13px;
}

.comment-body p{
    margin:4px 0;
    font-size:13px;
    line-height:1.45;
}

.comment-body small{
    color:var(--sr-muted);
    font-size:11px;
}

.comment-form{
    display:flex;
    gap:8px;
    margin-top:12px;
}

.comment-form input{
    flex:1;
    border:1px solid var(--sr-border);
    border-radius:999px;
    padding:10px 14px;
    background:var(--sr-panel-soft);
    color:var(--sr-text);
}

.comment-form button{
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:var(--sr-primary);
    color:#fff;
    cursor:pointer;
}

.post-admin-menu{
    margin-left:auto;
    position:relative;
}

.admin-dots{
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:var(--sr-panel-soft);
    color:var(--sr-muted);
    cursor:pointer;
}

.admin-dropdown{
    display:none;
    position:absolute;
    right:0;
    top:38px;
    width:170px;
    background:var(--sr-panel);
    border:1px solid var(--sr-border);
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    padding:6px;
    z-index:20;
}

.admin-dropdown.show{
    display:block;
}

.admin-dropdown button{
    width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    border:0;
    background:none;
    color:var(--sr-text);
    padding:9px 10px;
    border-radius:8px;
    cursor:pointer;
    text-align:left;
}

.admin-dropdown button:hover{
    background:var(--sr-panel-soft);
}

.admin-dropdown button.danger{
    color:var(--sr-danger);
}

.load-more-wrap{
    text-align:center;
    margin:20px 0;
}

.load-more-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 18px;
    border-radius:999px;
    background:var(--sr-primary);
    color:#fff;
    text-decoration:none;
    font-weight:800;
}

/*==================================================
  PROFILES PAGE
==================================================*/

.profiles-filter-card{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.profiles-search-form{
    display:flex;
    gap:10px;
}

.profiles-search-form input{
    width:100%;
    border:1px solid var(--sr-border);
    border-radius:14px;
    padding:13px 15px;
    font-size:14px;
    outline:none;
}

.profiles-search-form input:focus{
    border-color:var(--sr-primary);
}

.profiles-filters{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
}

.profiles-filters a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:8px 14px;
    border-radius:8px;
    background:var(--sr-primary);
    border-color:var(--sr-primary);
    color:#fff;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    line-height:1;
}

.profiles-filters a:hover,
.profiles-filters a.active{
    background:var(--sr-primary-dark);
    border-color:var(--sr-primary-dark);
    color:#fff;
}

.profiles-list{
    padding:0;
    overflow:hidden;
}

.profile-list-item{
    display:grid;
    grid-template-columns:72px 1fr auto;
    gap:16px;
    align-items:center;
    padding:18px 20px;
    border-bottom:1px solid var(--sr-border);
    text-decoration:none;
    color:inherit;
    transition:.18s;
}

.profile-list-item:last-child{
    border-bottom:0;
}

.profile-list-item:hover{
    background:var(--sr-panel-soft);
}

.profile-list-item:hover h3{
    color:var(--sr-primary);
}

.profile-list-avatar{
    width:72px;
    height:72px;
    border-radius:8px;
    object-fit:cover;
    background:#f2f4f7;
    border:3px solid #fff;
    box-shadow:0 0 0 1px var(--sr-border);
}

.profile-list-main h3{
    margin:0;
    font-size:19px;
    color:var(--sr-text);
}

.profile-list-main span{
    display:block;
    margin-top:3px;
    color:var(--sr-muted);
    font-size:13px;
}

.profile-list-main p{
    margin:8px 0 0;
    color:var(--sr-muted);
    font-size:14px;
    line-height:1.45;
}

.profile-list-side{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
    min-width:120px;
}

.profile-list-side small{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--sr-muted);
    font-size:12px;
    white-space:nowrap;
}

.profile-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:6px;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.role-admin{
    background:#ffe8e8;
    color:#b42323;
}

.role-moderator{
    background:#ece7ff;
    color:#5b35b1;
}

.role-dj{
    background:#e8f3ff;
    color:#1264a3;
}

.role-member{
    background:#edf8ef;
    color:#247a3b;
}

.status-suspended{
    background:#fff1d8;
    color:#a15c00;
}

.status-inactive{
    background:#eeeeee;
    color:#666;
}

@media (max-width:700px){
    .profiles-search-form{
        flex-direction:column;
    }

    .profiles-search-form .btn{
        width:100%;
        justify-content:center;
    }

    .profile-list-item{
        grid-template-columns:58px 1fr;
        align-items:start;
    }

    .profile-list-avatar{
        width:58px;
        height:58px;
    }

    .profile-list-side{
        grid-column:2;
        align-items:flex-start;
        min-width:0;
    }
}

/*==================================================
  MEMBER PROFILE
==================================================*/

.member-profile-card{
    padding:0;
    overflow:hidden;
}

.member-cover{
    height:290px;
    background:linear-gradient(135deg,var(--sr-primary),var(--sr-primary-dark));
    background-size:cover;
    background-position:center;
}

.member-profile-main{
    display:flex;
    align-items:flex-end;
    gap:24px;
    padding:0 30px 30px;
    margin-top:-60px;
}

.member-profile-avatar{
    width:120px;
    height:120px;
    border-radius:8px;
    object-fit:cover;
    border:5px solid var(--sr-panel);
    background:var(--sr-panel);
    flex-shrink:0;
}

.member-profile-info{
    flex:1;
}

.member-profile-info h1{
    margin:0;
    font-size:24px;
    color:var(--sr-text);
}

.member-profile-info span{
    display:block;
    margin-top:6px;
    color:var(--sr-muted);
}

.member-profile-actions{
    margin-left:auto;
}

.member-profile-actions .btn{
    white-space:nowrap;
}

.profile-love-sent{
    margin:0 30px 30px;
    padding:14px 18px;
    border-radius:12px;
    background:#ecfdf5;
    color:#157347;
    font-weight:600;
}

.profile-love-sent i{
    margin-right:8px;
}

.member-about-card h2{
    margin-top:0;
    margin-bottom:16px;
}

.member-about-card p{
    line-height:1.8;
    color:var(--sr-text);
}

.member-profile-meta{
    margin-top:30px;
    padding-top:20px;
    border-top:1px solid var(--sr-border);
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    color:var(--sr-muted);
    font-size:14px;
}

.member-profile-meta span{
    display:flex;
    align-items:center;
    gap:8px;
}

/* Role badges */

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

.profile-badge{
    padding:6px 12px;
    border-radius:4px;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.role-admin{
    background:#ffe5e5;
    color:#c62828;
}

.role-moderator{
    background:#efe7ff;
    color:#673ab7;
}

.role-dj{
    background:#e3f2fd;
    color:#1565c0;
}

.role-member{
    background:#e8f5e9;
    color:#2e7d32;
}

.status-suspended{
    background:#fff4e5;
    color:#b26a00;
}

.status-inactive{
    background:#eceff1;
    color:#666;
}

/* Responsive */

@media (max-width:900px){

    .member-profile-main{
        flex-direction:column;
        align-items:center;
        text-align:center;
        margin-top:-70px;
    }

    .member-profile-avatar{
        width:110px;
        height:110px;
    }

    .member-profile-actions{
        margin:10px 0 0;
        width:100%;
    }

    .member-profile-actions .btn{
        width:100%;
    }

    .member-profile-meta{
        flex-direction:column;
        gap:12px;
    }

}

.blog-list-image{
    width:86px;
    height:86px;
    border-radius:14px;
    object-fit:cover;
}

.blogs-hero{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.blog-create-btn{
    white-space:nowrap;
    margin-left:auto;
}

@media (max-width:700px){
    .blogs-hero{
        flex-direction:column;
    }

    .blog-create-btn{
        width:100%;
        justify-content:center;
    }
}

.events-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
}

.event-card{
    display:flex;
    flex-direction:column;
    background:var(--sr-panel);
    border:1px solid var(--sr-border);
    border-radius:18px;
    overflow:hidden;
    text-decoration:none;
    color:var(--sr-text);
    box-shadow:0 12px 30px rgba(15, 23, 42, .08);
    transition:.2s ease;
}

.event-card:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 38px rgba(15, 23, 42, .14);
}

.event-card-image{
    width:100%;
    height:180px;
    object-fit:cover;
    display:block;
    background:var(--sr-panel-soft);
}

.event-card-body{
    padding:18px;
}

.event-card-body h3{
    margin:0 0 10px;
    font-size:20px;
    line-height:1.25;
}

.event-card-body p{
    margin:0 0 16px;
    color:var(--sr-muted);
    line-height:1.55;
    font-size:14px;
}

.event-card-meta{
    display:flex;
    flex-direction:column;
    gap:8px;
    color:var(--sr-muted);
    font-size:13px;
}

.event-card-meta span{
    display:flex;
    align-items:center;
    gap:8px;
}

.event-card-meta i{
    color:var(--sr-primary);
    width:16px;
}

@media (max-width:1000px){
    .events-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width:650px){
    .events-grid{
        grid-template-columns:1fr;
    }
}

.blogs-hero{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.blog-create-btn{
    margin-left:auto;
    white-space:nowrap;
}

@media (max-width:700px){

    .blogs-hero{
        flex-direction:column;
    }

    .blog-create-btn{
        width:100%;
        justify-content:center;
    }

}

/*==================================================
  AUTH PAGES
==================================================*/

.auth-card{
    max-width:650px;
    margin:0 auto;
    padding:35px;
}

.auth-header{
    text-align:center;
    margin-bottom:30px;
}

.auth-header h1{
    margin:0 0 10px;
    font-size:34px;
    font-weight:700;
    color:var(--sr-text);
}

.auth-header p{
    margin:0;
    color:var(--sr-muted);
    line-height:1.7;
}

.auth-form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.auth-form label{
    font-weight:600;
    color:var(--sr-text);
    margin-bottom:-10px;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"]{
    width:100%;
    height:52px;
    padding:0 16px;
    border:1px solid var(--sr-border);
    border-radius:12px;
    background:var(--sr-panel);
    color:var(--sr-text);
    font-size:15px;
    transition:.25s;
}

.auth-form input:focus{
    outline:none;
    border-color:var(--sr-primary);
    box-shadow:0 0 0 4px rgba(0,123,255,.12);
}

.auth-form button{
    margin-top:10px;
}

.auth-check{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:var(--sr-muted);
    cursor:pointer;
    user-select:none;
}

.auth-check input{
    width:18px;
    height:18px;
    accent-color:var(--sr-primary);
}

.auth-cookie-notice{
    margin:5px 0;
    padding:16px;
    background:var(--sr-panel-soft);
    border:1px solid var(--sr-border);
    border-radius:12px;
    font-size:13px;
    line-height:1.7;
    color:var(--sr-muted);
}

.auth-cookie-notice i{
    color:var(--sr-primary);
    margin-right:6px;
}

.auth-cookie-notice a{
    color:var(--sr-primary);
    text-decoration:none;
    font-weight:600;
}

.auth-cookie-notice a:hover{
    text-decoration:underline;
}

.auth-links{
    margin-top:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    font-size:14px;
}

.auth-links a{
    color:var(--sr-primary);
    text-decoration:none;
    font-weight:600;
}

.auth-links a:hover{
    text-decoration:underline;
}

.auth-links span{
    color:var(--sr-border);
}

/*==================================================
  ALERTS
==================================================*/

.auth-msg{
    padding:16px;
    border-radius:12px;
    margin-bottom:22px;
    font-weight:600;
    border:1px solid transparent;
}

.auth-msg.success{
    background:#e8f7ec;
    color:#19703a;
    border-color:#b8e0c2;
}

.auth-msg.error{
    background:#fff1f1;
    color:#b42318;
    border-color:#f4c2c2;
}

.auth-msg.info{
    background:#eef6ff;
    color:#155eef;
    border-color:#c7d9ff;
}

/*==================================================
  HONEYPOT
==================================================*/

.hp-field{
    position:absolute !important;
    left:-9999px !important;
    top:-9999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
}

/*==================================================
  MOBILE
==================================================*/

@media (max-width:768px){

    .auth-card{
        padding:25px;
    }

    .auth-header h1{
        font-size:28px;
    }

    .auth-links{
        flex-direction:column;
        gap:8px;
    }

    .auth-links span{
        display:none;
    }

}

.composer-clean{
    padding:18px;
}

.composer-open{
    width:100%;
    min-height:58px;
    border:1px solid var(--sr-border);
    background:var(--sr-panel-soft);
    color:var(--sr-muted);
    border-radius:14px;
    padding:0 18px;
    text-align:left;
    font-size:15px;
    cursor:pointer;
    transition:.2s;
}

.composer-open i{
    color:var(--sr-primary);
    margin-right:8px;
}

.composer-open:hover{
    background:var(--sr-panel);
    border-color:var(--sr-primary);
    color:var(--sr-text);
}

.composer-actions-clean{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
    margin-top:14px;
}

.composer-actions-clean button{
    border:0;
    background:var(--sr-panel-soft);
    color:var(--sr-text);
    border-radius:12px;
    padding:14px 12px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

.composer-actions-clean button:hover{
    background:var(--sr-primary);
    color:#fff;
    transform:translateY(-1px);
}

.composer-actions-clean button i{
    margin-right:6px;
}

@media(max-width:700px){
    .composer-actions-clean{
        grid-template-columns:repeat(2, 1fr);
    }
}

/*=========================================
POST MODAL
=========================================*/

.sr-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.sr-modal.active{
    display:flex;
}

.sr-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
}

.sr-modal-box{
    position:relative;
    width:min(650px,95%);
    background:var(--sr-panel);
    border-radius:16px;
    padding:28px;
    box-shadow:0 30px 60px rgba(0,0,0,.25);
    z-index:2;
}

.sr-modal-head{
    margin-bottom:22px;
}

.sr-modal-head h3{
    margin:0 0 6px;
}

.sr-modal-close{
    position:absolute;
    top:18px;
    right:18px;
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    background:var(--sr-panel-soft);
    cursor:pointer;
}

.modal-post-form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.modal-field{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.modal-post-form textarea{
    min-height:180px;
    resize:vertical;
}

.modal-post-form textarea,
.modal-post-form input[type=url],
.modal-post-form input[type=file]{
    width:100%;
    border:1px solid var(--sr-border);
    border-radius:12px;
    padding:14px;
    background:var(--sr-panel-soft);
}

.comment-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:6px;
}

.delete-comment-form{
    margin:0;
}

.delete-comment-btn{
    width:30px;
    height:30px;
    border:0;
    background:transparent;
    color:var(--sr-muted);
    cursor:pointer;
    border-radius:8px;
    transition:.2s;
}

.delete-comment-btn:hover{
    background:#ffeaea;
    color:#d93025;
}

.blog-admin-actions{
    margin-top:18px;
    display:flex;
    justify-content:flex-end;
}

.btn-danger{
    background:var(--sr-danger);
    color:#fff;
    border-color:var(--sr-danger);
}

.btn-danger:hover{
    filter:brightness(.92);
}

.alert{
    margin-top:16px;
    padding:12px 14px;
    border-radius:12px;
    font-weight:700;
}

.alert-danger{
    background:rgba(220, 38, 38, .12);
    color:var(--sr-danger);
    border:1px solid rgba(220, 38, 38, .25);
}

/*==================================================
BLOG PAGE
==================================================*/

.blog-view-card{
    padding:0;
    overflow:hidden;
}

.blog-view-header{
    padding:20px;
}

.blog-top-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:20px;
}

.blog-back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--sr-primary);
    font-weight:700;
    text-decoration:none;
}

.blog-back-link:hover{
    color:var(--sr-primary-dark);
}

.blog-view-header h1{
    margin:0;
    font-size:24px;
    line-height:1.15;
    font-weight:800;
}

.blog-view-meta{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:18px;
    color:var(--sr-muted);
    font-size:.92rem;
}

.blog-view-meta span,
.blog-view-meta a{
    display:flex;
    align-items:center;
    gap:6px;
    color:inherit;
    text-decoration:none;
}

.blog-view-excerpt{
    margin-top:24px;
    padding:18px 22px;
    border-left:4px solid var(--sr-primary);
    background:var(--sr-panel-soft);
    border-radius:14px;
    font-style:italic;
    color:var(--sr-muted);
}

.blog-view-image{
    display:block;
    width:100%;
    max-height:520px;
    object-fit:cover;
    background:var(--sr-panel-soft);
}

.blog-view-content{
    padding:40px;
    font-size:1.05rem;
    line-height:1.9;
    color:var(--sr-text);
}

.blog-view-content h1,
.blog-view-content h2,
.blog-view-content h3,
.blog-view-content h4{
    margin:38px 0 18px;
}

.blog-view-content p{
    margin:0 0 22px;
}

.blog-view-content img{
    max-width:100%;
    border-radius:14px;
    margin:24px auto;
    display:block;
}

.blog-view-content ul,
.blog-view-content ol{
    margin:0 0 24px 24px;
}

.blog-view-content li{
    margin-bottom:8px;
}

.blog-view-content a{
    color:var(--sr-primary);
    text-decoration:none;
}

.blog-view-content a:hover{
    text-decoration:underline;
}

/* Quotes */

.blog-view-content blockquote{
    margin:30px 0;
    padding:18px 24px;
    border-left:4px solid var(--sr-primary);
    background:var(--sr-panel-soft);
    border-radius:12px;
    color:var(--sr-muted);
    font-style:italic;
}

/* Code */

.blog-view-content pre{
    position:relative;
    margin:30px 0;
    padding:22px;
    background:#111827;
    color:#f5f5f5;
    border-radius:16px;
    overflow:auto;
}

.blog-view-content code{
    font-family:Consolas,Monaco,monospace;
}

.copy-code-btn{
    position:absolute;
    top:12px;
    right:12px;
}

/* Youtube */

.bb-youtube{
    position:relative;
    width:100%;
    height:0;
    padding-bottom:56.25%;
    margin:28px 0;
}

.bb-youtube iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    border-radius:14px;
}

/*==================================================
AUTHOR
==================================================*/

.blog-author-box{
    display:flex;
    gap:20px;
    padding:30px;
    border-top:1px solid var(--sr-border);
    background:var(--sr-panel-soft);
}

.blog-author-avatar{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid var(--sr-border);
}

.blog-author-box h3{
    margin:0 0 8px;
}

.blog-author-box p{
    margin:12px 0;
    color:var(--sr-muted);
}

/*==================================================
COMMENTS
==================================================*/

.blog-comments-card{
    margin-top:24px;
}

.blog-comments-card h2{
    margin-top:0;
}

.blog-comment-form textarea{
    width:100%;
    min-height:130px;
    padding:14px;
    resize:vertical;
    border:1px solid var(--sr-border);
    border-radius:12px;
    background:var(--sr-panel);
    color:var(--sr-text);
    margin-bottom:14px;
}

.blog-comments-list{
    margin-top:30px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.blog-comment{
    display:flex;
    gap:16px;
    padding:18px;
    border:1px solid var(--sr-border);
    border-radius:16px;
    background:var(--sr-panel-soft);
}

.blog-comment-avatar{
    width:55px;
    height:55px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
}

.blog-comment-body{
    flex:1;
}

.blog-comment-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.blog-comment-head strong{
    display:block;
}

.blog-comment-head span{
    color:var(--sr-muted);
    font-size:.85rem;
}

.blog-comment-text{
    line-height:1.7;
}

.comment-delete-btn{
    width:36px;
    height:36px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    background:#d63031;
    color:#fff;
    transition:.2s;
}

.comment-delete-btn:hover{
    background:#b71c1c;
}

/*==================================================
RECENT BLOGS
==================================================*/

.recent-blog-card{
    margin-top:24px;
}

.recent-blog-list{
    display:flex;
    flex-direction:column;
}

.recent-blog-list a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid var(--sr-border);
    text-decoration:none;
    color:inherit;
}

.recent-blog-list a:last-child{
    border-bottom:none;
}

.recent-blog-list a:hover strong{
    color:var(--sr-primary);
}

.recent-blog-list span{
    color:var(--sr-muted);
    font-size:.85rem;
}

/*==================================================
ALERTS
==================================================*/

.alert{
    margin-top:20px;
    padding:14px 18px;
    border-radius:12px;
}

.alert-danger{
    background:#ffeaea;
    color:#b71c1c;
    border:1px solid #f3b6b6;
}

/*==================================================
BUTTONS
==================================================*/

.btn-danger{
    background:#d63031;
    color:#fff;
    border:none;
}

.btn-danger:hover{
    background:#b71c1c;
}

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

@media(max-width:900px){

    .blog-top-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .blog-view-header{
        padding:24px;
    }

    .blog-view-content{
        padding:24px;
    }

    .blog-view-header h1{
        font-size:2rem;
    }

    .blog-author-box{
        flex-direction:column;
        text-align:center;
        align-items:center;
    }

    .blog-comment{
        flex-direction:column;
    }

    .blog-comment-avatar{
        width:70px;
        height:70px;
    }

    .blog-comment-head{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

}

.create-blog-card{
    margin-top:24px;
}

.create-blog-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.create-blog-form label{
    display:flex;
    flex-direction:column;
    gap:8px;
    font-weight:700;
}

.create-blog-form input[type="text"],
.create-blog-form input[type="file"],
.create-blog-form textarea{
    width:100%;
    padding:14px 16px;
    border:1px solid var(--sr-border);
    border-radius:14px;
    background:var(--sr-panel-soft);
    color:var(--sr-text);
    font:inherit;
}

.create-blog-form textarea{
    resize:vertical;
    min-height:320px;
    line-height:1.6;
}

.create-blog-form small{
    color:var(--sr-muted);
    font-weight:400;
}

.bbcode-help{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:16px;
    border-radius:16px;
    background:var(--sr-panel-soft);
    color:var(--sr-muted);
}

.bbcode-help strong{
    width:100%;
    color:var(--sr-text);
}

.bbcode-help span{
    padding:6px 10px;
    border-radius:999px;
    background:var(--sr-panel);
    border:1px solid var(--sr-border);
    font-size:.85rem;
}

.create-blog-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
}

@media(max-width:700px){
    .create-blog-actions{
        flex-direction:column;
    }

    .create-blog-actions .btn{
        width:100%;
    }
}

/* ==================================================
   REQUESTS PAGE
================================================== */

.request-search-card {
    margin-bottom: 18px;
}

.request-search-card label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
}

.request-search-input {
    width: 100%;
    border: 1px solid var(--sr-border);
    background: var(--sr-panel-soft);
    color: var(--sr-text);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 1rem;
    outline: none;
}

.request-search-input:focus {
    border-color: var(--sr-primary);
}

.request-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.request-song-card {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border-radius: 18px;
    background: var(--sr-panel);
    border: 1px solid var(--sr-border);
}

.request-song-image {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    object-fit: cover;
    background: var(--sr-panel-soft);
}

.request-song-info {
    min-width: 0;
}

.request-song-info strong,
.request-song-info span,
.request-song-info small {
    display: block;
}

.request-song-info strong {
    color: var(--sr-text);
    font-size: 1rem;
    margin-bottom: 3px;
}

.request-song-info span {
    color: var(--sr-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.request-song-info small {
    margin-top: 5px;
    color: var(--sr-muted);
    font-size: 0.82rem;
}

.request-btn {
    grid-column: 1 / -1;
    margin-top: 10px;
    width: 100%;
    justify-content: center;
}

/* Modal */

.sr-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.65);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sr-modal.active {
    display: flex;
}

.sr-modal-box {
    width: min(460px, 100%);
    position: relative;
    background: var(--sr-panel);
    border: 1px solid var(--sr-border);
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.sr-modal-box h3 {
    margin: 0 0 18px;
    color: var(--sr-text);
}

.sr-modal-box label {
    display: block;
    font-weight: 700;
    margin: 14px 0 7px;
    color: var(--sr-text);
}

.sr-modal-box input,
.sr-modal-box textarea {
    width: 100%;
    border: 1px solid var(--sr-border);
    background: var(--sr-panel-soft);
    color: var(--sr-text);
    border-radius: 14px;
    padding: 13px 15px;
    font-size: 0.95rem;
    outline: none;
}

.sr-modal-box textarea {
    min-height: 110px;
    resize: vertical;
}

.sr-modal-box input:focus,
.sr-modal-box textarea:focus {
    border-color: var(--sr-primary);
}

.sr-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    border: 0;
    background: var(--sr-panel-soft);
    color: var(--sr-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
}

.sr-modal-close:hover {
    color: var(--sr-text);
}

.request-status {
    margin: 14px 0;
    font-size: 0.92rem;
    color: var(--sr-muted);
}

.request-status.success {
    color: var(--sr-success);
}

.request-status.error {
    color: var(--sr-danger);
}

/* Mobile */

@media (max-width: 700px) {
    .request-song-card {
        grid-template-columns: 58px 1fr;
    }

    .request-song-image {
        width: 58px;
        height: 58px;
    }

    .request-btn {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }
}

/* ==================================================
   PAGINATION
================================================== */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 10px;
}

.pagination a,
.pagination span {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sr-panel);
    border: 1px solid var(--sr-border);
    color: var(--sr-text);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
}

.pagination a:hover {
    background: var(--sr-primary);
    border-color: var(--sr-primary);
    color: #fff;
}

.pagination .active {
    background: var(--sr-primary);
    border-color: var(--sr-primary);
    color: #fff;
}

.pagination .dots {
    background: transparent;
    border-color: transparent;
    color: var(--sr-muted);
    min-width: auto;
    padding: 0 4px;
}

.request-rules{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.request-rules span{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    background:var(--sr-panel-soft);
    border:1px solid var(--sr-border);
    border-radius:999px;
    color:var(--sr-text);
    font-size:.9rem;
    font-weight:600;
}

.request-rules i{
    color:var(--sr-primary);
}

/* ==========================================
   REQUEST ALERTS
========================================== */

.request-alert{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:16px 18px;
    margin-top:14px;
    border-radius:16px;
    border:1px solid var(--sr-border);
    animation:fadeIn .25s ease;
}

.request-alert i{
    font-size:1.35rem;
    margin-top:2px;
}

.request-alert strong{
    display:block;
    margin-bottom:4px;
    font-size:1rem;
}

.request-alert span{
    display:block;
    color:var(--sr-muted);
    line-height:1.45;
}

.request-alert.success{
    background:rgba(34,197,94,.08);
    border-color:rgba(34,197,94,.25);
}

.request-alert.success i,
.request-alert.success strong{
    color:#16a34a;
}

.request-alert.error{
    background:rgba(239,68,68,.08);
    border-color:rgba(239,68,68,.25);
}

.request-alert.error i,
.request-alert.error strong{
    color:#dc2626;
}

.request-alert.warning{
    background:rgba(245,158,11,.08);
    border-color:rgba(245,158,11,.25);
}

.request-alert.warning i,
.request-alert.warning strong{
    color:#d97706;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(-8px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

.podcast-page-card{
    overflow:hidden;
}

.podcast-detail-hero{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:20px;
    padding:20px;
    align-items:center;
}

.podcast-cover-wrap{
    position:relative;
}

.podcast-cover{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:8px;
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.podcast-badge{
    position:absolute;
    left:14px;
    top:14px;
    background:rgba(0,0,0,.72);
    color:#fff;
    padding:8px 12px;
    border-radius:8px;
    font-size:13px;
    font-weight:800;
}

.podcast-detail-main h1{
    font-size:32px;
    line-height:1.08;
    margin:0 0 18px;
}

.podcast-meta-list{
    display:flex;
    flex-wrap:wrap;
    gap:14px 20px;
    color:var(--sr-muted);
    margin-bottom:24px;
}

.podcast-meta-list span{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.podcast-player-box{
    background:var(--sr-panel-soft);
    border:1px solid var(--sr-border);
    border-radius:8px;
    padding:22px;
    margin-top:20px;
}

.podcast-player-box audio{
    width:100%;
}

.podcast-play-title{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:900;
    margin-bottom:14px;
}

.podcast-play-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:var(--sr-primary);
    color:#fff;
}

.podcast-video{
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    border-radius:16px;
}

.podcast-video iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

.podcast-body{
    padding:34px;
    border-top:1px solid var(--sr-border);
}

.podcast-body h2,
.podcast-comments h2,
.podcast-host-card h2{
    margin-top:0;
}

.podcast-description{
    font-size:17px;
    line-height:1.8;
}

.podcast-host-card{
    margin:0 34px 34px;
    padding:24px;
    border:1px solid var(--sr-border);
    background:var(--sr-panel-soft);
    border-radius:8px;
}

.podcast-host-inner{
    display:flex;
    gap:18px;
    align-items:center;
}

.podcast-host-avatar{
    width:76px;
    height:76px;
    border-radius:8px;
    object-fit:cover;
    background:#e5e7eb;
}

.podcast-comments{
    padding:34px;
    border-top:1px solid var(--sr-border);
}

.comment-box{
    padding:18px 0;
    border-bottom:1px solid var(--sr-border);
}

.comment-box strong{
    display:block;
    margin-bottom:4px;
}

.comment-box small{
    color:var(--sr-muted);
}

.comment-box p{
    margin-bottom:0;
    line-height:1.6;
}

.comment-form textarea{
    width:100%;
    min-height:110px;
    resize:vertical;
    border:1px solid var(--sr-border);
    border-radius:8px;
    padding:14px;
    font:inherit;
    background:var(--sr-panel);
    color:var(--sr-text);
}

.comment-form button{
    margin-top:12px;
}

.podcast-back{
    display:inline-flex;
    gap:8px;
    align-items:center;
    margin-bottom:18px;
    font-weight:800;
    color:var(--sr-danger);
}

@media(max-width:850px){
    .podcast-detail-hero{
        grid-template-columns:1fr;
        padding:22px;
    }

    .podcast-detail-main h1{
        font-size:32px;
    }

    .podcast-body,
    .podcast-comments{
        padding:22px;
    }

    .podcast-host-card{
        margin:0 22px 22px;
    }
}

/*==================================================
  HELP CENTRE
==================================================*/

.help-category-card{
    padding:0;
    overflow:hidden;
    margin-bottom:22px;
}

.help-category-card h2{
    margin:0;
    padding:22px 26px;
    font-size:24px;
    border-bottom:1px solid var(--sr-border);
    background:var(--sr-panel-soft);
}

.help-article-list{
    display:flex;
    flex-direction:column;
}

.help-article-link{
    display:grid;
    grid-template-columns:54px 1fr 90px 24px;
    gap:18px;
    align-items:center;
    padding:18px 24px;
    text-decoration:none;
    color:inherit;
    border-bottom:1px solid var(--sr-border);
    transition:.18s;
}

.help-article-link:last-child{
    border-bottom:0;
}

.help-article-link:hover{
    background:var(--sr-panel-soft);
}

.help-article-link:hover strong{
    color:var(--sr-primary);
}

.help-article-link span{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:var(--sr-primary-light);
    color:var(--sr-primary);
    font-size:18px;
}

.help-article-link strong{
    display:block;
    font-size:16px;
    font-weight:700;
    transition:.18s;
}

.help-article-link small{
    text-align:right;
    color:var(--sr-muted);
    font-size:13px;
    white-space:nowrap;
}

.help-article-link .fa-chevron-right{
    text-align:right;
    color:var(--sr-muted);
    font-size:15px;
    transition:.18s;
}

.help-article-link:hover .fa-chevron-right{
    color:var(--sr-primary);
    transform:translateX(4px);
}

/*--------------------------------------------------
ARTICLE PAGE
--------------------------------------------------*/

.help-article-card{
    padding:34px;
}

.help-article-head{
    margin:25px 0 30px;
    padding-bottom:24px;
    border-bottom:1px solid var(--sr-border);
}

.help-article-head span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--sr-primary);
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.help-article-head h1{
    margin:14px 0 0;
    font-size:38px;
    line-height:1.15;
}

.help-article-content{
    font-size:17px;
    line-height:1.9;
    color:var(--sr-text);
}

.help-article-content p{
    margin-bottom:22px;
}

.help-article-content ul{
    margin:20px 0;
    padding-left:24px;
}

.help-article-content li{
    margin-bottom:10px;
}

.help-article-content h2{
    margin:34px 0 14px;
}

.help-article-content a{
    color:var(--sr-primary);
}

.help-article-content code{
    background:var(--sr-panel-soft);
    padding:2px 6px;
    border-radius:6px;
}

/*--------------------------------------------------
RESPONSIVE
--------------------------------------------------*/

@media (max-width:700px){

    .help-category-card h2{
        padding:18px;
        font-size:22px;
    }

    .help-article-link{
        grid-template-columns:46px 1fr;
        gap:14px;
        padding:16px 18px;
    }

    .help-article-link small,
    .help-article-link .fa-chevron-right{
        display:none;
    }

    .help-article-card{
        padding:22px;
    }

    .help-article-head h1{
        font-size:30px;
    }

}

/*==================================================
CREATE EVENT
==================================================*/

.create-event-card{
    padding:30px;
}

.create-event-form{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.create-event-form .form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.create-event-form label{
    font-size:15px;
    font-weight:700;
    color:var(--sr-text);
}

.create-event-form label .muted{
    font-size:13px;
    color:var(--sr-muted);
    font-weight:500;
}

.create-event-form input[type="text"],
.create-event-form input[type="date"],
.create-event-form input[type="time"],
.create-event-form textarea{
    width:100%;
    padding:13px 14px;
    border:1px solid var(--sr-border);
    border-radius:var(--sr-radius);
    background:var(--sr-panel);
    color:var(--sr-text);
    font:inherit;
    box-sizing:border-box;
    transition:.2s;
}

.create-event-form textarea{
    min-height:180px;
    resize:vertical;
}

.create-event-form input::placeholder,
.create-event-form textarea::placeholder{
    color:var(--sr-muted);
}

.create-event-form input:focus,
.create-event-form textarea:focus{
    outline:none;
    border-color:var(--sr-primary);
    box-shadow:0 0 0 3px rgba(214,60,60,.15);
}

.create-event-date-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.create-event-form input[type=file]{
    width:100%;
    padding:12px;
    border:2px dashed var(--sr-border);
    border-radius:var(--sr-radius);
    background:var(--sr-panel-soft);
    color:var(--sr-text);
}

.create-event-form input[type=file]::file-selector-button{
    background:var(--sr-primary);
    color:#fff;
    border:none;
    border-radius:6px;
    padding:10px 18px;
    margin-right:15px;
    cursor:pointer;
    font-weight:600;
    transition:.2s;
}

.create-event-form input[type=file]::file-selector-button:hover{
    background:var(--sr-primary-dark);
}

.form-help{
    display:block;
    margin-top:5px;
    font-size:13px;
    color:var(--sr-muted);
}

.create-event-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
    padding-top:25px;
    border-top:1px solid var(--sr-border);
}

.create-event-actions .btn{
    min-width:170px;
}

.request-alert{
    display:flex;
    gap:15px;
    align-items:flex-start;
    padding:18px;
    margin-bottom:25px;
    border-radius:var(--sr-radius);
}

.request-alert i{
    font-size:22px;
}

.request-alert strong{
    display:block;
    margin-bottom:4px;
}

.request-alert.error{
    background:var(--sr-primary-light);
    border:1px solid rgba(214,60,60,.25);
    color:var(--sr-primary);
}

/*==================================================
EVENT PAGE
==================================================*/

.event-page-back{
    margin-bottom:18px;
}

.event-page-back a{
    color:var(--sr-muted);
    text-decoration:none;
    font-weight:600;
}

.event-page-back a:hover{
    color:var(--sr-primary);
}

.event-single{
    overflow:hidden;
    padding:0;
}

.event-single-image-wrap{
    width:100%;
    aspect-ratio:16 / 6;
    overflow:hidden;
    background:var(--sr-panel-soft);
}

.event-single-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.event-single-content{
    padding:35px;
}

.event-single-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    background:var(--sr-primary-light);
    color:var(--sr-primary);
    border-radius:30px;
    font-size:13px;
    font-weight:700;
    margin-bottom:18px;
}

.event-single h1{
    margin:0 0 28px;
    color:var(--sr-text);
    font-size:38px;
    line-height:1.2;
}

.event-single-details{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-bottom:35px;
}

.event-detail-item{
    display:flex;
    gap:15px;
    padding:18px;
    border:1px solid var(--sr-border);
    border-radius:var(--sr-radius);
    background:var(--sr-panel-soft);
}

.event-detail-item i{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--sr-primary-light);
    color:var(--sr-primary);
    font-size:18px;
    flex-shrink:0;
}

.event-detail-item strong{
    display:block;
    margin-bottom:4px;
    color:var(--sr-text);
}

.event-detail-item span,
.event-detail-item a{
    color:var(--sr-muted);
    text-decoration:none;
}

.event-detail-item a:hover{
    color:var(--sr-primary);
}

.event-single-description{
    border-top:1px solid var(--sr-border);
    padding-top:30px;
}

.event-single-description h2{
    margin-bottom:15px;
    color:var(--sr-text);
}

.event-description-text{
    color:var(--sr-text);
    line-height:1.9;
}

/*==================================================
EVENT CARDS
==================================================*/

.event-card{
    background:var(--sr-panel);
    border:1px solid var(--sr-border);
    border-radius:var(--sr-radius);
    overflow:hidden;
    text-decoration:none;
    transition:.25s;
    display:flex;
    flex-direction:column;
}

.event-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    border-color:var(--sr-primary);
}

.event-card-image{
    width:100%;
    aspect-ratio:16 / 9;
    object-fit:cover;
    display:block;
}

.event-card-body{
    padding:20px;
}

.event-card-body h3{
    margin:0 0 12px;
    color:var(--sr-text);
    font-size:22px;
}

.event-card-body p{
    margin:0 0 18px;
    color:var(--sr-muted);
    line-height:1.6;
}

.event-card-meta{
    display:flex;
    flex-direction:column;
    gap:10px;
    font-size:14px;
    color:var(--sr-muted);
}

.event-card-meta span{
    display:flex;
    align-items:center;
    gap:10px;
}

.event-card-meta i{
    width:18px;
    color:var(--sr-primary);
}

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

@media (max-width:900px){

    .create-event-date-grid{
        grid-template-columns:1fr;
    }

    .event-single-details{
        grid-template-columns:1fr;
    }

}

@media (max-width:768px){

    .create-event-card{
        padding:20px;
    }

    .event-single-content{
        padding:25px;
    }

    .event-single h1{
        font-size:30px;
    }

    .create-event-actions{
        flex-direction:column-reverse;
        align-items:stretch;
    }

    .create-event-actions .btn{
        width:100%;
        min-width:0;
    }

}

@media (max-width:480px){

    .event-single-image-wrap{
        aspect-ratio:16 / 9;
    }

    .event-single-content{
        padding:20px;
    }

    .event-single h1{
        font-size:26px;
    }

}
/*==================================================
  FINAL RESPONSIVE / MOBILE OVERRIDES
  Keeps desktop styling intact while correcting grid,
  sidebar, header and content overflow on smaller screens.
==================================================*/

html{
    overflow-x:hidden;
}

body{
    min-width:0;
    overflow-x:hidden;
}

img,
video,
iframe,
audio{
    max-width:100%;
}

.page-grid > *,
.schedule-layout > *,
.content-page,
.feed-column,
.schedule-column,
.left-column,
.right-column{
    min-width:0;
}

@media (max-width:1050px){

    /* Main site layouts become one clean content column. */
    .page-grid,
    .schedule-layout{
        grid-template-columns:minmax(0,1fr);
        width:100%;
        gap:18px;
        padding:22px 16px;
    }

    /* Side navigation and desktop sidebar are already available
       through the main navigation, so remove them on mobile/tablet. */
    .page-grid > .left-column,
    .page-grid > .right-column,
    .schedule-layout > .left-column,
    .schedule-layout > .right-column{
        display:none !important;
    }

    .feed-column,
    .schedule-column{
        grid-column:1 / -1 !important;
        width:100%;
        max-width:none;
        order:initial;
    }

    .header-inner{
        min-height:0;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        gap:12px;
        padding:14px 16px 16px;
    }

    .site-logo,
    .site-logo img{
        max-width:100%;
    }

    .site-nav{
        width:100%;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:8px 14px;
    }

    .content-wrapper{
        margin:28px auto;
        padding:0 16px;
    }
}

@media (max-width:700px){

    body{
        font-size:14px;
    }

    .container{
        width:100%;
    }

    .page-grid,
    .schedule-layout{
        gap:14px;
        padding:18px 12px;
    }

    .card{
        padding:16px;
        margin-bottom:14px;
    }

    .site-logo img{
        width:auto;
        max-width:100%;
        max-height:82px;
    }

    .site-nav{
        gap:7px 12px;
    }

    .site-nav a{
        font-size:13px;
        line-height:1.25;
    }

    .nav-btn{
        padding:9px 13px;
    }

    .content-wrapper{
        margin:20px auto;
        padding:0 12px;
    }

    .content-hero,
    .content-card{
        padding:22px 18px;
        border-radius:var(--sr-radius);
    }

    .content-hero{
        margin-top:0;
    }

    .content-hero h1{
        font-size:30px;
        overflow-wrap:anywhere;
    }

    .content-hero p{
        font-size:15px;
    }

    .composer-actions,
    .composer-actions-clean{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .composer-extra{
        grid-template-columns:1fr;
    }

    .composer-extra input[type="file"]{
        grid-column:auto;
    }

    .post-head{
        align-items:flex-start;
    }

    .post-actions{
        justify-content:flex-start;
        flex-wrap:wrap;
    }

    .comment-form{
        align-items:flex-start;
    }

    .comment-form input{
        min-width:0;
    }

    .schedule-day h2{
        padding:16px;
        font-size:20px;
    }

    .schedule-show{
        grid-template-columns:1fr;
        gap:14px;
        padding:16px;
    }

    .schedule-show-time{
        text-align:left;
    }

    .schedule-show-image{
        width:100%;
        height:auto;
        aspect-ratio:16 / 9;
    }

    .request-list{
        grid-template-columns:1fr;
    }

    .profiles-filters a,
    .request-rules span{
        max-width:100%;
    }

    .profile-list-main,
    .notification-text,
    .request-song-info,
    .podcast-detail-main{
        min-width:0;
    }

    .profile-list-main h3,
    .profile-list-main p,
    .notification-text strong,
    .notification-text small,
    .request-song-info strong,
    .request-song-info span{
        overflow-wrap:anywhere;
    }

    .member-cover{
        height:190px;
    }

    .member-profile-main{
        padding:0 18px 22px;
        gap:14px;
    }

    .profile-love-sent{
        margin:0 18px 22px;
    }

    .events-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .auth-card{
        padding:22px 18px;
    }

    .sr-modal{
        padding:12px;
    }

    .sr-modal-box{
        width:100%;
        max-height:calc(100vh - 24px);
        overflow-y:auto;
        padding:22px 18px;
        border-radius:14px;
    }

    .blog-view-header,
    .blog-view-content,
    .podcast-body,
    .podcast-comments{
        padding:22px 18px;
    }

    .blog-view-header h1,
    .podcast-detail-main h1{
        font-size:28px;
        overflow-wrap:anywhere;
    }

    .blog-author-box{
        padding:22px 18px;
    }

    .podcast-detail-hero{
        grid-template-columns:1fr;
        padding:18px;
    }

    .podcast-cover-wrap{
        width:100%;
        max-width:420px;
        margin:0 auto;
    }

    .podcast-player-box{
        padding:16px;
    }

    .podcast-host-card{
        margin:0 18px 18px;
        padding:18px;
    }

    .podcast-host-inner{
        align-items:flex-start;
    }

    .help-category-card h2{
        padding:18px;
        font-size:21px;
    }

    .help-article-link{
        grid-template-columns:46px minmax(0,1fr);
        gap:12px;
        padding:15px 16px;
    }

    .help-article-link > :nth-child(3),
    .help-article-link > :nth-child(4){
        display:none;
    }

    .create-event-date-grid,
    .event-single-details{
        grid-template-columns:1fr;
    }
}

@media (max-width:480px){

    .header-inner{
        padding:12px;
    }

    .site-logo img{
        max-height:74px;
    }

    .site-nav{
        gap:6px 10px;
    }

    .site-nav a{
        font-size:12px;
    }

    .page-grid,
    .schedule-layout{
        padding:14px 8px;
    }

    .card{
        padding:14px;
    }

    .btn{
        max-width:100%;
    }

    .composer-actions,
    .composer-actions-clean{
        grid-template-columns:1fr;
    }

    .profile-list-item{
        grid-template-columns:52px minmax(0,1fr);
        gap:12px;
        padding:15px 14px;
    }

    .profile-list-avatar{
        width:52px;
        height:52px;
    }

    .request-song-card{
        grid-template-columns:54px minmax(0,1fr);
        gap:12px;
        padding:14px;
    }

    .request-song-image{
        width:54px;
        height:54px;
    }

    .podcast-host-inner{
        flex-direction:column;
    }

    .blog-view-header h1,
    .podcast-detail-main h1,
    .content-hero h1{
        font-size:26px;
    }

    .sr-footer-inner{
        flex-direction:column;
        text-align:center;
    }
}