:root{
  --bg:#f6f2e9;--surface:#fffdf8;--ink:#1b2724;--muted:#5c6b66;--line:#e4dccb;
  --pri:#0d5b4a;--pri-d:#083f33;--pri-l:#e6f1ed;--gold:#b98a2e;--gold-l:#f3e7c9;
  --shadow:0 1px 2px rgba(20,40,35,.06),0 8px 24px rgba(20,40,35,.07);--r:16px
}
[data-theme=dark]{
  --bg:#0e1513;--surface:#16201d;--ink:#e9f0ed;--muted:#9bada7;--line:#26332f;
  --pri:#3dbb9d;--pri-d:#0b2a23;--pri-l:#1b2c27;--gold:#e0b960;--gold-l:#2d2816;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Cairo,Tahoma,sans-serif;line-height:1.95;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.skip{position:absolute;inset-inline-start:-999px;background:var(--gold);color:#222;padding:8px 14px;z-index:20}
.skip:focus{inset-inline-start:10px;top:10px}

/* header */
.top{position:sticky;top:0;z-index:10;background:var(--pri-d);color:#fff;border-bottom:3px solid var(--gold)}
.top-in{max-width:1180px;margin:auto;display:flex;align-items:center;gap:18px;padding:8px 5vw;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font:700 1.55rem Amiri,serif;margin-inline-end:auto}
.brand svg{width:34px;height:34px}
.top nav{display:flex;gap:2px;flex-wrap:wrap}
.top nav a{padding:5px 13px;border-radius:999px;font-size:.93rem;opacity:.85;transition:.15s}
.top nav a:hover{background:rgba(255,255,255,.12);opacity:1}
.top nav a.on{background:var(--gold);color:#1d1a10;opacity:1;font-weight:600}
#theme{background:rgba(255,255,255,.12);border:0;color:#fff;width:36px;height:36px;border-radius:50%;font-size:1.05rem;cursor:pointer}

main{max-width:1180px;margin:auto;padding:28px 5vw 70px;min-height:70vh}
h2{font:700 2rem Amiri,serif;color:var(--pri);margin:34px 0 14px;display:flex;align-items:center;gap:12px}
h2::after{content:"";flex:1;height:2px;background:linear-gradient(to left,transparent,var(--line))}
.crumb{color:var(--muted);font-size:.9rem;margin:0}.crumb a{color:var(--pri);font-weight:600}
.muted{color:var(--muted)}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:center;color:#fff;border-radius:26px;padding:44px;overflow:hidden;
  background:radial-gradient(circle at 15% 20%,rgba(185,138,46,.25),transparent 45%),linear-gradient(135deg,#0d5b4a,#062d25)}
.hero::before{content:"";position:absolute;inset:0;opacity:.07;background-image:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 22px),repeating-linear-gradient(-45deg,#fff 0 1px,transparent 1px 22px)}
.hero>*{position:relative}
.badge{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:2px 14px;border-radius:999px;font-size:.85rem;margin-bottom:8px}
.hero h1{font:700 4rem/1.2 Amiri,serif;margin:0;color:var(--gold-l)}
.hero .sub{font-size:1.25rem;margin:.2rem 0 1rem}
.sup{border-top:1px solid rgba(255,255,255,.25);padding-top:12px;margin-top:6px;font-size:1rem}
.sup b{color:var(--gold-l)}
.ph{position:relative;padding-bottom:16px}
.ph img{width:100%;max-height:360px;object-fit:cover;object-position:center 15%;border-radius:20px;border:3px solid var(--gold);box-shadow:0 18px 40px rgba(0,0,0,.35);display:block}
.ph .tag{position:absolute;bottom:0;inset-inline:18px;background:var(--surface);color:var(--ink);border-radius:12px;padding:4px 14px;text-align:center;font-size:.9rem;box-shadow:var(--shadow)}
.btn{display:inline-block;background:var(--gold);color:#201a0a;padding:9px 24px;border-radius:999px;border:0;cursor:pointer;font:700 1rem Cairo,sans-serif;margin:8px 0 0 8px;transition:.15s;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn.alt{background:transparent;color:inherit;border:2px solid currentColor;box-shadow:none}
main>.btn.alt,.actions .btn.alt,.lbody .btn.alt{color:var(--pri)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin:26px 0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;text-align:center;box-shadow:var(--shadow);color:var(--muted);font-size:.95rem}
.stat b{display:block;font:700 2.1rem Amiri,serif;color:var(--pri);line-height:1.3}

/* search */
.search{margin:20px 0}
.search input{width:100%;padding:14px 22px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;box-shadow:var(--shadow)}
.search input:focus{border-color:var(--pri);outline:none}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:.2s;display:block;box-shadow:var(--shadow)}
a.card:hover{transform:translateY(-4px);border-color:var(--pri)}
.card .ic{width:52px;height:52px;display:grid;place-items:center;font-size:1.6rem;background:var(--pri-l);border-radius:14px;margin-bottom:8px}
.card .no{position:absolute;top:16px;inset-inline-end:18px;font:700 2.2rem Amiri,serif;color:var(--gold);opacity:.55}
.card h3{margin:.2rem 0;font-size:1.12rem;color:var(--pri);line-height:1.6}
.card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.8}
.meta{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-top:12px}
.bar{height:7px;background:var(--line);border-radius:8px;margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(to left,var(--gold),var(--pri));border-radius:8px}
.card.main{border-top:4px solid var(--gold)}

/* axis page */
.axis-head{background:linear-gradient(135deg,var(--pri),var(--pri-d));color:#fff;border-radius:22px;padding:28px 30px;margin:12px 0 18px}
.axis-head h2{color:var(--gold-l);margin:4px 0;font-size:1.9rem}.axis-head h2::after{display:none}
.axis-head p{margin:.3rem 0;opacity:.92}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.toc a{background:var(--surface);border:1px solid var(--line);padding:3px 14px;border-radius:999px;font-size:.85rem}
.toc a:hover{border-color:var(--pri);color:var(--pri)}
details.lesson{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin:12px 0;box-shadow:var(--shadow);overflow:hidden}
details.lesson summary{cursor:pointer;list-style:none;padding:16px 22px;font:700 1.3rem Amiri,serif;color:var(--pri);display:flex;align-items:center;gap:12px}
details.lesson summary::-webkit-details-marker{display:none}
details.lesson summary::before{content:"◂";font-size:.9rem;color:var(--gold);transition:.2s}
details.lesson[open] summary::before{transform:rotate(-90deg)}
details.lesson[open] summary{border-bottom:1px solid var(--line);background:var(--pri-l)}
.done-mark{margin-inline-start:auto;font-size:.8rem;font-family:Cairo;background:var(--pri);color:#fff;border-radius:999px;padding:0 10px}
.lbody{padding:6px 24px 20px}
.lbody ul{padding-inline-start:22px}.lbody li{margin:8px 0}
.lbody li::marker{color:var(--gold)}
.lbody h4{margin:18px 0 6px;color:var(--gold);font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--pri-l);padding:6px 14px;border-radius:12px;font-size:.88rem;line-height:1.7;border:1px solid var(--line)}
.chip b{color:var(--pri)}
.actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}

/* quiz */
.q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;margin:14px 0;box-shadow:var(--shadow)}
.opt{display:block;width:100%;text-align:right;margin:7px 0;padding:11px 16px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;cursor:pointer;transition:.12s}
.opt:hover{border-color:var(--pri);background:var(--pri-l)}
.opt.ok{background:#17895a;color:#fff;border-color:#17895a}
.opt.no{background:#c0392b;color:#fff;border-color:#c0392b}
.why{color:var(--muted);font-size:.9rem;margin-top:6px}

/* about */
.about{display:grid;grid-template-columns:280px 1fr;gap:30px;align-items:start}
.about img{width:100%;border-radius:20px;border:3px solid var(--gold);box-shadow:var(--shadow)}
.credit{margin-top:22px;border:1px solid var(--gold);background:var(--gold-l);color:#3a2f10;border-radius:14px;padding:12px 18px;display:inline-block}
[data-theme=dark] .credit{color:var(--gold)}

/* tools */
.flash{background:var(--surface);border:2px solid var(--gold);border-radius:22px;padding:34px 20px;text-align:center;cursor:pointer;margin:14px 0;min-height:190px;box-shadow:var(--shadow)}
.flash h3{font:700 2.1rem Amiri,serif;color:var(--pri);margin:6px 0}
.search-sel,.num{padding:9px 14px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit}
.num{width:90px}
pre{white-space:pre-wrap;background:var(--pri-l);padding:16px;border-radius:12px;font:inherit;line-height:1.95;border:1px solid var(--line)}
.chk{display:block;margin:7px 0}
.tb{width:100%;border-collapse:collapse;background:var(--surface);margin:14px 0}
.tb th,.tb td{border:1px solid var(--line);padding:9px;text-align:center}
.tb th{background:var(--pri-l);color:var(--pri)}
article.lesson{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 22px 18px;margin:16px 0;box-shadow:var(--shadow)}
article.lesson h3{color:var(--pri);font:700 1.4rem Amiri,serif}

footer{background:var(--pri-d);color:#e9f0ed;margin-top:30px;border-top:3px solid var(--gold)}
.foot{max-width:1180px;margin:auto;padding:30px 5vw;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
.foot h5{margin:0 0 8px;font:700 1.2rem Amiri,serif;color:var(--gold-l)}
.foot p{margin:.2rem 0;font-size:.92rem;opacity:.9}
.foot a{display:block;opacity:.85;font-size:.92rem}.foot a:hover{opacity:1;color:var(--gold-l)}
.copy{text-align:center;border-top:1px solid rgba(255,255,255,.12);padding:12px 5vw;font-size:.82rem;opacity:.8}

@media(max-width:760px){
  body{font-size:16px}
  .hero{grid-template-columns:1fr;padding:28px 22px}.hero h1{font-size:3rem}
  .about{grid-template-columns:1fr}.about img{max-width:260px}
  .foot{grid-template-columns:1fr}
  .top-in{gap:8px}.brand{font-size:1.35rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.top,footer,.search,.btn,.toc,.actions{display:none}details.lesson{box-shadow:none}}

/* portal */
.inp{width:100%;padding:11px 14px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;margin:6px 0}
.inp:focus{border-color:var(--pri);outline:none}
.note{min-height:0;margin:8px 0;padding:0;border-radius:12px}.note:not(:empty){padding:10px 16px}
.note.good{background:#dff3e8;color:#0b5a38}.note.bad{background:#fbe3df;color:#8c2217}
.bar-u{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.tabs{display:flex;gap:8px;margin:12px 0}
.tabs button{padding:8px 20px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:600 1rem Cairo;cursor:pointer}
.tabs button.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.pill{display:inline-block;font-size:.78rem;padding:0 10px;border-radius:999px;background:var(--line);margin-inline-start:8px}
.pill.s{background:var(--gold-l);color:#6b4d0a}.pill.g{background:#dff3e8;color:#0b5a38}
.fb{background:var(--pri-l);border-radius:12px;padding:10px 16px;margin-top:12px}
.thread{max-height:360px;overflow:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.msg{background:var(--pri-l);padding:8px 14px;border-radius:14px;max-width:80%;align-self:flex-start}
.msg.mine{background:var(--gold-l);align-self:flex-end}.msg small{display:block;color:var(--muted);font-size:.72rem}
.two{display:grid;grid-template-columns:240px 1fr;gap:14px}
@media(max-width:760px){.two{grid-template-columns:1fr}}

.lnk{background:none;border:0;color:var(--pri);cursor:pointer;font:600 .85rem Cairo;padding:0 8px 0 0}
.lnk:hover{text-decoration:underline}
.q.pin{border-color:var(--gold);background:var(--gold-l)}
.cms{margin:8px 0}.cm{background:var(--pri-l);border-radius:12px;padding:6px 14px;margin:6px 0;font-size:.93rem}
.cmf{display:flex;gap:8px;align-items:center}.cmf .inp{margin:0}
.card.commu{margin:18px 0}