/*
 * RealDeen Community V5
 * Unified Three-Column Desktop System
 */

.rv5{
    --page:#101a20;
    --card:#17262d;
    --card2:#1c2d35;
    --card3:#213640;

    --text:#f2f7f8;
    --muted:#9eafb5;
    --faint:#74868e;

    --line:rgba(137,179,188,.15);
    --line2:rgba(89,195,205,.29);

    --accent:#69c9d0;
    --accent2:#7bd4da;
    --accent-soft:rgba(73,164,174,.12);

    color:var(--text);

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

.rv5 *{
    box-sizing:border-box;
}


body[data-theme="light"] .rv5{
    --page:#edf3f4;
    --card:#fff;
    --card2:#f5f9fa;
    --card3:#eaf2f4;

    --text:#172a31;
    --muted:#60747c;
    --faint:#82939a;

    --line:rgba(42,92,101,.14);
    --line2:rgba(27,137,148,.28);

    --accent:#187e89;
    --accent2:#58bbc5;
    --accent-soft:rgba(30,137,148,.09);
}


/* =====================================================
   PAGE TOP = SAME 3 COLUMNS
   ===================================================== */

.rv5-top,
.rv5-three{
    width:calc(100% - 72px);
    max-width:1512px;
    min-width:1180px;

    margin-inline:auto;

    display:grid;

    grid-template-columns:
        260px
        minmax(0,920px)
        260px;

    column-gap:24px;
}


.rv5-top{
    align-items:center;

    min-height:132px;

    padding:
        30px 0 26px;

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


.rv5-top-left{
    width:260px;
}


.rv5-kicker,
.rv5-label,
.rv5-card-head>span,
.rv5-section-head>div>span{
    color:var(--accent);

    font-size:9px;
    font-weight:800;

    letter-spacing:.14em;
}


.rv5-top-left h1{
    margin:
        7px 0 6px;

    color:var(--text);

    font-size:29px;
    font-weight:700;

    line-height:1.12;

    letter-spacing:-.03em;
}


.rv5-top-left p{
    margin:0;

    color:var(--muted);

    font-size:11px;
    line-height:1.55;
}


.rv5-top-center{
    width:100%;
}


.rv5-search{
    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr)
        auto;

    align-items:center;

    width:100%;
    min-height:52px;

    padding:
        5px 6px 5px 15px;

    background:var(--card);

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

    border-radius:12px;
}


.rv5-search svg{
    width:18px;
    height:18px;

    color:var(--faint);
}


.rv5-search input{
    min-width:0;

    padding:
        0 12px;

    color:var(--text);

    background:transparent;

    border:0;
    outline:0;

    font:inherit;
    font-size:12px;
}


.rv5-search button{
    min-width:76px;
    height:40px;

    color:#082f34;

    background:var(--accent2);

    border:0;
    border-radius:8px;

    font-size:10px;
    font-weight:750;
}


.rv5-top-right{
    width:260px;

    display:flex;

    justify-content:flex-end;

    gap:7px;
}


.rv5-auth-heading{
    display:flex;

    align-items:center;
    justify-content:center;

    min-height:52px;

    color:var(--muted);

    background:var(--card);

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

    border-radius:12px;

    font-size:11px;
}


/* =====================================================
   MAIN 3 COLUMN GRID
   ===================================================== */

.rv5-three{
    align-items:start;

    padding:
        24px 0 64px;
}


.rv5-left,
.rv5-center,
.rv5-right{
    min-width:0;
}


.rv5-left,
.rv5-right{
    width:260px;

    display:grid;

    gap:14px;

    align-content:start;
}


.rv5-center{
    width:100%;
    max-width:920px;

    display:grid;

    gap:14px;

    align-content:start;
}


/* =====================================================
   UNIVERSAL CARD
   ===================================================== */

.rv5-card{
    width:100%;

    padding:16px;

    background:var(--card);

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

    border-radius:12px;
}


.rv5-card-head{
    display:flex;

    align-items:center;
    justify-content:space-between;

    min-height:24px;

    margin-bottom:10px;
}


.rv5-card-head>a,
.rv5-card-head>button{
    color:var(--accent);

    background:transparent;

    border:0;

    font-size:8.5px;

    text-decoration:none;
}


.rv5-button{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:38px;

    padding:
        0 12px;

    border-radius:8px;

    font-size:9px;
    font-weight:700;

    text-decoration:none!important;
}


.rv5-button-primary{
    color:#082f34!important;

    background:var(--accent2);

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


.rv5-button-muted{
    color:var(--text)!important;

    background:var(--card);

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


/* =====================================================
   NAV
   ===================================================== */

.rv5-nav{
    padding:10px;
}


.rv5-nav>.rv5-label{
    display:block;

    padding:
        6px 9px 9px;
}


.rv5-nav a{
    display:flex;

    align-items:center;

    gap:9px;

    min-height:40px;

    padding:
        0 9px;

    color:var(--muted)!important;

    border-radius:8px;

    font-size:10.5px;
    font-weight:630;

    text-decoration:none!important;
}


.rv5-nav a:hover{
    color:var(--text)!important;

    background:var(--accent-soft);
}


.rv5-nav-icon{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:19px;
    height:19px;

    color:var(--faint);
}


.rv5-nav-icon svg{
    width:18px;
    height:18px;
}


.rv5-nav-rule{
    height:1px;

    margin:
        7px 8px;

    background:var(--line);
}


/* =====================================================
   COMMON
   ===================================================== */

.rv5-avatar{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    width:38px;
    height:38px;

    color:#082f34;

    background:var(--accent2);

    border-radius:50%;

    font-size:11px;
    font-weight:800;
}


.rv5-avatar.alt{
    background:#a5c5cb;
}


.rv5-avatar-large{
    width:58px;
    height:58px;

    font-size:17px;
}


/* =====================================================
   COMPOSER
   ===================================================== */

.rv5-composer{
    padding:16px;
}


.rv5-userline{
    display:flex;

    align-items:center;

    gap:9px;

    margin-bottom:11px;
}


.rv5-userline>div{
    display:flex;

    flex-direction:column;
}


.rv5-userline strong{
    font-size:11px;
}


.rv5-userline small{
    margin-top:2px;

    color:var(--muted);

    font-size:8.5px;
}


.rv5-composer textarea{
    width:100%;
    min-height:105px;

    padding:13px;

    resize:vertical;

    color:var(--text);

    background:var(--card2);

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

    border-radius:9px;

    outline:0;

    font:inherit;
    font-size:11px;
    line-height:1.55;
}


.rv5-composer-footer{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-top:10px;
}


.rv5-tools{
    display:flex;

    gap:6px;
}


.rv5-tools button{
    min-height:34px;

    padding:
        0 10px;

    color:var(--muted);

    background:var(--card2);

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

    border-radius:7px;

    font-size:8.5px;
}


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

.rv5-section-head{
    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    min-height:55px;

    padding:
        0 2px 10px;

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


.rv5-section-head h2{
    margin:
        4px 0 0;

    font-size:18px;
}


.rv5-section-head nav{
    display:flex;

    gap:4px;
}


.rv5-section-head nav a{
    padding:
        6px 8px;

    color:var(--muted);

    border-radius:6px;

    font-size:8.5px;
}


.rv5-section-head nav a.active{
    color:var(--text);

    background:var(--accent-soft);
}


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

.rv5-post{
    padding:0;

    overflow:hidden;
}


.rv5-post>header{
    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    align-items:center;

    gap:9px;

    padding:
        13px 15px 9px;
}


.rv5-post>header>div{
    display:flex;

    flex-direction:column;
}


.rv5-post>header strong{
    font-size:10.5px;
}


.rv5-post>header small{
    margin-top:2px;

    color:var(--muted);

    font-size:8px;
}


.rv5-post-body{
    padding:
        5px 15px 15px;
}


.rv5-ayah{
    padding:13px;

    background:
        linear-gradient(
            135deg,
            var(--card2),
            var(--accent-soft)
        );

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

    border-radius:9px;
}


.rv5-ayah-head{
    display:flex;

    align-items:flex-start;
    justify-content:space-between;
}


.rv5-ayah-head>div{
    display:flex;

    flex-direction:column;
}


.rv5-ayah-head span{
    color:var(--accent);

    font-size:7px;
    font-weight:800;

    letter-spacing:.12em;
}


.rv5-ayah-head strong{
    margin-top:3px;

    font-size:9.5px;
}


.rv5-ayah-head>a{
    color:var(--accent)!important;

    font-size:8px;

    text-decoration:none!important;
}


.rv5-arabic{
    margin:
        17px 0 11px;

    font-size:24px;
    line-height:1.9;

    text-align:right;
}


.rv5-ayah>p{
    margin:0;

    color:var(--muted);

    font-size:9px;
    line-height:1.55;
}


.rv5-copy{
    margin:
        13px 1px 0;

    color:var(--text);

    font-size:10.5px;
    line-height:1.6;
}


.rv5-actions{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    background:var(--card2);

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


.rv5-actions button{
    min-height:40px;

    color:var(--muted);

    background:transparent;

    border:0;
    border-right:
        1px solid var(--line);

    font-size:8.5px;
}


.rv5-actions button:last-child{
    border-right:0;
}


/* =====================================================
   RIGHT LISTS
   ===================================================== */

.rv5-list{
    display:grid;
}


.rv5-list>a{
    display:flex;

    align-items:center;
    justify-content:space-between;

    min-height:37px;

    color:var(--text)!important;

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

    text-decoration:none!important;
}


.rv5-list>a:first-child{
    border-top:0;
}


.rv5-list strong{
    color:var(--accent);

    font-size:9px;
}


.rv5-list small{
    color:var(--faint);

    font-size:7.5px;
}


.rv5-person{
    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:8px;

    min-height:51px;

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


.rv5-person>div{
    display:flex;

    flex-direction:column;
}


.rv5-person strong{
    font-size:8.5px;
}


.rv5-person small{
    color:var(--muted);

    font-size:7.5px;
}


.rv5-person button,
.rv5-person-actions button{
    min-height:27px;

    padding:
        0 8px;

    color:var(--accent);

    background:var(--accent-soft);

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

    border-radius:6px;

    font-size:7.5px;
}


.rv5-principle>span,
.rv5-auth-benefits>span{
    color:var(--accent);

    font-size:7.5px;
    font-weight:800;

    letter-spacing:.12em;
}


.rv5-principle strong,
.rv5-auth-benefits strong{
    display:block;

    margin-top:7px;

    font-size:10.5px;
}


.rv5-principle p,
.rv5-auth-benefits p{
    color:var(--muted);

    font-size:8.5px;
    line-height:1.5;
}


/* =====================================================
   PEOPLE
   ===================================================== */

.rv5-people-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:12px;
}


.rv5-person-card{
    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    align-items:center;

    gap:9px;
}


.rv5-person-card>div:nth-child(2){
    display:flex;
    flex-direction:column;
}


.rv5-person-card strong{
    font-size:10px;
}


.rv5-person-card small{
    margin-top:2px;

    color:var(--muted);

    font-size:8px;
}


.rv5-person-actions{
    grid-column:
        1 / -1;

    display:flex;

    justify-content:flex-end;

    gap:6px;

    padding-top:10px;

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


.rv5-person-actions a{
    color:var(--accent)!important;

    font-size:8px;

    text-decoration:none!important;
}


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

.rv5-profile-hero{
    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:13px;
}


.rv5-profile-hero>div:nth-child(2)>span{
    color:var(--accent);

    font-size:7px;
    font-weight:800;
}


.rv5-profile-hero h2{
    margin:
        4px 0 3px;

    font-size:18px;
}


.rv5-profile-hero p{
    margin:0;

    color:var(--muted);

    font-size:9px;
}


.rv5-profile-actions{
    display:flex;

    gap:6px;
}


.rv5-profile-stats{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    text-align:center;
}


.rv5-profile-stats>div{
    display:flex;

    flex-direction:column;

    gap:3px;
}


.rv5-profile-stats strong{
    font-size:17px;
}


.rv5-profile-stats span{
    color:var(--muted);

    font-size:7.5px;
}


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

.rv5-comments{
    display:grid;

    gap:0;
}


.rv5-comment,
.rv5-notice{
    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    gap:9px;

    padding:
        11px 0;

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


.rv5-comment>div,
.rv5-notice>div{
    display:flex;

    flex-direction:column;
}


.rv5-comment strong,
.rv5-notice strong{
    font-size:9px;
}


.rv5-comment p{
    margin:
        4px 0 0;

    color:var(--muted);

    font-size:8.5px;
}


.rv5-notice small{
    margin-top:3px;

    color:var(--faint);

    font-size:7.5px;
}


.rv5-notice-dot{
    width:7px;
    height:7px;

    margin-top:4px;

    background:var(--accent);

    border-radius:50%;
}


.rv5-stat-card{
    display:flex;

    flex-direction:column;
}


.rv5-stat-card>span{
    color:var(--accent);

    font-size:8px;
    font-weight:800;
}


.rv5-stat-card>strong{
    margin-top:6px;

    font-size:24px;
}


.rv5-stat-card>small{
    margin-top:3px;

    color:var(--muted);

    font-size:8px;
}


/* =====================================================
   MESSAGES
   ===================================================== */

.rv5-conversations{
    padding:10px;
}


.rv5-conversations>a{
    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    align-items:center;

    gap:8px;

    min-height:52px;

    padding:
        6px 7px;

    color:var(--text)!important;

    border-radius:8px;

    text-decoration:none!important;
}


.rv5-conversations>a.active{
    background:var(--accent-soft);
}


.rv5-conversations>a>div{
    display:flex;

    flex-direction:column;

    min-width:0;
}


.rv5-conversations strong{
    font-size:8.5px;
}


.rv5-conversations small{
    margin-top:2px;

    overflow:hidden;

    color:var(--muted);

    font-size:7px;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.rv5-chat{
    padding:0;

    overflow:hidden;
}


.rv5-chat>header{
    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    align-items:center;

    gap:9px;

    padding:13px 15px;

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


.rv5-chat>header>div{
    display:flex;

    flex-direction:column;
}


.rv5-chat>header strong{
    font-size:10px;
}


.rv5-chat>header small{
    color:var(--muted);

    font-size:8px;
}


.rv5-chat-body{
    min-height:390px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    gap:8px;

    padding:18px;
}


.rv5-bubble{
    max-width:65%;

    padding:
        9px 11px;

    border-radius:10px;

    font-size:9.5px;
    line-height:1.5;
}


.rv5-bubble.other{
    align-self:flex-start;

    color:var(--text);

    background:var(--card2);
}


.rv5-bubble.mine{
    align-self:flex-end;

    color:#082f34;

    background:var(--accent2);
}


.rv5-chat>footer{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:8px;

    padding:12px;

    background:var(--card2);

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


.rv5-chat textarea{
    min-height:40px;

    padding:10px;

    resize:none;

    color:var(--text);

    background:var(--card);

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

    border-radius:8px;

    outline:0;

    font:inherit;
    font-size:9px;
}


.rv5-contact-card{
    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;
}


.rv5-contact-card>strong{
    margin-top:9px;

    font-size:10px;
}


.rv5-contact-card>small{
    margin-top:3px;

    color:var(--muted);

    font-size:8px;
}


.rv5-contact-card>a{
    margin-top:10px;

    color:var(--accent)!important;

    font-size:8px;

    text-decoration:none!important;
}


/* =====================================================
   AUTH / ACCOUNT
   ===================================================== */

.rv5-auth-card{
    max-width:620px;

    justify-self:center;

    padding:26px;
}


.rv5-auth-card h2{
    margin:
        7px 0 20px;

    font-size:22px;
}


.rv5-auth-benefits p{
    margin:
        10px 0 0;

    padding-top:10px;

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


.rv5-form{
    display:grid;

    gap:8px;
}


.rv5-form-two{
    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:12px;
}


.rv5-form .full{
    grid-column:
        1 / -1;
}


.rv5-form label{
    color:var(--muted);

    font-size:8px;
    font-weight:650;
}


.rv5-form input,
.rv5-form textarea{
    width:100%;
    min-height:42px;

    padding:
        0 11px;

    color:var(--text);

    background:var(--card2);

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

    border-radius:8px;

    outline:0;

    font:inherit;
    font-size:9.5px;
}


.rv5-form textarea{
    min-height:100px;

    padding-top:10px;

    resize:vertical;
}


.rv5-text-link{
    display:inline-block;

    margin-top:12px;

    color:var(--accent)!important;

    font-size:8.5px;

    text-decoration:none!important;
}


.rv5-account-nav{
    display:grid;

    padding:10px;
}


.rv5-account-nav>.rv5-label{
    padding:
        6px 8px 9px;
}


.rv5-account-nav>a{
    min-height:38px;

    display:flex;

    align-items:center;

    padding:
        0 9px;

    color:var(--muted);

    border-radius:7px;

    font-size:9px;
}


.rv5-account-nav>a.active{
    color:var(--text);

    background:var(--accent-soft);
}


.rv5-profile-edit{
    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;
}


.rv5-profile-edit button{
    color:var(--accent);

    background:transparent;

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

    border-radius:7px;

    padding:
        7px 9px;

    font-size:8px;
}


/* =====================================================
   rv5-desktop-refine-a1
   Navigation separation / intro alignment / readability
   ===================================================== */


/* -----------------------------------------------------
   TOP LEFT

   Keep the entire literature inside the 260px left track.
   Title remains on one line.
   ----------------------------------------------------- */

.rv5-top-left{
    width:260px !important;
    max-width:260px !important;

    overflow:visible;
}


.rv5-top-left h1{
    width:100% !important;

    margin:
        6px 0 8px !important;

    font-size:
        24px !important;

    line-height:
        1.15 !important;

    letter-spacing:
        -.035em !important;

    white-space:
        nowrap !important;
}


.rv5-top-left p{
    width:
        238px !important;

    max-width:
        238px !important;

    margin:
        0 !important;

    color:
        var(--muted) !important;

    font-size:
        10.5px !important;

    line-height:
        1.62 !important;
}


/*
 * Search stays exactly within the 920px center track.
 */

.rv5-top-center{
    width:100% !important;
    max-width:920px !important;
}


.rv5-search{
    width:100% !important;
    max-width:920px !important;
}


/*
 * Empty 260px balancing track.
 * No duplicate login/account controls here.
 */

.rv5-top-right{
    width:260px !important;
    min-width:260px !important;

    pointer-events:none;
}


/* -----------------------------------------------------
   COMMUNITY / ACCOUNT SEPARATION
   ----------------------------------------------------- */

.rv5-account-links{
    margin-top:0;
}


.rv5-account-links > .rv5-label{
    color:
        var(--faint) !important;
}


.rv5-account-links a:first-of-type{
    margin-top:1px;
}


/*
 * Remove old internal navigation separator if any
 * survives from an older cached version.
 */

.rv5-nav-rule{
    display:none !important;
}


/* -----------------------------------------------------
   COMMUNITY PRINCIPLE — READABLE
   ----------------------------------------------------- */

.rv5-principle{
    padding:
        17px !important;
}


.rv5-principle > span{
    display:block;

    margin-bottom:
        9px !important;

    color:
        var(--accent) !important;

    font-size:
        9px !important;

    font-weight:
        800 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        .13em !important;
}


.rv5-principle strong{
    display:block;

    margin:
        0 0 7px !important;

    color:
        var(--text) !important;

    font-size:
        12px !important;

    font-weight:
        690 !important;

    line-height:
        1.4 !important;
}


.rv5-principle p{
    margin:
        0 !important;

    color:
        var(--muted) !important;

    font-size:
        10px !important;

    line-height:
        1.62 !important;
}


/* -----------------------------------------------------
   RIGHT CARD GENERAL READABILITY
   ----------------------------------------------------- */

.rv5-right .rv5-card{
    padding:
        16px !important;
}


.rv5-right .rv5-card-head{
    margin-bottom:
        10px !important;
}


.rv5-right .rv5-card-head > span{
    font-size:
        9px !important;
}


.rv5-right .rv5-list strong{
    font-size:
        9.5px !important;
}


.rv5-right .rv5-list small{
    font-size:
        8px !important;
}


/* -----------------------------------------------------
   CONSISTENT COLUMN CARD WIDTH
   ----------------------------------------------------- */

.rv5-left > *,
.rv5-center > *,
.rv5-right > *{
    max-width:
        100% !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;
}


/* -----------------------------------------------------
   LIGHT MODE READABILITY
   ----------------------------------------------------- */

body[data-theme="light"]
.rv5-principle strong{
    color:#172e35 !important;
}


body[data-theme="light"]
.rv5-principle p{
    color:#5c7178 !important;
}


body[data-theme="light"]
.rv5-account-links > .rv5-label{
    color:#70858c !important;
}


/* end rv5-desktop-refine-a1 */


/* =========================================================
   rd-community-subtitle-right-v1

   Desktop:
   Community title remains left.
   Search remains center.
   Supporting sentence occupies the reserved right column.
   ========================================================= */

@media (min-width:1180px) {

    .rv5-top {

        position:
            relative !important;
    }


    /*
     * Existing subtitle stays in the same DOM position
     * but is visually placed into the right grid column.
     */

    .rv5-top-left > p {

        position:
            absolute !important;

        top:
            50% !important;

        right:
            0 !important;

        width:
            260px !important;

        margin:
            0 !important;

        padding:
            0 2px 0 12px !important;

        transform:
            translateY(-50%) !important;

        box-sizing:
            border-box !important;

        color:
            var(--muted) !important;

        font-size:
            11px !important;

        font-weight:
            450 !important;

        line-height:
            1.58 !important;

        text-align:
            left !important;
    }


    /*
     * Keep title block vertically clean now that subtitle
     * no longer occupies space beneath it.
     */

    .rv5-top-left {

        align-self:
            center !important;
    }


    .rv5-top-left h1 {

        margin-bottom:
            0 !important;
    }


    /*
     * Right column itself remains structurally reserved.
     */

    .rv5-top-right {

        min-height:
            52px !important;

        pointer-events:
            none !important;
    }

}


/* =========================================================
   TABLET / MOBILE
   Preserve the existing subtitle beneath the title.
   ========================================================= */

@media (max-width:1179px) {

    .rv5-top-left > p {

        position:
            static !important;

        width:
            auto !important;

        transform:
            none !important;

        padding:
            0 !important;
    }

}


/* =========================================================
   rd-community-subtitle-white-v2
   ========================================================= */

@media (min-width:1180px) {

    .rv5-top-left > p {

        color:
            #ffffff !important;

        opacity:
            1 !important;
    }

}


/* =========================================================
   rd-community-center-alignment-v3

   One shared desktop geometry:
   left 260 | gap 24 | center | gap 24 | right 260

   Search and center feed now share identical edges.
   ========================================================= */

@media (min-width:1180px) {

    .rv5-top,
    .rv5-three {

        width:
            calc(100% - 72px) !important;

        max-width:
            1512px !important;

        min-width:
            1180px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        grid-template-columns:
            260px minmax(0, 920px) 260px !important;

        column-gap:
            24px !important;

        box-sizing:
            border-box !important;
    }


    /* ============================================
       CENTER COLUMNS MUST BE IDENTICAL
       ============================================ */

    .rv5-top-center,
    .rv5-center {

        width:
            100% !important;

        max-width:
            920px !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        box-sizing:
            border-box !important;

        justify-self:
            stretch !important;
    }


    /* ============================================
       SEARCH — EXACT CENTER COLUMN WIDTH
       ============================================ */

    .rv5-top-center
    .rv5-search {

        width:
            100% !important;

        max-width:
            none !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        box-sizing:
            border-box !important;
    }


    /*
     * Search button keeps a consistent inset,
     * but the search shell itself reaches the
     * exact same edge as the cards below.
     */

    .rv5-search button {

        margin:
            0 !important;
    }


    /* ============================================
       CENTER CONTENT
       ============================================ */

    .rv5-center > * {

        width:
            100% !important;

        max-width:
            100% !important;

        box-sizing:
            border-box !important;
    }


    .rv5-center
    .rv5-card {

        width:
            100% !important;

        max-width:
            100% !important;

        box-sizing:
            border-box !important;
    }


    /* ============================================
       COMPOSER / PUBLISH ALIGNMENT
       ============================================ */

    .rv5-center
    form,

    .rv5-center
    textarea {

        box-sizing:
            border-box !important;
    }


    /*
     * Prevent any composer action row from
     * creating extra horizontal width.
     */

    .rv5-center
    .rv5-compose-actions,
    .rv5-center
    .rv5-composer-actions {

        width:
            100% !important;

        box-sizing:
            border-box !important;
    }

}


/* =========================================================
   rd-community-subtitle-align-teal-v4
   Align top-right description with right sidebar cards
   ========================================================= */

@media (min-width:1180px) {

    .rv5-top-left > p {

        width:
            260px !important;

        right:
            0 !important;

        padding:
            0 16px !important;

        box-sizing:
            border-box !important;

        color:
            #69c9d0 !important;

        opacity:
            1 !important;

        text-align:
            left !important;

        font-size:
            11px !important;

        font-weight:
            500 !important;

        line-height:
            1.55 !important;
    }

}

/* =========================================================
   COMMUNITY WALL — ACCOUNT CARD ON RIGHT V1
   ========================================================= */

.rv5-right
.rv5-account-right-card{

    width:
        100% !important;

    max-width:
        100% !important;

    margin:
        0 0 14px !important;

    box-sizing:
        border-box !important;
}


/* Keep account links readable in narrower right column */

.rv5-right
.rv5-account-right-card
a{

    min-height:
        40px !important;

    font-size:
        10.5px !important;
}


/* Account title */

.rv5-right
.rv5-account-right-card
.rv5-label{

    font-size:
        11px !important;

    letter-spacing:
        1.4px !important;
}


@media(max-width:1000px){

    .rv5-right
    .rv5-account-right-card{

        margin-bottom:
            12px !important;
    }

}


/* =========================================================
   COMMUNITY V5 — FUNCTIONAL COMPOSER / FEED V1
   ========================================================= */

.rv5-community-flash{
    margin:
        0 0 14px;

    padding:
        12px 14px;

    border-radius:
        10px;

    font-size:
        11px;

    line-height:
        1.5;
}


.rv5-community-flash.success{
    color:
        #a7e8dc;

    background:
        rgba(61,170,151,.10);

    border:
        1px solid rgba(96,204,185,.24);
}


.rv5-community-flash.error{
    color:
        #ffb3b0;

    background:
        rgba(198,74,74,.08);

    border:
        1px solid rgba(220,105,105,.20);
}



.rv5-composer-tool-panel{

    margin:
        12px 0 0;

    padding:
        14px;

    background:
        rgba(8,28,33,.46);

    border:
        1px solid rgba(121,185,191,.16);

    border-radius:
        10px;
}


.rv5-composer-tool-panel[hidden]{
    display:
        none !important;
}


.rv5-tool-panel-head{
    margin-bottom:
        11px;
}


.rv5-tool-panel-head strong{
    display:
        block;

    color:
        var(--text);

    font-size:
        11px;
}


.rv5-tool-panel-head small,
.rv5-composer-tool-panel > small{
    color:
        var(--muted);

    font-size:
        9px;
}


.rv5-ayah-controls{

    display:
        grid;

    grid-template-columns:
        minmax(0,1.55fr)
        minmax(90px,.55fr)
        auto
        auto;

    gap:
        8px;

    align-items:
        center;
}


.rv5-ayah-controls select,
.rv5-ayah-controls input,
.rv5-composer-tool-panel
#rv5-hashtags{

    width:
        100%;

    min-height:
        39px;

    box-sizing:
        border-box;

    padding:
        0 11px;

    color:
        var(--text);

    background:
        rgba(8,27,32,.74);

    border:
        1px solid rgba(118,183,190,.20);

    border-radius:
        8px;

    outline:
        none;

    font-size:
        10px;
}


.rv5-tool-action{

    min-height:
        39px;

    padding:
        0 12px;

    color:
        #082f34;

    background:
        var(--accent2);

    border:
        0;

    border-radius:
        8px;

    font-size:
        9px;

    font-weight:
        700;

    cursor:
        pointer;
}


.rv5-tool-action.muted{

    color:
        var(--text);

    background:
        rgba(80,130,136,.12);

    border:
        1px solid rgba(121,185,191,.16);
}



.rv5-ayah-preview{

    margin-top:
        12px;

    padding:
        14px;

    background:
        rgba(81,153,160,.08);

    border:
        1px solid rgba(111,199,206,.18);

    border-radius:
        9px;
}


.rv5-ayah-preview[hidden]{
    display:
        none !important;
}


.rv5-preview-head{
    margin-bottom:
        10px;

    color:
        var(--accent);
}


.rv5-preview-arabic{

    margin:
        8px 0;

    color:
        var(--text);

    font-size:
        19px;

    line-height:
        1.9;

    text-align:
        right;
}


.rv5-ayah-preview p{

    margin:
        8px 0 0;

    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.6;
}


.rv5-tool-error{
    color:
        #ffaaa7;

    font-size:
        10px;
}


.rv5-tool-loading{
    color:
        var(--muted);

    font-size:
        10px;
}



.rv5-image-preview{

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin:
        12px 0 0;

    padding:
        10px;

    background:
        rgba(8,28,33,.46);

    border:
        1px solid rgba(121,185,191,.16);

    border-radius:
        10px;
}


.rv5-image-preview[hidden]{
    display:
        none !important;
}


.rv5-image-preview img{

    width:
        76px;

    height:
        58px;

    object-fit:
        cover;

    border-radius:
        7px;
}


.rv5-image-preview > div{

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    min-width:
        0;
}


.rv5-image-preview strong{

    color:
        var(--text);

    font-size:
        10px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.rv5-image-preview button{

    width:
        max-content;

    padding:
        0;

    color:
        var(--accent);

    background:
        transparent;

    border:
        0;

    font-size:
        9px;

    cursor:
        pointer;
}



.rv5-empty-feed{

    padding:
        28px;

    text-align:
        center;
}


.rv5-empty-feed strong{

    display:
        block;

    color:
        var(--text);

    font-size:
        14px;
}


.rv5-empty-feed p{

    margin:
        7px 0 15px;

    color:
        var(--muted);

    font-size:
        10px;
}



.rv5-avatar-image{

    object-fit:
        cover !important;

    padding:
        0 !important;
}



.rv5-post-author,
.rv5-person-name{

    color:
        var(--text) !important;

    font-weight:
        700;

    text-decoration:
        none !important;
}


.rv5-post-author:hover,
.rv5-person-name:hover{

    color:
        var(--accent) !important;
}



.rv5-post-image{

    margin-top:
        14px;

    overflow:
        hidden;

    border-radius:
        10px;

    border:
        1px solid rgba(125,187,193,.13);
}


.rv5-post-image img{

    display:
        block;

    width:
        100%;

    max-height:
        560px;

    object-fit:
        contain;

    background:
        rgba(4,17,20,.38);
}



.rv5-post-tags{

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-top:
        13px;
}


.rv5-post-tags span{

    padding:
        5px 8px;

    color:
        var(--accent);

    background:
        rgba(91,176,184,.08);

    border:
        1px solid rgba(107,200,207,.14);

    border-radius:
        999px;

    font-size:
        8.5px;

    font-weight:
        700;
}



.rv5-follow-form{

    margin:
        0;

    padding:
        0;
}


.rv5-follow-form button,
.rv5-small-follow{

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        31px;

    padding:
        0 10px;

    color:
        var(--accent) !important;

    background:
        rgba(81,160,168,.07);

    border:
        1px solid rgba(105,194,201,.25);

    border-radius:
        7px;

    font-size:
        8.5px;

    font-weight:
        700;

    text-decoration:
        none !important;

    cursor:
        pointer;
}


.rv5-side-empty{

    padding:
        8px 0;

    color:
        var(--muted);

    font-size:
        9px;
}



@media(max-width:800px){

    .rv5-ayah-controls{

        grid-template-columns:
            1fr
            1fr;
    }

}


@media(max-width:560px){

    .rv5-ayah-controls{

        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   COMMUNITY QURAN CARD — TYPOGRAPHY V2
   ========================================================= */

.rv5-post
.rv5-ayah
.rv5-arabic{

    width:
        100% !important;

    margin:
        18px 0 14px !important;

    padding:
        0 !important;

    color:
        #f4f8f8 !important;

    font-size:
        clamp(25px, 2vw, 33px) !important;

    font-weight:
        400 !important;

    line-height:
        1.95 !important;

    letter-spacing:
        0 !important;

    text-align:
        right !important;

    direction:
        rtl !important;

    white-space:
        normal !important;

    word-break:
        normal !important;

    overflow-wrap:
        normal !important;
}


/* Translation */

.rv5-post
.rv5-ayah
.rv5-ayah-translation{

    margin:
        10px 0 0 !important;

    color:
        #a8c9cf !important;

    font-size:
        14px !important;

    font-weight:
        400 !important;

    line-height:
        1.7 !important;

    letter-spacing:
        0 !important;
}


/* Ayah card breathing space */

.rv5-post
.rv5-ayah{

    padding:
        19px 20px 18px !important;

    box-sizing:
        border-box !important;
}


@media(max-width:767px){

    .rv5-post
    .rv5-ayah
    .rv5-arabic{

        font-size:
            25px !important;

        line-height:
            1.9 !important;
    }


    .rv5-post
    .rv5-ayah
    .rv5-ayah-translation{

        font-size:
            13px !important;
    }

}