:root{--container:min(1180px,92vw);--ink:#0c1f3a;--muted:#6c7a92;--line:#e6eef7;--card:#fff;--radius:22px;--shadow:0 28px 70px rgba(16,43,76,.14);--shadow-sm:0 14px 34px rgba(16,43,76,.10)}
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;font-family:"Tajawal",system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Kufi Arabic",sans-serif;color:var(--ink);background:radial-gradient(1200px 760px at 12% -10%, #e7f0ff 0%, transparent 60%),radial-gradient(900px 520px at 100% 0%, #eef6ff 0%, transparent 60%),linear-gradient(180deg,#f9fbff 0%,#ffffff 85%)}
    .container{width:var(--container);margin-inline:auto}
    .topbar{position:sticky;top:0;z-index:20;backdrop-filter:saturate(160%) blur(10px);background:linear-gradient(180deg,#ffffffd8,#ffffffb0);border-bottom:1px solid var(--line)}
    .topbar .inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
    .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
    .brand img{width:38px;height:38px;border-radius:10px}
    .brand b{font-weight:800;letter-spacing:.2px}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);color:inherit;text-decoration:none;cursor:pointer}
    .lang .btn.active{background:linear-gradient(180deg,#f2f7ff,#e8f1ff);border-color:#cfe0ff}
    .lang{display:flex;gap:8px}
    .hero{padding:28px 0 10px;text-align:center}
    .hero h1{margin:0 0 6px;font-size:clamp(26px,4vw,40px)}
    .hero p{margin:6px 0 0;color:var(--muted)}
    .tabs{margin:14px auto 0;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
    .tab{border:1px solid var(--line);background:#fff;padding:10px 14px;border-radius:999px;font-weight:800;cursor:pointer;box-shadow:var(--shadow-sm)}
    .tab.active{background:linear-gradient(180deg,#f2f7ff,#e8f1ff);border-color:#cfe0ff}
    .track{margin-top:26px}
    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
    .track.hide{display:none !important}
    .card{grid-column:span 12;position:relative;overflow:hidden;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
    @media (min-width:980px){.card{grid-column:span 6}}
    .card:hover{transform:translateY(-4px);box-shadow:0 32px 76px rgba(16,43,76,.18);border-color:#cfe0ff}
    .card a.full{display:block;color:inherit;text-decoration:none}
    .thumb{position:relative;height:240px}
    .thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.94}
    .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(7,18,38,0), rgba(7,18,38,.55) 55%, rgba(7,18,38,.78))}
    .meta{position:absolute;bottom:12px;inset-inline:12px auto;display:inline-flex;gap:8px;flex-wrap:wrap;z-index:1}
    .chip{background:#ffffffd8;color:#214a86;border:1px solid #dfe8fb;font-weight:800;font-size:12px;padding:6px 12px;border-radius:999px}
    .body{padding:16px}
    .title{margin:0 0 6px;font-size:clamp(18px,2.2vw,22px);font-weight:800}
    .subtitle{margin:0;color:#4e6487}