.compare-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,620px);
    gap:18px;
    align-items:start;
    padding:20px 22px;
    margin-bottom:16px;
    background:linear-gradient(135deg,rgba(255,250,240,.96),rgba(255,240,205,.9));
}

.compare-kicker{
    display:inline-flex;
    background:#fff;
    border:1px solid rgba(185,138,47,.32);
    color:#8e5d22;
    border-radius:999px;
    padding:7px 12px;
    font-weight:900;
    margin-bottom:8px;
}

.compare-hero h2{
    margin:0;
    color:#5b3a18;
    font-size:34px;
    font-weight:900;
}

.compare-hero p{
    margin:8px 0 0;
    color:#746956;
    font-size:16px;
    line-height:1.8;
}

.compare-form{
    display:grid;
    gap:12px;
}

.compare-words-box{
    display:grid;
    gap:7px;
    background:#fff;
    border:2px solid rgba(185,138,47,.24);
    border-radius:20px;
    padding:12px;
    box-shadow:0 12px 26px rgba(80,52,18,.08);
}

.compare-words-box span{
    color:#5b3a18;
    font-weight:900;
}

.compare-words-box textarea{
    width:100%;
    min-height:130px;
    resize:vertical;
    border:0;
    outline:0;
    background:#fffaf0;
    border-radius:14px;
    padding:12px;
    color:#5b3a18;
    font-size:20px;
    font-weight:900;
    line-height:1.7;
    font-family:Tajawal,Arial,sans-serif;
}

.compare-words-box small{
    color:#746956;
    font-weight:800;
}

.compare-filters{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:9px;
    align-items:end;
}

.compare-filters label{
    display:grid;
    gap:5px;
    background:rgba(255,255,255,.75);
    border:1px solid rgba(91,58,24,.18);
    border-radius:16px;
    padding:9px 10px;
}

.compare-filters span{
    font-size:12px;
    color:#746956;
    font-weight:900;
}

.compare-filters select{
    border:0;
    background:transparent;
    outline:0;
    font-size:15px;
    color:#5b3a18;
    font-weight:900;
    font-family:Tajawal,Arial,sans-serif;
}

.compare-filters button{
    border:0;
    border-radius:16px;
    padding:14px 18px;
    background:linear-gradient(135deg,#8e5d22,#c99a3e);
    color:#fff;
    font-weight:900;
    font-family:Tajawal,Arial,sans-serif;
    cursor:pointer;
}

.compare-shell{
    display:grid;
    grid-template-columns:430px minmax(0,1fr);
    gap:16px;
    align-items:start;
    margin-bottom:16px;
}

.compare-mushaf-panel{
    position:sticky;
    top:124px;
    min-width:0;
}

.compare-chart-panel,
.compare-details-panel{
    min-width:0;
}

.compare-mushaf-frame{
    position:relative;
    min-height:650px;
    background:#efe0bc;
    border-top:1px solid rgba(91,58,24,.14);
    border-bottom:1px solid rgba(91,58,24,.14);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:12px;
}

.compare-placeholder{
    text-align:center;
    color:#746956;
    font-weight:900;
    padding:30px;
}

.compare-placeholder span{
    display:block;
    color:#8e5d22;
    font-size:32px;
    margin-bottom:8px;
}

.compare-image-box{
    position:relative;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.compare-mushaf-img{
    display:block;
    width:100%;
    max-height:780px;
    object-fit:contain;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(80,52,18,.18);
}

.compare-page-label{
    position:absolute;
    top:18px;
    left:18px;
    background:rgba(0,0,0,.72);
    color:#fff;
    border-radius:999px;
    padding:7px 12px;
    font-weight:900;
    font-size:13px;
}

.compare-page-marker{
    position:absolute;
    transform:translate(-50%,-50%);
    width:26px;
    height:26px;
    border-radius:50%;
    background:rgba(209,0,0,.20);
    border:2px solid #d10000;
    box-shadow:0 0 0 6px rgba(209,0,0,.12), 0 0 18px rgba(209,0,0,.35);
    z-index:5;
}

.compare-chart{
    padding:14px;
}

.compare-bars{
    display:grid;
    gap:10px;
}

.compare-bar-row{
    border:1px solid rgba(91,58,24,.14);
    background:#fffdf7;
    border-radius:18px;
    padding:12px;
    display:grid;
    grid-template-columns:150px minmax(0,1fr) 240px;
    gap:12px;
    align-items:center;
    cursor:pointer;
    font-family:Tajawal,Arial,sans-serif;
    text-align:initial;
}

.compare-bar-row:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(80,52,18,.08);
}

.compare-bar-row.active{
    border-color:rgba(209,0,0,.55);
    background:linear-gradient(135deg,#fffdf7,#fff0ee);
    box-shadow:0 14px 30px rgba(209,0,0,.10);
}

.compare-bar-info{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.compare-bar-info strong{
    color:#5b3a18;
    font-size:18px;
    font-weight:900;
}

.compare-bar-info span{
    min-width:46px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eee;
    border-radius:999px;
    color:#333;
    font-weight:900;
}

.compare-bar-track{
    height:22px;
    background:#e5e5e5;
    border-radius:999px;
    overflow:hidden;
    direction:ltr;
}

.compare-bar-track i{
    display:block;
    height:100%;
    background:linear-gradient(90deg,#8e5d22,#c99a3e);
    border-radius:999px;
}

.compare-bar-meta{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.compare-bar-meta span,
.compare-stats span,
.compare-word-row span{
    background:#fff8e8;
    border:1px solid rgba(91,58,24,.12);
    border-radius:999px;
    padding:5px 9px;
    color:#746956;
    font-size:13px;
    font-weight:900;
}

.compare-details{
    padding:14px;
}

.compare-hit-card{
    background:#fffdf7;
    border:1px solid rgba(91,58,24,.16);
    border-radius:18px;
    padding:14px;
}

.compare-hit-head{
    display:flex;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:10px;
}

.compare-hit-head strong{
    color:#5b3a18;
    font-size:22px;
    font-weight:900;
}

.compare-hit-head span{
    color:#fff;
    background:#d10000;
    border-radius:999px;
    padding:6px 12px;
    font-weight:900;
}

.compare-stats,
.compare-word-row{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:10px;
}

.compare-word-row b{
    color:#5b3a18;
}

.compare-ayah-title{
    color:#5b3a18;
    font-weight:900;
    margin:8px 0;
}

.compare-ayah-text{
    font-family:Amiri,serif;
    font-size:25px;
    line-height:2;
    color:#1f1a12;
}

.cmp-mark{
    color:#d10000;
    background:rgba(255,0,0,.10);
    border-bottom:2px solid #d10000;
    padding:0 3px;
    border-radius:4px;
    font-weight:900;
}

.compare-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:12px;
}

.compare-actions a{
    border:1px solid rgba(91,58,24,.18);
    background:#fff8e8;
    color:#5b3a18;
    border-radius:12px;
    padding:8px 11px;
    font-size:13px;
    font-weight:900;
}

.compare-empty,
.compare-loading{
    padding:38px 20px;
    text-align:center;
    color:#746956;
    font-weight:900;
}

.compare-empty h3{
    color:#5b3a18;
    margin:0 0 7px;
}

.compare-empty p{
    margin:0;
    line-height:1.7;
}

.compare-loading.error{
    color:#9b2b1f;
}

@media(max-width:1200px){
    .compare-hero,
    .compare-shell{
        grid-template-columns:1fr;
    }

    .compare-mushaf-panel{
        position:relative;
        top:auto;
    }

    .compare-mushaf-frame{
        min-height:auto;
    }

    .compare-mushaf-img{
        max-height:none;
    }

    .compare-bar-row{
        grid-template-columns:140px minmax(0,1fr);
    }

    .compare-bar-meta{
        grid-column:1/-1;
        justify-content:flex-start;
    }
}

@media(max-width:760px){
    .compare-hero{
        padding:16px 14px;
    }

    .compare-hero h2{
        font-size:27px;
    }

    .compare-hero p{
        font-size:14px;
        line-height:1.7;
    }

    .compare-words-box textarea{
        font-size:18px;
        min-height:120px;
    }

    .compare-filters{
        grid-template-columns:1fr;
    }

    .compare-filters button{
        width:100%;
    }

    .compare-mushaf-frame{
        padding:8px;
    }

    .compare-page-label{
        top:10px;
        left:10px;
        font-size:11px;
        padding:5px 9px;
    }

    .compare-bar-row{
        grid-template-columns:1fr;
        gap:8px;
    }

    .compare-bar-info{
        align-items:center;
    }

    .compare-bar-meta{
        justify-content:flex-start;
    }

    .compare-ayah-text{
        font-size:21px;
        line-height:2;
    }

    .compare-actions a{
        width:100%;
        text-align:center;
    }
}

@media(max-width:420px){
    .compare-hero h2{
        font-size:24px;
    }

    .compare-words-box textarea{
        font-size:17px;
    }

    .compare-hit-head{
        display:grid;
    }

    .compare-hit-head span{
        justify-self:start;
    }

    .compare-page-marker{
        width:20px;
        height:20px;
    }
}