#authScreen{
  --W:min(100vw,calc(100vh*.608));
  --W:min(100vw,calc(100dvh*.608));
  --mint:#4fd9a0;
  --mint-2:#27c48a;
  --gold:#e6c274;
  --cream:#f4ead0;
  --ink:#f1f0e2;
  --muted:#8ba398;
  --font:"AbarFaNum","Vazirmatn",Tahoma,"Segoe UI",system-ui,sans-serif;
  --display:"AbarFaNum","Vazirmatn",Tahoma,"Segoe UI",system-ui,sans-serif;
  --mono:"AbarFaNum",Tahoma,ui-monospace,monospace;
  --pop:cubic-bezier(.3,1.7,.5,1);
}
#authScreen, #authScreen *{box-sizing:border-box}
#authScreen button{font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
#authScreen :focus-visible{outline:2px solid var(--mint);outline-offset:2px}
#authScreen.bb-frame{
  --u:min(calc(100vw/56),calc(100vh/50));
  --u:min(calc(100vw/56),calc(100dvh/50));
  position:relative;width:100%;height:100vh;height:100dvh;direction:ltr;
  font-size:var(--u);
  display:grid;place-items:center;
  background:linear-gradient(#08150f 0,#040b08 38%,#020504 100%);
  overflow:hidden;isolation:isolate;
}
#authScreen .bb-stage{position:relative;width:56em;height:50em;flex:none}
#authScreen .bb-glow{position:absolute;left:-80em;right:-80em;top:-60em;bottom:-60em;pointer-events:none;opacity:0;transition:opacity .15s ease;
  background:
    radial-gradient(40em 28em at calc(50% + 42em) calc(50% - 40em),rgba(205,165,80,.24),transparent 72%),
    radial-gradient(26em 22em at calc(50% - 14.6em) calc(50% - 1em),rgba(255,168,76,.15),transparent 72%),
    radial-gradient(60em 30em at calc(50% - 32em) calc(50% + 44em),rgba(20,110,78,.3),transparent 72%),
    radial-gradient(30em 26em at calc(50% + 14em) calc(50% + 8em),rgba(30,150,105,.12),transparent 72%);
}
#authScreen.bb-room.is-on .bb-glow{opacity:1}
#authScreen .bb-lamp-wrap{position:absolute;left:3.4em;top:15.5em;width:20em;height:24em;z-index:2}
#authScreen .bb-lamp{width:100%;height:100%;overflow:visible;display:block}
#authScreen .bb-lamp_light{opacity:0;transition:opacity .04s}
#authScreen.bb-room.is-on .bb-lamp_light{opacity:1}
#authScreen .bb-lamp__body{transition:filter .08s;filter:brightness(.46)}
#authScreen.bb-room.is-on .bb-lamp__body{filter:none}
#authScreen .bb-shade-off{fill:#222d29;stroke:#2c3a35;stroke-width:1.5;stroke-linejoin:round}
#authScreen .bb-lamp__head{
  transform-box:view-box;transform-origin:100px 95px;
  transform:rotate(5.5deg);
  transition:transform .22s var(--pop);
}
#authScreen.bb-room.is-on .bb-lamp__head{transform:rotate(0deg)}
#authScreen .bb-lamp__tug{transform-box:view-box;transform-origin:100px 95px}
#authScreen .bb-face{transition:opacity .04s}
#authScreen .bb-face path{fill:none;stroke-linecap:round}
#authScreen .bb-face--off{opacity:1}
#authScreen .bb-face--off path{stroke:#aebdb6;stroke-width:2.3;opacity:.8}
#authScreen .bb-zz{fill:#9db1a8;font-family:var(--font);font-weight:700;font-style:italic;opacity:.8;animation:bb-zz 3.2s ease-in-out infinite}
#authScreen .bb-zz2{animation-delay:.9s}
#authScreen .bb-face--on{opacity:0}
#authScreen .bb-eyes-happy{stroke:#5d2a14;stroke-width:2.8}
#authScreen.bb-room.is-on .bb-face--off{opacity:0}
#authScreen.bb-room.is-on .bb-face--on{opacity:1}
#authScreen .bb-pull{cursor:grab;outline:none;touch-action:none}
#authScreen .bb-pull:active{cursor:grabbing}
#authScreen .bb-rope{fill:none;stroke:#cdb27a;stroke-width:1.7;stroke-linecap:round;transition:stroke .3s}
#authScreen .bb-grommet{fill:#caa96a}
#authScreen .bb-rope-hit{fill:transparent}
#authScreen .bb-bead{fill:#e5c887;stroke:#f7e3ad;stroke-width:1;transition:filter .2s}
#authScreen.bb-room:not(.is-on) .bb-rope{stroke:#7d6c49}
#authScreen.bb-room:not(.is-on) .bb-bead{fill:#a98c57;stroke:#c9ab72}
#authScreen .bb-pull:hover .bb-bead, #authScreen .bb-pull.is-armed .bb-bead, #authScreen .bb-pull:focus-visible .bb-bead{filter:drop-shadow(0 0 4px rgba(255,214,128,.9))}
#authScreen .bb-pull:focus-visible .bb-bead{stroke:#fff}
#authScreen .bb-hint{
  position:absolute;left:0;right:0;top:22.2em;text-align:center;
  font:.8em var(--mono);letter-spacing:.16em;color:#a79b76;opacity:.85;
  pointer-events:none;transition:opacity .35s;
}
#authScreen.bb-room.is-on .bb-hint{opacity:0}
#authScreen .bb-card{
  position:absolute;right:5.3em;top:12em;width:26.4em;z-index:3;
  border:1px solid rgba(214,186,118,.2);border-radius:1.5em;
  background:linear-gradient(160deg,rgba(17,58,43,.86),rgba(8,30,22,.93) 55%,rgba(6,22,16,.97));
  box-shadow:0 2.4em 5em rgba(0,0,0,.55),0 0 3em rgba(40,200,150,.06),inset 0 1px 0 rgba(255,226,160,.16);
  transition:opacity .12s ease,filter .12s ease;
}
#authScreen .bb-card__body{padding:4.3em 2.05em 1.7em}
#authScreen.bb-room:not(.is-on) .bb-card{opacity:.06;filter:saturate(.5)}
#authScreen .bb-owl{
  position:absolute;left:50%;top:-10.6em;width:17em;height:14.9em;margin-left:-8.5em;z-index:4;
  overflow:visible;pointer-events:auto;
  transition:opacity .12s ease,filter .12s ease;
}
#authScreen.bb-room:not(.is-on) .bb-owl{opacity:.3;filter:brightness(.42) saturate(.7)}
#authScreen .bb-owl .bb-eye-happy{display:none}
#authScreen .bb-owl.is-happy .bb-eye-open, #authScreen .bb-owl.is-happy .bb-lid{display:none}
#authScreen .bb-owl.is-happy .bb-eye-happy{display:block}
#authScreen .bb-owl__cast{transition:opacity .5s}
#authScreen.bb-room:not(.is-on) .bb-owl__cast{opacity:.4}
#authScreen .bb-brand{margin:0;text-align:center;font:800 2.6em/1 var(--display);letter-spacing:-.02em;color:var(--cream);text-shadow:0 0 .6em rgba(230,194,116,.25)}
#authScreen .bb-tagline{margin:.62em 0 1.3em;text-align:center;font-size:.98em;color:#b4bfa8;letter-spacing:.005em}
#authScreen .bb-form[hidden]{display:none}
#authScreen .bb-form{animation:bb-formIn .45s cubic-bezier(.2,.8,.2,1) both}
#authScreen .bb-field{position:relative;margin-top:.95em;font-size:1.12em}
#authScreen .bb-field input{
  display:block;width:100%;height:3.15em;padding:1.1em 2.7em 0 .95em;
  font:inherit;color:var(--ink);caret-color:var(--mint);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:.8em;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
#authScreen .bb-field input:hover{border-color:rgba(255,255,255,.16)}
#authScreen .bb-field input:focus{
  border-color:var(--mint);background:rgba(255,255,255,.055);
  box-shadow:0 0 0 .22em rgba(94,230,179,.14),0 0 1.6em rgba(60,220,165,.1);
}
#authScreen .bb-field label{
  position:absolute;left:.95em;top:50%;transform:translateY(-50%);
  font-size:1em;color:#8ea69b;pointer-events:none;white-space:nowrap;
  transition:top .16s ease,font-size .16s ease,color .16s ease,transform .16s ease;
}
#authScreen .bb-field input:focus+label, #authScreen .bb-field input:not(:placeholder-shown)+label, #authScreen .bb-field input:-webkit-autofill+label{top:.52em;transform:none;font-size:.7em;color:#a7bdb2}
#authScreen .bb-field input:focus+label{color:var(--mint)}
#authScreen .bb-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px #12281f inset;-webkit-text-fill-color:var(--ink)}
#authScreen .bb-pw-eye{
  position:absolute;right:.35em;top:50%;transform:translateY(-50%);
  width:2.4em;height:2.4em;display:grid;place-items:center;border:0;background:none;border-radius:.6em;color:#8ea69b;
}
#authScreen .bb-pw-eye:hover{color:#fff}
#authScreen .bb-pw-eye svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#authScreen .bb-pw-eye .bb-i-eye-off{display:none}
#authScreen .bb-pw-eye[aria-pressed="true"] .bb-i-eye{display:none}
#authScreen .bb-pw-eye[aria-pressed="true"] .bb-i-eye-off{display:block}
#authScreen .bb-row{display:flex;align-items:center;justify-content:space-between;margin:1.15em 0 1.15em;font-size:.97em}
#authScreen .bb-check{display:inline-flex;align-items:center;gap:.62em;color:#a1b5aa;cursor:pointer;user-select:none}
#authScreen .bb-check input{position:absolute;opacity:0;pointer-events:none}
#authScreen .bb-box{width:1.2em;height:1.2em;border-radius:.34em;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.03);display:grid;place-items:center;transition:.15s}
#authScreen .bb-check input:checked+.bb-box{background:var(--mint);border-color:var(--mint)}
#authScreen .bb-check input:checked+.bb-box::after{content:"";width:.34em;height:.62em;border:solid #04281b;border-width:0 .16em .16em 0;transform:translateY(-.06em) rotate(45deg)}
#authScreen .bb-check input:focus-visible+.bb-box{outline:2px solid var(--mint);outline-offset:2px}
#authScreen .bb-link-btn{border:0;background:none;padding:0;color:var(--cream);font-weight:500}
#authScreen .bb-link-btn:hover{color:var(--mint);text-decoration:underline}
#authScreen .bb-btn{
  position:relative;width:100%;height:3.5em;padding:0 1.05em 0 1.2em;
  display:flex;align-items:center;justify-content:space-between;
  border:0;border-radius:.95em;color:#04281b;font-size:1.18em;font-weight:700;
  background:linear-gradient(100deg,#6ff0c2,#33d79f);
  box-shadow:0 .55em 1.7em rgba(40,215,160,.26),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .18s,box-shadow .18s,filter .18s;
}
#authScreen .bb-btn:hover{transform:translateY(-.1em);filter:brightness(1.05);box-shadow:0 .8em 2em rgba(40,215,160,.36),inset 0 1px 0 rgba(255,255,255,.45)}
#authScreen .bb-btn:active{transform:translateY(0) scale(.99)}
#authScreen .bb-btn[disabled]{cursor:progress;filter:saturate(.85)}
#authScreen .bb-btn:focus-visible{outline-color:#fff}
#authScreen .bb-arrow{width:1.4em;height:1.4em;fill:none;stroke:#04281b;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#authScreen .bb-door{width:3.3em;height:2.2em;overflow:visible}
#authScreen .bb-door__in{fill:#0a4030}
#authScreen .bb-door__leaf{fill:#dcfff2;transform-box:fill-box;transform-origin:left center;transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
#authScreen .bb-door__man{transition:transform .8s cubic-bezier(.5,0,.3,1),opacity .25s .55s}
#authScreen .bb-door__man circle{fill:#fff}
#authScreen .bb-door__man path{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round}
#authScreen .bb-btn.is-loading .bb-door__leaf{transform:scaleX(.18)}
#authScreen .bb-btn.is-loading .bb-door__man{transform:translate(19px,0);opacity:0}
#authScreen .bb-btn.is-done .bb-door__man{transform:translate(19px,0);opacity:0;transition:none}
#authScreen .bb-status{margin:.75em 0 0;text-align:center;font-size:.9em;color:#8fb7a5;animation:bb-formIn .3s both}
#authScreen .bb-status:empty{display:none}
#authScreen .bb-status.is-ok{color:#9af2cb}
#authScreen .bb-status.is-err{color:#ff9f95}
#authScreen .bb-divider{display:flex;align-items:center;gap:.9em;margin:1.35em 0 .95em;font-size:.84em;color:#74897f}
#authScreen .bb-divider::before, #authScreen .bb-divider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.08)}
#authScreen .bb-social{display:grid;grid-template-columns:1fr 1fr;gap:.85em}
#authScreen .bb-social button{
  height:3.05em;display:flex;align-items:center;justify-content:center;gap:.6em;
  border:1px solid rgba(255,255,255,.09);border-radius:.85em;background:rgba(255,255,255,.035);
  font-size:1em;font-weight:500;color:#e8f3ed;transition:background .18s,border-color .18s,transform .18s;
}
#authScreen .bb-social button:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);transform:translateY(-.08em)}
#authScreen .bb-social svg{width:1.25em;height:1.25em}
#authScreen .bb-switch{margin:1.35em 0 0;text-align:center;font-size:.9em;color:#80968b}
#authScreen .bb-switch button{border:0;background:none;padding:0;color:var(--gold);font-weight:600}
#authScreen .bb-switch button:hover{text-decoration:underline}
#authScreen .bb-toast{
  position:absolute;left:50%;bottom:-1em;z-index:9;transform:translate(-50%,1em);opacity:0;pointer-events:none;
  max-width:90%;padding:.85em 1.4em;border-radius:1em;font-size:1.1em;text-align:center;
  background:#10281f;border:1px solid rgba(110,235,190,.28);color:#dff8ea;box-shadow:0 1em 3em rgba(0,0,0,.55);
  transition:opacity .25s,transform .25s;
}
#authScreen .bb-toast.bb-show{opacity:1;transform:translate(-50%,0)}
#authScreen .bb-card.bb-shake{animation:bb-shake .45s ease}
@keyframes bb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-.45em)}}
@keyframes bb-zz{0%,100%{opacity:.25;transform:translateY(2px)}50%{opacity:.9;transform:translateY(-2px)}}
@keyframes bb-formIn{from{opacity:0;transform:translateY(.6em)}to{opacity:1;transform:none}}
@keyframes bb-hop{0%{transform:translateY(0)}35%{transform:translateY(-1.3em)}70%{transform:translateY(.1em)}100%{transform:none}}
@keyframes bb-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-.5em)}40%{transform:translateX(.45em)}60%{transform:translateX(-.3em)}80%{transform:translateX(.2em)}}
@media (prefers-reduced-motion:reduce){#authScreen, #authScreen *, #authScreen *::before, #authScreen *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}}
@media (max-width:600px){#authScreen.bb-frame{--u:calc(100vw/40)}
#authScreen .bb-stage{width:40em;height:58em}
#authScreen .bb-lamp-wrap{left:-1.6em;top:0;width:17em;height:20.4em}
#authScreen .bb-hint{top:18.6em}
#authScreen .bb-card{right:auto;left:50%;margin-left:-16.5em;width:33em;top:21.5em}
#authScreen .bb-toast{bottom:-3em}}
/* ═════ سازگاری با صفحهٔ سایت (فارسی/راست‌به‌چپ) ═════ */
html:has(#authScreen:not([hidden])), body:has(#authScreen:not([hidden])){background:#020504 !important}
#authScreen[hidden]{display:none !important}
#authScreen{color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
#authScreen #authRoleTabs{display:none !important}
#authScreen .bb-card{direction:rtl;text-align:right}
#authScreen .bb-brand{letter-spacing:0;font-size:2.35em;line-height:1.25}
#authScreen .bb-tagline{letter-spacing:0;line-height:1.7}
#authScreen .bb-hint{letter-spacing:.04em;font-size:.95em}
#authScreen .bb-field input{padding:1.1em .95em 0 2.7em;text-align:right;direction:rtl}
#authScreen .bb-field input[type=password],#authScreen .bb-field input[type=email]{direction:ltr;text-align:left}
#authScreen .bb-field label{left:auto;right:.95em;white-space:nowrap}
#authScreen .bb-field input[type=password]+label,#authScreen .bb-field input[type=email]+label{right:.95em}
#authScreen .bb-pw-eye{right:auto;left:.35em}
#authScreen .bb-field--help input{padding-left:2.7em}
#authScreen .bb-field .field-help-wrap{position:absolute;left:.7em;top:50%;transform:translateY(-50%);z-index:2}
#authScreen .bb-field .field-help-btn{width:1.5em;height:1.5em;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:#a7bdb2;font-size:.85em;display:inline-flex;align-items:center;justify-content:center;padding:0}
#authScreen .bb-field .field-help-btn:hover,#authScreen .bb-field .field-help-btn.active{background:var(--mint);border-color:var(--mint);color:#04281b}
#authScreen .bb-field .field-help-tooltip{background:#10281f;border:1px solid rgba(110,235,190,.28);color:#dff8ea;font-size:.8em;line-height:1.7}
#authScreen .bb-field .field-help-tooltip::before{background:#10281f;border-color:rgba(110,235,190,.28)}
#authScreen .bb-field--help.bb-field--pw .field-help-wrap{left:3em}
#authScreen .bb-field--help.bb-field--pw input{padding-left:5.2em}
#authScreen .bb-row{justify-content:flex-start}
#authScreen .bb-link-btn{font-size:1em;color:var(--cream);background:none;border:0;padding:0;font-weight:500;text-decoration:none}
#authScreen .bb-link-btn:hover{color:var(--mint);text-decoration:underline}
#authScreen .bb-btn{padding:0 1.2em 0 1.05em;direction:rtl;font-family:inherit}
#authScreen .bb-btn .bb-arrow{transform:scaleX(-1)}
#authScreen .bb-btn:disabled{opacity:.85}
#authScreen .bb-switch{color:#80968b}
#authScreen .bb-hint{direction:rtl}
#authScreen.bb-leaving .bb-card{pointer-events:none}
/* «نقشهٔ سایت» زیر صحنه، با رنگ‌های تیره */
html:has(#authScreen:not([hidden])) .sm-stack,html:has(#authScreen:not([hidden])) .site-map{--card:#0b1d16;--line:rgba(214,186,118,.2);--text:#e8f3ed;--muted:#9bb2a6;--primary:#4fd9a0;--surface:#0b1d16;color:#e8f3ed}
@media (max-width:600px){
  #authScreen.bb-frame{height:auto;min-height:100dvh}
  #authScreen .bb-hint{top:18.6em}
}

/* فرم عضویت پنج فیلد دارد: صحنه کمی بلندتر و داخل خودش اسکرول می‌شود */
#authScreen.bb-signup{overflow-y:auto;overflow-x:hidden;place-items:start center}
#authScreen.bb-signup .bb-stage{height:66em}
#authScreen.bb-signup .bb-field{margin-top:.7em}
@media (max-width:600px){#authScreen.bb-signup .bb-stage{height:84em}}


/* ═════ نوشتهٔ «طناب را بکشید»: پررنگ و خوانا ═════ */
#authScreen .bb-hint{
  font-family:var(--font);font-weight:700;letter-spacing:0;font-size:1.1em;
  color:#ffe6ad;opacity:1;
  text-shadow:0 0 .5em rgba(255,200,100,.65),0 .08em .2em rgba(0,0,0,.9);
  animation:bb-hint-pulse 1.8s ease-in-out infinite;
}
@keyframes bb-hint-pulse{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.7;transform:translateY(.25em)}}
@media (max-width:600px){#authScreen .bb-hint{font-size:1.55em}}

/* ═════ دکمهٔ ورود: در باز می‌شود، آدمک آرام داخل می‌رود ═════ */
#authScreen .bb-btn.is-opening .bb-door__leaf{transform:scaleX(.18);transition:transform .45s ease}
#authScreen .bb-btn.is-opening .bb-door__man{transition:transform 1.3s cubic-bezier(.45,.05,.55,.95),opacity .3s 1s}
#authScreen .bb-btn.is-walking .bb-door__man{transform:translate(19px,0);opacity:0}
#authScreen .bb-btn.is-opening:disabled{opacity:1;cursor:progress}


/* ═════ پس‌زمینهٔ کتابخانه (وکتور، کم‌رنگ) + طاقچه و گلدان ═════ */
#authScreen.bb-frame::before,#authScreen.bb-frame::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
#authScreen.bb-frame::before{
  background:center/cover no-repeat;
  opacity:0;transform:scale(1.04);transition:opacity .6s ease;
}
#authScreen.bb-bg-ready::before{background-image:url(/img/library-bg.svg?v=20261019)}
#authScreen.bb-room.is-on::before{opacity:.3}
#authScreen.bb-room.is-on::after{opacity:1}
#authScreen.bb-frame::after{opacity:0;transition:opacity .6s ease;background:radial-gradient(ellipse at 50% 45%,rgba(2,8,5,0) 25%,rgba(2,6,4,.7) 100%),linear-gradient(rgba(4,12,8,.25),rgba(2,5,4,.45))}
#authScreen .bb-decor{opacity:.1;filter:brightness(.35);transition:opacity .45s ease,filter .45s ease}
#authScreen.bb-room.is-on .bb-decor{opacity:1;filter:none}