.rw-page {
    direction: rtl;
    padding: 2rem 0 4rem;
}

.rw-hero {
    max-width: 1120px;
    margin: 0 auto 1.2rem;
    text-align: center;
}

.rw-kicker {
    color: #987526;
    font-size: .76rem;
    font-weight: 800;
}

.rw-hero h1 {
    margin: .25rem 0 .6rem;
    font-size: clamp(1.8rem,4vw,2.5rem);
}

.rw-hero p {
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.9;
    opacity: .7;
}

.rw-layout {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 285px 1fr;
    gap: 1rem;
}

.rw-sidebar,
.rw-card,
.rw-stats article,
.rw-empty {
    background: var(--bs-body-bg,#fff);
    border: 1px solid rgba(127,127,127,.16);
    box-shadow: 0 10px 28px rgba(0,0,0,.04);
}

.rw-sidebar {
    border-radius: 1.1rem;
    padding: .8rem;
    align-self: start;
    position: sticky;
    top: 1rem;
}

.rw-side-head,
.rw-card-head,
.rw-ayah-head,
.rw-reference-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.rw-side-head span,
.rw-card-head span,
.rw-reference-head span {
    display: block;
    font-size: .72rem;
    opacity: .62;
}

.rw-side-head h2,
.rw-card-head h2 {
    margin: .1rem 0 0;
    font-size: 1.1rem;
}

.rw-workspace-link {
    display: block;
    margin-top: .55rem;
    padding: .7rem;
    border-radius: .75rem;
    border: 1px solid rgba(127,127,127,.11);
    color: inherit;
    text-decoration: none;
}

.rw-workspace-link strong,
.rw-workspace-link span {
    display: block;
}

.rw-workspace-link span {
    margin-top: .18rem;
    font-size: .67rem;
    opacity: .52;
}

.rw-workspace-link.is-active {
    border-color: rgba(152,117,38,.35);
    background: rgba(152,117,38,.065);
}

.rw-side-empty,
.rw-empty-list {
    padding: .9rem;
    text-align: center;
    opacity: .58;
    font-size: .78rem;
}

.rw-empty {
    border-radius: 1.1rem;
    padding: 3rem 1rem;
    text-align: center;
}

.rw-card {
    padding: 1rem;
    border-radius: 1.1rem;
    margin-bottom: 1rem;
}

.rw-actions {
    display: flex;
    gap: .45rem;
}

.rw-btn {
    border: 0;
    border-radius: .7rem;
    background: #173f35;
    color: #fff;
    font-weight: 800;
    padding: .55rem .85rem;
}

.rw-btn-small {
    padding: .38rem .55rem;
    font-size: .73rem;
}

.rw-btn-danger {
    background: rgba(180,35,24,.08);
    color: #b42318;
    border: 1px solid rgba(180,35,24,.18);
}

.rw-form-grid,
.rw-reference-form {
    margin-top: .9rem;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: .7rem;
}

.rw-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.rw-field-wide {
    grid-column: 1 / -1;
}

.rw-field span,
.rw-inline-form label span {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    opacity: .67;
    margin-bottom: .3rem;
}

.rw-input {
    width: 100%;
    min-height: 43px;
    border: 1px solid rgba(127,127,127,.22);
    border-radius: .7rem;
    background: var(--bs-body-bg,#fff);
    color: inherit;
    padding: .55rem .7rem;
}

textarea.rw-input {
    resize: vertical;
}

.rw-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .7rem;
    margin-bottom: 1rem;
}

.rw-stats article {
    border-radius: .9rem;
    padding: .8rem;
}

.rw-stats span,
.rw-stats strong {
    display: block;
}

.rw-stats span {
    font-size: .72rem;
    opacity: .6;
}

.rw-stats strong {
    margin-top: .2rem;
    color: #987526;
    font-size: 1.4rem;
}

.rw-inline-form {
    margin-top: .8rem;
    display: flex;
    gap: .55rem;
    align-items: end;
    flex-wrap: wrap;
}

.rw-inline-form label {
    min-width: 120px;
}

.rw-inline-form .rw-grow {
    flex: 1;
    min-width: 260px;
}

.rw-ayah-list,
.rw-reference-list {
    display: grid;
    gap: .65rem;
    margin-top: .9rem;
}

.rw-ayah-card,
.rw-reference-item {
    border: 1px solid rgba(127,127,127,.13);
    border-radius: .9rem;
    padding: .8rem;
}

.rw-ayah-head strong,
.rw-ayah-head span {
    display: block;
}

.rw-ayah-head span {
    font-size: .7rem;
    opacity: .58;
}

.rw-ayah-head a,
.rw-reference-head a,
.rw-chip a {
    color: #b42318;
    text-decoration: none;
    font-size: .72rem;
}

.rw-quran-text {
    font-family: "HafsSmart_08","HafsSmart08","KFGQPC Hafs Smart",serif !important;
    font-size: 1.7rem;
    line-height: 2.15;
    font-synthesis: none;
    margin: .7rem 0;
}

.rw-research-note {
    padding: .65rem;
    border-radius: .7rem;
    background: rgba(152,117,38,.045);
}

.rw-research-note span {
    display: block;
    font-size: .68rem;
    color: #987526;
    font-weight: 800;
}

.rw-research-note p {
    margin: .25rem 0 0;
    line-height: 1.7;
    font-size: .8rem;
}

.rw-source {
    margin-top: .5rem;
    font-size: .67rem;
    opacity: .55;
}

.rw-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .8rem;
}

.rw-chip {
    display: flex;
    align-items: center;
    gap: .65rem;
    border-radius: .8rem;
    padding: .55rem .65rem;
    border: 1px solid rgba(23,63,53,.12);
    background: rgba(23,63,53,.045);
}

.rw-chip strong,
.rw-chip span {
    display: block;
}

.rw-chip span {
    margin-top: .15rem;
    font-size: .67rem;
    opacity: .6;
}

.rw-reference-item p {
    margin: .55rem 0;
    line-height: 1.7;
    font-size: .82rem;
}

.rw-reference-url {
    direction: ltr;
    text-align: left;
    font-size: .7rem;
    opacity: .65;
    word-break: break-all;
}

.rw-reference-item small {
    display: block;
    margin-top: .5rem;
    opacity: .58;
}

.rw-message {
    max-width: 1180px;
    margin: 0 auto 1rem;
    padding: .75rem 1rem;
    border-radius: .75rem;
}

.rw-message-error {
    color: #b42318;
    background: rgba(180,35,24,.08);
    border: 1px solid rgba(180,35,24,.18);
}

.rw-message-success {
    color: #166534;
    background: rgba(22,101,52,.07);
    border: 1px solid rgba(22,101,52,.18);
}

@media (max-width: 900px) {
    .rw-layout {
        grid-template-columns: 1fr;
    }

    .rw-sidebar {
        position: static;
    }
}

@media (max-width: 650px) {
    .rw-form-grid,
    .rw-reference-form,
    .rw-stats {
        grid-template-columns: 1fr;
    }

    .rw-field-wide {
        grid-column: auto;
    }

    .rw-card-head {
        align-items: stretch;
        flex-direction: column;
    }

    .rw-actions {
        width: 100%;
    }

    .rw-actions .rw-btn {
        flex: 1;
    }
}