:root{
    --bg:#f7f4ea;
    --panel:#ffffff;
    --text:#17372f;
    --muted:#78867f;
    --line:rgba(24,79,62,.12);
    --shadow:0 18px 45px rgba(52,74,63,.11);
}
*{box-sizing:border-box}
body{
    margin:0;
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    background:
        radial-gradient(circle at 85% 10%,rgba(57,180,137,.13),transparent 26%),
        radial-gradient(circle at 10% 90%,rgba(232,181,67,.13),transparent 25%),
        var(--bg);
    color:var(--text);
    font-family:Tahoma,Arial,sans-serif;
}
.router{
    width:min(900px,100%);
}
.brand{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:24px;
}
.logo{
    width:56px;
    height:56px;
    border-radius:17px;
    display:grid;
    place-items:center;
    background:#146f52;
    color:white;
    font-weight:900;
    font-size:15px;
    box-shadow:0 12px 28px rgba(20,111,82,.22);
}
.brand h1{
    margin:0;
    font-size:25px;
}
.brand p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:12px;
}
.grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.card{
    min-height:130px;
    display:grid;
    grid-template-columns:54px 1fr auto;
    align-items:center;
    gap:15px;
    padding:20px;
    border-radius:22px;
    background:var(--panel);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    color:var(--text);
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{
    transform:translateY(-5px);
    box-shadow:0 26px 55px rgba(52,74,63,.16);
}
.icon{
    width:54px;
    height:54px;
    border-radius:17px;
    display:grid;
    place-items:center;
    color:white;
    font-size:25px;
}
.card strong{
    display:block;
    font-size:20px;
}
.card small{
    display:block;
    margin-top:6px;
    color:var(--muted);
    font-size:10px;
}
.arrow{
    color:var(--muted);
    font-size:22px;
    transition:transform .2s ease;
}
.card:hover .arrow{
    transform:translateX(-5px);
}
.quran .icon{background:#177b5b}
.e3jaz .icon{background:#d5a237}
.fursan .icon{background:#2d91be}
.maarek .icon{background:#ce6b38}

@media(max-width:650px){
    body{padding:16px}
    .grid{grid-template-columns:1fr}
    .card{min-height:112px}
}