*{-webkit-tap-highlight-color:transparent}
*{user-select:none;-webkit-user-select:none}
button,a,input{-webkit-tap-highlight-color:transparent;outline:none}
:root{--bg:#f1f5f9;--cd:#fff;--tx:#0f172a;--mu:#64748b;--bd:#e2e8f0;--ac:#e11d48;--g:#0d9488;--o:#ea580c;--b:#3b82f6;--sh:0 10px 30px rgba(15,23,42,.08);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1020;--cd:#131a2e;--tx:#e8ecf4;--mu:#94a3b8;--bd:#222c47;--sh:0 10px 30px rgba(0,0,0,.4)}}
:root[data-theme="dark"]{--bg:#0b1020;--cd:#131a2e;--tx:#e8ecf4;--mu:#94a3b8;--bd:#222c47;--sh:0 10px 30px rgba(0,0,0,.4)}
*{box-sizing:border-box}
html{scroll-padding-top:100px;scrollbar-width:thin;scrollbar-color:var(--ac) transparent}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:linear-gradient(var(--ac),var(--o));border-radius:9px}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.9 Cairo,Tahoma,sans-serif;overflow-x:hidden}
#pg{position:fixed;top:calc(60px + env(safe-area-inset-top,0px));right:0;left:0;height:4px;z-index:40;background:color-mix(in srgb,var(--mu) 30%,transparent);opacity:0;transition:opacity .3s;pointer-events:none;overflow:hidden}
#pg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ac),var(--o));transform:scaleX(var(--p,0));transform-origin:right;transition:transform .1s linear}
#pg.show{opacity:1}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--cd) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd)}
.bar{display:flex;align-items:center;gap:25px;max-width:1280px;margin:auto;padding:8px 16px;height:60px}
.brand{font-weight:800;color:var(--ac);white-space:nowrap;display:flex;gap:8px;align-items:center;text-decoration:none}
nav{display:flex;gap:1px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}nav::-webkit-scrollbar{display:none}.hg{display:flex;gap:8px;margin-inline-start:auto}.hero .cv{height:480px}.no-p{margin-top:16px}
nav a,aside a{color:var(--mu);text-decoration:none;font-size:13.5px;padding:4px 9px;border-radius:99px;white-space:nowrap;transition:.25s}
nav a:hover,nav a.on,aside a.on{background:var(--ac);color:#fff}
.ib{width:38px;height:38px;border-radius:12px;border:1px solid var(--bd);background:var(--cd);color:var(--tx);display:grid;place-items:center;cursor:pointer;flex:none}
.ib svg,.btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#mb{display:none}
aside{position:fixed;top:0;bottom:0;right:0;left:auto;width:320px;max-width:90vw;background:var(--cd);border-left:1px solid var(--bd);border-right:none;z-index:100;padding:calc(14px + env(safe-area-inset-top,0px)) 14px 14px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;overflow-x:hidden;transform:translateX(105%);transition:.35s;box-shadow:var(--sh);direction:rtl}
#overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:90;opacity:0;pointer-events:none;transition:.35s}
#overlay.show{opacity:1;pointer-events:auto}
@media(min-width:821px){#overlay{display:none!important;}}
aside.open{transform:none}aside a{font-size:15px;padding:8px 14px;border-radius:12px;direction:rtl;text-align:right;display:block}
@media(max-width:820px){nav{display:none}#mb{display:grid}}@media(min-width:821px){aside{display:none}}
main{max-width:1180px;margin:auto;padding:0 16px 60px}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center;min-height:78vh;padding:30px 0}
.hero h1{font-size:clamp(2.2rem,6vw,4.2rem);margin:0;line-height:1.2;background:linear-gradient(120deg,var(--ac),var(--o));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mu);font-size:1.1rem}
.cr{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.cr div{background:var(--cd);border:1px solid var(--bd);border-radius:16px;padding:8px 16px;font-size:14px;box-shadow:var(--sh)}.cr b{display:block;color:var(--ac)}
canvas{width:100%;height:100%;min-height:300px;display:block;touch-action:pan-y;cursor:grab}
.cv{height:360px;border-radius:24px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--ac) 14%,transparent),transparent 70%)}
@media(max-width:800px){.hero{grid-template-columns:1fr;text-align:center;min-height:auto}.cr{justify-content:center}.hero .cv{height:300px;order:-1}}
.sec{background:var(--cd);border:1px solid var(--bd);border-radius:28px;padding:28px;margin:24px 0;box-shadow:var(--sh)}
.sec h2{margin:0 0 14px;font-size:1.6rem;display:flex;align-items:center;gap:12px}
.n{background:linear-gradient(135deg,var(--ac),var(--o));color:#fff;border-radius:14px;font-size:14px;padding:2px 11px;font-weight:800}
.sec p{color:var(--mu);margin:.5em 0}.sec h3{margin:.2em 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:800px){.two{grid-template-columns:1fr}.sec{padding:20px}}
.grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:14px}
.grid>div{flex:0 1 calc((100% - 32px)/3);background:var(--bg);border:1px solid var(--bd);border-radius:20px;padding:16px;transition:.3s}
.grid>div:hover{transform:translateY(-6px);border-color:var(--ac)}.grid b{color:var(--ac)}
.grid.s4>div{flex-basis:calc((100% - 48px)/4)}.grid.s4 b{font-size:1.7rem;display:block}
@media(max-width:900px){.grid>div,.grid.s4>div{flex-basis:calc((100% - 16px)/2)}}@media(max-width:520px){.grid>div,.grid.s4>div{flex-basis:100%}}
.rv{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .8s,transform .8s}.rv.in{opacity:1;transform:none}
.bars div{margin:10px 0;font-size:14px}.bars i{display:block;height:11px;border-radius:9px;background:var(--bd);margin-top:4px;overflow:hidden}
.bars i::after{content:"";display:block;height:100%;width:0;background:linear-gradient(90deg,var(--g),var(--b));transition:width 1.6s .2s;border-radius:9px}.in .bars i::after{width:var(--w)}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:14px;padding:9px 18px;background:var(--ac);color:#fff;font:600 15px Cairo,sans-serif;cursor:pointer;text-decoration:none;transition:.25s}
.btn:hover{filter:brightness(1.1);transform:translateY(-2px)}.btn.o{background:var(--cd);color:var(--tx);border:1px solid var(--bd)}.btn[disabled]{opacity:.4;pointer-events:none}
.stp{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.stp button{width:42px;height:42px;border-radius:50%;border:2px solid var(--bd);background:var(--cd);color:var(--tx);font:700 15px Cairo;cursor:pointer;transition:.3s}
.stp button.on{background:var(--ac);border-color:var(--ac);color:#fff;transform:scale(1.15)}
.dt{background:var(--bg);border-radius:20px;padding:16px 20px;min-height:110px;border-inline-start:5px solid var(--ac)}
.fm{display:grid;gap:10px}.fm label{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--mu)}
input[type=range]{width:100%;accent-color:var(--ac)}select{width:100%;padding:8px;border-radius:12px;border:1px solid var(--bd);background:var(--bg);color:var(--tx);font:inherit}
.res{font-weight:800;font-size:1.1rem;color:var(--ac)}.gr{stroke:var(--bd);stroke-dasharray:4}.ax{fill:var(--mu);font:11px Cairo}
svg.ch{width:100%;height:auto;direction:ltr}.ln{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s}.in .ln{stroke-dashoffset:0}
.ar{opacity:0;transition:opacity 2s .5s}.in .ar{opacity:.13}.sl{cursor:pointer;transition:stroke-width .25s}.sl:hover{stroke-width:32}
.lg{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;font-size:14px;color:var(--mu)}.lg span{cursor:pointer}.lg i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-inline-end:6px}
details{background:var(--bg);border:1px solid var(--bd);border-radius:16px;padding:10px 16px;margin:8px 0}summary{cursor:pointer;font-weight:700}details[open]{border-color:var(--ac)}
.qb{display:block;width:100%;text-align:right;margin:8px 0;padding:12px 16px;border-radius:14px;border:2px solid var(--bd);background:var(--bg);color:var(--tx);font:inherit;cursor:pointer;transition:.2s}
.qb:hover{border-color:#3b82f6}.qb.on{border-color:#3b82f6;background:rgba(59,130,246,.16);color:var(--tx);font-weight:700}.qb.ok{border-color:var(--g);background:color-mix(in srgb,var(--g) 15%,transparent)}.qb.no{border-color:#ef4444}
.pb{height:8px;background:var(--bd);border-radius:9px;overflow:hidden}.pb i{display:block;height:100%;background:var(--ac);transition:.4s}.qn{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.ref{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--bg);border:1px solid var(--bd);border-radius:16px;margin:8px 0}.ref small{color:var(--mu);display:block}
footer{text-align:center;color:var(--mu);padding:60px 16px 50px;font-size:16px;line-height:1.9;border-top:1px solid var(--bd);margin-top:10px;background:var(--cd)}
#top{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;width:48px;height:48px;border:0;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh);opacity:0;pointer-events:none;transform:translateY(20px);transition:.35s}
#top.show{opacity:1;pointer-events:auto;transform:none}#top svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.mod{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:20px}.mod[hidden]{display:none}
.box{background:var(--cd);border-radius:24px;padding:26px;max-width:380px;text-align:center;box-shadow:var(--sh)}.box h3{color:var(--ac);margin:0}
#cover{display:none}
.pdf-sec{background:linear-gradient(135deg,var(--cd),var(--bg));border:2px dashed var(--ac);border-radius:24px;padding:30px;margin:40px auto;max-width:600px;text-align:center;box-shadow:var(--sh)}.pdf-sec h3{color:var(--tx);font-size:1.5rem;margin:0 0 10px}.pdf-sec p{color:var(--mu);margin-bottom:20px}.btn-pdf-main{background:linear-gradient(90deg,var(--ac),var(--o));color:#fff;border:none;padding:15px 40px;font-size:1.1rem;font-weight:700;border-radius:50px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;box-shadow:0 4px 15px rgba(225,29,72,.4);transition:.3s}.btn-pdf-main:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 25px rgba(225,29,72,.6)}.pdf-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(5px);display:none;place-items:center;z-index:999}.pdf-modal.show{display:grid}.pdf-modal-box{background:var(--cd);border-radius:24px;padding:30px;max-width:400px;width:90%;text-align:center;box-shadow:var(--sh);animation:popIn .3s ease-out}@keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.pdf-modal-box h3{color:var(--ac);margin:0 0 15px;font-size:1.4rem}.pdf-modal-box p{color:var(--mu);margin-bottom:25px}.pdf-actions{display:flex;gap:15px;justify-content:center}.pdf-actions button{flex:1;padding:12px;border-radius:12px;border:none;font:600 1rem Cairo;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.2s}.btn-print{background:var(--bg);color:var(--tx);border:1px solid var(--bd)}.btn-print:hover{background:var(--bd)}.btn-download{background:var(--ac);color:#fff}
.btn-download:hover{filter:brightness(1.1)}
.spinner{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite;margin-left:5px}@keyframes spin{to{transform:rotate(360deg)}}
@media print{
:root,:root[data-theme]{--bg:#fff;--cd:#fff;--tx:#111;--mu:#444;--bd:#ccc;--sh:none}
header,aside,#top,#pg,.hero,#quiz,.btn,.cv,.stp,.fm,.no-p,.ref .btn,footer{display:none!important}
body{font-size:12pt}.rv{opacity:1;transform:none}.bars i::after{width:var(--w)}.ln{stroke-dashoffset:0}.ar{opacity:.13}
.sec{break-before:page;box-shadow:none;border:0;padding:0;margin:0}.sec:first-of-type{break-before:auto}
#cover{display:block;break-after:page;text-align:center;padding-top:25vh}#cover h1{font-size:40pt;color:#e11d48}#cover ol{text-align:right;display:inline-block;margin-top:30px}
.grid>div,.ref,details{break-inside:avoid}.dt{display:block}
.footer-divider { height: 1px; background: var(--bd); margin: 15px auto; max-width: 400px; width: 80%; }
}@media print {
  
    #qr-print-section {
        display: block !important;
    }
    
    .pdf-sec {
        display: none !important;
    }
}
#qr-print-section {
    display: none !important;
}