:root{--ink:#1c2b33;--mut:#5b6d76;--sea:#0e6b67;--sea-tint:#eaf4f3;--line:#e3e9eb;--amber:#a86a1c;--amber-bg:#fdf6e9}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'IBM Plex Sans Arabic',-apple-system,'Segoe UI',Tahoma,sans-serif;color:var(--ink);background:#fff;line-height:1.85;font-size:16.5px}
a{color:var(--sea);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:780px;margin:0 auto;padding:0 20px}
header.site{border-bottom:1px solid var(--line);background:#fff}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-weight:700;font-size:20px;color:var(--ink)}
.logo span{color:var(--sea)}
.hdr-cta{background:var(--sea);color:#fff;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600}
.hdr-cta:hover{text-decoration:none;opacity:.92}
.crumbs{font-size:13.5px;color:var(--mut);margin:22px 0 10px}
.crumbs a{color:var(--mut)}
.q-card{position:relative;background:var(--sea-tint);border-radius:14px;padding:26px 26px 20px;margin-bottom:26px;overflow:hidden}
.q-card::after{content:"؟";position:absolute;left:-10px;top:-38px;font-size:150px;font-weight:700;color:rgba(14,107,103,.07);line-height:1}
h1{font-size:24px;line-height:1.5;margin-bottom:8px}
.meta{font-size:13.5px;color:var(--mut)}
.meta a{color:var(--sea)}
.q-body{margin-top:10px;color:var(--ink)}
h2.sec{font-size:17px;margin:26px 0 14px;color:var(--ink)}
.ans{border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-bottom:16px}
.ans.best{border-color:#ecd9b4;background:var(--amber-bg)}
.badge{display:inline-block;font-size:12.5px;font-weight:700;color:var(--amber);background:#fff;border:1px solid #ecd9b4;border-radius:20px;padding:2px 12px;margin-bottom:10px}
.ans .meta{margin-top:10px}
.rel{list-style:none}
.rel li{border-bottom:1px solid var(--line);padding:11px 0}
.rel li:last-child{border-bottom:0}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:18px 0}
.cat-grid a{border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;justify-content:space-between;color:var(--ink);font-size:15px}
.cat-grid a:hover{border-color:var(--sea);text-decoration:none}
.cat-grid .n{color:var(--mut);font-size:13px}
.hero{padding:38px 0 8px}
.hero h1{font-size:28px}
.hero p{color:var(--mut);margin-top:6px}
footer.site{border-top:1px solid var(--line);margin-top:48px;padding:26px 0 34px;font-size:13.5px;color:var(--mut)}
footer.site a{color:var(--sea);margin-inline-start:14px}
@media(max-width:520px){h1{font-size:20px}.q-card{padding:20px 18px 16px}}