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

.qs-hero,
.qs-search-card,
.qs-summary,
.qs-panel {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

.qs-hero {
    text-align: center;
    padding: 2rem 1rem 1.4rem;
}

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

.qs-hero h1 {
    margin: .25rem 0 .6rem;
    font-size: clamp(1.7rem, 4vw, 2.55rem);
}

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

.qs-search-card,
.qs-summary,
.qs-panel {
    background: var(--bs-body-bg,#fff);
    border: 1px solid rgba(127,127,127,.16);
    border-radius: 1.15rem;
    box-shadow: 0 12px 32px rgba(0,0,0,.04);
}

.qs-search-card {
    padding: 1.1rem;
    margin-bottom: 1rem;
}

.qs-mode-switch {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}

.qs-mode-option {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    padding: .5rem .7rem;
    border-radius: .75rem;
    background: rgba(23,63,53,.055);
    font-weight: 700;
    font-size: .8rem;
}

.qs-form-grid {
    display: grid;
    grid-template-columns: 1.3fr 1.3fr 1fr 1fr;
    gap: .7rem;
}

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

.qs-field > span {
    font-size: .73rem;
    font-weight: 700;
    opacity: .7;
}

.qs-field small {
    font-size: .65rem;
    line-height: 1.5;
    opacity: .56;
}

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

.qs-analyze-button {
    border: 0;
    border-radius: .8rem;
    background: #173f35;
    color: #fff;
    font-weight: 800;
    padding: .7rem 1.2rem;
    margin-top: .85rem;
}

.qs-message {
    max-width: 1120px;
    margin: 0 auto 1rem;
    padding: .8rem 1rem;
    border-radius: .8rem;
}

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

.qs-summary {
    padding: 1.1rem;
    margin-bottom: 1rem;
}

.qs-result-title span,
.qs-panel-head span {
    display: block;
    font-size: .73rem;
    opacity: .62;
}

.qs-result-title h2,
.qs-panel-head h3 {
    margin: .15rem 0 0;
}

.qs-metrics {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .65rem;
    margin-top: .9rem;
}

.qs-metric-card {
    padding: .9rem;
    border-radius: .9rem;
    background: rgba(23,63,53,.04);
    border: 1px solid rgba(23,63,53,.09);
}

.qs-metric-card span,
.qs-metric-card strong,
.qs-metric-card small {
    display: block;
}

.qs-metric-card span {
    font-size: .72rem;
    opacity: .65;
}

.qs-metric-card strong {
    font-size: 1.45rem;
    color: #987526;
    margin: .2rem 0;
}

.qs-metric-card small {
    line-height: 1.5;
    opacity: .55;
}

.qs-panel {
    padding: 1rem;
    margin-bottom: 1rem;
}

.qs-panel-head,
.qs-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
}

.qs-revelation-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .65rem;
}

.qs-revelation-card {
    padding: .8rem;
    border: 1px solid rgba(127,127,127,.12);
    border-radius: .85rem;
}

.qs-revelation-card span,
.qs-revelation-card strong,
.qs-revelation-card small {
    display: block;
}

.qs-revelation-card strong {
    margin: .2rem 0 .4rem;
}

.qs-progress,
.qs-bar-track {
    background: rgba(127,127,127,.09);
    border-radius: 999px;
    overflow: hidden;
}

.qs-progress {
    height: 7px;
    margin: .45rem 0;
}

.qs-progress i,
.qs-bar-track i {
    display: block;
    height: 100%;
    background: #987526;
    border-radius: inherit;
}

.qs-bars {
    display: grid;
    gap: .5rem;
}

.qs-bar-row {
    display: grid;
    grid-template-columns: minmax(110px,170px) 1fr 45px;
    gap: .65rem;
    align-items: center;
}

.qs-bar-label {
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qs-bar-track {
    height: 10px;
}

.qs-bar-row > strong {
    font-size: .78rem;
    text-align: left;
    color: #987526;
}

.qs-methodology dl {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: .6rem;
    margin: 0;
}

.qs-methodology dl > div {
    padding: .7rem;
    border: 1px solid rgba(127,127,127,.11);
    border-radius: .75rem;
}

.qs-methodology dt {
    font-size: .7rem;
    opacity: .58;
}

.qs-methodology dd {
    margin: .25rem 0 0;
    font-size: .8rem;
    line-height: 1.65;
}

.qs-ayah-list {
    display: grid;
    gap: .65rem;
}

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

.qs-ayah-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
}

.qs-ayah-meta strong,
.qs-ayah-meta span {
    display: block;
}

.qs-ayah-meta span {
    font-size: .72rem;
    opacity: .6;
}

.qs-occurrences {
    padding: .3rem .55rem;
    border-radius: 999px;
    background: rgba(152,117,38,.08);
    color: #987526;
    font-weight: 800;
    opacity: 1 !important;
}

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

.qs-ayah-card footer a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(127,127,127,.2);
    border-radius: .6rem;
    padding: .36rem .6rem;
    font-size: .74rem;
    font-weight: 700;
}

.qs-comparison-table-wrap {
    overflow-x: auto;
    margin-top: .9rem;
}

.qs-comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.qs-comparison-table th,
.qs-comparison-table td {
    padding: .65rem;
    border-bottom: 1px solid rgba(127,127,127,.12);
    text-align: center;
}

.qs-comparison-table th:first-child {
    text-align: right;
}

.qs-shared-row td {
    color: #987526;
    font-weight: 800;
}

.qs-comparison-columns {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.qs-comparison-columns .qs-panel {
    margin: 0 0 1rem;
}

.qs-comparison-columns .qs-metrics {
    grid-template-columns: repeat(2,1fr);
}

.qs-empty {
    padding: 1rem;
    text-align: center;
    opacity: .6;
}

@media (max-width: 900px) {
    .qs-form-grid,
    .qs-metrics {
        grid-template-columns: repeat(2,1fr);
    }

    .qs-revelation-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .qs-form-grid,
    .qs-metrics,
    .qs-methodology dl,
    .qs-comparison-columns {
        grid-template-columns: 1fr;
    }

    .qs-bar-row {
        grid-template-columns: 95px 1fr 38px;
    }

    .qs-panel-head,
    .qs-list-head,
    .qs-ayah-meta {
        align-items: stretch;
        flex-direction: column;
    }
}