/* ============================================================================
   Login / register / recovery — this page's theme, in one file.

   This is the page the redesign screenshots show (Redesign_Full_20260922/
   screenshots/01_login), consolidated. Those screenshots were produced by
   login.css + design-tokens.css + theme.css + the redesign's "Colour
   correction" and "Colour life" patches, all fighting over the same elements
   with !important. The values below are what that cascade actually rendered,
   measured in the browser, written once per element.

   Loads after /styles/redesign/tokens.css (global palette). The page no longer
   loads theme.css or design-tokens.css.

   Deliberate departures from the screenshots:
     - the navy column is one solid navy (#041a2d) in both themes with a
       faint light-blue halo, painted once (.shell::before) so there is no
       seam between its two blocks;
     - the benefit chips look the same in both themes (dark mode had lost the
       coloured edge on the first chip);
     - surfaces are frosted glass over slowly drifting bubbles (faint gold in
       light, white in dark). No radial gradients anywhere: the bubbles are
       box-shadow circles and the navy's faint sheen is linear light blue. The bubbles
       move on transform only; the only blur layers are the form column and the
       small theme button;
     - an empty success hint takes no space (it showed as a blank strip);
     - phone inputs are 16px, the size below which iOS zooms the page.
   ========================================================================== */

/* ----- page tokens --------------------------------------------------------- */
body.authPage{
  --a-page:linear-gradient(135deg,#dce6eb 0%,#eaf0f3 52%,#dfe8ed 100%);
  --a-form:rgba(228,239,240,.24);
  --a-track:rgba(228,235,240,.55);--a-line:#c9d6df;
  --a-tab-on:#fff;--a-strong:#071a29;--a-muted:#4f6474;--a-tab-shadow:rgba(9,24,38,.07);
  --a-mode:rgba(255,255,255,.55);--a-mode-line:#c9d6df;
  --a-field:rgba(255,255,255,.62);--a-field-line-phone:#6b7e8c;--a-placeholder:#6b7e8c;
  --a-accent:#08795f;--a-accent-hi:#0aa77b;--a-on-accent:#fff;--a-soft:#e6f6f1;
  --a-danger:#c84c5c;
  --a-hint:#e6f6f0;--a-hint-text:#078b66;--a-hint-line:#9ec5c4;--a-legal-text:#4f6474;
  --a-card-shadow:0 30px 90px rgba(9,24,38,.2);
  --a-panel:#041a2d;--a-panel-text:#eaf2f8;--a-panel-sub:#9fb6c8;--a-panel-title:#fff;
  --a-ice:150,200,235;            /* the light blue that frosts the navy */
  --a-sheen:.025;--a-halo:.018;--a-edge:.04;   /* one solid navy for both themes, faint halo */
  --a-chip:rgba(150,200,235,.04);--a-chip-line:rgba(150,200,235,.10);
  --a-life-em:11,122,96;--a-life-sky:63,143,184;--a-life-gold:199,154,46;
  --a-bubble:171,208,237;--a-bubble-core-rgb:222,238,251;  /* pale blue */
  --a-bubble-alpha:.42;--a-bubble-core-alpha:.75;
  --bb:18px;--bc:5.5px;   /* bubble edge blur: body, core (shared by both themes) */
  --a-glass-blur:3px;   /* thin frost: the bubbles must read clearly through the form */
  /* owner rule: every opacity and blur is the same in both themes; only colours change */
  --a-glass-edge:rgba(255,255,255,.55);
  --palette-browser:#e4ebf0;           /* read by login.js for <meta theme-color> */
  color-scheme:light;
}
body.authPage.theme-dark{
  --a-page:#040e17;
  --a-form:rgba(12,34,46,.24);
  --a-track:rgba(4,14,23,.55);--a-line:#294657;
  --a-tab-on:#12293c;--a-strong:#edf5f9;--a-muted:#b3c6d2;--a-tab-shadow:rgba(0,0,0,.1);
  --a-mode:rgba(16,31,48,.55);--a-mode-line:#12293c;
  --a-field:rgba(14,34,48,.62);--a-field-line-phone:#7e93a1;--a-placeholder:#7e93a1;
  --a-accent:#08795f;--a-accent-hi:#0aa77b;--a-on-accent:#fff;--a-soft:rgba(10,167,123,.14);   /* same greens as light (owner rule) */
  --a-danger:#e0707e;
  --a-hint:#061a2d;--a-hint-text:#9fb6c8;--a-hint-line:#18324e;--a-legal-text:#9fb6c8;
  --a-card-shadow:0 30px 90px rgba(0,0,0,.25);
  --a-life-em:54,214,166;--a-life-sky:95,178,220;--a-life-gold:224,189,98;
  --a-panel:#041a2d;--a-panel-text:#eaf2f8;--a-panel-sub:#9fb6c8;--a-panel-title:#fff;
  /* same material as light: body a step off the page colour, core close to the
     page colour so the centre melts into it (light: darker body, near-white core) */
  --a-bubble:17,33,49;--a-bubble-core-rgb:6,15,24;
  --palette-browser:#040e17;
  color-scheme:dark;
}

/* ----- base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;min-height:100dvh;padding:20px;
  display:grid;place-items:center;
  background:var(--a-page);color:var(--text);
  font:600 16px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none!important}   /* the one !important: state must beat layout */

/* ----- background bubbles --------------------------------------------------
   Each layer is one 40px circle whose box-shadows are the bubbles: a soft
   body (--bb blur) and a brighter core on top (radius = 20px + spread). The
   layers drift on transform only, so after the first paint it is compositor
   work. Same geometry in both themes; only --a-bubble* changes. */
body::before,body::after{
  content:"";position:fixed;left:0;top:0;z-index:0;pointer-events:none;
  width:40px;height:40px;border-radius:50%;
  --f:rgba(var(--a-bubble),var(--a-bubble-alpha));--c:rgba(var(--a-bubble-core-rgb),var(--a-bubble-core-alpha));
  transform-origin:50vw 50vh;   /* rotate about the screen centre: each bubble gets its own arc */
  will-change:transform;
}
body::before{
  box-shadow:
    4vw 12vh var(--bb) 0px var(--f),4vw 12vh var(--bc) -10px var(--c),
    14vw 40vh var(--bb) 3px var(--f),14vw 40vh var(--bc) -7px var(--c),
    8vw 78vh var(--bb) 0px var(--f),8vw 78vh var(--bc) -11px var(--c),
    26vw 20vh var(--bb) 0px var(--f),26vw 20vh var(--bc) -12px var(--c),
    30vw 62vh var(--bb) 0px var(--f),30vw 62vh var(--bc) -9px var(--c),
    46vw 8vh var(--bb) 0px var(--f),46vw 8vh var(--bc) -13px var(--c),
    52vw 44vh var(--bb) 0px var(--f),52vw 44vh var(--bc) -11px var(--c),
    64vw 80vh var(--bb) 7px var(--f),64vw 80vh var(--bc) -5px var(--c),
    74vw 24vh var(--bb) 0px var(--f),74vw 24vh var(--bc) -10px var(--c),
    86vw 56vh var(--bb) 2px var(--f),86vw 56vh var(--bc) -8px var(--c),
    94vw 10vh var(--bb) 0px var(--f),94vw 10vh var(--bc) -12px var(--c),
    40vw 92vh var(--bb) 0px var(--f),40vw 92vh var(--bc) -12px var(--c),
    34vw 30vh var(--bb) 0px var(--f),34vw 30vh var(--bc) -11px var(--c),
    42vw 52vh var(--bb) 0px var(--f),42vw 52vh var(--bc) -12px var(--c),
    50vw 24vh var(--bb) 0px var(--f),50vw 24vh var(--bc) -10px var(--c),
    58vw 64vh var(--bb) 0px var(--f),58vw 64vh var(--bc) -12px var(--c),
    66vw 40vh var(--bb) 0px var(--f),66vw 40vh var(--bc) -11px var(--c),
    38vw 76vh var(--bb) 0px var(--f),38vw 76vh var(--bc) -13px var(--c),
    22vw 50vh var(--bb) 0px var(--f),22vw 50vh var(--bc) -12px var(--c),
    80vw 74vh var(--bb) 0px var(--f),80vw 74vh var(--bc) -11px var(--c);
  animation:aDriftA 57.2s ease-in-out infinite alternate;
}
body::after{
  box-shadow:
    2vw 48vh var(--bb) 0px var(--f),2vw 48vh var(--bc) -12px var(--c),
    18vw 88vh var(--bb) 0px var(--f),18vw 88vh var(--bc) -10px var(--c),
    22vw 6vh var(--bb) 0px var(--f),22vw 6vh var(--bc) -11px var(--c),
    36vw 34vh var(--bb) 0px var(--f),36vw 34vh var(--bc) -12px var(--c),
    44vw 70vh var(--bb) 2px var(--f),44vw 70vh var(--bc) -8px var(--c),
    58vw 16vh var(--bb) 0px var(--f),58vw 16vh var(--bc) -11px var(--c),
    66vw 52vh var(--bb) 0px var(--f),66vw 52vh var(--bc) -12px var(--c),
    78vw 90vh var(--bb) 0px var(--f),78vw 90vh var(--bc) -10px var(--c),
    90vw 34vh var(--bb) 3px var(--f),90vw 34vh var(--bc) -7px var(--c),
    96vw 74vh var(--bb) 0px var(--f),96vw 74vh var(--bc) -12px var(--c),
    10vw 26vh var(--bb) 0px var(--f),10vw 26vh var(--bc) -13px var(--c),
    54vw 96vh var(--bb) 0px var(--f),54vw 96vh var(--bc) -12px var(--c),
    32vw 46vh var(--bb) 0px var(--f),32vw 46vh var(--bc) -10px var(--c),
    46vw 38vh var(--bb) 0px var(--f),46vw 38vh var(--bc) -12px var(--c),
    56vw 58vh var(--bb) 0px var(--f),56vw 58vh var(--bc) -9px var(--c),
    62vw 30vh var(--bb) 0px var(--f),62vw 30vh var(--bc) -13px var(--c),
    70vw 68vh var(--bb) 0px var(--f),70vw 68vh var(--bc) -12px var(--c),
    48vw 84vh var(--bb) 0px var(--f),48vw 84vh var(--bc) -12px var(--c),
    28vw 74vh var(--bb) 0px var(--f),28vw 74vh var(--bc) -11px var(--c),
    84vw 20vh var(--bb) 0px var(--f),84vw 20vh var(--bc) -12px var(--c);
  animation:aDriftB 75.4s ease-in-out infinite alternate;
}
/* irregular paths: ten uneven segments, changing headings, and a small rotation about
   the screen centre, so bubbles in different places move differently */
@keyframes aDriftA{
  0%{transform:translate3d(0vw,0vh,0) rotate(0deg)}
  7%{transform:translate3d(5vw,-8vh,0) rotate(3deg)}
  15%{transform:translate3d(13vw,-3vh,0) rotate(-2deg)}
  24%{transform:translate3d(19vw,-12vh,0) rotate(4deg)}
  33%{transform:translate3d(11vw,-19vh,0) rotate(-3deg)}
  41%{transform:translate3d(2vw,-14vh,0) rotate(5deg)}
  52%{transform:translate3d(-7vw,-22vh,0) rotate(-4deg)}
  63%{transform:translate3d(-13vw,-11vh,0) rotate(6deg)}
  74%{transform:translate3d(-4vw,-4vh,0) rotate(-2deg)}
  86%{transform:translate3d(6vw,-16vh,0) rotate(3deg)}
  100%{transform:translate3d(2vw,-7vh,0) rotate(-1deg)}
}
@keyframes aDriftB{
  0%{transform:translate3d(0vw,0vh,0) rotate(0deg)}
  9%{transform:translate3d(-6vw,7vh,0) rotate(-4deg)}
  18%{transform:translate3d(-15vw,3vh,0) rotate(3deg)}
  27%{transform:translate3d(-20vw,12vh,0) rotate(-5deg)}
  38%{transform:translate3d(-12vw,20vh,0) rotate(2deg)}
  47%{transform:translate3d(-3vw,14vh,0) rotate(-6deg)}
  58%{transform:translate3d(6vw,23vh,0) rotate(4deg)}
  69%{transform:translate3d(14vw,15vh,0) rotate(-3deg)}
  78%{transform:translate3d(9vw,5vh,0) rotate(5deg)}
  89%{transform:translate3d(-4vw,11vh,0) rotate(-2deg)}
  100%{transform:translate3d(-2vw,6vh,0) rotate(1deg)}
}

/* ----- the card ------------------------------------------------------------ */
/* RTL: grid column 1 is the right-hand side. The navy column is one glass
   layer (.shell::before) behind both navy blocks, so they share one surface
   with no seam. 46% = the .92fr column of .92fr/1.08fr. */
.shell{
  position:relative;z-index:1;
  width:min(1180px,100%);min-height:720px;
  display:grid;grid-template-columns:.92fr 1.08fr;grid-template-rows:auto 1fr;
  border:1px solid var(--a-glass-edge);border-radius:28px;overflow:hidden;
  box-shadow:var(--a-card-shadow);
}
.shell::before{
  content:"";position:absolute;inset:0 0 0 auto;width:46%;z-index:-1;
  /* like the redesign's navy surfaces (dashboard hero, sidebar): a quiet
     navy2 -> navy fall, with only a trace of light blue as the glass */
  background:
    linear-gradient(160deg,rgba(10,42,68,.55),transparent 70%),
    linear-gradient(200deg,rgba(var(--a-ice),var(--a-sheen)),transparent 45%),
    linear-gradient(20deg,rgba(var(--a-ice),calc(var(--a-sheen) / 2)),transparent 50%),
    var(--a-panel);
  /* the faint halo: a soft inner glow along the edges (box-shadow, not a radial gradient) */
  box-shadow:inset 0 0 70px rgba(var(--a-ice),var(--a-halo)),inset 1px 0 0 rgba(var(--a-ice),var(--a-edge)),inset 0 1px 0 rgba(var(--a-ice),calc(var(--a-edge) * .7));
}

/* ----- navy glass column --------------------------------------------------------- */
.intro,.benefitsPanel{color:var(--a-panel-text)}
.intro{grid-column:1;grid-row:1;padding:52px 48px 20px}
.benefitsPanel{grid-column:1;grid-row:2;padding:30px 48px 52px;display:flex;align-items:flex-end}

.brand{display:flex;align-items:center;gap:16px;min-height:72px}
.brand img{
  width:100px;height:100px;flex:0 0 100px;border-radius:50%;object-fit:cover;
  background:#040f1b;
  box-shadow:0 0 0 3px rgba(var(--a-life-gold),.45),0 8px 24px rgba(var(--a-life-gold),.25);
  animation:aLogo 7s ease-in-out infinite;
}
/* the logo floats a few pixels and tilts a degree — transform only */
@keyframes aLogo{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-2deg)}}
.brand b{display:block;font-size:18px;font-weight:800;color:var(--a-panel-title)}
.doctor{font-size:12px;font-weight:700;color:var(--a-panel-sub)}
.intro h1{font-size:36px;font-weight:800;line-height:1.55;margin:48px 0 0}

.benefits{display:grid;gap:14px;width:100%;margin:0}
.benefit{
  display:flex;align-items:center;min-height:64px;padding:16px 18px;
  border-radius:18px;font-size:15.5px;font-weight:800;line-height:1.7;
  border:1px solid var(--a-chip-line);border-right:3px solid rgb(var(--a-life-em));
  background:var(--a-chip);
}
.benefit:nth-child(2){border-right-color:rgb(var(--a-life-sky))}
.benefit:nth-child(3){border-right-color:rgb(var(--a-life-gold))}

/* ----- form column --------------------------------------------------------- */
.auth{
  grid-column:2;grid-row:1/3;padding:58px 52px;
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(180deg,rgba(var(--a-life-em),.05),transparent 40%) var(--a-form);
  -webkit-backdrop-filter:blur(var(--a-glass-blur)) saturate(1.4);backdrop-filter:blur(var(--a-glass-blur)) saturate(1.4);
}

.tabs{display:flex;padding:4px;margin-bottom:30px;border-radius:14px;background:var(--a-track);border:1px solid var(--a-line)}
.tabs button{
  flex:1;min-height:44px;padding:10px;border:0;border-radius:10px;background:transparent;
  font-size:17px;font-weight:900;color:var(--a-muted);
  transition:background-color var(--fast) linear,color var(--fast) linear;
}
.tabs button.active{background:var(--a-tab-on);color:var(--a-strong);box-shadow:0 3px 10px var(--a-tab-shadow)}

.form{display:grid;gap:14px}

.authMode{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.authMode button{
  min-height:46px;padding:9px 10px;border-radius:12px;
  border:1px solid var(--a-mode-line);background:var(--a-mode);
  font-size:17px;color:var(--a-muted);
}
.authMode button.active{border-color:var(--a-accent-hi);background:var(--a-soft);color:var(--a-strong)}

.fields{display:block}
.field label{display:block;margin-bottom:6px;font-size:12px;font-weight:800;color:var(--a-muted)}
.field input{
  width:100%;min-height:50px;padding:12px 13px;
  border:1px solid var(--a-line);border-radius:14px;outline:none;
  background:var(--a-field);color:var(--text);font-size:15px;font-weight:700;
  transition:border-color var(--fast) linear,box-shadow var(--fast) linear;
}
.field input::placeholder{color:var(--a-placeholder);opacity:1}
.field input:focus{border-color:var(--a-accent-hi);box-shadow:0 0 0 4px color-mix(in srgb,var(--a-accent-hi) 22%,transparent)}

.passwordField{position:relative}
.passwordField input{padding-left:54px}
.passwordToggle{
  position:absolute;left:7px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;display:grid;place-items:center;
  border:0;border-radius:10px;background:transparent;color:var(--a-muted);
}
.passwordToggle:hover{background:var(--a-soft);color:var(--a-accent-hi)}
.passwordToggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.passwordField input::-ms-reveal,.passwordField input::-ms-clear{display:none}

/* ----- buttons ------------------------------------------------------------- */
.btn{
  display:block;width:100%;min-height:50px;margin-top:4px;padding:12px 16px;
  border:1px solid var(--a-accent);border-radius:14px;
  background:var(--a-accent);color:var(--a-on-accent);font-size:17px;font-weight:700;
  transition:transform var(--fast) cubic-bezier(.22,.78,.24,1),filter var(--fast) linear;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.99)}
.btn.btnSecondary{background:transparent;border-color:var(--a-accent-hi);color:var(--a-accent-hi);font-weight:800}
/* «ارسال کد ورود» on the light page: the bright green reads 2.6:1 on the pale glass; the main button's green reads above 4.5 */
body.authPage:not(.theme-dark) .btn.btnSecondary{border-color:var(--a-accent);color:var(--a-accent)}
.btn.btnSecondary:hover{background:var(--a-soft);filter:none}

.linkBtn{
  justify-self:center;padding:6px;border:0;background:transparent;
  font-size:17px;color:var(--a-muted);text-decoration:none;
}
.linkBtn:hover{color:var(--a-accent-hi)}
.inlineActions{display:flex;gap:8px;align-items:center}
.inlineActions .btn{flex:1}

button:focus-visible,input[type=checkbox]:focus-visible{outline:2px solid var(--a-accent-hi);outline-offset:2px}

/* ----- steps, messages, legal ---------------------------------------------- */
.formStepHead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.formStepHead b{font-size:17px;font-weight:900;color:var(--text)}
.stepBadge{
  padding:5px 9px;border-radius:999px;font-size:11px;font-weight:900;
  background:var(--a-track);border:1px solid var(--a-line);color:var(--a-strong);
}
#resetView>div[id^="resetStep"]{display:grid;gap:12px}
#resetView .formStepHead{margin-bottom:2px}

.msg{min-height:22px;font-size:11.7px;line-height:1.8;color:var(--a-danger)}
.msg.isOk{color:var(--a-hint-text)}   /* a code sent, a password saved: a calm note, not an error (login.js say) */
.hint{
  padding:11px;border-radius:14px;font-size:10.6px;line-height:1.9;
  background:var(--a-hint);color:var(--a-hint-text);border:1px solid var(--a-hint-line);
}
.successHint{padding:10px;border-radius:12px;font-size:11px;line-height:1.8;background:var(--a-soft);color:var(--text)}
.successHint:empty{display:none}

.legalRow{
  display:flex;align-items:flex-start;gap:9px;padding:10px 11px;margin-top:4px;
  border:1px solid var(--a-mode-line);border-radius:13px;background:var(--a-soft);
  font-size:11px;line-height:1.9;color:var(--a-legal-text);
}
.legalRow input{margin-top:5px;accent-color:var(--a-accent-hi)}
.legalLink{padding:0 2px;border:0;background:transparent;color:var(--a-accent-hi);font-size:11px}

.legalModal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px;background:rgba(4,26,45,.5)}
.legalModalCard{
  width:min(720px,100%);max-height:min(82vh,760px);overflow:auto;padding:22px;
  border:1px solid var(--a-line);border-radius:20px;background:var(--a-field);color:var(--text);
  box-shadow:0 26px 80px rgba(4,26,45,.24);
}
.legalModalCard h3{margin:0 0 10px}
.legalBody{white-space:pre-line;line-height:2;color:var(--a-muted)}
.legalModalActions{display:flex;justify-content:flex-end;margin-top:16px}
.legalModalActions .btn{width:auto}

/* ----- theme toggle (inserted by login.js) --------------------------------- */
.themeToggle{
  position:fixed;left:18px;top:18px;z-index:5;
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--a-line);border-radius:50%;
  background:var(--a-field);color:var(--text);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.themeToggle:active{transform:scale(.97)}
.themeToggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ----- phone ----------------------------------------------------------------
   One rounded card: brand on navy, the form, then a navy foot. */
@media(max-width:760px){
  body{padding:14px;overflow-y:auto}
  .shell{min-height:0;grid-template-columns:1fr;grid-template-rows:auto auto;border-radius:24px}
  /* the form sits between the two navy blocks, so each block is its own glass */
  .shell::before{display:none}
  .intro,.benefitsPanel{
    background:linear-gradient(160deg,rgba(10,42,68,.55),transparent 70%),linear-gradient(200deg,rgba(var(--a-ice),.05),transparent 50%),var(--a-panel);
  }
  .intro{grid-row:1;padding:14px 14px 12px;text-align:center}
  .brand{flex-direction:column;justify-content:center;gap:6px;min-height:0}
  .brand img{width:52px;height:52px;flex-basis:52px}
  .brand b{font-size:15px}
  .doctor{font-size:10.5px}
  .intro h1{font-size:15px;font-weight:900;line-height:1.6;margin:6px 0 0}
  .auth{grid-column:1;grid-row:2;padding:12px 14px 14px;justify-content:flex-start}
  .benefitsPanel{display:none}          /* no navy foot on the phone */
  /* bubbles scaled by the same ratio as the page (390/1440 = 0.27): size, core and blur */
  body.authPage{--bb:4.9px;--bc:1.5px;--a-bubble-alpha:.75;--a-bubble-core-alpha:.95}   /* tiny bubbles need more opacity to read */
  body::before,body::after{width:10.8px;height:10.8px}
  body::before{box-shadow:
      4vw 12vh var(--bb) 0.0px var(--f),
      4vw 12vh var(--bc) -2.7px var(--c),
      14vw 40vh var(--bb) 0.8px var(--f),
      14vw 40vh var(--bc) -1.9px var(--c),
      8vw 78vh var(--bb) 0.0px var(--f),
      8vw 78vh var(--bc) -3.0px var(--c),
      26vw 20vh var(--bb) 0.0px var(--f),
      26vw 20vh var(--bc) -3.2px var(--c),
      30vw 62vh var(--bb) 0.0px var(--f),
      30vw 62vh var(--bc) -2.4px var(--c),
      46vw 8vh var(--bb) 0.0px var(--f),
      46vw 8vh var(--bc) -3.5px var(--c),
      52vw 44vh var(--bb) 0.0px var(--f),
      52vw 44vh var(--bc) -3.0px var(--c),
      64vw 80vh var(--bb) 1.9px var(--f),
      64vw 80vh var(--bc) -1.4px var(--c),
      74vw 24vh var(--bb) 0.0px var(--f),
      74vw 24vh var(--bc) -2.7px var(--c),
      86vw 56vh var(--bb) 0.5px var(--f),
      86vw 56vh var(--bc) -2.2px var(--c),
      94vw 10vh var(--bb) 0.0px var(--f),
      94vw 10vh var(--bc) -3.2px var(--c),
      40vw 92vh var(--bb) 0.0px var(--f),
      40vw 92vh var(--bc) -3.2px var(--c),
      34vw 30vh var(--bb) 0.0px var(--f),
      34vw 30vh var(--bc) -3.0px var(--c),
      42vw 52vh var(--bb) 0.0px var(--f),
      42vw 52vh var(--bc) -3.2px var(--c),
      50vw 24vh var(--bb) 0.0px var(--f),
      50vw 24vh var(--bc) -2.7px var(--c),
      58vw 64vh var(--bb) 0.0px var(--f),
      58vw 64vh var(--bc) -3.2px var(--c),
      66vw 40vh var(--bb) 0.0px var(--f),
      66vw 40vh var(--bc) -3.0px var(--c),
      38vw 76vh var(--bb) 0.0px var(--f),
      38vw 76vh var(--bc) -3.5px var(--c),
      22vw 50vh var(--bb) 0.0px var(--f),
      22vw 50vh var(--bc) -3.2px var(--c),
      80vw 74vh var(--bb) 0.0px var(--f),
      80vw 74vh var(--bc) -3.0px var(--c);}
  body::after{box-shadow:
      2vw 48vh var(--bb) 0.0px var(--f),
      2vw 48vh var(--bc) -3.2px var(--c),
      18vw 88vh var(--bb) 0.0px var(--f),
      18vw 88vh var(--bc) -2.7px var(--c),
      22vw 6vh var(--bb) 0.0px var(--f),
      22vw 6vh var(--bc) -3.0px var(--c),
      36vw 34vh var(--bb) 0.0px var(--f),
      36vw 34vh var(--bc) -3.2px var(--c),
      44vw 70vh var(--bb) 0.5px var(--f),
      44vw 70vh var(--bc) -2.2px var(--c),
      58vw 16vh var(--bb) 0.0px var(--f),
      58vw 16vh var(--bc) -3.0px var(--c),
      66vw 52vh var(--bb) 0.0px var(--f),
      66vw 52vh var(--bc) -3.2px var(--c),
      78vw 90vh var(--bb) 0.0px var(--f),
      78vw 90vh var(--bc) -2.7px var(--c),
      90vw 34vh var(--bb) 0.8px var(--f),
      90vw 34vh var(--bc) -1.9px var(--c),
      96vw 74vh var(--bb) 0.0px var(--f),
      96vw 74vh var(--bc) -3.2px var(--c),
      10vw 26vh var(--bb) 0.0px var(--f),
      10vw 26vh var(--bc) -3.5px var(--c),
      54vw 96vh var(--bb) 0.0px var(--f),
      54vw 96vh var(--bc) -3.2px var(--c),
      32vw 46vh var(--bb) 0.0px var(--f),
      32vw 46vh var(--bc) -2.7px var(--c),
      46vw 38vh var(--bb) 0.0px var(--f),
      46vw 38vh var(--bc) -3.2px var(--c),
      56vw 58vh var(--bb) 0.0px var(--f),
      56vw 58vh var(--bc) -2.4px var(--c),
      62vw 30vh var(--bb) 0.0px var(--f),
      62vw 30vh var(--bc) -3.5px var(--c),
      70vw 68vh var(--bb) 0.0px var(--f),
      70vw 68vh var(--bc) -3.2px var(--c),
      48vw 84vh var(--bb) 0.0px var(--f),
      48vw 84vh var(--bc) -3.2px var(--c),
      28vw 74vh var(--bb) 0.0px var(--f),
      28vw 74vh var(--bc) -3.0px var(--c),
      84vw 20vh var(--bb) 0.0px var(--f),
      84vw 20vh var(--bc) -3.2px var(--c);}

  .tabs{padding:3px;margin-bottom:10px}
  .tabs button{min-height:38px;padding:6px;font-size:12.5px}
  .form{gap:8px}
  .authMode button{min-height:34px;padding:5px 7px;border-radius:9px;font-size:11.5px}
  .field label{margin-bottom:3px;font-size:11px}
  .field input{
    min-height:42px;padding:8px 11px;font-size:16px;font-weight:600;
    border-color:var(--a-field-line-phone);box-shadow:inset 0 1px 2px var(--a-tab-shadow);
  }
  .passwordToggle{width:30px;height:30px;left:5px}
  .btn{min-height:44px;font-size:14px}
  .linkBtn{padding:2px;font-size:12.5px}
  .hint{font-size:11.7px}
  /* code box and its send button side by side */
  #loginOtpBox{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
  #loginOtpBox .btn{margin-top:0;padding:0 14px;min-height:42px}
  .themeToggle{width:42px;height:42px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ----- desktop scale (owner 2026-09-28: «زومش زیاد هست … با زوم ۹۰ درصد خوبه») -----------
   On a desktop the sign-in card is drawn at 90%, the size she sees at browser zoom 90%;
   the bubbles keep filling the whole window. Phones keep their own sizes. */
@media (min-width:761px){.shell{zoom:.9}}