/* =========================================================
   الطبقة البصرية v5 — واجهة داكنة متحركة، شعار متوهج، جزيئات،
   بطاقات حية، ظهور تدريجي عند التمرير، وخط العناوين
   ========================================================= */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- خط العناوين ---------- */
h1,h2,h3,.brand-txt b,.facts dt,.chip,.region b,.how3 b,.orb-chip,.results-head h2{font-family:var(--font-head);font-weight:var(--hw)}
h1,.hx-title{font-weight:700}
:root[data-hfont="arial"]{--font-head:var(--font);--hw:400}
:root[data-hfont="arial"] h1,:root[data-hfont="arial"] .hx-title{font-weight:400}

/* ---------- الشريط العلوي: شفاف فوق الواجهة، زجاجي عند التمرير ---------- */
.topbar{transition:background .4s,box-shadow .4s,border-color .4s,backdrop-filter .4s}
.topbar.scrolled{background:color-mix(in srgb,var(--surface) 80%,transparent);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent)}
.brand-mark{width:auto;height:44px;display:flex;align-items:center}
.brand-mark img{height:44px;width:auto;display:block;transition:filter .4s,transform .4s}
.brand:hover .brand-mark img{transform:rotate(-6deg) scale(1.06)}
html.hx-top .topbar{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.hx-top .topbar.scrolled{background:color-mix(in srgb,var(--intro-c) 74%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-bottom-color:rgba(127,243,225,.12)}
html.hx-top .brand-mark img{filter:brightness(1.55) saturate(.9) drop-shadow(0 0 10px rgba(80,240,215,.45))}
html.hx-top .brand-txt b{color:#fff}
html.hx-top .brand-txt small{color:rgba(220,255,248,.72)}
html.hx-top .top-actions .icon-btn{color:#e8fffb;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.hx-top .top-actions .icon-btn:hover{background:rgba(255,255,255,.18)}
html.hx-top .size-dots i{background:rgba(255,255,255,.3)}
html.hx-top .size-dots i:first-child,html.hx-top:root[data-size="lg"] .size-dots i:nth-child(-n+2),html.hx-top:root[data-size="xl"] .size-dots i{background:#7ff3e1}
@media (min-width:900px){
  html.hx-top .deck-nav a{color:rgba(230,255,250,.78)}
  html.hx-top .deck-nav a:hover,html.hx-top .deck-nav a.on{color:#fff;background:rgba(255,255,255,.12)}
}

/* ---------- الواجهة الداكنة ---------- */
.hero.hero-x{
  --hx-ink:#eafffb;--hx-muted:rgba(214,247,240,.74);--hx-glass:rgba(255,255,255,.07);--hx-edge:rgba(255,255,255,.14);
  --glow:color-mix(in srgb,var(--accent) 75%,#7ff7e6);
  isolation:isolate;color:var(--hx-ink);border:0;overflow:hidden;
  margin-top:calc(-1 * var(--head-h));padding:calc(var(--head-h) + 22px) 0 118px;
}
.hero.hero-x{background-size:100% 100%;background-repeat:no-repeat;background-color:var(--intro-c);background-image:radial-gradient(130% 85% at 85% -10%,color-mix(in srgb,var(--intro-a) 88%,var(--accent)) 0%,var(--intro-b) 52%,var(--intro-c) 100%)}
html.has-ann .hero.hero-x{margin-top:0;padding-top:28px}
.hx-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aur{position:absolute;border-radius:50%;opacity:.5;will-change:transform}
.aur.a1{width:70vmax;height:70vmax;left:-25vmax;top:-30vmax;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 80%,#fff) 0%,transparent 62%);animation:aur1 18s ease-in-out infinite alternate}
.aur.a2{width:60vmax;height:60vmax;right:-22vmax;top:10%;background:radial-gradient(circle,#1a7f9c 0%,transparent 60%);opacity:.5;animation:aur2 22s ease-in-out infinite alternate}
.aur.a3{width:55vmax;height:55vmax;left:20%;bottom:-38vmax;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 70%,#9dffe9) 0%,transparent 60%);opacity:.45;animation:aur3 26s ease-in-out infinite alternate}
@keyframes aur1{to{transform:translate(18vmax,14vmax) scale(1.15)}}
@keyframes aur2{to{transform:translate(-16vmax,-10vmax) scale(1.2)}}
@keyframes aur3{to{transform:translate(-14vmax,-12vmax) scale(.9)}}
.hx-lines{position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 20%,#000 30%,transparent 80%);mask-image:radial-gradient(120% 90% at 50% 20%,#000 30%,transparent 80%)}
.hx-canvas{position:absolute;inset:0;width:100%;height:100%}

.hero-x .hero-grid{position:relative;z-index:1;align-items:center}
.hero-x .hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-x .kicker{color:#bdfbef;background:rgba(127,243,225,.1);border-color:rgba(127,243,225,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-x .live-dot{background:#7ff3e1;box-shadow:0 0 0 0 rgba(127,243,225,.7)}
.hx-title{font-size:clamp(2.1rem,8.6vw,3.7rem)!important;line-height:1.18;margin:14px 0 10px!important;letter-spacing:0;color:#fff!important;text-shadow:0 10px 40px rgba(0,0,0,.35)}
.hx-title .w{display:inline-block;background:linear-gradient(100deg,#ffffff 0%,#ffffff 38%,#9ff8ea 50%,#ffffff 62%,#ffffff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:wordIn .9s cubic-bezier(.2,.8,.2,1) both,shine 5.5s ease-in-out 1.6s infinite;animation-delay:calc(var(--wi) * 110ms + .1s),calc(var(--wi) * 110ms + 1.6s)}
@keyframes wordIn{from{opacity:0;transform:translateY(.45em) scale(.96);filter:blur(10px)}}
@keyframes shine{0%,60%{background-position:100% 0}100%{background-position:-50% 0}}
.hero-x .lead{color:var(--hx-muted);margin-inline:auto}
.hero-x .search.big{position:relative;width:100%;max-width:34rem;background:rgba(255,255,255,.97);border:0;height:62px;border-radius:18px;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.3),0 0 40px -6px color-mix(in srgb,var(--accent) 60%,transparent)}
.hero-x .search.big::before{content:"";position:absolute;inset:-2px;border-radius:20px;padding:2px;z-index:-1;
  background:conic-gradient(from var(--ang),transparent 0 55%,#7ff3e1 70%,#fff 76%,var(--accent) 84%,transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 4s linear infinite}
.hero-x .search.big:focus-within{box-shadow:0 20px 50px -18px rgba(0,0,0,.6),0 0 0 4px rgba(127,243,225,.35),0 0 60px -4px color-mix(in srgb,var(--accent) 80%,transparent)}
.hero-x .search.big:focus-within::before{animation-duration:1.4s}
@keyframes spin{to{--ang:360deg}}
.hero-x .search input{color:#0d1f1f}
.hero-x .voice-hint{color:var(--hx-muted)}
.hero-x .voice-hint svg{color:#7ff3e1}
.hero-x .facts{width:100%;max-width:34rem;background:var(--hx-glass);border:1px solid var(--hx-edge);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:18px}
.hero-x .facts div+div{border-color:var(--hx-edge)}
.hero-x .facts dt{color:#fff;font-size:1.55rem;text-shadow:0 0 22px color-mix(in srgb,var(--accent) 80%,transparent)}
.hero-x .facts dd{color:var(--hx-muted)}
.hx-edu{background:none!important;border:0!important;padding:0;display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;max-width:34rem;font-size:.74rem;line-height:1.6;color:rgba(214,247,240,.62);text-align:start}
.hx-edu svg{width:16px;height:16px;flex:none;margin-top:2px;color:#7ff3e1}
.hero-x .ecg{bottom:74px;height:54px;opacity:.9}
.hero-x .ecg path{stroke:#7ff3e1;opacity:.55;stroke-width:2.2;filter:drop-shadow(0 0 6px #7ff3e1)}
.hx-wave{position:absolute;inset-inline:0;bottom:-1px;width:100%;height:86px;z-index:1;display:block}
.hx-wave path{fill:var(--bg)}
.hx-wave .w2{opacity:.35}

/* ---------- الشعار المتوهج ---------- */
.hx-visual{display:flex;justify-content:center;perspective:900px}
.hx-orb{--s:min(64vw,250px);position:relative;width:var(--s);height:var(--s);display:grid;place-items:center;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);
  animation:orbIn 1.1s cubic-bezier(.2,.9,.25,1.2) both}
@keyframes orbIn{from{opacity:0;transform:scale(.6) rotate(-8deg);filter:blur(12px)}}
.hx-logo{position:relative;z-index:3;height:calc(var(--s) * .74);width:auto;max-width:none;filter:drop-shadow(0 0 18px rgba(127,243,225,.55)) drop-shadow(0 18px 30px rgba(0,0,0,.4));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px) rotate(1.5deg)}}
.orb-glow{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 70%,#fff) 0%,transparent 68%);opacity:.5;filter:blur(18px);animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{50%{opacity:.8;transform:scale(1.12)}}
.orb-ring{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.orb-ring.r1{padding:2px;background:conic-gradient(from var(--ang),transparent 0 20%,#7ff3e1 45%,transparent 60%,rgba(255,255,255,.8) 85%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 7s linear infinite}
.orb-ring.r2{inset:9%;border:1.5px dashed rgba(127,243,225,.35);animation:rot 30s linear infinite reverse}
.orb-ring.r3{inset:-6%;border:1px solid rgba(127,243,225,.18);animation:ping 3.6s cubic-bezier(.2,.6,.3,1) infinite}
.orb-ring.r4{inset:-6%;border:1px solid rgba(127,243,225,.18);animation:ping 3.6s cubic-bezier(.2,.6,.3,1) 1.8s infinite}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes ping{0%{transform:scale(.82);opacity:0}25%{opacity:1}100%{transform:scale(1.22);opacity:0}}
.orb-chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:.72rem;color:#effffc;padding:6px 11px;border-radius:999px;
  background:rgba(8,40,37,.55);border:1px solid rgba(127,243,225,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 26px -10px rgba(0,0,0,.6);
  animation:chipIn .8s cubic-bezier(.2,.9,.3,1.3) both,bob 5s ease-in-out infinite}
.orb-chip svg{width:14px;height:14px;color:#7ff3e1}
.orb-chip b{font-weight:inherit}
.orb-chip.c1{top:8%;inset-inline-start:-14%;animation-delay:.7s,.7s}
.orb-chip.c2{bottom:14%;inset-inline-start:-18%;animation-delay:.9s,1.9s}
.orb-chip.c3{top:44%;inset-inline-end:-22%;animation-delay:1.1s,3.1s}
@keyframes chipIn{from{opacity:0;transform:scale(.4)}}
@keyframes bob{50%{translate:0 -7px}}

/* ---------- بطاقة المخطط العائمة ---------- */
.anat-float{position:relative;z-index:3;margin-top:-84px}
.anat-float .anat-card{border:0;border-radius:24px;padding:16px;background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 70px -30px rgba(4,24,22,.55),0 0 0 1px color-mix(in srgb,var(--primary) 10%,transparent)}
.anat-head{border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent)}
.figure{border:0!important;background:radial-gradient(60% 55% at 50% 45%,color-mix(in srgb,var(--c,var(--primary)) 16%,transparent),transparent 72%),
  linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0/18px 18px;border-radius:18px;transition:background .5s}
.fig-part{transition:fill .35s,opacity .35s,filter .35s}
.fig-part.on{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c) 70%,transparent)) drop-shadow(0 0 2px var(--c))}
.hotspots circle{fill:#fff;stroke:var(--primary);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:hs 2.4s ease-in-out infinite}
.hotspots circle:nth-child(2){animation-delay:.3s}.hotspots circle:nth-child(3){animation-delay:.6s}.hotspots circle:nth-child(4){animation-delay:.9s}.hotspots circle:nth-child(5){animation-delay:1.2s}
@keyframes hs{0%,100%{fill:#fff}50%{transform:scale(1.45);stroke-width:1;fill:#9ff3e6}}
.region{border-color:transparent;background:var(--surface-2);transition:all .3s cubic-bezier(.2,.8,.2,1)}
.region[aria-checked="true"]{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 5%,var(--surface)),color-mix(in srgb,var(--c) 16%,var(--surface)));box-shadow:inset -3px 0 0 var(--c),0 8px 20px -12px var(--c)}

/* ---------- خطوات الاستخدام ---------- */
.how3{position:relative;margin-top:26px}
.how3 li{border:0;background:transparent;padding:12px 4px;position:relative}
.how-ico{position:relative;width:52px!important;height:52px!important;border-radius:16px!important;color:#fff!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 85%,#fff),var(--primary))!important;box-shadow:0 12px 26px -12px var(--primary)}
.how-ico::after{content:"";position:absolute;inset:-4px;border-radius:20px;border:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent);opacity:.7}
.how3 li:not(:last-child) .how-ico::before{content:"";position:absolute;top:calc(100% + 8px);left:50%;width:2px;height:calc(100% - 22px);border-radius:2px;
  background:linear-gradient(var(--accent),transparent);transform:translateX(-50%)}
@media (min-width:560px){
  .how3 li{flex-direction:column;text-align:center}
  .how3 li:not(:last-child) .how-ico::before{top:50%;left:auto;right:calc(100% + 14px);width:calc(100vw / 3 - 120px);max-width:220px;height:2px;transform:none;background:linear-gradient(270deg,var(--accent),transparent)}
}

/* ---------- شريط التصفية ---------- */
.chip{border-radius:999px;border-color:transparent;background:var(--surface);box-shadow:0 1px 2px rgba(13,31,31,.06),0 0 0 1px var(--line) inset;transition:all .3s cubic-bezier(.2,.8,.2,1)}
.chip[aria-selected="true"]{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 78%,#fff),var(--c));box-shadow:0 10px 22px -10px var(--c);transform:translateY(-1px)}

/* ---------- البطاقات ---------- */
.card{border:0;box-shadow:0 1px 2px rgba(13,31,31,.05),0 0 0 1px color-mix(in srgb,var(--line) 80%,transparent),0 14px 30px -22px rgba(13,31,31,.35);
  transform-style:preserve-3d;will-change:transform;animation:none}
.card .media{border:0!important;background:#ebeaf1}
.card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--c) 22%,transparent),transparent 60%)}
.card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;padding:1.5px;opacity:0;transition:opacity .3s;
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),var(--c),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card:hover::before,.card:hover::after{opacity:1}
.card:hover{box-shadow:0 1px 2px rgba(13,31,31,.05),0 0 0 1px color-mix(in srgb,var(--c) 35%,transparent),0 26px 50px -24px color-mix(in srgb,var(--c) 55%,rgba(13,31,31,.5))}
.card .media::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(8,30,28,.28));pointer-events:none;z-index:1}
.code{z-index:2;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:0;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.dur,.play-ico{z-index:2}
.card .live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%;opacity:0;transition:opacity .5s;z-index:1;background:#ebeaf1}
.card.playing .live{opacity:1}
.card .live-badge{position:absolute;top:8px;inset-inline-end:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;font-size:.62rem;letter-spacing:.06em;color:#fff;background:rgba(8,40,37,.62);padding:3px 8px;border-radius:999px;opacity:0;transform:translateY(-4px);transition:all .35s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.card .live-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff5d5d;box-shadow:0 0 0 0 rgba(255,93,93,.7);animation:livePing 1.4s infinite}
@keyframes livePing{70%{box-shadow:0 0 0 6px rgba(255,93,93,0)}100%{box-shadow:0 0 0 0 rgba(255,93,93,0)}}
.card.playing .live-badge{opacity:1;transform:none}
.card.playing .play-ico{opacity:0!important}
.card.playing .dur{opacity:0}
.grid.list .card .live{object-position:50% 20%}

/* ---------- الظهور التدريجي عند التمرير ---------- */
html.fx .rv{opacity:0;transform:translateY(26px) scale(.98);filter:blur(6px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1),filter .6s;transition-delay:var(--rd,0ms)}
html.fx .rv.in{opacity:1;transform:none;filter:none}
html.fx .card.rv{transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1),filter .7s,box-shadow .3s;transition-delay:var(--rd,0ms)}
html.fx .card.rv.in{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s,opacity .7s,filter .7s}

/* ---------- الافتتاحية بالشعار ---------- */
.intro-logo{width:150px;height:150px}
.intro-mark{width:auto!important;height:150px!important;filter:drop-shadow(0 0 24px rgba(127,243,225,.6)) drop-shadow(0 18px 40px rgba(0,0,0,.45))!important}
.intro-ring{border-radius:50%!important;inset:-14px!important}

/* ---------- العناوين ---------- */
.results-head h2{font-size:1.5rem}
.footer .brand-mark img{height:52px}

/* ---------- الشاشات الكبيرة ---------- */
@media (min-width:900px){
  .hero.hero-x{padding:calc(var(--head-h) + 40px) 0 150px}
  .hero-x .hero-grid{grid-template-columns:1.1fr .9fr;gap:40px}
  .hero-x .hero-copy{text-align:start;align-items:flex-start;order:1}
  .hero-x .hx-visual{order:2}
  .hx-orb{--s:390px}
  .hero-x .lead{margin-inline:0}
  .orb-chip{font-size:.8rem;padding:8px 14px}
  .anat-float{margin-top:-110px}
  .anat-float .anat-card{padding:22px 26px}
  .anat-float .anat-body{grid-template-columns:minmax(0,1.5fr) minmax(220px,.8fr);gap:28px}
  .anat-float .figure{max-height:340px}
  .anat-float .regions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
@media (max-width:899px){.hx-orb{margin-bottom:-4px}}
@media (max-width:380px){.orb-chip{font-size:.66rem;padding:5px 9px}.orb-chip.c3{inset-inline-end:-16%}}

/* ---------- المظهر الداكن ---------- */
:root[data-theme="dark"] .anat-float .anat-card{box-shadow:0 30px 70px -30px rgba(0,0,0,.9),0 0 0 1px rgba(127,243,225,.12)}
:root[data-theme="dark"] .card .media,:root[data-theme="dark"] .card .live{background:#1c2626}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .anat-float .anat-card{box-shadow:0 30px 70px -30px rgba(0,0,0,.9),0 0 0 1px rgba(127,243,225,.12)}
}

@media (prefers-reduced-motion:reduce){
  html.fx .rv{opacity:1;transform:none;filter:none}
  .hx-title .w{color:#fff;background:none}
}

html.intro-on:not(.intro-leaving) .hx-title .w,html.intro-on:not(.intro-leaving) .hx-orb,html.intro-on:not(.intro-leaving) .orb-chip{animation-play-state:paused}
/* المؤثرات مطفأة من لوحة الإدارة */
.calm .aur,.calm .orb-ring.r1,.calm .orb-ring.r2,.calm .orb-ring.r3,.calm .orb-ring.r4,.calm .hx-logo,.calm .orb-glow,.calm .orb-chip,.calm .search.big::before,.calm .hx-title .w{animation:none!important}
.calm .hx-canvas{display:none}