/* ==========================================================================
   PishkhanPlus 2.42.0 — Liquid Glass ("شیشه باجه")
   لایه نهایی ظاهر: سطوح شیشه‌ای مات روی میدان رنگی پالت انتخابی کاربر.
   - رنگ تأکید همیشه از --acc (پالت کاربر) می‌آید.
   - حالت سریع برنامه (html.no-heavyfx)، کاهش حرکت و کاهش شفافیت سیستم رعایت می‌شود.
   ========================================================================== */

/* ---------- 1) Tokens ---------- */
:root{
  --gl-acc: var(--acc, #1d3f8f);
  --gl-fill: var(--gl-acc);
  --gl-btn-sheen: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 48%, rgba(0,0,0,.06) 100%);
  --gl-field: #dfe6f1;
  --gl-glass: rgba(255,255,255,.5);
  --gl-glass-strong: rgba(255,255,255,.74);
  --gl-glass-soft: rgba(255,255,255,.38);
  --gl-solid: #f8fafd;
  --gl-rim: rgba(255,255,255,.92);
  --gl-edge: rgba(255,255,255,.62);
  --gl-hair: rgba(16,34,66,.085);
  --gl-ink: #132239;
  --gl-ink-2: #2c4262;
  --gl-muted: #5f7089;
  --gl-sheen: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.12) 38%, rgba(255,255,255,0) 60%);
  --gl-shadow: 0 1px 1px rgba(16,34,66,.04), 0 10px 28px -14px rgba(16,34,66,.26), 0 2px 8px -2px rgba(16,34,66,.06);
  --gl-shadow-up: 0 1px 1px rgba(16,34,66,.04), 0 24px 60px -22px rgba(16,34,66,.42), 0 6px 18px -6px rgba(16,34,66,.12);
  --gl-blur: blur(22px) saturate(175%);
  --gl-blur-strong: blur(30px) saturate(190%);
  --gl-r-shell: 24px; --gl-r-panel: 18px; --gl-r-ctl: 12px;
  --gl-ease: cubic-bezier(.22,.8,.24,1);
  --gl-spring: cubic-bezier(.2,1.25,.32,1);
  --gl-field-a: color-mix(in srgb, var(--gl-acc) 40%, transparent);
  --gl-field-b: color-mix(in srgb, #12a7a0 26%, transparent);
  --gl-field-c: color-mix(in srgb, #7c5cff 22%, transparent);
}
@supports (animation-timing-function: linear(0, 1)){
  :root{ --gl-spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.077, 1.121 24.3%, 1.137 26%, 1.13 28.4%, 1.105 31%, 1.017 37.5%, .991 41.2%, .977 44.4%, .978 49.4%, 1.002 61.6%, 1.003 74.4%, 1); }
}
html[data-theme="dark"]{
  --gl-field: #0a1220;
  /* palette lightens --acc in dark mode; fills need a deeper tone for white text */
  --gl-fill: color-mix(in oklab, var(--acc, #1d3f8f) 46%, #061131);
  --gl-btn-sheen: linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.02) 50%, rgba(0,0,0,.1) 100%);
  --gl-glass: rgba(24,36,60,.52);
  --gl-glass-strong: rgba(20,31,52,.82);
  --gl-glass-soft: rgba(255,255,255,.045);
  --gl-solid: #142035;
  --gl-rim: rgba(255,255,255,.16);
  --gl-edge: rgba(255,255,255,.09);
  --gl-hair: rgba(255,255,255,.07);
  --gl-ink: #e8eef8;
  --gl-ink-2: #c3d0e2;
  --gl-muted: #97a8c0;
  --gl-sheen: linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.015) 40%, rgba(255,255,255,0) 60%);
  --gl-shadow: 0 1px 1px rgba(0,0,0,.25), 0 14px 34px -16px rgba(0,0,0,.65);
  --gl-shadow-up: 0 30px 70px -24px rgba(0,0,0,.8), 0 8px 22px -8px rgba(0,0,0,.5);
  --gl-field-a: color-mix(in srgb, var(--gl-acc) 50%, transparent);
  --gl-field-b: color-mix(in srgb, #0f9c96 22%, transparent);
  --gl-field-c: color-mix(in srgb, #6d4dff 20%, transparent);
}

@supports (color: oklch(from red l c h)){
  /* same hue as the user's palette, fixed lightness, restored chroma (dark palettes are desaturated) */
  html[data-theme="dark"]{ --gl-fill: oklch(from var(--acc, #1d3f8f) .5 calc(c * 2.2 + .03) h); }
}

/* ---------- 2) Field (the colour behind the glass) ---------- */
html{
  background:
    radial-gradient(48vmax 38vmax at 92% 4%, var(--gl-field-a), transparent 70%),
    radial-gradient(40vmax 34vmax at 6% 38%, var(--gl-field-b), transparent 70%),
    radial-gradient(46vmax 36vmax at 58% 108%, var(--gl-field-c), transparent 70%),
    var(--gl-field) !important;
  background-attachment: fixed !important;
}
html body{ background: transparent !important; color: var(--gl-ink) !important; }
html body .app, html body .work, html body #page.page, html body .page{ background: transparent !important; }

/* ---------- 3) Glass surface recipe ---------- */
html body .side,
html body .topbar,
html body #page .ph,
html body #page .box,
html body #page .kpi,
html body #page .coach,
html body #page .tile2,
html body #page .gcard,
html body #page .ins,
html body #page .uacc-card,
html body #page .pp-settings-hero,
html body #page .p238-card,
html body #page .bk-hero,
html body .status .status-item,
html body .status .v26-srn{
  background: var(--gl-sheen), var(--gl-glass) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-edge) !important;
  box-shadow: inset 0 1px 0 var(--gl-rim), 0 0 0 .5px var(--gl-hair), var(--gl-shadow) !important;
  color: var(--gl-ink);
}
html body #page .box, html body #page .coach, html body #page .ins, html body #page .uacc-card,
html body #page .p238-card, html body #page .gcard{ border-radius: var(--gl-r-panel) !important; }
html body #page .kpi, html body #page .tile2{ border-radius: 16px !important; }
/* Card internals stay quiet: no second gradient inside the glass. */
html body #page .box-h, html body #page .uacc-card-h, html body #page .colk-h, html body #page .ins-h{
  background: transparent !important; border-bottom: 1px solid var(--gl-hair) !important;
}
html body #page .box-h h2, html body #page .ph h1, html body #page .ins-h h2{ color: var(--gl-ink) !important; }
html body #page .box-h .sub, html body #page .ph .sub, html body .sub{ color: var(--gl-muted) !important; }
/* Nested cards inside a glass panel become flat tints, never glass-on-glass. */
html body #page .box .box, html body #page .box .kpi, html body #page .spane .box .box{
  background: var(--gl-glass-soft) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: inset 0 0 0 1px var(--gl-hair) !important; border-color: transparent !important;
}
html body #page .box:hover, html body #page .kpi:hover{ transform: none !important; }

/* Page header: the one place the accent tints the glass */
html body #page .ph{
  border-radius: 22px !important;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--gl-acc) 14%, transparent), transparent 55%),
    var(--gl-sheen), var(--gl-glass) !important;
}
html body #page .ph::before{ display: none !important; }

/* ---------- 4) Shell: sidebar, top bar, footer, mobile nav ---------- */
html body .side{ border-radius: var(--gl-r-shell) !important; }
html body .side .brand{
  background: radial-gradient(130% 120% at 100% 0%, color-mix(in srgb, var(--gl-acc) 16%, transparent), transparent 60%), var(--gl-glass-soft) !important;
  border: 1px solid var(--gl-edge) !important; box-shadow: inset 0 1px 0 var(--gl-rim) !important;
}
html body .side .brand .mk{
  background: linear-gradient(150deg, color-mix(in srgb, var(--gl-acc) 80%, #fff), var(--gl-acc) 55%, color-mix(in srgb, var(--gl-acc) 70%, #000)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px -6px color-mix(in srgb, var(--gl-acc) 60%, transparent) !important;
}
html body .side .modules .grp{ color: var(--gl-muted) !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html body .side .modules .mod{
  position: relative; border-radius: 14px !important; background: transparent !important; box-shadow: none !important; border: 1px solid transparent !important;
  color: var(--gl-ink-2) !important; transition: background .22s var(--gl-ease), color .22s var(--gl-ease), border-color .22s var(--gl-ease) !important; transform: none !important;
}
html body .side .modules .mod:hover{ background: var(--gl-glass-soft) !important; border-color: var(--gl-edge) !important; }
html body .side .modules .mod[aria-current="true"], html body .side .modules .mod.active, html body .side .modules .mod.on{
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 70%), color-mix(in srgb, var(--gl-acc) 15%, var(--gl-glass)) !important;
  border-color: color-mix(in srgb, var(--gl-acc) 26%, var(--gl-edge)) !important;
  box-shadow: inset 0 1px 0 var(--gl-rim), 0 6px 16px -10px color-mix(in srgb, var(--gl-acc) 70%, transparent) !important;
  color: color-mix(in srgb, var(--gl-acc) 82%, var(--gl-ink)) !important; font-weight: 800 !important;
}
html[data-theme="dark"] body .side .modules .mod[aria-current="true"], html[data-theme="dark"] body .side .modules .mod.active{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 70%), color-mix(in srgb, var(--gl-acc) 30%, transparent) !important;
  color: #fff !important;
}

html body .topbar{ border-radius: 20px !important; background: var(--gl-sheen), var(--gl-glass-strong) !important; -webkit-backdrop-filter: var(--gl-blur-strong) !important; backdrop-filter: var(--gl-blur-strong) !important; }
html body .topbar::after, html body .topbar::before{ display: none !important; }
html body .topbar .tabs .tab, html body .topbar .tabs button{
  border-radius: 12px !important; background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important; color: var(--gl-ink-2) !important;
  transition: background .2s var(--gl-ease), color .2s var(--gl-ease), border-color .2s !important;
}
html body .topbar .tabs .tab:hover{ background: var(--gl-glass-soft) !important; border-color: var(--gl-edge) !important; }
html body #app .topbar .tabs :is([aria-selected="true"],.tab.on,.tab.active){
  background: var(--gl-btn-sheen), var(--gl-fill) !important; color: #fff !important;
  border-color: color-mix(in srgb, var(--gl-acc) 60%, #fff) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -10px color-mix(in srgb, var(--gl-acc) 80%, transparent) !important;
}
html body .topbar .cmd, html body .topbar .gbell, html body .topbar .gpal{
  background: var(--gl-glass-soft) !important; border: 1px solid var(--gl-edge) !important; color: var(--gl-ink-2) !important;
  box-shadow: inset 0 1px 0 var(--gl-rim), 0 0 0 .5px var(--gl-hair) !important; border-radius: 13px !important;
}
html body .topbar .cmd:hover, html body .topbar .gbell:hover, html body .topbar .gpal:hover{ background: var(--gl-glass) !important; }

html body .status{ background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body .status .status-item, html body .status .v26-srn{ border-radius: 14px !important; }
html body .status .status-redesign{ background: transparent !important; border: 0 !important; box-shadow: none !important; }

html body .mnav{
  background: var(--gl-sheen), var(--gl-glass-strong) !important; -webkit-backdrop-filter: var(--gl-blur-strong) !important; backdrop-filter: var(--gl-blur-strong) !important;
  border: 1px solid var(--gl-edge) !important; box-shadow: inset 0 1px 0 var(--gl-rim), var(--gl-shadow-up) !important;
}
html body .mnav > *{ transition: background .22s var(--gl-ease), color .22s var(--gl-ease), transform .18s var(--gl-ease) !important; }
html body .mnav [aria-current="true"], html body .mnav .active, html body .mnav .on{
  background: color-mix(in srgb, var(--gl-acc) 16%, transparent) !important; color: color-mix(in srgb, var(--gl-acc) 85%, var(--gl-ink)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gl-acc) 22%, transparent) !important;
}
html[data-theme="dark"] body .mnav [aria-current="true"], html[data-theme="dark"] body .mnav .active{ color: #fff !important; background: color-mix(in srgb, var(--gl-acc) 34%, transparent) !important; }

/* ---------- 5) Controls ---------- */
html body .btn{
  border-radius: var(--gl-r-ctl) !important;
  transition: transform .18s var(--gl-ease), box-shadow .22s var(--gl-ease), background .22s var(--gl-ease), border-color .22s var(--gl-ease), filter .22s !important;
}
html body :is(#app,#layer,#mnav) .btn:not(.pri):not(.primary):not(.danger):not(.bad){
  background: var(--gl-glass-soft) !important; color: var(--gl-ink-2) !important;
  border: 1px solid var(--gl-edge) !important; box-shadow: inset 0 1px 0 var(--gl-rim), 0 0 0 .5px var(--gl-hair), 0 2px 6px -3px rgba(16,34,66,.12) !important;
}
html body :is(#app,#layer,#mnav) .btn:not(.pri):not(.primary):not(.danger):not(.bad):hover{ background: var(--gl-glass-strong) !important; }
html body :is(#app,#layer) .btn.pri:not(.login-submit), html body :is(#app,#layer) .btn.primary{
  color: #fff !important; border: 1px solid color-mix(in srgb, var(--gl-acc) 55%, #fff) !important;
  background:
    var(--gl-btn-sheen),
    var(--gl-fill) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.12), 0 10px 22px -12px color-mix(in srgb, var(--gl-acc) 85%, transparent) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
html body :is(#app,#layer) .btn.pri:not(.login-submit):hover, html body :is(#app,#layer) .btn.primary:hover{ filter: brightness(1.06) saturate(1.05); transform: translateY(-1px) !important; }
html body .btn:active, html body .mnav > *:active, html body .tab:active, html body .chip:active, html body .palc:active{ transform: scale(.97) !important; transition-duration: .08s !important; }
html body .btn:focus-visible, html body .tab:focus-visible, html body .chip:focus-visible, html body .mod:focus-visible, html body .stabs [data-stab]:focus-visible, html body .pps-sub a:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--gl-acc) 70%, #fff) !important; outline-offset: 2px !important;
}
html[data-theme="dark"] body :is(#app,#layer) .btn.pri:not(.login-submit), html[data-theme="dark"] body :is(#app,#layer) .btn.primary{ border-color: color-mix(in srgb, var(--gl-acc) 70%, #fff) !important; }

html body .field, html body #page input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), html body #page select, html body #page textarea,
html body #layer .dlg input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), html body #layer .dlg select, html body #layer .dlg textarea{
  background: color-mix(in srgb, var(--gl-solid) 72%, transparent) !important; color: var(--gl-ink) !important;
  border: 1px solid var(--gl-hair) !important; border-radius: var(--gl-r-ctl) !important;
  box-shadow: inset 0 1px 2px rgba(16,34,66,.06) !important;
  transition: border-color .2s var(--gl-ease), box-shadow .2s var(--gl-ease), background .2s !important;
}
html body .field:focus, html body #page input:focus, html body #page select:focus, html body #page textarea:focus,
html body #layer .dlg input:focus, html body #layer .dlg select:focus, html body #layer .dlg textarea:focus{
  background: var(--gl-solid) !important; border-color: color-mix(in srgb, var(--gl-acc) 60%, transparent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gl-acc) 16%, transparent), inset 0 1px 2px rgba(16,34,66,.04) !important; outline: none !important;
}
html body :is(#app,#layer) :is(.chip,.pill,.segc button,.seg button){
  background: var(--gl-glass-soft) !important; border: 1px solid var(--gl-edge) !important; color: var(--gl-ink-2) !important;
  box-shadow: inset 0 1px 0 var(--gl-rim) !important; transition: background .2s var(--gl-ease), color .2s, border-color .2s, transform .18s var(--gl-ease) !important;
}
html body :is(#app,#layer) :is(.chip[aria-pressed="true"],.segc button[aria-pressed="true"],.seg button[aria-pressed="true"],.pill.p-acc){
  background: var(--gl-btn-sheen), var(--gl-fill) !important; color: #fff !important;
  border-color: color-mix(in srgb, var(--gl-acc) 60%, #fff) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -8px color-mix(in srgb, var(--gl-acc) 80%, transparent) !important;
}

html body #page table thead th, html body #page .tbl thead th{
  background: color-mix(in srgb, var(--gl-acc) 6%, var(--gl-glass-soft)) !important; color: var(--gl-ink-2) !important; border-bottom: 1px solid var(--gl-hair) !important;
}
html body #page tbody tr:hover{ background: color-mix(in srgb, var(--gl-acc) 6%, transparent) !important; }
html body #page td, html body #page th{ border-color: var(--gl-hair) !important; }

/* ---------- 6) Dialogs, palette, popovers, toast ---------- */
html body #layer > .scrim{
  background: color-mix(in srgb, var(--gl-field) 38%, rgba(8,16,32,.28)) !important;
  -webkit-backdrop-filter: blur(6px) saturate(120%) !important; backdrop-filter: blur(6px) saturate(120%) !important;
  animation: lgFade .28s var(--gl-ease) both !important;
}
html body #layer > .dlg, html body #layer > .pal, html body #layer > .wiz, html body .pop{
  background: var(--gl-sheen), var(--gl-glass-strong) !important;
  -webkit-backdrop-filter: var(--gl-blur-strong) !important; backdrop-filter: var(--gl-blur-strong) !important;
  border: 1px solid var(--gl-edge) !important; border-radius: 22px !important;
  box-shadow: inset 0 1px 0 var(--gl-rim), 0 0 0 .5px var(--gl-hair), var(--gl-shadow-up) !important;
  color: var(--gl-ink) !important;
  animation: lgDialogIn .56s var(--gl-spring) both, lgBlurIn .26s var(--gl-ease) both !important; transform-origin: 50% 30%;
}
html body #layer > .dlg .dlg-h, html body #layer > .dlg .dlg-f, html body #layer > .dlg .ix2-foot, html body .pop .pop-h{
  background: transparent !important; border-color: var(--gl-hair) !important; box-shadow: none !important;
}
html body #layer > .dlg .dlg-h h2{ color: var(--gl-ink) !important; }
html body #layer > .pal .pal-i[aria-selected="true"]{ background: color-mix(in srgb, var(--gl-acc) 14%, transparent) !important; border-radius: 12px; }
html body #toast.toast, html body .toast{
  background: color-mix(in srgb, #0d1628 82%, transparent) !important; color: #f3f6fb !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important; backdrop-filter: blur(18px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,.14) !important; border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 40px -16px rgba(0,0,0,.55) !important;
}

/* ---------- 7) Login ----------
   The login is a light card on its own dark backdrop in both themes: pin it to light tokens. */
html body #layer .login{
  --gl-glass: rgba(255,255,255,.5); --gl-glass-strong: rgba(255,255,255,.86); --gl-glass-soft: rgba(255,255,255,.4);
  --gl-solid: #f8fafd; --gl-rim: rgba(255,255,255,.95); --gl-edge: rgba(255,255,255,.7); --gl-hair: rgba(16,34,66,.09);
  --gl-ink: #132239; --gl-ink-2: #2c4262; --gl-muted: #5f7089;
  --gl-sheen: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.1) 40%, rgba(255,255,255,0) 60%);
}
html body #layer .login.login-pro{ background: transparent !important; }
html body #layer .login .login-card{
  background: var(--gl-sheen), var(--gl-glass-strong) !important;
  -webkit-backdrop-filter: var(--gl-blur-strong) !important; backdrop-filter: var(--gl-blur-strong) !important;
  border: 1px solid var(--gl-edge) !important;
  box-shadow: inset 0 1px 0 var(--gl-rim), 0 0 0 .5px rgba(255,255,255,.2), 0 40px 90px -30px rgba(0,0,0,.6) !important;
  animation: lgDialogIn .7s var(--gl-spring) both, lgBlurIn .35s var(--gl-ease) both;
}
html body #layer .login .login-card .login-submit{ transition: transform .18s var(--gl-ease), filter .2s, box-shadow .2s !important; }
html body #layer .login .login-card .login-submit:hover{ filter: brightness(1.06); transform: translateY(-1px); }
html body #layer .login .login-card .login-submit:active{ transform: scale(.98); }

/* ---------- 8) Settings studio (layout is built by 32-pplus-settings-studio.js) ---------- */
html body #page .pps-studio{ display: grid; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 4px; }
html body #page .pps-studio > .stabs{
  position: sticky !important; top: 12px; z-index: 2;
  display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 2px !important;
  padding: 10px !important; margin: 0 !important; overflow: visible !important;
  background: var(--gl-sheen), var(--gl-glass) !important; -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-edge) !important; border-radius: 22px !important;
  box-shadow: inset 0 1px 0 var(--gl-rim), 0 0 0 .5px var(--gl-hair), var(--gl-shadow) !important;
  max-height: calc(100dvh - 140px); overflow-y: auto !important; scrollbar-width: thin;
}
html body #page .pps-studio > .stabs .pps-grp{ font-size: 11px; font-weight: 700; color: var(--gl-muted); padding: 12px 12px 4px; }
html body #page .pps-studio > .stabs .pps-grp:first-of-type{ padding-top: 4px; }
html body #page .pps-studio > .stabs [data-stab], html body #page .pps-studio > .stabs .pps-acct{
  position: relative; z-index: 1; display: grid !important; grid-template-columns: 30px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  width: 100% !important; height: auto !important; min-height: 54px; padding: 9px 10px !important; margin: 0 0 2px !important; text-align: start !important; row-gap: 1px;
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important;
  color: var(--gl-ink-2) !important; font-weight: 750 !important; font-size: 13px !important; line-height: 1.6 !important; white-space: normal !important;
  transition: color .25s var(--gl-ease), background .25s var(--gl-ease) !important;
}
html body #page .pps-studio > .stabs .pps-acct{ cursor: pointer; font-family: inherit; }
html body #page .pps-studio > .stabs [data-stab] > i, html body #page .pps-studio > .stabs .pps-acct > i{
  grid-row: 1 / span 2; width: 30px; height: 30px; display: grid; place-items: center; font-style: normal; font-size: 15px;
  border-radius: 10px; background: var(--gl-glass-soft); box-shadow: inset 0 1px 0 var(--gl-rim), 0 0 0 .5px var(--gl-hair); margin: 0 !important;
}
html body #page .pps-studio > .stabs [data-stab] > small, html body #page .pps-studio > .stabs .pps-acct > small{ grid-column: 2; font-size: 10.5px; font-weight: 500; color: var(--gl-muted); line-height: 1.6; }
html body #page .pps-studio > .stabs .pps-acct:hover, html body #page .pps-studio > .stabs [data-stab]:hover{ background: var(--gl-glass-soft) !important; }
html body #page .pps-studio > .stabs [data-stab][aria-selected="true"]{ color: color-mix(in srgb, var(--gl-acc) 85%, var(--gl-ink)) !important; background: transparent !important; }
html[data-theme="dark"] body #page .pps-studio > .stabs [data-stab][aria-selected="true"]{ color: #fff !important; }
html body #page .pps-studio > .stabs [data-stab][aria-selected="true"] > i{ background: var(--gl-fill); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -8px color-mix(in srgb, var(--gl-acc) 80%, transparent); }
html body #page .pps-studio > .stabs [data-stab]::after, html body #page .pps-studio > .stabs [data-stab]::before{ display: none !important; }
html body #page .pps-ind{
  position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: 14px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 70%), color-mix(in srgb, var(--gl-acc) 13%, var(--gl-glass-strong));
  box-shadow: inset 0 1px 0 var(--gl-rim), inset 0 0 0 1px color-mix(in srgb, var(--gl-acc) 22%, transparent), 0 8px 18px -12px color-mix(in srgb, var(--gl-acc) 80%, transparent);
  transition: top .55s var(--gl-spring), left .55s var(--gl-spring), width .4s var(--gl-ease), height .4s var(--gl-ease);
}
html[data-theme="dark"] body #page .pps-ind{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 70%), color-mix(in srgb, var(--gl-acc) 30%, transparent); }
html body #page .pps-sub{ display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px; margin-inline-start: 50px; position: relative; z-index: 1; }
html body #page .pps-sub a{
  display: block; padding: 4px 10px; border-radius: 9px; font-size: 11.5px; color: var(--gl-muted); text-decoration: none; cursor: pointer;
  border-inline-start: 2px solid var(--gl-hair); transition: color .2s, border-color .2s, background .2s;
}
html body #page .pps-sub a:hover{ color: var(--gl-ink); border-color: var(--gl-acc); background: var(--gl-glass-soft); }
html body #page .pps-ext{ margin-top: 6px; border-top: 1px solid var(--gl-hair); padding-top: 6px; }
html body #page .pps-content{ min-width: 0; display: flex; flex-direction: column; gap: 14px; }
html body #page .pps-content > .spane{ display: flex; flex-direction: column; gap: 14px; }
html body #page .pps-content > .spane[hidden]{ display: none !important; }
html body #page .pps-content > .spane.sp-g{ display: grid; }
html body #page .pps-content > .spane > *{ margin: 0 !important; }
html body #page .pps-pane-h{ display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 2px 4px 0; }
html body #page .pps-pane-h h2{ margin: 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 850; color: var(--gl-ink); line-height: 1.6; }
html body #page .pps-pane-h p{ margin: 2px 0 0; font-size: 12px; color: var(--gl-muted); line-height: 1.9; max-width: 62ch; }
html body #page .pps-pane-in{ animation: lgPaneIn .42s var(--gl-ease) both; }
html body #page .pps-content > .spane, html body #page .pps-content section{ scroll-margin-top: 16px; }
html body #page .pps-hidden.pps-hidden.pps-hidden{ display: none !important; }

@media (max-width: 980px){
  html body #page .pps-studio{ grid-template-columns: minmax(0,1fr); gap: 12px; }
  html body #page .pps-studio > .stabs{
    flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important; max-height: none; padding: 6px !important;
    top: 6px; border-radius: 18px !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  html body #page .pps-studio > .stabs::-webkit-scrollbar{ display: none; }
  html body #page .pps-studio > .stabs .pps-grp, html body #page .pps-studio > .stabs [data-stab] > small, html body #page .pps-sub, html body #page .pps-ext{ display: none !important; }
  html body #page .pps-studio > .stabs [data-stab]{
    display: inline-flex !important; width: auto !important; flex: 0 0 auto; min-height: 40px; padding: 6px 12px 6px 14px !important; gap: 7px; scroll-snap-align: center; white-space: nowrap !important; font-size: 12.5px !important;
  }
  html body #page .pps-studio > .stabs .pps-acct{ cursor: pointer; font-family: inherit; }
html body #page .pps-studio > .stabs [data-stab] > i, html body #page .pps-studio > .stabs .pps-acct > i{ width: 24px; height: 24px; font-size: 13px; border-radius: 8px; }
  html body #page .pps-pane-h h2{ font-size: 17px; }
  html body #page .pps-content > .spane, html body #page .pps-content section{ scroll-margin-top: 72px; }
}

/* ---------- 9) Motion ---------- */
@keyframes lgFade{ from{ opacity: 0; } }
@keyframes lgDialogIn{ from{ transform: translateY(10px) scale(.955); } }
@keyframes lgBlurIn{ from{ opacity: 0; filter: blur(5px); } }
@keyframes lgPaneIn{ from{ opacity: 0; transform: translateY(8px); filter: blur(3px); } }
@keyframes lgRise{ from{ opacity: 0; transform: translateY(12px) scale(.99); filter: blur(5px); } }
/* One orchestrated entrance per page: core already staggers via --i on .anim-in */
html body .page.enter .anim-in, html body .anim-in{
  animation-name: lgRise !important; animation-duration: .6s !important; animation-timing-function: var(--gl-ease) !important;
  animation-fill-mode: both !important; animation-delay: calc(var(--i, 0) * 45ms) !important;
}
html body .coach.fresh{ animation: lgRise .6s var(--gl-ease) both !important; }
@supports (view-transition-name: none){
  ::view-transition-old(root), ::view-transition-new(root){ animation-duration: .28s; animation-timing-function: var(--gl-ease); }
}

/* ---------- 10) Fast mode, reduced motion, reduced transparency ---------- */
html.no-heavyfx body .side, html.no-heavyfx body .topbar, html.no-heavyfx body #page .ph, html.no-heavyfx body #page .box,
html.no-heavyfx body #page .kpi, html.no-heavyfx body #page .coach, html.no-heavyfx body #page .ins, html.no-heavyfx body #page .tile2,
html.no-heavyfx body #page .gcard, html.no-heavyfx body #page .p238-card, html.no-heavyfx body #page .bk-hero, html.no-heavyfx body #page .pp-settings-hero,
html.no-heavyfx body .status .status-item, html.no-heavyfx body .mnav, html.no-heavyfx body #layer > .dlg, html.no-heavyfx body #layer > .pal,
html.no-heavyfx body #layer > .wiz, html.no-heavyfx body .pop, html.no-heavyfx body #layer .login .login-card, html.no-heavyfx body #page .pps-studio > .stabs{
  background: var(--gl-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.no-heavyfx body #layer > .scrim{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(8,16,32,.42) !important; }
html.no-heavyfx{ background: var(--gl-field) !important; }
@media (prefers-reduced-transparency: reduce){
  html body .side, html body .topbar, html body #page .box, html body #page .ph, html body #page .kpi, html body .mnav, html body #layer > .dlg, html body #page .pps-studio > .stabs{
    background: var(--gl-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}
@media (prefers-reduced-motion: reduce){
  html body *, html body *::before, html body *::after{ animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}
html.lowmo body .anim-in, html.no-heavyfx body .anim-in{ animation: none !important; }

/* ---------- 11) Mobile ---------- */
@media (max-width: 760px), (pointer: coarse) and (hover: none){
  html body .topbar{ border-radius: 0 0 20px 20px !important; }
  html body #page .ph{ border-radius: 18px !important; }
  html body #page .box, html body #page .coach{ border-radius: 16px !important; }
  html body .mnav{ border-radius: 22px !important; }
  html body #layer > .dlg, html body #layer > .pal, html body #layer > .wiz{ border-radius: 20px !important; }
  /* blur is expensive on phones: lighter recipe */
  html body #page .box, html body #page .kpi, html body #page .ins, html body #page .tile2{ -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; }
}

/* ---------- 12) Floating controls join the glass system ---------- */
html body .pp-audio-toggle, html body #p238ScanFab.p238-fab{
  background: var(--gl-sheen), var(--gl-glass-strong) !important; color: var(--gl-ink-2) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-edge) !important; box-shadow: inset 0 1px 0 var(--gl-rim), 0 0 0 .5px var(--gl-hair), var(--gl-shadow) !important;
  transition: transform .2s var(--gl-ease), background .2s !important;
}
html body .pp-audio-toggle[data-state="on"]{ background: var(--gl-btn-sheen), var(--gl-fill) !important; color: #fff !important; }
html body .pp-audio-toggle:active, html body #p238ScanFab.p238-fab:active{ transform: scale(.95) !important; }

/* ---------- 13) Card scanner (33-pplus-card-scanner.js) ---------- */
html.ppscan-open, html.ppscan-open body{ overflow: hidden; }
.ppscan{ position: fixed; inset: 0; z-index: 10060; display: grid; place-items: center; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
.ppscan-scrim{ position: absolute; inset: 0; background: rgba(8,16,32,.34); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); animation: lgFade .25s var(--gl-ease) both; }
.ppscan-dlg{
  position: relative; width: min(860px, 100%); max-height: 100%; overflow: auto; overscroll-behavior: contain;
  border-radius: 24px; color: var(--gl-ink);
  background: var(--gl-sheen), var(--gl-glass-strong); -webkit-backdrop-filter: var(--gl-blur-strong); backdrop-filter: var(--gl-blur-strong);
  border: 1px solid var(--gl-edge); box-shadow: inset 0 1px 0 var(--gl-rim), 0 0 0 .5px var(--gl-hair), var(--gl-shadow-up);
  animation: lgDialogIn .56s var(--gl-spring) both, lgBlurIn .26s var(--gl-ease) both;
}
.ppscan-h{ position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--gl-hair); background: var(--gl-glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ppscan-h h2{ margin: 0; font-size: 16px; font-weight: 850; }
.ppscan-seg{ margin-inline-start: auto; display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--gl-glass-soft); box-shadow: inset 0 0 0 1px var(--gl-hair); }
.ppscan-seg button{ border: 0; background: transparent; color: var(--gl-ink-2); font: inherit; font-size: 12.5px; font-weight: 750; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background .25s var(--gl-ease), color .25s; }
.ppscan-seg button[aria-selected="true"]{ background: var(--gl-btn-sheen), var(--gl-fill); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px -8px color-mix(in srgb, var(--gl-acc) 80%, transparent); }
.ppscan-x{ width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--gl-edge); background: var(--gl-glass-soft); color: var(--gl-ink-2); cursor: pointer; font-size: 14px; }
.ppscan-b{ padding: 18px; }
.ppscan-drop{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; cursor: pointer;
  min-height: 250px; padding: 22px; border-radius: 20px; border: 1.5px dashed color-mix(in srgb, var(--gl-acc) 35%, var(--gl-hair));
  background: radial-gradient(80% 70% at 50% 30%, color-mix(in srgb, var(--gl-acc) 9%, transparent), transparent 70%), var(--gl-glass-soft);
  transition: border-color .2s, background .2s, transform .2s var(--gl-ease);
}
.ppscan-drop:hover, .ppscan-drop.drag{ border-color: var(--gl-acc); transform: scale(1.005); }
.ppscan-drop b{ font-size: 15px; font-weight: 850; color: var(--gl-ink); }
.ppscan-drop small{ color: var(--gl-muted); font-size: 12px; line-height: 1.9; max-width: 46ch; }
/* a small drawn card that tells which side to photograph */
.ppscan-card{ position: relative; width: 150px; height: 94px; border-radius: 12px; margin-bottom: 6px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gl-acc) 22%, #fff), color-mix(in srgb, var(--gl-acc) 8%, #fff)); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 24px -14px color-mix(in srgb, var(--gl-acc) 60%, transparent), 0 0 0 1px var(--gl-hair); }
.ppscan-card i{ position: absolute; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--gl-acc) 30%, #fff); inset-inline-end: 14px; }
.ppscan-card i:nth-child(1){ top: 22px; width: 64px; } .ppscan-card i:nth-child(2){ top: 38px; width: 82px; } .ppscan-card i:nth-child(3){ top: 54px; width: 52px; }
.ppscan-card.id::after{ content: ""; position: absolute; inset-inline-start: 14px; top: 18px; width: 34px; height: 44px; border-radius: 7px; background: color-mix(in srgb, var(--gl-acc) 34%, #fff); }
.ppscan-card.bank::after{ content: ""; position: absolute; inset-inline-start: 14px; top: 24px; width: 26px; height: 20px; border-radius: 5px; background: linear-gradient(135deg, #f4d58d, #c9a24a); }
.ppscan-card.bank i:nth-child(3){ top: 66px; width: 110px; height: 8px; inset-inline-end: 20px; letter-spacing: 3px; }
.ppscan-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ppscan-actions .btn{ min-height: 42px; padding-inline: 18px; }
.ppscan-note{ margin: 12px 0 0; font-size: 11.5px; color: var(--gl-muted); line-height: 1.9; }
.ppscan-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.ppscan-shot{ position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: #0d1628; box-shadow: 0 0 0 1px var(--gl-hair); aspect-ratio: 1.58; display: grid; place-items: center; }
.ppscan-shot img{ max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .45s var(--gl-spring); }
.ppscan-shot figcaption{ position: absolute; inset-inline: 8px; bottom: 8px; display: flex; gap: 6px; justify-content: flex-end; }
.ppscan-shot figcaption .btn{ background: rgba(13,22,40,.6) !important; color: #fff !important; border-color: rgba(255,255,255,.2) !important; box-shadow: none !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ppscan-beam{ position: absolute; inset-inline: 0; top: 0; height: 30%; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--gl-acc) 35%, transparent) 70%, color-mix(in srgb, var(--gl-acc) 80%, #fff) 100%); }
.ppscan-shot.is-busy .ppscan-beam{ opacity: .9; animation: ppscanBeam 1.6s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes ppscanBeam{ from{ transform: translateY(-100%); } to{ transform: translateY(240%); } }
.ppscan-prog{ display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: var(--gl-glass-soft); box-shadow: inset 0 0 0 1px var(--gl-hair); }
.ppscan-prog b{ font-size: 14px; }
.ppscan-prog small{ color: var(--gl-muted); font-size: 11.5px; }
.ppscan-bar{ height: 8px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--gl-acc) 12%, transparent); }
.ppscan-bar i{ display: block; height: 100%; width: 8%; border-radius: 99px; background: var(--gl-btn-sheen), var(--gl-fill); transition: width .35s var(--gl-ease); }
.ppscan-bar i.ind{ width: 35%; animation: ppscanInd 1.1s ease-in-out infinite alternate; }
@keyframes ppscanInd{ from{ transform: translateX(0); } to{ transform: translateX(-185%); } }
.ppscan-err{ display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; margin-bottom: 12px; background: color-mix(in srgb, #d97706 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #d97706 30%, transparent); }
.ppscan-err b{ font-size: 13px; } .ppscan-err small{ font-size: 11.5px; line-height: 1.9; color: var(--gl-ink-2); }
.ppscan-fields{ display: grid; gap: 10px; }
.ppscan-f{ display: grid; gap: 4px; }
.ppscan-f > span{ font-size: 12px; font-weight: 750; color: var(--gl-ink-2); }
.ppscan-f > small{ font-size: 11px; color: var(--gl-muted); padding-inline-start: 2px; }
.ppscan-f.ok > small{ color: #15803d; } .ppscan-f.ok > small::before{ content: "✓ "; }
.ppscan-f.bad > small{ color: #b45309; } .ppscan-f.bad > small::before{ content: "⚠ "; }
html[data-theme="dark"] .ppscan-f.ok > small{ color: #4ade80; } html[data-theme="dark"] .ppscan-f.bad > small{ color: #fbbf24; }
.ppscan-f.ok .field{ box-shadow: inset 0 0 0 1px color-mix(in srgb, #16a34a 35%, transparent) !important; }
.ppscan-raw{ margin-top: 12px; font-size: 12px; } .ppscan-raw summary{ cursor: pointer; color: var(--gl-muted); }
.ppscan-raw textarea{ margin: 8px 0; width: 100%; font-size: 12px; }
#layer .ppscan-filled{ animation: ppscanFlash 1.5s var(--gl-ease); }
@keyframes ppscanFlash{ 0%,40%{ box-shadow: 0 0 0 4px color-mix(in srgb, #16a34a 30%, transparent) !important; border-color: #16a34a !important; } }
/* settings panel */
.ppscan-panel .ppscan-status{ display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 14px; background: var(--gl-glass-soft); box-shadow: inset 0 0 0 1px var(--gl-hair); line-height: 1.9; font-size: 13px; }
.ppscan-dot{ flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #9aa7b6; }
.ppscan-dot.ok{ background: #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.15); } .ppscan-dot.warn{ background: #d97706; box-shadow: 0 0 0 4px rgba(217,119,6,.15); } .ppscan-dot.bad{ background: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.15); }
.ppscan-opts{ display: grid; gap: 2px; margin-top: 12px; }
.ppscan-opt{ display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--gl-hair); cursor: pointer; }
.ppscan-opt:last-child{ border-bottom: 0; }
.ppscan-opt b{ display: block; font-size: 13px; } .ppscan-opt small{ display: block; font-size: 11.5px; color: var(--gl-muted); line-height: 1.8; }
.ppscan-opt input[type=checkbox]{ appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 44px !important; height: 26px !important; min-height: 0 !important; border-radius: 99px; background: color-mix(in srgb, var(--gl-ink) 18%, transparent); position: relative; cursor: pointer; transition: background .25s var(--gl-ease); margin: 0; padding: 0 !important; border: 0 !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.15) !important; }
.ppscan-opt input[type=checkbox]::after{ content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .35s var(--gl-spring); }
.ppscan-opt input[type=checkbox]:checked{ background: var(--gl-fill) !important; }
.ppscan-opt input[type=checkbox]:checked::after{ transform: translateX(18px); }
.ppscan-tips{ margin: 14px 0 0; padding-inline-start: 18px; font-size: 12px; color: var(--gl-muted); line-height: 2; }
@media (max-width: 760px){
  .ppscan{ padding: 0; place-items: end stretch; }
  .ppscan-dlg{ width: 100%; max-height: 94dvh; border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .ppscan-h{ flex-wrap: wrap; padding: 12px 14px; } .ppscan-seg{ order: 3; width: 100%; margin: 0; } .ppscan-seg button{ flex: 1; }
  .ppscan-b{ padding: 14px; } .ppscan-grid{ grid-template-columns: minmax(0,1fr); }
  .ppscan-drop{ min-height: 210px; } .ppscan-actions .btn{ flex: 1 1 140px; justify-content: center; }
}
html.no-heavyfx .ppscan-dlg, html.no-heavyfx .ppscan-h{ background: var(--gl-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.no-heavyfx .ppscan-scrim{ -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8,16,32,.45); }
/* Floating scan button: was overlapping the sidebar (desktop) and hidden under the bottom menu (phone). */
html body #p238ScanFab.p238-fab{ position: fixed !important; left: auto !important; right: 272px !important; bottom: 70px !important; top: auto !important; z-index: 998 !important; border-radius: 999px !important; padding: 9px 16px !important; font-weight: 800 !important; }
@media (max-width: 900px), (pointer: coarse) and (hover: none){
  html body #p238ScanFab.p238-fab{ right: 12px !important; bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; width: 50px; height: 50px; padding: 0 !important; font-size: 0 !important; display: grid !important; place-items: center; }
  html body #p238ScanFab.p238-fab::before{ content: "📷"; font-size: 21px; line-height: 1; }
}
/* scanner fields must not inherit global <label> layouts from older layers */
html body .ppscan .ppscan-f{ display: grid !important; grid-template-columns: minmax(0,1fr) !important; justify-items: stretch !important; align-items: start !important; text-align: start !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; flex-direction: initial !important; }
html body .ppscan .ppscan-f > .field{ width: 100% !important; max-width: none !important; min-height: 42px !important; margin: 0 !important; font-size: 15px !important; }
html body .ppscan .ppscan-f > .field[dir="ltr"]{ text-align: left; letter-spacing: .5px; }
html body .ppscan .ppscan-f > span, html body .ppscan .ppscan-f > small{ text-align: start !important; justify-self: stretch !important; }

/* ---------- 14) Clustered sidebar (34-pplus-nav-clusters.js) ---------- */
html body .side .modules.ppn{ padding: 6px 4px 10px !important; display: block !important; }
html body .side .modules.ppn .ppn-c{ margin: 0 4px 4px; --ht: color-mix(in srgb, var(--h) 14%, transparent); --hd: color-mix(in srgb, var(--h) 78%, var(--gl-ink)); }
html[data-theme="dark"] body .side .modules.ppn .ppn-c{ --ht: color-mix(in srgb, var(--h) 24%, transparent); --hd: color-mix(in srgb, var(--h) 55%, #fff); }
html body .side .modules.ppn .ppn-h{
  all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 7px 8px; border-radius: 12px; color: var(--gl-muted); font: inherit; font-size: 12px; font-weight: 800;
  transition: background .2s var(--gl-ease), color .2s;
}
html body .side .modules.ppn .ppn-h:hover{ background: var(--gl-glass-soft); color: var(--gl-ink); }
html body .side .modules.ppn .ppn-h:focus-visible{ outline: 2px solid color-mix(in srgb, var(--h) 60%, #fff); outline-offset: 1px; }
html body .side .modules.ppn .ppn-h b{ flex: 1; font-weight: 800; text-align: start; }
html body .side .modules.ppn .ppn-hi{ width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: var(--hd); background: var(--ht); flex: 0 0 auto; }
html body .side .modules.ppn .ppn-hi svg{ width: 15px; height: 15px; }
html body .side .modules.ppn .ppn-chev{ width: 15px; height: 15px; opacity: .55; transition: transform .35s var(--gl-spring); }
html body .side .modules.ppn .ppn-c[data-open="false"] .ppn-chev{ transform: rotate(90deg); }
html body .side .modules.ppn .ppn-due{ min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #fff; background: #e5484d; box-shadow: 0 3px 8px -3px rgba(229,72,77,.7); }
html body .side .modules.ppn .ppn-c[data-open="true"] .ppn-due{ display: none; }
html body .side .modules.ppn .ppn-l{ display: grid; grid-template-rows: 1fr; transition: grid-template-rows .38s var(--gl-ease), opacity .25s; }
html body .side .modules.ppn .ppn-c[data-open="false"] .ppn-l{ grid-template-rows: 0fr; opacity: 0; }
html body .side .modules.ppn .ppn-in{ min-height: 0; overflow: hidden; padding: 2px 0 4px; margin-inline-start: 19px; padding-inline-start: 6px; border-inline-start: 1.5px solid var(--ht); }
html body .side .modules.ppn .mod{
  display: flex !important; align-items: center !important; gap: 9px !important; width: 100% !important; min-height: 38px !important; height: auto !important;
  margin: 1px 0 !important; padding: 5px 7px !important; border-radius: 11px !important; font-size: 13px !important; font-weight: 650 !important;
  color: var(--gl-ink-2) !important; background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important; transform: none !important;
  transition: background .22s var(--gl-ease), color .22s, border-color .22s !important;
}
html body .side .modules.ppn .mod > span:not(.ppn-ic):not(.n):not(.k){ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
html body .side .modules.ppn .ppn-ic{
  flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--hd);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 70%), var(--ht);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 16%, transparent);
  transition: transform .3s var(--gl-spring), background .25s, color .25s;
}
html[data-theme="dark"] body .side .modules.ppn .ppn-ic{ background: var(--ht); }
html body .side .modules.ppn .ppn-ic svg{ width: 17px; height: 17px; }
html body .side .modules.ppn .mod:hover{ background: var(--gl-glass-soft) !important; border-color: var(--gl-edge) !important; }
html body .side .modules.ppn .mod:hover .ppn-ic{ transform: scale(1.08) rotate(-4deg); }
html body .side .modules.ppn .mod[aria-current="true"]{
  color: var(--hd) !important; font-weight: 800 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 70%), color-mix(in srgb, var(--h) 11%, var(--gl-glass)) !important;
  border-color: color-mix(in srgb, var(--h) 24%, var(--gl-edge)) !important;
  box-shadow: inset 0 1px 0 var(--gl-rim), 0 6px 16px -12px color-mix(in srgb, var(--h) 80%, transparent) !important;
}
html[data-theme="dark"] body .side .modules.ppn .mod[aria-current="true"]{ color: #fff !important; background: color-mix(in srgb, var(--h) 26%, transparent) !important; }
html body .side .modules.ppn .mod[aria-current="true"] .ppn-ic{ color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--h) 70%, #fff), var(--h) 60%, color-mix(in srgb, var(--h) 75%, #000)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 5px 12px -6px var(--h); }
html body .side .modules.ppn .mod .k{ opacity: 0; font-size: 10px !important; transition: opacity .2s; }
html body .side .modules.ppn .mod:hover .k, html body .side .modules.ppn .mod:focus-visible .k{ opacity: .6; }
html body .side .modules.ppn .mod .n{ min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #fff !important; background: #e5484d !important; }

/* Phone «همه ماژول‌ها» sheet */
html body #layer > .dlg.ppn-sheet{ width: min(560px, calc(100% - 12px)) !important; }
html body #layer > .dlg.ppn-sheet .ppn-body{ padding: 10px 12px 14px; display: grid; gap: 14px; overflow-y: auto; }
html body .ppn-sheet .ppn-sec{ --ht: color-mix(in srgb, var(--h) 14%, transparent); --hd: color-mix(in srgb, var(--h) 78%, var(--gl-ink)); }
html[data-theme="dark"] body .ppn-sheet .ppn-sec{ --ht: color-mix(in srgb, var(--h) 24%, transparent); --hd: color-mix(in srgb, var(--h) 55%, #fff); }
html body .ppn-sheet .ppn-sec h3{ display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; font-size: 12.5px; font-weight: 800; color: var(--gl-muted); }
html body .ppn-sheet .ppn-hi{ width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: var(--hd); background: var(--ht); }
html body .ppn-sheet .ppn-hi svg{ width: 14px; height: 14px; }
html body .ppn-sheet .ppn-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
html body .ppn-sheet .ppn-tile{
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 4px 8px; border-radius: 16px;
  text-align: center; font: inherit; font-size: 11px; font-weight: 700; line-height: 1.5; color: var(--gl-ink-2); transition: background .2s, transform .18s var(--gl-ease);
}
html body .ppn-sheet .ppn-tile:hover{ background: var(--gl-glass-soft); }
html body .ppn-sheet .ppn-tile:active{ transform: scale(.94); }
html body .ppn-sheet .ppn-tile:focus-visible{ outline: 2px solid color-mix(in srgb, var(--h) 60%, #fff); }
html body .ppn-sheet .ppn-tile .ppn-ic{ width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: var(--hd);
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 70%), var(--ht); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 18%, transparent); }
html[data-theme="dark"] body .ppn-sheet .ppn-tile .ppn-ic{ background: var(--ht); }
html body .ppn-sheet .ppn-tile .ppn-ic svg{ width: 22px; height: 22px; }
html body .ppn-sheet .ppn-tile.on .ppn-ic{ color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--h) 70%, #fff), var(--h) 60%, color-mix(in srgb, var(--h) 75%, #000)); }
html body .ppn-sheet .ppn-logout{ all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 14px; font: inherit; font-size: 13px; font-weight: 750; color: #c2410c; background: color-mix(in srgb, #ea580c 10%, transparent); }
html body .ppn-sheet .ppn-logout svg{ width: 18px; height: 18px; }
@media (max-width: 360px){ html body .ppn-sheet .ppn-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce){ html body .side .modules.ppn .ppn-l, html body .side .modules.ppn .ppn-chev{ transition: none; } }
html body .side .modules.ppn .mod::before, html body .side .modules.ppn .mod::after{ display: none !important; content: none !important; }
html body .side .modules.ppn .ppn-ic, html body .side .modules.ppn .ppn-ic svg, html body .side .modules.ppn .ppn-hi svg{ filter: none !important; }
html body .side .modules.ppn .ppn-ic svg, html body .side .modules.ppn .ppn-hi svg, html body .ppn-sheet .ppn-ic svg{ padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; color: inherit !important; opacity: 1 !important; transform: none !important; }
html body .side .modules.ppn .ppn-ic svg{ width: 17px !important; height: 17px !important; }
html body .side .modules.ppn .ppn-hi svg{ width: 15px !important; height: 15px !important; }
html body .side .modules.ppn{ -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%); scrollbar-width: thin; }

/* ---------- 15) Performance (2.44.2) ----------
   Backdrop blur is recomputed for every blurred card on every scroll/animation frame. Behind in-page cards there is
   only the static colour field, so blurring them costs a lot and shows almost nothing: cards get a frosted fill
   instead, and real glass stays on the chrome (sidebar, top bar, phone nav, dialogs). The drifting background orbs
   and the floating FAB loop (which forced the glass above them to re-blur constantly) are stilled.
   Settings → appearance → visual effects «on» (html.fx-max) restores the full recipe. */
html:not(.fx-max) body #page .ph, html:not(.fx-max) body #page .box, html:not(.fx-max) body #page .kpi,
html:not(.fx-max) body #page .coach, html:not(.fx-max) body #page .tile2, html:not(.fx-max) body #page .gcard,
html:not(.fx-max) body #page .ins, html:not(.fx-max) body #page .uacc-card, html:not(.fx-max) body #page .pp-settings-hero,
html:not(.fx-max) body #page .p238-card, html:not(.fx-max) body #page .bk-hero, html:not(.fx-max) body .status .status-item,
html:not(.fx-max) body .status .v26-srn, html:not(.fx-max) body #page .pps-studio > .stabs{
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: var(--gl-sheen), var(--gl-glass-strong) !important;
}
html:not(.fx-max) body .topbar, html:not(.fx-max) body .mnav{ -webkit-backdrop-filter: blur(16px) saturate(170%) !important; backdrop-filter: blur(16px) saturate(170%) !important; }
html:not(.fx-max) body::before, html:not(.fx-max) body::after{ animation: none !important; }
html:not(.fx-max) body .fab, html:not(.fx-max) body #p238ScanFab.p238-fab{ animation: none !important; }
html:not(.fx-max) body #page .box:hover, html:not(.fx-max) body #page .kpi:hover{ will-change: auto; }