/* ═══════════════════════════════════════════════════════════
   SHARED STYLES — PhysioSync / PAH AI Physiotherapy
   Linked by all 4 pages (index/exercises/about/account).
   Contains: reconciled design tokens, base reset, and CSS that
   was previously duplicated identically across exercises.html/
   about.html/account.html (#navbar, footer, .reveal, .theme-tgl,
   .edge-glow, blob/gradient keyframes).

   NOTE: index.html uses a genuinely different navbar/footer markup
   family (.navbar/.nav-link/.site-footer/.footer-links, vs the
   #navbar/.nl/.footer/.f-lks family shared by the other 3 pages) —
   that is a real structural difference, not just duplicated CSS, so
   index.html's own <style> block keeps its own navbar/footer rules
   rather than being force-merged here. Only truly identical rules
   (tokens, reset, edge-glow, reveal, theme toggle, shared keyframes)
   were extracted for index.html.
   ═══════════════════════════════════════════════════════════ */

:root{
  --brand:#e11d48;--accent:#fb7185;--green:#12d999;--yellow:#f5a524;--blue:#3b82f6;
  --purple:#a78bfa;--surface:var(--w04);--border:var(--w08);
  --card:rgba(17,17,22,1);--text:#f2f2f5;--muted:#a3a7b7;--submuted:#75798c;
  --bg:#08080b;--bg-strong:#000;--bg-alt:#0d0812;--heading:#fbfbfd;--glass:rgba(7,7,10,.9);
  --w03:rgba(255,255,255,.035);--w04:rgba(255,255,255,.045);--w05:rgba(255,255,255,.06);
  --w06:rgba(255,255,255,.07);--w07:rgba(255,255,255,.085);--w08:rgba(255,255,255,.1);
  --w09:rgba(255,255,255,.11);--w10:rgba(255,255,255,.13);--w12:rgba(255,255,255,.16);
  --card1:#131318;--card2:#141419;
  --input-bg:var(--w05);--shadow-strength:.7;--shadow-color:rgba(0,0,0,.55);

  /* spacing scale */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;
  /* radius scale */
  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-pill:999px;
  /* unified shadow system — replaces ad hoc hardcoded rgba() shadows */
  --shadow-brand:color-mix(in srgb,var(--brand) 28%,transparent);
  --shadow-xs:0 1px 2px -1px var(--shadow-color);
  --shadow-sm:0 1px 0 var(--w05) inset,0 8px 20px -12px var(--shadow-color);
  --shadow-md:0 1px 0 var(--w05) inset,0 24px 44px -30px var(--shadow-color);
  --shadow-lg:0 1px 0 var(--w05) inset,0 32px 64px -28px var(--shadow-color);
  --shadow-glow-brand:0 8px 28px -6px var(--shadow-brand);
  --glass-blur:20px;
}
:root[data-theme="light"]{
  --surface:rgba(20,20,30,.04);--border:rgba(20,20,30,.12);
  --card:#ffffff;--text:#1a1a22;--muted:#5b5f70;--submuted:#828596;
  --bg:#f3f1f6;--bg-strong:#ffffff;--bg-alt:#ece9f2;--heading:#0c0c12;--glass:rgba(255,255,255,.86);
  --w03:rgba(20,20,30,.045);--w04:rgba(20,20,30,.06);--w05:rgba(20,20,30,.08);
  --w06:rgba(20,20,30,.09);--w07:rgba(20,20,30,.11);--w08:rgba(20,20,30,.13);
  --w09:rgba(20,20,30,.15);--w10:rgba(20,20,30,.18);--w12:rgba(20,20,30,.22);
  --card1:#ffffff;--card2:#ffffff;
  /* Standardized on the neutral shadow tint (previously exercises.html alone used
     a violet-tinted rgba(76,29,149,.2) while about/account used this neutral
     value — that was drift; the neutral value is now canonical everywhere). */
  --input-bg:rgba(20,20,30,.055);--shadow-strength:.16;--shadow-color:rgba(20,20,35,.1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;width:100%}
body{font-family:'Inter',sans-serif;color:var(--text);background:var(--bg);overflow-x:hidden;min-height:100vh;width:100%;max-width:100vw;transition:background .3s ease,color .3s ease;animation:pageFadeIn .5s ease both}
@keyframes pageFadeIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body{animation:none}}
h1,h2,h3,h4,h5,h6{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700}
img{max-width:100%;display:block}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
/* Visually hidden but still reachable by screen readers — for aria-live
   announcer regions that must never render on screen (see exercises.html's
   #sr-announcer). "clip"/absolute, not display:none, so assistive tech still
   picks up text changes. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg-strong)}
::-webkit-scrollbar-thumb{background:var(--brand);border-radius:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:4px;
}

/* ═══ NAVBAR (shared by exercises.html / about.html / account.html) ═══ */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;height:62px;
  background:var(--glass);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--w06);gap:12px;
}
.nav-logo{display:flex;align-items:center;gap:9px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:900;font-size:1.05rem}
.nav-logo span{color:var(--brand)}
.brand-icon,.brand-text{width:auto;display:block}
.brand-text-light{display:none}
:root[data-theme="light"] .brand-text-dark{display:none}
:root[data-theme="light"] .brand-text-light{display:block}
.nav-links{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.nl{color:var(--muted);font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.04em;padding:6px 13px;border-radius:8px;transition:all .2s}
.nl:hover{color:var(--heading);background:var(--w06)}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-home{
  padding:6px 14px;border-radius:8px;border:1px solid var(--w10);
  background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer;
  color:var(--muted);font-family:'Plus Jakarta Sans',sans-serif;font-size:.73rem;font-weight:600;
  transition:all .2s;display:flex;align-items:center;gap:5px;
}
.nav-home:hover{color:var(--heading);border-color:var(--w12)}
.theme-tgl{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--w05);border:1px solid var(--w10);color:var(--heading);cursor:pointer;
  transition:all .2s;flex-shrink:0;
}
.theme-tgl:hover{background:var(--w08);border-color:var(--w12);transform:scale(1.1) rotate(-8deg)}
.theme-tgl:active{transform:scale(.9)}
.theme-tgl svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
/* ACCOUNT DROPDOWN — the navbar's account icon becomes a popover showing
   avatar/name/email and quick links, instead of a plain link straight to
   account.html. Shared by every page that has the icon (exercises.html,
   hospitals.html, research.html); account.html/about.html don't show it
   (you're either already there or it never had the icon). */
.nav-streak{
  display:flex;align-items:center;gap:6px;padding:5px 13px;border-radius:100px;
  background:rgba(225,29,72,.1);border:1px solid rgba(225,29,72,.25);
  color:var(--accent);font-family:'Plus Jakarta Sans',sans-serif;font-size:.72rem;font-weight:700;white-space:nowrap;
}
/* Urdu language mode — applies once the shared toggle (reveal.js) adds
   body.lang-ur. Noto Sans Arabic for general text (more readable at
   compact UI sizes); each page may layer its own Noto Nastaliq Urdu
   override (the traditional Urdu script style) onto its own large
   headings/prose selectors, since those class names differ per page. */
body.lang-ur,body.lang-ur *{font-family:'Noto Sans Arabic','Inter',sans-serif!important}
/* Safety net for Urdu text overflowing narrow containers (seen live on a
   real phone: a heading mixing a Latin brand name with Urdu script bled
   past its card's edges on a narrow screen, though it wrapped fine in
   every width tested in the browser devtools — likely a mobile-specific
   font/bidi rendering quirk that's hard to reproduce/diagnose remotely).
   Forces a break rather than overflow regardless of the exact cause. */
body.lang-ur *{overflow-wrap:break-word;word-break:break-word}
.acct-dd{position:relative}
.acct-dd-trigger{overflow:hidden}
.acct-dd-panel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:600;
  width:250px;background:var(--card1);border:1px solid var(--w10);border-radius:16px;
  box-shadow:0 20px 50px var(--shadow-color);padding:16px;
  opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;
  transition:opacity .2s ease,transform .2s cubic-bezier(.2,.8,.2,1);
  transform-origin:top right;
}
.acct-dd-panel.open{opacity:1;transform:none;pointer-events:auto}
.acct-dd-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:8px;border-bottom:1px solid var(--w06)}
.acct-dd-avatar-lg{width:44px;height:44px;border-radius:50%;background:var(--w06);border:1px solid var(--w09);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;color:var(--muted)}
.acct-dd-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.acct-dd-avatar-letter{
  width:100%;height:100%;border-radius:50%;display:none;align-items:center;justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--brand),#7c3aed);
}
.acct-dd-trigger .acct-dd-avatar-letter{font-size:.72rem}
.acct-dd-avatar-lg .acct-dd-avatar-letter{font-size:1rem}
.acct-dd-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:.9rem;color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.acct-dd-email{font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;margin-top:2px}
.acct-dd-lks{display:flex;flex-direction:column;gap:2px}
.acct-dd-lks a,.acct-dd-lks button{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
  color:var(--text);font-size:.8rem;font-weight:600;background:none;border:none;
  width:100%;text-align:left;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s;
}
.acct-dd-lks a:hover,.acct-dd-lks button:hover{background:var(--w06)}
.acct-dd-lks svg{width:15px;height:15px;stroke:var(--muted);flex-shrink:0}
.acct-dd-lks .acct-dd-logout{color:var(--brand)}
.acct-dd-lks .acct-dd-logout svg{stroke:var(--brand)}
@media(max-width:540px){.acct-dd-panel{width:220px;right:-10px}}
.ham{display:none;flex-direction:column;gap:4px;padding:5px;cursor:pointer}
.ham span{display:block;width:20px;height:2px;background:var(--heading);border-radius:1px;transition:.3s}
.mob-menu{
  display:none;position:fixed;top:62px;left:0;right:0;z-index:499;
  background:var(--glass);border-bottom:1px solid var(--w06);
  padding:14px 20px;flex-direction:column;gap:4px;
}
.mob-menu.open{display:flex}
.mob-menu .nl{font-size:.88rem;padding:11px 12px}

/* ═══ AMBIENT EDGE GLOW (shared by all 4 pages) ═══ */
.edge-glow{position:fixed;z-index:9998;pointer-events:none;
  background:linear-gradient(90deg,var(--brand),var(--purple),var(--blue),var(--accent),var(--brand));
  background-size:300% 100%;animation:edgeGlowShift 8s linear infinite;
  box-shadow:0 0 16px rgba(225,29,72,.55)}
.edge-glow.et{top:0;left:0;right:0;height:3px}
.edge-glow.eb{bottom:0;left:0;right:0;height:3px}
.edge-glow.el{top:0;bottom:0;left:0;width:3px;background:linear-gradient(180deg,var(--brand),var(--purple),var(--blue),var(--accent),var(--brand));background-size:100% 300%;animation-name:edgeGlowShiftV}
.edge-glow.er{top:0;bottom:0;right:0;width:3px;background:linear-gradient(180deg,var(--brand),var(--purple),var(--blue),var(--accent),var(--brand));background-size:100% 300%;animation-name:edgeGlowShiftV}
@keyframes edgeGlowShift{0%{background-position:0% 0}100%{background-position:300% 0}}
@keyframes edgeGlowShiftV{0%{background-position:0 0%}100%{background-position:0 300%}}
@media(prefers-reduced-motion:reduce){.edge-glow{animation:none}}

/* ═══ SHARED KEYFRAMES (blobs + gradient shimmer) ═══ */
@keyframes blobFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,-18px) scale(1.08)}}
@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ═══ AMBIENT ECG PULSE LINE — a glowing heart-monitor waveform continuously
   scrolling across the hero, constant and not scroll-triggered. Built as a
   repeating CSS background tile (background-repeat:repeat-x) rather than a
   fixed number of duplicated SVG copies — the earlier duplicated-copy
   approach only ever drew exactly 2 units across the full container width,
   so once scrolled it ran out of pattern to show and visibly went blank
   before snapping back. A repeat-x background tiles as many copies as the
   container needs regardless of width, so shifting by exactly one tile
   width is seamless by construction, with no gap. Confined to a fixed-
   height strip well clear of surrounding content so it never overlaps
   text/badges. ═══ */
.physio-ecg{
  position:absolute;top:68px;left:0;width:100%;height:40px;overflow:hidden;
  pointer-events:none;z-index:0;opacity:.45;
  filter:drop-shadow(0 0 4px rgba(225,29,72,.65));
  background-repeat:repeat-x;
  background-size:160px 40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40'%3E%3Cpath d='M0,20 L28,20 L33,12 L38,20 L48,20 L54,3 L60,36 L66,20 L76,20 L82,10 L88,20 L160,20' fill='none' stroke='%23e11d48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  animation:ecgScroll 3.2s linear infinite;
}
@keyframes ecgScroll{from{background-position-x:0}to{background-position-x:-160px}}
@media(prefers-reduced-motion:reduce){.physio-ecg{animation:none}}
:root[data-theme="light"] .physio-ecg{opacity:.4}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ═══ SCROLL REVEAL (shared base — wired up per-page via reveal.js) ═══ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
.ex-card.reveal,.hosp-card.reveal,.research-card.reveal,.mission-card.reveal,.value-card.reveal,.stat-box.reveal,.ab-cta-box.reveal,.dash-m.reveal,.recent-row.reveal{transform:translateY(32px) scale(.95)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ═══ FOOTER (shared by exercises.html / about.html / account.html —
   index.html keeps its own distinct .site-footer/.footer-links family) ═══ */
.footer{
  position:relative;padding:0 24px 28px;background:var(--bg-strong);
  border-top:1px solid var(--w06);overflow:hidden;
}
.footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(225,29,72,.5),transparent);
}
.f-badges{
  max-width:1320px;margin:0 auto;padding:20px 0 18px;
  display:flex;flex-wrap:wrap;gap:12px;border-bottom:1px solid var(--w06);margin-bottom:26px;
}
.f-badge{
  display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;
  background:var(--w03);border:1px solid var(--w08);
  font-size:.74rem;color:var(--muted);font-weight:500;
}
.f-badge svg{width:14px;height:14px;stroke:#00e5a0;flex-shrink:0}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;max-width:1320px;margin:0 auto 24px}
.f-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.f-brand-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:900;font-size:1.1rem}
.f-brand-name span{color:var(--brand)}
.f-desc{color:var(--muted);font-size:.79rem;line-height:1.7;max-width:260px}
.f-hd{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--heading);margin-bottom:13px}
.f-lks{display:flex;flex-direction:column;gap:9px}
.f-lks a,.f-lks span{color:var(--muted);font-size:.79rem;transition:color .2s,padding-left .2s}
.f-lks a:hover{color:var(--heading);padding-left:2px}
.f-bot{max-width:1320px;margin:0 auto;padding-top:16px;border-top:1px solid var(--w05);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.f-bot span{color:var(--submuted);font-size:.69rem}
.f-bot-brand{display:flex;flex-direction:column;gap:3px}
.f-powered{display:flex;align-items:center;gap:5px;color:var(--submuted);font-size:.66rem}
.f-powered img{width:13px;height:13px;object-fit:contain;flex-shrink:0}
.f-soc{display:flex;gap:12px}
.f-soc a{width:30px;height:30px;border-radius:50%;background:var(--w05);border:1px solid var(--w08);display:flex;align-items:center;justify-content:center;color:var(--submuted);transition:all .2s}
.f-soc a svg{width:15px;height:15px}
.f-soc a:hover{color:#fff;background:var(--brand);border-color:var(--brand);transform:translateY(-2px)}
.f-soc a:active{transform:scale(.9)}
.f-bot-lks{display:flex;gap:18px}
.f-bot-lks a{color:var(--submuted);font-size:.69rem;transition:color .2s}
.f-bot-lks a:hover{color:var(--heading)}
@media(max-width:1024px){.footer-cols{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.nav-links{display:none}.nav-home{display:none}.ham{display:flex}}
@media(max-width:540px){.f-badges{gap:8px}.f-badge{font-size:.68rem;padding:7px 13px}.footer-cols{grid-template-columns:1fr}}

/* ═══ PAGE LOADER — a full-screen branded splash shown briefly whenever a
   page loads or the user navigates to another page (this is a static
   multi-page site, no client-side router, so a real browser navigation
   happens on every link click — this overlay bridges that moment instead
   of a blank flash). Built from the same liquid-fill logo used for
   index.html's 3D-model loading state: a dim outline copy of the icon
   stays visible as the "empty" shape, while a full-color copy is
   progressively revealed by an animated-height clipping wrapper, like a
   glass filling with water. Shown/hidden and wired to link-clicks by
   reveal.js's initPageLoader(). ═══ */
.page-loader{
  position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;gap:6px;
  align-items:center;justify-content:center;background:#000;transition:opacity .45s ease;
}
.page-loader.hide{opacity:0;pointer-events:none}
.loader-logo{position:relative;width:64px;height:64px}
.loader-logo-base{width:100%;height:100%;object-fit:contain;opacity:.16;filter:grayscale(1)}
.loader-logo-fill{
  position:absolute;left:0;bottom:0;width:100%;height:8%;overflow:hidden;
  animation:loaderFillRise 2.2s ease-in-out infinite alternate;
}
.loader-logo-fill img{
  position:absolute;left:0;bottom:0;width:64px;height:64px;object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(225,29,72,.55));
}
.loader-logo-fill::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  animation:loaderWaveGlint 2.2s ease-in-out infinite alternate;
}
.loader-brand{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.15rem;
  letter-spacing:.02em;color:#fff;margin-top:6px;
}
.loader-sub{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#64748b}
@keyframes loaderFillRise{0%{height:8%}100%{height:94%}}
@keyframes loaderWaveGlint{0%{opacity:.3}100%{opacity:.9}}
@media(prefers-reduced-motion:reduce){.loader-logo-fill{animation:none;height:94%}.loader-logo-fill::after{animation:none}}