/* Insulin Smart Orbit — premium medical capsule interface (namespace .iso-*) */

/* Client requirement: the old topic-grid section ("استكشف موسوعة الإنسولين")
   must not be visible now that this section is the main experience. Hidden
   via CSS only — its markup/script are untouched. */
#hub{display:none}

.iso-section{
  margin:34px auto;width:min(1160px,calc(100% - 28px));
  --iso-navy-deep:#051b24;--iso-navy:#092b36;--iso-navy2:#0d3b46;--iso-navy3:#123f4d;
  --iso-teal:#15c4bd;--iso-teal2:#1bbcc7;--iso-teal-bright:#35e0d0;
  --iso-gold-hi:#fff2b8;--iso-gold:#f7d77a;--iso-gold-deep:#d6a63a;--iso-gold-shadow:#9d741f;
  --iso-glass-1:rgba(255,255,255,.08);--iso-glass-2:rgba(255,255,255,.14);--iso-glass-ink:rgba(244,252,252,.92);
  --iso-on-dark:#eaf6f5;--iso-on-dark-muted:#9fc4c2;
  --iso-gold-grad:linear-gradient(135deg,var(--iso-gold-hi) 0%,var(--iso-gold) 32%,var(--iso-gold-deep) 68%,var(--iso-gold-shadow) 100%);
}

.iso-head{position:relative;max-width:620px;margin:0 auto 26px;text-align:center}
.iso-head h2{margin:0;font-size:clamp(26px,4.4vw,38px);color:var(--ink,#082f49);letter-spacing:-.5px;font-weight:900}
.iso-sub{margin:10px 0 0;font-size:clamp(13px,1.6vw,15px);color:var(--muted,#64748b);font-weight:700}

/* ---------- The one large premium app shell ---------- */
.iso-app{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid rgba(214,166,58,.3);border-radius:36px;
  background:
    radial-gradient(circle at 84% 0%,rgba(21,196,189,.16),transparent 40%),
    radial-gradient(circle at 4% 100%,rgba(214,166,58,.12),transparent 44%),
    linear-gradient(165deg,var(--iso-navy3) 0%,var(--iso-navy) 55%,var(--iso-navy-deep) 100%);
  box-shadow:0 30px 90px rgba(2,10,15,.5),inset 0 1px 0 rgba(255,255,255,.06);
  padding:30px 26px 32px;opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;
}
.iso-app.ready{opacity:1;transform:translateY(0)}
.iso-app:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 72%);mask-image:radial-gradient(circle at 50% 30%,#000,transparent 72%);pointer-events:none;opacity:.5}

/* (v11) The old top-to-center energy beam was removed by client request —
   category feedback is now a radial pulse on the center dock instead. */
.iso-dock:after{
  content:'';position:absolute;left:50%;top:50%;width:230px;height:230px;
  transform:translate(-50%,-50%) scale(.5);border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--amp-accent,#35e0d0) 60%,transparent);
  background:radial-gradient(circle,color-mix(in srgb,var(--amp-accent,#15c4bd) 24%,transparent),rgba(247,215,122,.06) 55%,transparent 72%);
  opacity:0;pointer-events:none;
}
.iso-dock.pulse:after{animation:isoDockPulse .9s cubic-bezier(.2,.7,.3,1) both}
@keyframes isoDockPulse{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}22%{opacity:.95}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}

/* ---------- Category nav: horizontal premium medicine capsules ----------
   One balanced centered row of 5 pills. Each pill = light glass half +
   coloured half (--pill per category), gold seam, gloss, travelling shine. */
.iso-cats{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-bottom:14px;padding-top:2px}
.iso-pill{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:126px;min-height:46px;padding:12px 24px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);background:transparent;cursor:pointer;
  font-family:var(--font);-webkit-tap-highlight-color:transparent;white-space:nowrap;
  box-shadow:0 12px 24px rgba(2,10,15,.42),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -12px 16px rgba(0,0,0,.22),0 0 0 1px rgba(247,215,122,.10);
  transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s ease,border-color .26s ease;
}
/* Two capsule halves: light glass shell + desaturated colour fill */
.iso-pill-half{position:absolute;top:0;bottom:0;width:52%;z-index:-2;transition:opacity .3s ease}
.iso-pill-half.l{inset-inline-start:-1px;border-radius:999px 0 0 999px;background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.10) 55%,rgba(255,255,255,.03))}
.iso-pill-half.r{inset-inline-end:-1px;border-radius:0 999px 999px 0;background:linear-gradient(180deg,color-mix(in srgb,var(--pill,#2fbfb7) 46%,transparent),color-mix(in srgb,var(--pill,#2fbfb7) 22%,transparent) 55%,color-mix(in srgb,var(--pill,#2fbfb7) 34%,#03141b))}
html[dir="rtl"] .iso-pill-half.l{border-radius:0 999px 999px 0}
html[dir="rtl"] .iso-pill-half.r{border-radius:999px 0 0 999px}
/* Gold seam between the halves */
.iso-pill-seam{position:absolute;inset-inline-start:50%;top:14%;bottom:14%;width:1.5px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,rgba(247,215,122,.7),transparent);z-index:-1}
/* Glossy highlight across the upper curve */
.iso-pill:before{content:'';position:absolute;top:2px;inset-inline:8%;height:44%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0));pointer-events:none;z-index:0}
/* Travelling shine band — one pass on click, slow loop while active */
.iso-pill-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.45) 50%,transparent 68%);transform:translateX(-140%);pointer-events:none;z-index:1}
.iso-pill-label{position:relative;z-index:2;font-size:13px;font-weight:800;color:var(--iso-on-dark);text-shadow:0 1px 4px rgba(0,0,0,.4);transition:color .25s ease}

.iso-pill:hover{transform:translateY(-2px) scale(1.02);border-color:rgba(247,215,122,.4);box-shadow:0 16px 30px rgba(2,10,15,.46),inset 0 1px 0 rgba(255,255,255,.3),0 0 16px color-mix(in srgb,var(--pill,#2fbfb7) 28%,transparent)}
.iso-pill:active{transform:translateY(0) scale(.97)}
.iso-pill:focus-visible{outline:2px solid var(--iso-gold);outline-offset:3px}

.iso-pill.active{
  transform:translateY(-2px);border-color:rgba(247,215,122,.75);
  box-shadow:0 0 0 1.5px rgba(247,215,122,.7),0 16px 32px rgba(2,10,15,.44),0 0 22px color-mix(in srgb,var(--pill,#2fbfb7) 42%,transparent),0 0 14px rgba(247,215,122,.3),inset 0 1px 0 rgba(255,255,255,.32);
}
.iso-pill.active .iso-pill-half.r{background:linear-gradient(180deg,color-mix(in srgb,var(--pill,#2fbfb7) 72%,#fff) -20%,color-mix(in srgb,var(--pill,#2fbfb7) 55%,transparent) 45%,color-mix(in srgb,var(--pill,#2fbfb7) 42%,#03141b))}
.iso-pill.active .iso-pill-label{color:#fff}
.iso-pill.active .iso-pill-shine{animation:isoPillShineLoop 4.6s ease-in-out infinite}
@keyframes isoPillShineLoop{0%{transform:translateX(-140%)}42%,100%{transform:translateX(140%)}}
.iso-pill.snapping .iso-pill-shine{animation:isoPillShinePass .55s ease}
@keyframes isoPillShinePass{0%{transform:translateX(-140%)}100%{transform:translateX(140%)}}

/* ---------- Stage: capsule dock + orbit + smart panel ---------- */
.iso-stage-wrap{position:relative;z-index:1;margin-top:22px}
.iso-stage{position:relative;display:grid;place-items:center;min-height:470px}

.iso-dock{position:relative;display:grid;place-items:center;width:100%;height:100%}
.iso-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.iso-ring{position:absolute;border-radius:50%;border:1px solid rgba(21,196,189,.32)}
.iso-ring.r1{width:220px;height:220px}
.iso-ring.r2{width:320px;height:320px;border-color:rgba(214,166,58,.24);border-style:dashed;animation:isoDotPulse 5s ease-in-out infinite}
.iso-ring.r3{width:400px;height:400px;border-color:rgba(21,196,189,.14);animation:isoRingSpin 44s linear infinite}
@keyframes isoDotPulse{0%,100%{opacity:.35}50%{opacity:.85}}
@keyframes isoRingSpin{to{transform:rotate(360deg)}}

.iso-pedestal{position:absolute;bottom:calc(50% - 158px);width:170px;height:26px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(21,196,189,.32),transparent 72%);filter:blur(3px)}
.iso-pedestal:before{content:'';position:absolute;inset:0;margin:auto;width:120px;height:10px;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(247,215,122,.4),transparent);box-shadow:0 0 20px rgba(247,215,122,.3)}

/* (v16) The rectangular glass chamber around the pen was removed — the pen
   now floats free above the base light pool. The holder is a plain,
   frameless positioning wrapper (no background, border, or shadow). */
.iso-pen-holder{position:relative;z-index:2;width:180px;height:300px;display:grid;place-items:center}
.iso-pen-glow{position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(21,196,189,.38),transparent 68%);filter:blur(10px);animation:isoPenBreathe 6s ease-in-out infinite}
@keyframes isoPenBreathe{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:.9;transform:scale(1.04)}}
.iso-pen{
  position:relative;z-index:1;max-height:272px;width:auto;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(21,196,189,.3));
  -webkit-mask-image:radial-gradient(ellipse 44% 46% at 50% 48%,#000 60%,transparent 100%);
  mask-image:radial-gradient(ellipse 44% 46% at 50% 48%,#000 60%,transparent 100%);
}
.iso-pen-reflect{position:absolute;bottom:14px;width:64%;height:22px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.22),transparent 75%);filter:blur(2px)}

.iso-stage.card-open .iso-pen-holder{opacity:.26;transform:scale(.9)}
.iso-stage.card-open .iso-ring{opacity:.2}
.iso-stage.card-open .iso-pedestal{opacity:.3}

.iso-orbit{position:absolute;inset:0;z-index:2;--iso-radius:190px}
.iso-orbit-item{
  position:absolute;top:50%;left:50%;width:100px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transform:translate(-50%,-50%) rotate(var(--angle)) translate(var(--iso-radius)) rotate(calc(-1 * var(--angle)));
  border:0;background:transparent;font-family:var(--font);cursor:pointer;transition:opacity .3s ease;
}
.iso-orbit-item-icon{
  position:relative;width:60px;height:60px;border-radius:22px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--accent,#15c4bd),color-mix(in srgb,var(--accent,#15c4bd) 45%,var(--iso-navy-deep)));
  border:1.5px solid rgba(247,215,122,.3);
  box-shadow:0 14px 24px color-mix(in srgb,var(--accent,#15c4bd) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,border-color .22s ease;
}
.iso-orbit-item-icon:before{content:'';position:absolute;top:6%;inset-inline-start:12%;width:40%;height:34%;border-radius:50%;background:linear-gradient(160deg,rgba(255,255,255,.5),transparent 75%);filter:blur(2px);pointer-events:none}
.iso-orbit-item-icon svg{width:27px;height:27px;position:relative}
.iso-orbit-item-label{font-size:12px;font-weight:800;color:var(--iso-on-dark);text-align:center;line-height:1.3;max-width:100px;text-shadow:0 1px 5px rgba(0,0,0,.35)}
.iso-orbit-item:hover .iso-orbit-item-icon,.iso-orbit-item:focus-visible .iso-orbit-item-icon{transform:translateY(-3px) scale(1.06)}
.iso-orbit-item.active .iso-orbit-item-icon{border-color:var(--iso-gold);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent,#15c4bd) 26%,transparent),0 18px 32px color-mix(in srgb,var(--accent,#15c4bd) 38%,transparent),0 0 18px rgba(247,215,122,.4)}

/* ---------- Smart panel overlay (info + tool views) ---------- */
.iso-modal-wrap{position:absolute;top:50%;left:50%;z-index:5;width:min(330px,92%);transform:translate(-50%,-50%) scale(.94);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease,width .3s ease}
.iso-modal-wrap.open{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.iso-modal-wrap.tool-open{width:min(500px,94%)}
.iso-modal{
  position:relative;overflow:hidden;border-radius:26px;
  border:1px solid rgba(247,215,122,.4);
  background:linear-gradient(165deg,var(--iso-navy3),var(--iso-navy-deep));
  box-shadow:0 34px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1);
  padding:24px 22px 22px;text-align:center;max-height:min(68vh,560px);overflow-y:auto;
}
.iso-modal:before{content:'';position:absolute;top:0;left:8%;right:8%;height:2px;border-radius:2px;background:var(--iso-gold-grad);box-shadow:0 0 14px rgba(247,215,122,.5)}
.iso-scanner{position:absolute;inset-block:0;left:-30%;width:30%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(247,215,122,.35),transparent);opacity:0;z-index:2}
.iso-scanner.play{animation:isoScan .85s cubic-bezier(.3,.7,.2,1) both}
@keyframes isoScan{0%{opacity:0;transform:translateX(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(430%)}}
.iso-modal-close{position:absolute;top:12px;inset-inline-end:12px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(247,215,122,.36);background:rgba(255,255,255,.08);color:var(--iso-on-dark);font-size:16px;line-height:1;display:grid;place-items:center;z-index:4;transition:background .2s ease,transform .2s ease}
.iso-modal-close:hover{background:rgba(255,255,255,.16);transform:scale(1.06)}

.iso-modal-icon{width:58px;height:58px;margin:0 auto 14px;border-radius:19px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--accent,#15c4bd),color-mix(in srgb,var(--accent,#15c4bd) 50%,var(--iso-navy-deep)));box-shadow:0 14px 26px color-mix(in srgb,var(--accent,#15c4bd) 34%,transparent),0 0 0 1px rgba(247,215,122,.3)}
.iso-modal-icon svg{width:29px;height:29px}
.iso-modal-title{margin:0 0 8px;font-size:19px;font-weight:900;color:#fff}
.iso-modal-desc{margin:0 0 14px;color:var(--iso-on-dark-muted);font-size:13px;line-height:1.8}
.iso-modal-list{list-style:none;margin:0 0 18px;padding:0;text-align:start;display:grid;gap:9px}
.iso-modal-list li{position:relative;padding-inline-start:22px;font-size:13px;font-weight:800;color:var(--iso-on-dark);line-height:1.6}
.iso-modal-list li:before{content:'✓';position:absolute;inset-inline-start:0;top:1px;width:16px;height:16px;border-radius:50%;background:rgba(247,215,122,.22);color:var(--iso-gold);font-size:9px;font-weight:900;display:grid;place-items:center}
.iso-cta{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(247,215,122,.42);border-radius:16px;padding:12px 20px;font-weight:900;font-family:var(--font);font-size:13.5px;background:linear-gradient(135deg,var(--accent,#15c4bd),color-mix(in srgb,var(--accent,#15c4bd) 55%,var(--iso-navy-deep)));color:#fff;box-shadow:0 12px 26px rgba(0,0,0,.32);transition:transform .18s ease}
.iso-cta:hover{transform:translateY(-2px)}
.iso-cta svg{width:16px;height:16px}
html[dir="ltr"] .iso-cta svg{transform:scaleX(-1)}

/* ---------- Tool views (rendered inside .iso-modal-body for tool-open panels) ---------- */
.iso-tool{text-align:start}
.iso-tool-title{margin:0 0 6px;font-size:17px;font-weight:900;color:#fff;text-align:center}
.iso-tool-warn{margin:0 0 16px;padding:10px 14px;border-radius:14px;background:rgba(247,215,122,.12);border:1px solid rgba(247,215,122,.35);color:var(--iso-gold-hi);font-size:12px;font-weight:800;line-height:1.7;text-align:center}
.iso-tool-field{margin:0 0 12px}
.iso-tool-field label{display:block;margin-bottom:6px;font-size:12px;font-weight:800;color:var(--iso-on-dark-muted)}
.iso-tool-field input,.iso-tool-field select,.iso-tool-field textarea{
  width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;
  padding:10px 12px;font-family:var(--font);font-size:13px;
}
.iso-tool-field input:focus,.iso-tool-field select:focus,.iso-tool-field textarea:focus{outline:2px solid var(--iso-teal);outline-offset:1px}
.iso-tool-btn{width:100%;margin-top:4px;border:1px solid rgba(247,215,122,.42);border-radius:14px;padding:12px;font-weight:900;font-family:var(--font);font-size:13.5px;background:linear-gradient(135deg,var(--iso-teal-bright),var(--iso-teal2));color:#08222f;box-shadow:0 12px 24px rgba(21,196,189,.3);transition:transform .18s ease}
.iso-tool-btn:hover{transform:translateY(-2px)}
.iso-tool-output{margin-top:14px;padding:14px;border-radius:14px;background:rgba(21,196,189,.1);border:1px solid rgba(21,196,189,.32);color:var(--iso-on-dark);font-size:13px;font-weight:700;line-height:1.7;text-align:center}

/* injection site map — built over the user-supplied premium base visual
   (assets/img/injection-sites-premium-map.png, labels/glows baked in).
   Hotspots are transparent circles aligned to the image's gold rings. */
.iso-map-wrap{position:relative;width:min(100%,340px);margin:4px auto 14px;border-radius:18px;overflow:hidden;border:1px solid rgba(247,215,122,.3);box-shadow:0 18px 40px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08)}
.iso-map-img{display:block;width:100%;height:auto}
.iso-map-spot{
  position:absolute;left:var(--x);top:var(--y);width:17%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;cursor:pointer;
  border:2px solid transparent;background:transparent;padding:0;
  transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s ease,box-shadow .22s ease;
}
.iso-map-spot:hover,.iso-map-spot:focus-visible{
  transform:translate(-50%,-50%) scale(1.07);
  border-color:rgba(53,224,208,.75);
  box-shadow:0 0 0 5px rgba(53,224,208,.16),0 0 24px rgba(53,224,208,.45),inset 0 0 18px rgba(53,224,208,.18);
}
.iso-map-spot:focus-visible{outline:2px solid var(--iso-teal);outline-offset:3px}
.iso-map-spot.active{
  border-color:var(--iso-gold);
  box-shadow:0 0 0 5px rgba(247,215,122,.2),0 0 26px rgba(247,215,122,.55),inset 0 0 20px rgba(247,215,122,.2);
}
/* Tiny "اضغط" hint that fades in on hover only — keeps the visual clean */
.iso-map-hint{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%) translateY(3px);white-space:nowrap;font-size:9.5px;font-weight:900;color:#08222f;background:var(--iso-gold-grad);border-radius:999px;padding:2px 8px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.iso-map-spot:hover .iso-map-hint,.iso-map-spot:focus-visible .iso-map-hint{opacity:1;transform:translateX(-50%) translateY(0)}
.iso-map-spot.active .iso-map-hint{opacity:0}
.iso-tool-output.flash{animation:isoOutFlash .5s ease}
@keyframes isoOutFlash{0%{box-shadow:0 0 0 0 rgba(247,215,122,.45)}100%{box-shadow:0 0 0 12px rgba(247,215,122,0)}}

/* true/false quiz */
.iso-quiz-progress{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
.iso-quiz-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
.iso-quiz-dot.done{background:var(--iso-gold)}
.iso-quiz-dot.current{background:var(--iso-teal-bright)}
.iso-quiz-q{margin:0 0 16px;font-size:14px;font-weight:800;color:#fff;text-align:center;line-height:1.7}
.iso-quiz-actions{display:flex;gap:10px}
.iso-quiz-btn{flex:1;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;padding:12px;font-weight:900;font-family:var(--font);transition:transform .18s ease,border-color .18s ease}
.iso-quiz-btn:hover{transform:translateY(-2px);border-color:var(--iso-gold)}
.iso-quiz-explain{margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(21,196,189,.1);border:1px solid rgba(21,196,189,.3);font-size:12.5px;font-weight:700;color:var(--iso-on-dark);line-height:1.7;text-align:center}
.iso-quiz-next{margin-top:12px}

/* comparison table */
.iso-table-wrap{overflow-x:auto;border-radius:14px;border:1px solid rgba(255,255,255,.12)}
.iso-table{width:100%;border-collapse:collapse;font-size:12px}
.iso-table th,.iso-table td{padding:10px 10px;text-align:center;border-bottom:1px solid rgba(255,255,255,.08);color:var(--iso-on-dark)}
.iso-table th{background:rgba(255,255,255,.06);color:var(--iso-gold-hi);font-weight:900;font-size:11.5px}
.iso-table tr:last-child td{border-bottom:0}
.iso-table td:first-child,.iso-table th:first-child{font-weight:900;color:#fff;text-align:start;padding-inline-start:12px}

/* storage advisor tabs */
.iso-tabs{display:flex;gap:8px;margin-bottom:14px}
.iso-tab{flex:1;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:var(--iso-on-dark-muted);padding:9px 6px;font-size:11.5px;font-weight:800;font-family:var(--font);transition:all .2s ease}
.iso-tab.active{border-color:var(--iso-gold);background:linear-gradient(135deg,var(--iso-teal),var(--iso-teal2));color:#fff}
.iso-storage-grid{display:grid;gap:10px}
.iso-storage-row{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.05);font-size:12px}
.iso-storage-row b{color:var(--iso-gold-hi);font-weight:800;flex:none}
.iso-storage-row span{color:var(--iso-on-dark);text-align:end}
.iso-reminders{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.iso-reminders li{font-size:11.5px;color:var(--iso-on-dark-muted);padding-inline-start:18px;position:relative}
.iso-reminders li:before{content:'•';position:absolute;inset-inline-start:2px;color:var(--iso-gold)}

/* faq accordion */
.iso-faq-item{border:1px solid rgba(255,255,255,.12);border-radius:14px;margin-bottom:8px;overflow:hidden}
.iso-faq-q{width:100%;text-align:start;padding:12px 14px;background:rgba(255,255,255,.04);color:#fff;font-weight:800;font-size:12.5px;font-family:var(--font);display:flex;justify-content:space-between;align-items:center;gap:8px}
.iso-faq-q:after{content:'+';font-size:16px;color:var(--iso-gold);flex:none;transition:transform .2s ease}
.iso-faq-item.open .iso-faq-q:after{transform:rotate(45deg)}
.iso-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.iso-faq-item.open .iso-faq-a{max-height:180px}
.iso-faq-a p{margin:0;padding:10px 14px 14px;font-size:12px;line-height:1.8;color:var(--iso-on-dark-muted)}
.iso-faq-safe{color:var(--iso-gold-hi)!important;font-weight:700}

.iso-steps{list-style:none;margin:0;padding:0;counter-reset:iso-step;display:grid;gap:10px}
.iso-steps li{counter-increment:iso-step;position:relative;padding-inline-start:34px;font-size:13px;color:var(--iso-on-dark);line-height:1.7;font-weight:700}
.iso-steps li:before{content:counter(iso-step);position:absolute;inset-inline-start:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--iso-gold-grad);color:#08222f;font-size:12px;font-weight:900;display:grid;place-items:center}

.iso-placeholder{text-align:center;padding:10px 6px 4px;color:var(--iso-on-dark-muted);font-size:13px;line-height:1.8}
.iso-placeholder a{color:var(--iso-gold-hi);font-weight:800;text-decoration:underline}

/* ---------- Owner / about card ---------- */
.iso-owner{position:relative;z-index:1;margin-top:26px;display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:20px;border:1px solid rgba(247,215,122,.3);background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.iso-owner-badge{flex:none;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:15px;color:#08222f;background:var(--iso-gold-grad);box-shadow:0 8px 18px rgba(214,166,58,.35)}
.iso-owner-kicker{display:block;margin-bottom:5px;font-size:12.5px;font-weight:900;color:var(--iso-gold-hi)}
.iso-owner-copy p{margin:0;font-size:12px;line-height:1.85;color:var(--iso-on-dark-muted)}

.iso-note{margin:22px 0 0;text-align:center;color:var(--muted2,#8aa0ad);font-size:11.5px;font-weight:700}

/* ---------- Mobile ---------- */
@media(max-width:899px){
  .iso-app{padding:24px 16px 26px}
  .iso-cats{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:8px;padding:2px 2px 10px;margin:0 -4px 4px;scrollbar-width:none}
  .iso-cats::-webkit-scrollbar{display:none}
  .iso-pill{flex:none;min-width:104px;min-height:44px;padding:10px 18px}
  .iso-pill-label{font-size:12px}
  .iso-stage{min-height:400px}
  .iso-ring.r1{width:186px;height:186px}
  .iso-ring.r2{width:262px;height:262px}
  .iso-ring.r3{width:320px;height:320px}
  .iso-pedestal{bottom:calc(50% - 118px);width:132px}
  .iso-pen-holder{width:134px;height:222px}
  .iso-pen{max-height:196px}
  .iso-orbit{--iso-radius:112px}
  .iso-orbit-item{width:66px}
  .iso-orbit-item-icon{width:44px;height:44px;border-radius:16px}
  .iso-orbit-item-icon svg{width:19px;height:19px}
  .iso-orbit-item-label{font-size:9.5px;max-width:70px}
  .iso-modal-wrap{width:min(272px,92%)}
  .iso-modal-wrap.tool-open{width:min(320px,94%)}
  .iso-modal{padding:20px 16px 18px;max-height:70vh}
  .iso-owner{flex-direction:column;align-items:flex-start}
  .iso-quiz-actions{flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  .iso-app{transition:none}
  .iso-ring.r2,.iso-ring.r3,.iso-pen-glow{animation:none}
  .iso-scanner.play{animation:none;opacity:0}
  .iso-pill.snapping .iso-pill-shine{animation:none}
  .iso-pill.active .iso-pill-shine{animation:none}
  .iso-dock.pulse:after{animation:none;opacity:0}
}

/* ═══════════════════════════════════════════════════════════════
   V9 — PREMIUM POLISH PASS
   Targeted, non-structural upgrades layered over the base styles:
   grain texture, richer liquid-gold, a real glass dock base, and
   deeper glass on capsules / nodes / panel. No markup or JS changes.
   ═══════════════════════════════════════════════════════════════ */

/* Liquid-gold: an extra highlight band gives the gradient a metallic roll
   instead of a flat yellow fade. Reused everywhere via var(--iso-gold-grad). */
.iso-section{
  --iso-gold-grad:linear-gradient(135deg,#fff6cf 0%,var(--iso-gold-hi) 20%,var(--iso-gold) 42%,#ffe89a 54%,var(--iso-gold-deep) 74%,var(--iso-gold-shadow) 100%);
}

/* Fine film grain over the whole app shell — breaks the flat vector feel
   and gives the dark teal glass a photographic depth. Sits above the grid
   pseudo but below every positioned child (which all carry a z-index). */
.iso-app:after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
/* A soft warm/cool ambient wash anchored to the dock, so the composition
   reads as lit from the center rather than evenly flat. */
.iso-stage-wrap:before{
  content:'';position:absolute;inset:-8% -4%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 46% 52% at 50% 46%,rgba(21,196,189,.14),transparent 70%),
             radial-gradient(ellipse 60% 40% at 50% 92%,rgba(214,166,58,.08),transparent 72%);
}

/* ---------- Dock: a real glass pedestal the pen stands on ----------
   Colour/glow are global; disc geometry is scoped per-breakpoint so the
   mobile stage (narrow holder) never gets an oversized base. */
.iso-pedestal{
  filter:blur(.4px);
  background:
    radial-gradient(ellipse 62% 60% at 50% 30%,rgba(255,255,255,.20),transparent 62%),
    radial-gradient(ellipse at center,rgba(21,196,189,.26),rgba(5,27,36,.5) 62%,transparent 78%);
  box-shadow:0 10px 30px rgba(21,196,189,.26),inset 0 1px 0 rgba(255,255,255,.18);
}
/* Gold rim line across the base disc + a bright reflection streak. */
.iso-pedestal:before{
  background:linear-gradient(90deg,transparent,rgba(247,215,122,.7),rgba(255,246,207,.9),rgba(247,215,122,.7),transparent);
  box-shadow:0 0 22px rgba(247,215,122,.4),0 0 0 1px rgba(247,215,122,.16);
}
/* Faint standing reflection of the pen cast down onto the disc. */
.iso-pedestal:after{content:'';position:absolute;left:50%;top:-30px;width:70px;height:30px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.16),transparent 72%);filter:blur(3px);pointer-events:none}
@media(min-width:900px){
  .iso-pedestal{bottom:calc(50% - 164px);width:220px;height:42px}
  .iso-pedestal:before{width:156px;height:14px}
}
@media(max-width:899px){
  .iso-pedestal{width:150px;height:30px}
  .iso-pedestal:before{width:104px;height:11px}
  .iso-pedestal:after{width:52px;top:-22px}
}

/* ---------- Orbit nodes: gold halo + tighter depth ---------- */
.iso-orbit-item-icon{
  box-shadow:0 16px 26px color-mix(in srgb,var(--accent,#15c4bd) 34%,transparent),inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(247,215,122,.14);
}
.iso-orbit-item:hover .iso-orbit-item-icon,.iso-orbit-item:focus-visible .iso-orbit-item-icon{
  border-color:var(--iso-gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,#15c4bd) 22%,transparent),0 18px 30px color-mix(in srgb,var(--accent,#15c4bd) 40%,transparent),0 0 20px rgba(247,215,122,.4)
}

/* ---------- Smart panel: gold corner accent + deeper float ---------- */
.iso-modal{box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(247,215,122,.14),inset 0 1px 0 rgba(255,255,255,.12)}
.iso-modal:after{content:'';position:absolute;top:0;inset-inline-end:0;width:120px;height:120px;pointer-events:none;
  background:radial-gradient(circle at 100% 0%,rgba(247,215,122,.16),transparent 68%)}
.iso-modal-body{position:relative;z-index:1}
.iso-cta{box-shadow:0 14px 28px rgba(0,0,0,.34),0 0 0 1px rgba(247,215,122,.18)}

@media(prefers-reduced-motion:reduce){
  .iso-map-spot,.iso-step-card{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   V13 — PREMIUM POLISH: real medicine-capsule nav, softer dock,
   cleaner panel chrome, mobile performance trims.
   ═══════════════════════════════════════════════════════════════ */

/* --- Dock: softer, more diffused (rings/glow were slightly harsh) --- */
.iso-ring{border-color:rgba(21,196,189,.22)}
.iso-ring.r2{border-color:rgba(214,166,58,.17)}
.iso-ring.r3{border-color:rgba(21,196,189,.09)}
.iso-pen-glow{filter:blur(10px)}
.iso-pen-reflect{opacity:.75}

/* --- Smart panel chrome: thin themed scrollbar + calmer close button --- */
.iso-modal{scrollbar-width:thin;scrollbar-color:rgba(21,196,189,.35) transparent}
.iso-modal::-webkit-scrollbar{width:6px}
.iso-modal::-webkit-scrollbar-thumb{background:rgba(21,196,189,.30);border-radius:3px}
.iso-modal::-webkit-scrollbar-track{background:transparent}
.iso-modal-close{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
.iso-modal-close:hover{border-color:rgba(247,215,122,.5)}

/* --- Mobile: bigger touch targets, lighter texture, calmer shadows --- */
@media(max-width:899px){
  .iso-app:after{opacity:.32}
  .iso-modal-close{width:36px;height:36px;font-size:18px}
  .iso-pill:hover{transform:none}
  .iso-map-spot{min-width:44px;min-height:44px}
}

/* ═══════════════════════════════════════════════════════════════
   V11 — CONTENT COMPLETION: video player, image steps gallery,
   insulin types timeline chart. All inside the smart tool panel.
   ═══════════════════════════════════════════════════════════════ */

/* Video player — framed like the rest of the dock glasswork */
.iso-video-frame{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(247,215,122,.35);box-shadow:0 18px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);background:#02141b;margin-bottom:12px}
.iso-video-frame:before{content:'';position:absolute;top:0;left:8%;right:8%;height:2px;z-index:1;border-radius:2px;background:var(--iso-gold-grad);opacity:.8;pointer-events:none}
.iso-video{display:block;width:100%;max-height:min(52vh,380px);background:#000}

/* Image steps — text-first cards; clicking one flips its image card into
   the reveal stage below (only one step emphasized at a time). */
.iso-steps-hint{margin:0 0 12px;text-align:center;font-size:11.5px;font-weight:800;color:var(--iso-gold-hi);background:rgba(247,215,122,.1);border:1px solid rgba(247,215,122,.3);border-radius:999px;padding:7px 12px}
.iso-step-cards{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.iso-step-card{
  display:flex;align-items:center;gap:9px;padding:11px 12px;cursor:pointer;
  border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  font-family:var(--font);text-align:start;
  box-shadow:0 8px 18px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s ease,box-shadow .22s ease;
}
.iso-step-card:hover{transform:translateY(-2px);border-color:rgba(53,224,208,.5)}
.iso-step-card:focus-visible{outline:2px solid var(--iso-teal);outline-offset:2px}
.iso-step-card.active{border-color:var(--iso-gold);background:linear-gradient(180deg,rgba(247,215,122,.14),rgba(255,255,255,.03));box-shadow:0 10px 22px rgba(0,0,0,.3),0 0 16px rgba(247,215,122,.28),inset 0 1px 0 rgba(255,255,255,.16)}
.iso-step-num{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:900;color:#08222f;background:var(--iso-gold-grad);box-shadow:0 4px 10px rgba(0,0,0,.3)}
.iso-step-card.active .iso-step-num{box-shadow:0 0 12px rgba(247,215,122,.6)}
.iso-step-name{font-size:11.5px;font-weight:900;color:#fff;line-height:1.4}
/* Reveal stage: single premium glass card that flips in on selection */
.iso-step-stage{perspective:900px;margin-bottom:4px}
.iso-step-reveal{position:relative;margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(247,215,122,.35);background:rgba(255,255,255,.05);box-shadow:0 16px 36px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);opacity:0;transform:rotateY(60deg) scale(.94);transform-origin:50% 50%}
.iso-step-reveal.in{animation:isoStepFlip .55s cubic-bezier(.22,1,.36,1) both}
@keyframes isoStepFlip{0%{opacity:0;transform:rotateY(60deg) scale(.94)}100%{opacity:1;transform:rotateY(0) scale(1)}}
.iso-step-reveal img{display:block;width:100%;height:150px;object-fit:cover;background:#0a2b36}
.iso-step-reveal figcaption{padding:10px 12px 12px;display:grid;gap:4px}
.iso-step-reveal figcaption b{font-size:12.5px;color:#fff;font-weight:900}
.iso-step-reveal figcaption span{font-size:11px;line-height:1.7;color:var(--iso-on-dark-muted)}
.iso-gallery-num{position:absolute;top:8px;inset-inline-start:8px;z-index:1;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;color:#08222f;background:var(--iso-gold-grad);box-shadow:0 4px 10px rgba(0,0,0,.35)}

/* Insulin types timeline chart (pure CSS — no library) */
.iso-chart{margin-top:14px;padding:14px 12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.iso-chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px}
.iso-chart-head b{font-size:12.5px;color:var(--iso-gold-hi);font-weight:900}
.iso-chart-head span{font-size:10.5px;color:var(--iso-on-dark-muted);font-weight:700}
.iso-chart-row{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:8px;margin-bottom:9px}
.iso-chart-label{font-size:11px;font-weight:800;color:var(--iso-on-dark)}
.iso-chart-track{position:relative;height:14px;border-radius:999px;background:rgba(255,255,255,.07);overflow:visible}
.iso-chart-bar{position:absolute;top:0;bottom:0;inset-inline-start:var(--s);width:var(--w);border-radius:999px;background:linear-gradient(90deg,rgba(53,224,208,.95),rgba(21,196,189,.6) 60%,rgba(21,196,189,.28));box-shadow:0 0 10px rgba(21,196,189,.35),inset 0 1px 0 rgba(255,255,255,.3)}
html[dir="rtl"] .iso-chart-bar{background:linear-gradient(-90deg,rgba(53,224,208,.95),rgba(21,196,189,.6) 60%,rgba(21,196,189,.28))}
.iso-chart-onset{position:absolute;top:50%;inset-inline-start:-2px;width:10px;height:10px;transform:translateY(-50%);border-radius:50%;background:var(--iso-gold-grad);box-shadow:0 0 8px rgba(247,215,122,.75),0 0 0 2px rgba(5,27,36,.8)}
.iso-chart-axis{display:flex;justify-content:space-between;margin:10px 2px 0;padding-top:8px;border-top:1px dashed rgba(255,255,255,.14);font-size:9.5px;color:var(--iso-on-dark-muted);font-weight:700}
.iso-chart-legend{display:flex;justify-content:center;gap:16px;margin-top:9px;font-size:10.5px;color:var(--iso-on-dark-muted);font-weight:800}
.iso-chart-legend .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:5px;vertical-align:-1px}
.iso-chart-legend .dot.gold{background:var(--iso-gold-grad);box-shadow:0 0 6px rgba(247,215,122,.6)}
.iso-chart-legend .dot.teal{background:linear-gradient(135deg,var(--iso-teal-bright),var(--iso-teal));box-shadow:0 0 6px rgba(21,196,189,.5)}

@media(max-width:899px){
  .iso-dock:after{width:170px;height:170px}
  .iso-video{max-height:44vh}
  .iso-step-cards{grid-template-columns:1fr 1fr;gap:7px}
  .iso-step-card{padding:9px 10px;gap:7px}
  .iso-step-name{font-size:10px}
  .iso-step-num{width:20px;height:20px;font-size:10px}
  .iso-step-reveal img{height:118px}
  .iso-steps-hint{font-size:10.5px}
  .iso-map-wrap{width:min(100%,270px)}
  .iso-chart-row{grid-template-columns:78px 1fr}
  .iso-chart-label{font-size:10px}
}

@media(prefers-reduced-motion:reduce){
  .iso-step-reveal{opacity:1;transform:none}
  .iso-step-reveal.in{animation:none}
  .iso-tool-output.flash{animation:none}
}

/* ═══════════════════════════════════════════════════════════════
   V17 — RESTORED TOOLS: 28-day validity simulator + 10-question quiz
   ═══════════════════════════════════════════════════════════════ */

/* --- 28-day rule badge (always visible before input) --- */
.iso-rule28{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:12px 14px;border-radius:16px;border:1px solid rgba(247,215,122,.34);background:linear-gradient(135deg,rgba(247,215,122,.12),rgba(255,255,255,.03))}
.iso-rule28-num{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:20px;font-weight:900;color:#08222f;background:var(--iso-gold-grad);box-shadow:0 8px 18px rgba(214,166,58,.35)}
.iso-rule28-txt{font-size:12px;font-weight:800;color:var(--iso-on-dark);line-height:1.7}

/* --- 28-day result card + progress ring --- */
.iso-28-result{margin-top:14px;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);display:flex;align-items:center;gap:14px}
.iso-28-result.empty{display:block;text-align:center;font-size:12.5px;font-weight:800;color:var(--iso-on-dark-muted)}
.iso-28-result.ok{border-color:rgba(21,196,189,.4)}
.iso-28-result.warn{border-color:rgba(251,113,133,.45);background:rgba(251,113,133,.08)}
.iso-28-ring{flex:none;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--iso-teal-bright) calc(var(--pct,0)*1%),rgba(255,255,255,.1) 0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.iso-28-result.warn .iso-28-ring{background:conic-gradient(#fb7185 calc(var(--pct,0)*1%),rgba(255,255,255,.1) 0)}
.iso-28-ring-in{width:58px;height:58px;border-radius:50%;background:var(--iso-navy-deep);display:grid;place-items:center;text-align:center}
.iso-28-ring-in strong{display:block;font-size:22px;font-weight:900;color:#fff;line-height:1}
.iso-28-ring-in span{font-size:9px;font-weight:800;color:var(--iso-on-dark-muted)}
.iso-28-copy{flex:1;min-width:0}
.iso-28-head{margin:0 0 6px;font-size:13px;font-weight:900;color:#fff;line-height:1.6}
.iso-28-head b{color:var(--iso-gold-hi)}
.iso-28-note{margin:0;font-size:11px;font-weight:700;color:var(--iso-on-dark-muted);line-height:1.7}
.iso-tool-field input[type="date"]{color-scheme:dark}

/* --- Full 10-question quiz --- */
.iso-fq-sub{margin:0 0 14px;text-align:center;font-size:12px;font-weight:700;color:var(--iso-on-dark-muted);line-height:1.7}
.iso-fq-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:12px;font-weight:900;color:var(--iso-gold-hi)}
.iso-fq-head span:first-child{flex:none}
.iso-fq-bar{flex:1;height:7px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.iso-fq-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--iso-teal-bright),var(--iso-teal));transition:width .35s cubic-bezier(.22,1,.36,1)}
.iso-fq-q{margin:0 0 14px;font-size:14.5px;font-weight:900;color:#fff;line-height:1.7;text-align:center}
.iso-fq-opts{display:grid;gap:9px}
.iso-fq-opt{width:100%;text-align:start;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:var(--iso-on-dark);font-family:var(--font);font-size:12.5px;font-weight:800;line-height:1.5;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.iso-fq-opt:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(53,224,208,.5)}
.iso-fq-opt:focus-visible{outline:2px solid var(--iso-teal);outline-offset:2px}
.iso-fq-opt:disabled{cursor:default}
.iso-fq-opt.correct{border-color:#10b981;background:rgba(16,185,129,.16);color:#eafff6}
.iso-fq-opt.wrong{border-color:#fb7185;background:rgba(251,113,133,.14);color:#ffe9ee}
.iso-fq-next{margin-top:14px}

/* Quiz result screen */
.iso-quiz-score{text-align:center;padding:6px 0 4px}
.iso-quiz-ring{width:120px;height:120px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--iso-gold) calc(var(--pct,0)*1%),rgba(255,255,255,.1) 0);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.iso-quiz-ring-in{width:92px;height:92px;border-radius:50%;background:var(--iso-navy-deep);display:grid;place-items:center;text-align:center}
.iso-quiz-ring-in strong{display:block;font-size:34px;font-weight:900;color:#fff;line-height:1}
.iso-quiz-ring-in span{font-size:11px;font-weight:800;color:var(--iso-on-dark-muted)}
.iso-quiz-level{display:inline-block;margin-bottom:10px;padding:7px 16px;border-radius:999px;font-size:14px;font-weight:900;color:#08222f;background:var(--iso-gold-grad);box-shadow:0 8px 18px rgba(214,166,58,.3)}
.iso-quiz-msg{margin:0 0 4px;font-size:12.5px;font-weight:700;color:var(--iso-on-dark);line-height:1.8}
.iso-quiz-restart{margin-top:16px}

@media(max-width:899px){
  .iso-rule28-num{width:40px;height:40px;font-size:17px}
  .iso-28-result{flex-direction:column;text-align:center}
  .iso-28-copy{text-align:center}
  .iso-fq-q{font-size:13.5px}
  .iso-quiz-ring{width:104px;height:104px}
  .iso-quiz-ring-in{width:80px;height:80px}
}

@media(prefers-reduced-motion:reduce){
  .iso-fq-bar i{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   V19 — UNIFIED CATEGORY-PILL & TOPIC-NODE COLOUR FAMILY
   The five pills and every floating topic node previously carried
   their own colour (teal/blue/green/rose/gold), reading as five
   unrelated worlds. Here they all share ONE dark-teal glass family
   with a cyan/white inner shine; gold appears only on hover/active.
   Overrides the per-category --pill / --accent custom properties
   without touching the markup, JS, layout, or interactions.
   ═══════════════════════════════════════════════════════════════ */

/* ---- Category pills: one teal glass body; gold rim only when lit ---- */
.iso-pill-half.r{background:linear-gradient(180deg,rgba(23,182,176,.30),rgba(23,182,176,.12) 55%,rgba(9,43,54,.34))!important}
.iso-pill.active .iso-pill-half.r{background:linear-gradient(180deg,rgba(53,224,208,.5),rgba(23,182,176,.34) 45%,rgba(9,43,54,.4))!important}
.iso-pill:hover{box-shadow:0 16px 30px rgba(2,10,15,.46),inset 0 1px 0 rgba(255,255,255,.3),0 0 16px rgba(23,182,176,.32)!important}
.iso-pill.active{box-shadow:0 0 0 1.5px rgba(247,215,122,.72),0 16px 32px rgba(2,10,15,.44),0 0 22px rgba(23,182,176,.42),0 0 14px rgba(247,215,122,.3),inset 0 1px 0 rgba(255,255,255,.32)!important}

/* ---- Topic nodes: one teal icon family, cyan highlight, gold on hover ---- */
.iso-orbit-item-icon{
  background:linear-gradient(150deg,#1fbdb6,#0c4f52)!important;
  border-color:rgba(247,215,122,.28)!important;
  box-shadow:0 16px 26px rgba(9,52,54,.42),inset 0 1px 0 rgba(190,240,236,.4),0 0 0 1px rgba(247,215,122,.12)!important;
}
.iso-orbit-item:hover .iso-orbit-item-icon,.iso-orbit-item:focus-visible .iso-orbit-item-icon{
  border-color:var(--iso-gold)!important;
  box-shadow:0 0 0 4px rgba(23,182,176,.22),0 18px 30px rgba(9,52,54,.5),0 0 20px rgba(247,215,122,.4)!important;
}
.iso-orbit-item.active .iso-orbit-item-icon{
  border-color:var(--iso-gold)!important;
  box-shadow:0 0 0 5px rgba(23,182,176,.26),0 18px 32px rgba(9,52,54,.5),0 0 18px rgba(247,215,122,.42)!important;
}

/* ---- Panel icon + CTA mirror the same family (no stray topic colours) ---- */
.iso-modal-icon{background:linear-gradient(145deg,#1fbdb6,#0c4f52)!important;box-shadow:0 14px 26px rgba(9,52,54,.42),0 0 0 1px rgba(247,215,122,.3)!important}
.iso-cta{background:linear-gradient(135deg,#17b6b0,#0c5d5c)!important}

/* ---- Center dock pulse also stays in the teal/gold family ---- */
.iso-dock:after{border-color:rgba(53,224,208,.55)!important;background:radial-gradient(circle,rgba(23,182,176,.22),rgba(247,215,122,.06) 55%,transparent 72%)!important}

/* ═══════════════════════════════════════════════════════════════
   V20 — REAL RED/WHITE MEDICINE-CAPSULE PILLS
   All 5 category items now share one true two-tone capsule look:
   translucent medical red half + frosted-white half, gold seam,
   glossy shell, glass rim (gold only on hover/active). The red/
   white sides are pinned to PHYSICAL left/right in both RTL and
   LTR so the capsule reads the same in Arabic and English.
   Overrides the earlier per-category / teal pill fills. CSS only —
   no markup, JS, layout, or interaction change.
   ═══════════════════════════════════════════════════════════════ */

/* Capsule halves — LTR base: left = soft red, right = frosted white */
.iso-pill-half.l{background:linear-gradient(180deg,rgba(255,145,145,.30),rgba(255,112,112,.20) 55%,rgba(255,90,90,.16))!important}
.iso-pill-half.r{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.16) 55%,rgba(240,255,255,.12))!important}
/* RTL (Arabic default): the .l half sits on the right, so swap fills to
   keep red physically on the left and white on the right. */
html[dir="rtl"] .iso-pill-half.l{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.16) 55%,rgba(240,255,255,.12))!important}
html[dir="rtl"] .iso-pill-half.r{background:linear-gradient(180deg,rgba(255,145,145,.30),rgba(255,112,112,.20) 55%,rgba(255,90,90,.16))!important}

/* Active: same two-tone, a touch brighter (never a different colour family) */
.iso-pill.active .iso-pill-half.l{background:linear-gradient(180deg,rgba(255,158,158,.44),rgba(255,112,112,.30) 55%,rgba(255,90,90,.22))!important}
.iso-pill.active .iso-pill-half.r{background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.26) 55%,rgba(240,255,255,.18))!important}
html[dir="rtl"] .iso-pill.active .iso-pill-half.l{background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.26) 55%,rgba(240,255,255,.18))!important}
html[dir="rtl"] .iso-pill.active .iso-pill-half.r{background:linear-gradient(180deg,rgba(255,158,158,.44),rgba(255,112,112,.30) 55%,rgba(255,90,90,.22))!important}

/* Glossier shell + readable label + clearer seam */
.iso-pill:before{background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.05) 60%,transparent)!important}
.iso-pill-seam{width:1.5px!important;background:linear-gradient(180deg,transparent,rgba(247,215,122,.8),rgba(255,242,184,.9) 50%,rgba(247,215,122,.8),transparent)!important;z-index:0!important}
.iso-pill-label{color:#f6fbfb!important;text-shadow:0 1px 4px rgba(0,0,0,.55)!important}

/* Rim: subtle glass by default → soft white/gold glow on hover, gold on active
   (retunes the earlier teal glow so it matches the red/white capsule). */
.iso-pill{border-color:rgba(255,255,255,.24)!important}
.iso-pill:hover{border-color:rgba(247,215,122,.5)!important;box-shadow:0 16px 30px rgba(2,10,15,.46),inset 0 1px 0 rgba(255,255,255,.34),0 0 16px rgba(255,255,255,.22)!important}
.iso-pill.active{border-color:rgba(247,215,122,.8)!important;box-shadow:0 0 0 1.6px rgba(247,215,122,.8),0 16px 32px rgba(2,10,15,.44),0 0 22px rgba(255,150,150,.26),0 0 12px rgba(247,215,122,.38),inset 0 1px 0 rgba(255,255,255,.36)!important}

/* Topic nodes keep the dark-teal glass base but gain a subtle red/white
   sheen so they read from the same capsule family; active stays gold. */
.iso-orbit-item-icon:before{background:linear-gradient(160deg,rgba(255,190,190,.42),rgba(255,255,255,.32) 45%,transparent 76%)!important}

/* ═══════════════════════════════════════════════════════════════
   V21 — BIOTECH HERO SCENE (matches approved reference)
   Diagonal floating pen + cool-blue lighting, faint DNA helix (left),
   ball-and-stick molecule clusters (right), soft particle scatter, and
   a static concentric floor-scanner glow under the needle tip. All
   static CSS/SVG — no continuous heavy loops. Sits behind the dock/
   orbit/panel; every existing interaction is untouched.
   ═══════════════════════════════════════════════════════════════ */

.iso-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;border-radius:28px}
.iso-app{--sci:#39b7ff;--sci-soft:#5fd0ff}

/* Deep radial vignette so the scene reads as one lit chamber */
.iso-scene:before{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 42% 62%,rgba(20,80,120,.28),transparent 62%),
             radial-gradient(60% 50% at 30% 78%,rgba(57,183,255,.16),transparent 70%);}

/* DNA helix — upper-left, faint cyan, gentle vertical drift */
.iso-dna{position:absolute;left:2%;top:2%;width:min(150px,20%);height:82%;opacity:.5;
  filter:drop-shadow(0 0 8px rgba(57,183,255,.35));animation:isoDnaDrift 14s ease-in-out infinite}
.iso-dna .dna-strand{stroke:var(--sci-soft);stroke-width:2;opacity:.55}
.iso-dna .dna-rungs line{stroke:var(--sci);stroke-width:2.4;stroke-linecap:round;opacity:.5}
@keyframes isoDnaDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}

/* Molecule clusters — right/background, very subtle */
.iso-mol{position:absolute;right:1%;top:8%;width:min(300px,42%);height:82%;opacity:.42}
.iso-mol .mol path{stroke:var(--sci-soft);stroke-width:1.6;opacity:.5}
.iso-mol .mol circle{fill:rgba(120,205,255,.22);stroke:var(--sci-soft);stroke-width:1.4}
.iso-mol .mol.dim{opacity:.62}

/* Particle scatter bursting off the pen body (upper-right of centre) */
.iso-particles{position:absolute;top:20%;left:52%;width:38%;height:46%;opacity:.7;
  background:
    radial-gradient(circle,rgba(160,220,255,.9) 40%,transparent 42%) 12% 20%/4px 4px no-repeat,
    radial-gradient(circle,rgba(120,200,255,.8) 40%,transparent 42%) 30% 8%/5px 5px no-repeat,
    radial-gradient(circle,rgba(200,235,255,.9) 40%,transparent 42%) 48% 26%/3px 3px no-repeat,
    radial-gradient(circle,rgba(120,200,255,.7) 40%,transparent 42%) 22% 46%/4px 4px no-repeat,
    radial-gradient(circle,rgba(180,225,255,.85) 40%,transparent 42%) 62% 14%/4px 4px no-repeat,
    radial-gradient(circle,rgba(140,210,255,.7) 40%,transparent 42%) 72% 40%/3px 3px no-repeat,
    radial-gradient(circle,rgba(200,235,255,.8) 40%,transparent 42%) 40% 60%/3px 3px no-repeat,
    radial-gradient(circle,rgba(120,200,255,.6) 40%,transparent 42%) 84% 24%/4px 4px no-repeat,
    radial-gradient(circle,rgba(160,220,255,.7) 40%,transparent 42%) 8% 64%/3px 3px no-repeat;
  filter:drop-shadow(0 0 4px rgba(90,180,255,.5))}

/* Floor scanner — concentric holographic rings + bright core under tip */
.iso-floor{position:absolute;left:calc(50% - 46px);bottom:5%;width:280px;height:74px;transform:translateX(-50%);
  background:
    radial-gradient(circle,rgba(120,215,255,.95) 0 4%,transparent 8%),
    radial-gradient(ellipse 50% 50% at 50% 50%,rgba(57,183,255,.34),transparent 70%);
  filter:blur(.3px)}
.iso-floor:before{content:'';position:absolute;inset:0;margin:auto;width:100%;height:100%;border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,transparent 0 15px,rgba(120,210,255,.28) 15px 16px);
  -webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 78%);
  mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 78%)}
.iso-floor:after{content:'';position:absolute;left:50%;bottom:52%;width:120px;height:40px;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,rgba(150,220,255,.55),transparent 72%);filter:blur(3px)}

/* Refine the existing orbit rings to thin, elegant cyan */
.iso-ring.r1{border-color:rgba(57,183,255,.22)}
.iso-ring.r2{border-color:rgba(120,210,255,.16)}
.iso-ring.r3{border-color:rgba(57,183,255,.10)}

/* ---- Pen: diagonal, floating, cool-blue rim lighting ---- */
.iso-pedestal{opacity:.5}
.iso-pen-glow{background:radial-gradient(circle,rgba(57,183,255,.4),transparent 66%)!important}
.iso-pen{
  transform:rotate(23deg);
  filter:drop-shadow(0 26px 30px rgba(0,10,20,.55)) drop-shadow(0 0 30px rgba(57,183,255,.4)) drop-shadow(-6px 0 14px rgba(120,210,255,.22)) saturate(1.06) brightness(1.02)!important;
}
.iso-pen-reflect{display:none}

/* Keep the scene from stealing pointer/opacity when a card is open */
.iso-stage.card-open .iso-scene{opacity:.4;transition:opacity .3s ease}
.iso-scene{transition:opacity .3s ease}

/* ---- Mobile: scale the scene down, keep it light ---- */
@media(max-width:899px){
  .iso-dna{width:26%;opacity:.42}
  .iso-mol{width:52%;opacity:.34}
  .iso-particles{opacity:.5}
  .iso-floor{width:210px;height:58px;left:calc(50% - 34px)}
  .iso-pen{transform:rotate(20deg)}
}

@media(prefers-reduced-motion:reduce){
  .iso-dna{animation:none}
}

/* ═══════════════════════════════════════════════════════════════
   V22 — CENTER HERO = APPROVED PEN SCENE IMAGE
   The old CSS/SVG pen and the recreated DNA/molecule/floor layers are
   replaced by the exact approved render (pen + DNA + molecules + cyan
   floor scanner baked in). The image's dark background is blended into
   the dark UI with a soft elliptical edge fade so there is no visible
   box. No yellow floor glow remains.
   ═══════════════════════════════════════════════════════════════ */

/* Neutralise any leftover old-pen / recreated-scene visuals */
.iso-pedestal,.iso-scene,.iso-floor,.iso-particles,.iso-pen-glow,.iso-pen-reflect{display:none!important}

/* Rings kept only as a very faint outer frame (no gold, cyan only) */
.iso-ring.r1{opacity:.35;border-color:rgba(57,183,255,.14)!important}
.iso-ring.r2{opacity:.28;border-color:rgba(120,210,255,.10)!important;border-style:solid!important;animation:none!important}
.iso-ring.r3{opacity:.4;border-color:rgba(57,183,255,.10)!important}

/* Center hero image — larger, crisp, blended, dominant */
.iso-hero-holder{position:relative;z-index:1;display:grid;place-items:center;width:100%;pointer-events:none}
.iso-hero-img{
  display:block;width:auto;height:clamp(380px,46vw,520px);max-width:98%;object-fit:contain;
  pointer-events:none;
  filter:saturate(1.05) drop-shadow(0 0 30px rgba(57,183,255,.26));
  /* Soft elliptical edge fade dissolves the render's dark rectangular
     border into the dark UI while keeping the pen/scene detail crisp.
     (No screen blend — it washed the pen and lifted the background.) */
  -webkit-mask-image:radial-gradient(ellipse 82% 86% at 50% 50%,#000 58%,rgba(0,0,0,.5) 82%,transparent 100%);
  mask-image:radial-gradient(ellipse 82% 86% at 50% 50%,#000 58%,rgba(0,0,0,.5) 82%,transparent 100%);
}

/* When a topic panel opens, recede the hero so the panel stays readable */
.iso-stage.card-open .iso-hero-holder{opacity:.28;transform:scale(.94);transition:opacity .3s ease,transform .3s ease}
.iso-hero-holder{transition:opacity .3s ease,transform .3s ease}
.iso-stage.card-open .iso-ring{opacity:.14}

/* ---- Mobile: scale the hero down cleanly, no overflow ---- */
@media(max-width:899px){
  .iso-hero-img{height:clamp(300px,72vw,380px);max-width:94%}
  .iso-ring.r1,.iso-ring.r2,.iso-ring.r3{opacity:.22}
}

/* V23 fix — ensure the hero recedes when a topic panel is open (belt & braces
   on both the holder and the image so the panel always reads cleanly). */
.iso-stage.card-open .iso-hero-holder,.iso-stage.card-open .iso-hero-img{opacity:.3!important;transition:opacity .3s ease!important}

/* ═══════════════════════════════════════════════════════════════
   V25 — APPROVED SCENE AS A BLENDED HERO BACKGROUND (no poster box)
   The image is a full-stage background layer whose edges are fully
   dissolved by an aggressive radial mask, then a vignette + teal
   overlay melts whatever remains into the deep-teal hero. The pen
   stays large, crisp and central; no rectangular boundary shows.
   ═══════════════════════════════════════════════════════════════ */

.iso-stage{min-height:520px}

/* Full-stage background layer, centred, behind rings/nodes/panel */
.iso-hero-holder{
  position:absolute!important;inset:0!important;z-index:0!important;
  display:grid;place-items:center;overflow:hidden;pointer-events:none;width:auto;
}
.iso-hero-img{
  display:block;width:auto;max-width:130%!important;height:clamp(430px,62vh,600px)!important;
  object-fit:contain;pointer-events:none;
  filter:saturate(1.05) contrast(1.02) drop-shadow(0 0 42px rgba(57,183,255,.22))!important;
  /* Aggressive elliptical fade — fully transparent well inside the image box
     so the rectangular boundary is never visible. */
  -webkit-mask-image:radial-gradient(ellipse 58% 68% at 50% 47%,#000 26%,rgba(0,0,0,.55) 58%,transparent 84%)!important;
  mask-image:radial-gradient(ellipse 58% 68% at 50% 47%,#000 26%,rgba(0,0,0,.55) 58%,transparent 84%)!important;
}
/* Vignette + teal wash over the whole stage → dissolves any residual edge
   into the deep-teal background (transparent centre keeps the pen bright). */
.iso-hero-holder:after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 68% at 50% 48%,transparent 44%,rgba(5,27,36,.5) 78%,rgba(5,27,36,.9) 100%),
    radial-gradient(ellipse 88% 96% at 50% 50%,transparent 62%,rgba(9,43,54,.55) 100%);
}

/* Keep the dock (rings) centred over the blended scene */
.iso-dock{position:absolute;inset:0;z-index:1;display:grid;place-items:center}
.iso-stage.card-open .iso-hero-holder,.iso-stage.card-open .iso-hero-img{opacity:.32!important}

@media(max-width:899px){
  .iso-stage{min-height:440px}
  .iso-hero-img{height:clamp(330px,80vw,430px)!important;max-width:124%!important}
}