:root{
  --bg:#f4f1ec; --card:#fff; --ink:#1f2328; --muted:#6b6f76; --line:#e7e2da;
  --old:#8a6d3b; --oldbg:#f7efe1; --new:#0f6e5a; --newbg:#e3f3ee;
  --brand:#c2571a; --no:#b9b3aa; --bad:#b3402a; --badbg:#fbeae6;
  --wa:#1f9d55; --gold:#9a6b00; --goldbg:#fff3cf;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Cairo',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-text-size-adjust:100%}
a{color:inherit}
.wrap{max-width:560px;margin:0 auto;padding:0 14px 40px}
header{background:linear-gradient(135deg,#c2571a,#8f3a0e);color:#fff;padding:22px 18px 20px;border-radius:0 0 22px 22px;margin:0 -14px 14px}
header small{opacity:.85;font-size:13px;display:block}
header h1{font-size:21px;font-weight:800;margin:4px 0 10px;line-height:1.35}
.legend{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.18)}
.jump{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.jump a{display:block;text-align:center;text-decoration:none;background:#fff;color:#8f3a0e;font-weight:800;font-size:14px;padding:9px 6px;border-radius:12px}
.tabs{position:sticky;top:0;z-index:5;background:var(--bg);padding:10px 0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-weight:700;font-size:14px;padding:8px 14px;border-radius:99px;cursor:pointer}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.proj{display:none}
.proj.on{display:block}
.card{background:var(--card);border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.ptitle{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.ptitle h2{font-size:20px;font-weight:800;line-height:1.3}
.ptitle span{font-size:13px;color:var(--muted)}
.tag{font-size:12px;font-weight:700;background:#f1ece4;color:var(--muted);padding:3px 10px;border-radius:99px;white-space:nowrap}
h3{font-size:15px;font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:6px}
h3 i{width:6px;height:18px;border-radius:3px;background:var(--brand);display:inline-block}
h4{font-size:14px;font-weight:800;margin:14px 0 8px;color:#3a3d42}
.big{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.box{border-radius:14px;padding:12px}
.box.o{background:var(--oldbg)}
.box.n{background:var(--newbg)}
.box .lbl{font-size:12px;font-weight:700}
.box.o .lbl{color:var(--old)} .box.n .lbl{color:var(--new)}
.box .val{font-size:22px;font-weight:800;line-height:1.3;margin-top:2px}
.box .sub{font-size:12px;color:var(--muted)}
.delta{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--badbg);color:var(--bad);font-weight:800;font-size:14px;border-radius:12px;padding:8px 12px;margin-bottom:12px}
.delta.small{background:#f1ece4;color:#5b5f66}
.delta span{font-size:12px;font-weight:700;opacity:.85}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 6px;text-align:right;vertical-align:top;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
thead th{font-size:12px;font-weight:800;padding-top:0}
thead th.o{color:var(--old)} thead th.n{color:var(--new)}
td:first-child{font-weight:700;width:34%;color:#3a3d42}
td.o{background:#fcf8f1} td.n{background:#f3faf7}
.no{color:var(--no);font-weight:600}
.yes{font-weight:800}
.disc{display:inline-block;font-size:12px;font-weight:800;padding:1px 8px;border-radius:99px;margin-top:2px}
.disc.n{background:var(--new);color:#fff}
.disc.o{background:var(--old);color:#fff}
.hl{background:#fff6d6 !important}
.note{font-size:13px;color:var(--muted);background:#fbfaf7;border:1px dashed var(--line);border-radius:12px;padding:10px 12px;margin-top:12px}
.keys{list-style:none;display:grid;gap:8px}
.keys li{display:flex;gap:10px;font-size:14px;align-items:flex-start}
.keys b{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;color:#fff}
.up{background:var(--new)} .down{background:var(--bad)} .eq{background:#7d8590}
.pc{display:grid;gap:10px}
.pcbox{border-radius:14px;padding:12px}
.pcbox.pro{background:var(--newbg)} .pcbox.con{background:var(--badbg)}
.pcbox .t{font-weight:800;font-size:14px;margin-bottom:6px}
.pcbox.pro .t{color:var(--new)} .pcbox.con .t{color:var(--bad)}
.pcbox ul{list-style:none;display:grid;gap:6px}
.pcbox li{font-size:14px;padding-right:18px;position:relative}
.pcbox.pro li::before{content:"✓";position:absolute;right:0;color:var(--new);font-weight:800}
.pcbox.con li::before{content:"✗";position:absolute;right:0;color:var(--bad);font-weight:800}
.seg{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.seg button{flex:1 0 auto;border:1.5px solid var(--line);background:#fff;font:inherit;font-weight:700;font-size:13px;padding:6px 10px;border-radius:10px;cursor:pointer;color:var(--ink)}
.seg button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pcpane{display:none} .pcpane.on{display:block}

/* ===== كل مدن الطرح ===== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.stats div{background:#f7f3ed;border-radius:12px;padding:8px;text-align:center}
.stats b{display:block;font-size:20px;font-weight:800;color:var(--brand);line-height:1.3}
.stats span{font-size:12px;color:var(--muted);font-weight:700}
.keyline{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:10px}
.dot{flex:0 0 auto;width:12px;height:12px;border-radius:3px;background:#ffe9a8;border:1px solid #e9c560}
.tblwrap{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.allt{font-size:13px;table-layout:fixed}
.allt th,.allt td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.allt thead th{background:var(--ink);color:#fff;font-size:12px;padding:9px 6px;text-align:right}
.allt th:nth-child(1){width:40%} .allt th:nth-child(2){width:23%} .allt th:nth-child(3){width:20%} .allt th:nth-child(4){width:17%}
.allt td:first-child{width:auto;color:var(--ink);font-weight:400}
.allt td b{display:block;font-weight:800;font-size:14px;line-height:1.35}
.allt td small{display:block;font-size:11px;color:var(--muted);line-height:1.4}
.allt td:nth-child(2) b{color:var(--new)}
.allt td:nth-child(3),.allt td:nth-child(4),.allt td.mid{font-size:12px;font-weight:700;color:#3a3d42;white-space:nowrap}
.allt td.ar{direction:ltr;text-align:right}
.allt tr.cty td{background:#f1ece4;font-weight:800;font-size:13px;color:#5a3a1a;padding:6px 8px}
.allt tr.sh td{background:#fff6d6}
.allt tr.cont td{padding-top:4px}
.allt td.mid{background:#fff}
.allt em{display:inline-block;font-style:normal;font-size:10px;font-weight:800;background:#9a6b00;color:#fff;border-radius:99px;padding:0 7px;margin-top:2px}
.allt tbody tr:last-child td{border-bottom:none}

.explain{background:linear-gradient(135deg,#fff3cf,#ffe9a8);border-radius:18px;padding:14px 16px;margin-bottom:14px}
.explain h3{color:#6b4a00}
.explain h3 i{background:var(--gold)}
.explain p{font-size:14px;color:#4a3a10}
.explain .lst{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.explain .lst span{background:#fff;border-radius:99px;font-size:13px;font-weight:800;padding:3px 10px;color:#6b4a00}

/* ===== كراسة + تواصل + سوشيال ===== */
.pdf{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--card);border-radius:18px;padding:14px 16px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.pdf .ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.pdf b{display:block;font-size:15px;font-weight:800}
.pdf span{font-size:13px;color:var(--muted)}
.lead{font-size:14px;color:#3a3d42}
.cta{display:inline-block;margin-top:10px;background:var(--brand);color:#fff;font-weight:800;font-size:14px;padding:6px 14px;border-radius:99px}
.hint{font-size:12px;color:var(--muted);margin:6px 0 10px}
.wa{display:grid;gap:8px}
.wa a{display:flex;align-items:center;gap:10px;text-decoration:none;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.wa .n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#f1ece4;display:grid;place-items:center;font-weight:800;font-size:14px;color:var(--brand)}
.wa .t{flex:1}
.wa .t small{display:block;font-size:12px;color:var(--muted)}
.wa .t b{display:block;font-size:16px;font-weight:800;direction:ltr;text-align:right}
.wa .btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;background:#25d366;color:#fff;font-weight:800;font-size:13px;padding:6px 12px;border-radius:99px}
.wa .btn svg{width:16px;height:16px}
.soc{display:flex;gap:10px;flex-wrap:wrap}
.soc a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;text-decoration:none}
.soc a svg{width:22px;height:22px}
.soc .fb{background:#1877f2}
.soc .ig{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.soc .tt{background:#111}
.soc .yt{background:#ff0000}
.soc .tg{background:#229ed9}
.subh{font-size:12px;font-weight:700;color:var(--muted);margin-right:4px}
.official{display:block;margin-top:12px;text-decoration:none;border:1.5px solid var(--brand);border-radius:14px;padding:12px 14px;background:#fff8f3}
.official small{display:block;font-size:12px;color:var(--muted);direction:ltr;text-align:right}
.official b{display:block;font-size:15px;font-weight:800;margin:2px 0}
.official .ok{display:inline-block;font-size:11px;background:var(--new);color:#fff;border-radius:99px;padding:0 8px;margin-right:4px;vertical-align:middle}
.official .d{display:block;font-size:13px;color:#3a3d42}
.official .go{display:inline-block;margin-top:6px;font-weight:800;font-size:13px;color:var(--brand)}
footer{font-size:12px;color:var(--muted);text-align:center;margin-top:18px}

/* Darak WhatsApp: small round buttons, the number grows out of the circle */
.dwa{margin-top:16px}
.dwa-h{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:8px}
.dwa-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.dwa-btn{display:inline-flex;align-items:center;gap:0;height:46px;padding:4px;border-radius:99px;background:#25d366;color:#05371f;text-decoration:none;box-shadow:0 4px 12px rgba(37,211,102,.3);transition:gap .25s,padding .25s,transform .15s}
.dwa-c{width:38px;height:38px;border-radius:50%;background:#fff;color:#1fa855;display:grid;place-items:center;flex:0 0 auto}
.dwa-c svg{width:22px;height:22px}
.dwa-n{max-width:0;overflow:hidden;white-space:nowrap;font-weight:800;font-size:14px;letter-spacing:.3px;transition:max-width .3s ease}
.dwa-btn:hover,.dwa-btn:focus-visible{gap:8px;padding-inline-end:14px;transform:translateY(-2px)}
.dwa-btn:hover .dwa-n,.dwa-btn:focus-visible .dwa-n{max-width:140px}
/* phones have no hover, so the number is always shown there */
@media (hover:none){.dwa-btn{gap:8px;padding-inline-end:14px}.dwa-n{max-width:140px}}