:root{--navy:#0b2447;--navy2:#19376d;--teal:#0b7f8a;--teal2:#14b8c4;--bg:#f4f9fb;--ink:#12263f;--mut:#4d6178;--line:#d5e3ea;--ok:#0b7a53;--err:#b3261e}
*{box-sizing:border-box}
body{margin:0;font-family:Tajawal,"IBM Plex Sans Arabic",system-ui,sans-serif;color:var(--ink);line-height:1.8;font-size:17px;background:var(--bg) linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 32px}
.skip{position:absolute;inset-inline-start:-999px;background:#fff;padding:.5rem}.skip:focus{inset-inline-start:1rem;top:1rem;z-index:9}
:focus-visible{outline:3px solid var(--teal2);outline-offset:2px}
h1{font-size:1.9rem;font-weight:800;margin:.2rem 0 1rem;color:var(--navy)}h2{font-size:1.15rem;margin:0 0 .6rem;color:var(--navy2)}
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
aside{background:var(--navy);color:#fff;padding:1.2rem;display:flex;flex-direction:column;gap:1rem;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:.6rem;font-size:1.4rem}.brand svg{width:44px}
aside nav{display:flex;flex-direction:column;gap:.25rem;flex:1}
aside nav a{color:#cfe3ef;text-decoration:none;padding:.55rem .8rem;border-radius:8px;border-inline-start:4px solid transparent}
aside nav a:hover{background:var(--navy2)}aside nav a[aria-current]{background:var(--navy2);color:#fff;border-inline-start-color:var(--teal2);font-weight:700}
main{padding:1.5rem clamp(1rem,4vw,3rem);max-width:980px;width:100%}
.card{background:#fff;border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:1.1rem 1.3rem;margin:0 0 1rem}
.stats{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1rem}.stat{background:var(--navy);color:#fff;border-radius:12px;padding:.8rem 1.2rem;min-width:130px}
.stat b{display:block;font-size:2rem;color:var(--teal2);line-height:1.2}
.list{list-style:none;margin:0;padding:0}.list li{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.list li:last-child{border:0}
.tag{background:#e0f4f6;color:#065c66;border-radius:99px;padding:.05rem .7rem;font-size:.85rem}
.btn{font:inherit;background:var(--teal);color:#fff;border:0;border-radius:8px;padding:.45rem 1rem;cursor:pointer;min-height:44px}
.btn:hover:not(:disabled){background:#096a74}.btn:disabled{background:#c9d6de;color:#4d6178;cursor:not-allowed}.btn.ok{background:var(--ok)}.btn.out{background:transparent;border:1px solid #6f8bb0}
input{font:inherit;display:block;width:100%;max-width:380px;padding:.5rem;margin:.2rem 0 .8rem;border:1px solid #8aa0b3;border-radius:8px;background:#fff}input:disabled{background:#eef3f6}
.muted{color:var(--mut);font-size:.95rem}.empty{background:#fff;border:2px dashed var(--line);border-radius:12px;padding:1.5rem;text-align:center;color:var(--mut)}
.err{color:var(--err)}.good{color:var(--ok)}.msg{margin-top:.5rem;min-height:1.5rem;font-weight:500}
.banner{background:#fff6d6;border:1px solid #e4c75a;color:#5b4700;border-radius:8px;padding:.4rem .9rem;margin-bottom:1rem;font-size:.95rem}
.tw{overflow-x:auto;margin-bottom:1rem}table{border-collapse:collapse;width:100%;background:#fff}th,td{padding:.6rem .8rem;border-bottom:1px solid var(--line);text-align:start}th{background:var(--navy);color:#fff}
.login{margin:0 auto;padding:2rem 1rem;max-width:480px}.brand.big{flex-direction:column;color:var(--navy);text-align:center}.brand.big svg{width:90px}.brand.big h1{margin:0;font-size:2.6rem}.brand.big p{margin:0;color:var(--teal);font-weight:700}
.demo{border-color:var(--teal2)}.boot{text-align:center;padding:3rem}
@media(max-width:760px){.shell{grid-template-columns:1fr}aside{position:fixed;inset:auto 0 0 0;height:auto;flex-direction:row;padding:.3rem;z-index:5;overflow-x:auto}
aside .brand,aside .out{display:none}aside nav{flex-direction:row;gap:.2rem}aside nav a{white-space:nowrap;font-size:.9rem;border-inline-start:0;border-block-start:3px solid transparent;padding:.4rem .6rem}aside nav a[aria-current]{border-block-start-color:var(--teal2)}main{padding-bottom:5rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}