:root{--ivory:#f7f3e8;--paper:#fffdf6;--green:#17392e;--green2:#2c5a49;--gold:#b8923a;--ink:#1d2a25;--mute:#6b7a72;--line:#cfc6a8;--rose:#7a2e3a}
*{box-sizing:border-box}html{direction:rtl}
body{margin:0;background:var(--ivory);color:var(--ink);font:17px/1.7 'Noto Naskh Arabic','Amiri','Traditional Arabic',Georgia,serif}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
button{font:inherit;cursor:pointer;border:1px solid var(--green);background:var(--green);color:#fff;border-radius:6px;padding:.3em 1em}
button.ghost{background:transparent;color:var(--green)}button.danger{background:var(--rose);border-color:var(--rose)}
input,textarea,select{font:inherit;width:100%;padding:.4em .6em;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
label{display:block;margin:.6em 0 .1em;color:var(--mute);font-size:.9em}
header.hero{background:var(--green);color:var(--paper);padding:4rem 1.5rem 3rem;border-bottom:4px solid var(--gold)}
.hero h1{font-size:clamp(2.2rem,6vw,4rem);margin:0 0 .3em;font-weight:700}.hero p{max-width:38em;margin:0 0 1.2em;opacity:.9}
.hero a{background:var(--gold);color:var(--green);padding:.5em 1.4em;border-radius:6px;text-decoration:none;font-weight:700}
.stats{display:flex;gap:2.5rem;margin:2rem 0 0;flex-wrap:wrap}.stats b{display:block;font-size:2rem;color:var(--gold)}
#app{display:grid;grid-template-columns:1fr 340px;height:calc(100vh - 56px)}
.bar{display:flex;gap:.5rem;padding:.5rem 1rem;background:var(--paper);border-bottom:1px solid var(--line);align-items:center;position:relative;height:56px}
#q{max-width:260px}#res{position:absolute;top:52px;inset-inline-start:1rem;background:var(--paper);border:1px solid var(--line);border-radius:6px;min-width:260px;z-index:5;box-shadow:0 8px 24px #0002}
#res div{padding:.4em .8em;cursor:pointer}#res div:hover{background:var(--ivory)}
#svg{width:100%;height:100%;touch-action:none;background:radial-gradient(circle at 50% 0,#fffdf6,var(--ivory))}
.card rect{fill:var(--paper);stroke:var(--line);stroke-width:1.2}.card.M rect{stroke:var(--green2)}.card.F rect{stroke:var(--gold)}
.card.dead rect{fill:#efeadb}.card.sel rect{stroke-width:3;stroke:var(--rose)}.card text{fill:var(--ink);text-anchor:middle}.card .yr{fill:var(--mute);font-size:12px}
.link{fill:none;stroke:var(--line);stroke-width:1.5}.tg{cursor:pointer;fill:var(--green)}.tg text{fill:#fff;font-size:13px}
aside{background:var(--paper);border-inline-end:1px solid var(--line);padding:1rem;overflow:auto}aside h2{margin:.2em 0;color:var(--green)}
aside a{color:var(--green2);cursor:pointer;text-decoration:underline}
@media(max-width:800px){#app{grid-template-columns:1fr;grid-template-rows:1fr 38vh}}
@media(prefers-reduced-motion:no-preference){.card{transition:opacity .2s}}