/* Shared chrome: scroll progress bar, skip link, navbar, toast, reveal-on-scroll */

#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent-grad,var(--accent));z-index:200;box-shadow:0 0 10px var(--glow);transition:width .1s linear}

.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;background:var(--accent);color:#fff;padding:0;border-radius:0 0 8px 0;z-index:300;inset-inline-start:0;top:0}
.skip:focus{width:auto;height:auto;clip:auto;clip-path:none;padding:.6rem 1rem;overflow:visible}

/* Floating glass-pill navbar — the shared "Digital Observatory" design
   language. Same DOM contract as before (.mbs-brand / .mbs-nav-links /
   .mbs-nav-actions); every app gets the new look with zero markup changes.
   NOTE: no transform here on purpose — a transformed ancestor would become
   the containing block for the notification panel's position:fixed. */
/* Full-bleed on purpose: the nav bar itself always spans the viewport (minus
   the fixed side gutter below) regardless of any app's own --maxw content
   cap. Single source of truth — do not re-add a per-page max-width override
   for nav.mbs-nav; change it here and every app gets it at once. */
nav.mbs-nav{position:fixed;top:14px;left:14px;right:14px;margin-inline:auto;max-width:none;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:.45rem .55rem;border:1px solid var(--border);border-radius:999px;
  background:color-mix(in srgb,var(--bg) 74%,transparent);
  backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  box-shadow:0 8px 30px -20px rgba(0,0,0,.55);
  transition:box-shadow .35s,background .35s,border-color .35s}
nav.mbs-nav.scrolled{background:color-mix(in srgb,var(--bg) 88%,transparent);
  border-color:color-mix(in srgb,var(--accent) 22%,var(--border));
  box-shadow:0 14px 44px -20px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--accent) 8%,transparent)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Fades out content scrolling through the gap above the floating pill nav.
   Injected by initChrome() alongside the aurora backdrop. */
.mbs-top-fade{position:fixed;top:0;left:0;right:0;height:30px;z-index:99;pointer-events:none;
  background:linear-gradient(var(--bg) 25%,transparent)}

/* Aurora backdrop — injected by initChrome() on every page (skipped when the
   page already ships its own .sky). Sits behind everything, pointer-inert. */
:root{--hero-glow-1:rgba(59,130,246,.16);--hero-glow-2:rgba(139,92,246,.13);--hero-glow-3:rgba(6,182,212,.10)}
html[data-theme="light"]{--hero-glow-1:rgba(37,99,235,.10);--hero-glow-2:rgba(124,58,237,.08);--hero-glow-3:rgba(8,145,178,.07)}
.sky{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.sky .blob{position:absolute;width:56vmax;height:56vmax;border-radius:50%;filter:blur(90px);opacity:.9;will-change:transform}
.sky .b1{background:radial-gradient(circle,var(--hero-glow-1),transparent 65%);top:-18vmax;inset-inline-start:-12vmax;animation:mbs-drift1 26s ease-in-out infinite alternate}
.sky .b2{background:radial-gradient(circle,var(--hero-glow-2),transparent 65%);bottom:-20vmax;inset-inline-end:-14vmax;animation:mbs-drift2 32s ease-in-out infinite alternate}
.sky .b3{background:radial-gradient(circle,var(--hero-glow-3),transparent 65%);top:30%;inset-inline-start:40%;width:44vmax;height:44vmax;animation:mbs-drift3 38s ease-in-out infinite alternate}
@keyframes mbs-drift1{to{transform:translate(9vmax,7vmax) scale(1.12)}}
@keyframes mbs-drift2{to{transform:translate(-8vmax,-6vmax) scale(1.08)}}
@keyframes mbs-drift3{to{transform:translate(-6vmax,8vmax) scale(.92)}}
.sky .grid-lines{position:absolute;inset:0;background:
  linear-gradient(var(--border) 1px,transparent 1px),
  linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:64px 64px;opacity:.16;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 0%,transparent 78%)}
@media (prefers-reduced-motion:reduce){.sky .blob{animation:none}}
.mbs-brand{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;color:var(--text);direction:ltr;unicode-bidi:isolate;width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%,rgba(59,130,246,0.20),rgba(255,255,255,0.04));border:1px solid var(--border);box-shadow:0 0 14px -4px var(--glow),inset 0 0 10px -6px var(--glow);transition:box-shadow .3s,transform .2s}
.mbs-brand:hover{box-shadow:0 0 20px -2px var(--glow);transform:scale(1.05)}
.mbs-brand span{color:var(--accent)}
.mbs-nav-links{display:flex;gap:.15rem;align-items:center;margin-inline-start:.9rem;margin-inline-end:auto}
.mbs-nav-links a{font-size:.88rem;color:var(--muted);position:relative;padding:.38rem .85rem;border-radius:999px;border:1px solid transparent;transition:color .25s,background .25s,border-color .25s}
.mbs-nav-links a:hover,.mbs-nav-links a:focus-visible{color:var(--text);background:var(--surface)}
.mbs-nav-links a.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
.mbs-nav-actions{display:flex;gap:.5rem;align-items:center}
.btn-icon{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:10px;cursor:pointer;font-family:var(--font-mono);font-size:.78rem;padding:.45rem .7rem;display:flex;align-items:center;gap:.35rem;transition:border-color .25s,background .25s,transform .15s}
.btn-icon:hover{border-color:var(--accent);background:rgba(59,130,246,0.10);box-shadow:0 4px 14px -8px var(--glow);transform:translateY(-1px)}
.btn-icon:active{transform:scale(.96)}
.lang-toggle b{color:var(--accent)}

footer.mbs-footer{border-top:1px solid var(--border);text-align:center;padding:2.4rem 1.2rem;color:var(--muted);font-size:.88rem}
.mbs-back{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.85rem;color:var(--accent);margin-top:.4rem}
html[dir="rtl"] .mbs-back .chev{transform:scaleX(-1)}

#toast{position:fixed;bottom:1.6rem;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg);border:1px solid var(--border);color:var(--text);padding:.75rem 1.3rem;border-radius:12px;font-size:.85rem;backdrop-filter:blur(12px);box-shadow:var(--shadow-lg);z-index:600;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:min(92vw,420px);text-align:center;line-height:1.6;word-break:break-word}
@media(max-width:480px){#toast{bottom:1rem;font-size:.82rem;padding:.7rem 1rem}}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.error{background:var(--err);border-color:transparent;color:#fff}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

@media(max-width:560px){
  nav.mbs-nav{top:8px;left:8px;right:8px;padding:.35rem .45rem}
  .mbs-nav-links{margin-inline-start:.5rem;gap:.1rem}
  .mbs-nav-links a{font-size:.8rem;padding:.32rem .6rem}
  .mbs-nav-actions{gap:.35rem}
  .btn-icon{padding:.4rem .55rem;font-size:.72rem}
  /* The notification-bell dropdown (built with inline styles in
     notificationBell.js) is a fixed 320px panel anchored to the bell. On a
     narrow phone that anchored width ran off-screen and cut the text off.
     Re-pin it to the viewport with equal side margins so it's always fully
     visible (below the floating pill nav). !important overrides the JS
     inline styles. */
  #mbsNotifPanel{
    position:fixed !important;
    top:64px !important;
    inset-inline:0 !important;
    width:auto !important;
    margin:0 .8rem !important;
    max-height:72vh !important;
  }
}

/* ============================================================
   Shared hero eyebrow — one visual language across every app.
   A tinted pill with the app's own hue + an icon, matching the
   look the Finance / Books / Arcade pages already had.
   Usage: <span class="mbs-eyebrow" style="--eb:#F59E0B;--eb-icon:'📝'">MBS · یادداشت‌ها</span>
   (plain text only, so data-i18n textContent swaps keep working)
   ============================================================ */
.mbs-eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.34rem 1rem;border-radius:999px;
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--eb,var(--accent));
  background:color-mix(in srgb,var(--eb,var(--accent)) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--eb,var(--accent)) 30%,var(--border));
  box-shadow:0 0 20px color-mix(in srgb,var(--eb,var(--accent)) 14%,transparent);
  margin-bottom:1rem;
}
html[lang="fa"] .mbs-eyebrow{font-family:var(--font-fa);letter-spacing:.03em;text-transform:none}
.mbs-eyebrow::before{content:var(--eb-icon,'◆');font-size:.95rem;line-height:1;flex:0 0 auto}

/* ============================================================
   Shared login gate — one design for every account-only tool.
   Blurred full-screen overlay + a tinted card (icon, title, text,
   CTA). Per-app accent via --gh. Built from the Finance gate,
   which was the nicest of the old one-off gates.
   ============================================================ */
.mbs-gate{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:1.5rem;
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.mbs-gate[hidden]{display:none!important}
/* Inline variant: an empty-state that sits in the content flow where the list
   would be, not a full-screen overlay. */
.mbs-gate--inline{position:static;inset:auto;z-index:auto;min-height:0;padding:1rem;
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.mbs-gate-card{max-width:420px;width:100%;text-align:center;
  background:color-mix(in srgb,var(--surface) 92%,var(--bg));
  border:1px solid color-mix(in srgb,var(--gh,var(--accent)) 30%,var(--border));
  border-radius:20px;padding:2.2rem 1.6rem;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55),0 0 40px -10px color-mix(in srgb,var(--gh,var(--accent)) 22%,transparent);
  animation:mbs-gate-in .32s cubic-bezier(.16,.8,.3,1) both}
@keyframes mbs-gate-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mbs-gate-card{animation:none}}
.mbs-gate-icon{font-size:2.6rem;line-height:1;margin-bottom:.6rem;
  animation:mbs-gate-pop .5s .06s cubic-bezier(.16,.9,.3,1.4) both}
@keyframes mbs-gate-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mbs-gate-icon{animation:none}}
.mbs-gate-greet{font-size:1.05rem;font-weight:600;color:var(--text);margin-bottom:.15rem}
.mbs-gate-card h2{margin:.2rem 0 .5rem;font-size:1.35rem;font-weight:600;color:var(--text);line-height:1.5}
.mbs-gate-card p{color:var(--muted);font-size:.9rem;line-height:2;margin:0 0 1.3rem}
.mbs-gate-intro{margin:0 0 .6rem!important;line-height:1.7!important}
/* Benefit list: centred block, start-aligned text, subtle check bullet. */
.mbs-gate-list{list-style:none;margin:0 auto 1.4rem;padding:0;max-width:min(30ch,100%);
  display:flex;flex-direction:column;gap:.5rem;text-align:start}
.mbs-gate-list li{position:relative;padding-inline-start:1.6rem;color:var(--muted);font-size:.88rem;line-height:1.5}
.mbs-gate-list li::before{content:"✓";position:absolute;inset-inline-start:0;top:-.05em;
  color:var(--gh,var(--accent));font-weight:700}
.mbs-gate-actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.mbs-gate-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.72rem 1.7rem;border-radius:12px;border:1px solid transparent;
  background:var(--gh,var(--accent));color:#fff;font:inherit;font-size:.95rem;font-weight:600;
  cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .3s,filter .2s}
.mbs-gate-btn:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 12px 30px -12px var(--gh,var(--accent))}
/* Secondary CTA (e.g. "Create account") — outlined, hue-tinted. */
.mbs-gate-btn.ghost{background:transparent;color:var(--text);
  border-color:color-mix(in srgb,var(--gh,var(--accent)) 45%,var(--border))}
.mbs-gate-btn.ghost:hover{background:color-mix(in srgb,var(--gh,var(--accent)) 12%,transparent);box-shadow:none}
.mbs-gate-brand{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;color:var(--muted);opacity:.75;margin-top:1.2rem;direction:ltr}
@media(max-width:480px){.mbs-gate-card{padding:1.8rem 1.2rem}.mbs-gate-icon{font-size:2.2rem}
  .mbs-gate-card h2{font-size:1.15rem}.mbs-gate-actions{flex-direction:column}.mbs-gate-btn{width:100%}}