/* ==========================================================
   Prijava i registracija na jednoj stranici, kao panel.bbb-design.com:
   stakleni prozor, brend panel u obliku trapeza koji klizne na drugu stranu
   kad se pređe s prijave na registraciju. Preuzeto iz BBB Hub login-premium.css
   i multi.css; strana "register" odgovara strani "client" u originalu.
   ========================================================== */

html:has(body.auth-page) { background: #070a10; }

body.auth-page {
  --bbb-login-bg: #070a10;
  --bbb-login-gold: #e8b24b;
  --bbb-login-gold-hot: #ffca68;
  --bbb-login-blue: #4897ff;
  --bbb-login-text: #f7f9fc;
  --bbb-login-muted: #9da7b7;
  --auth-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(72, 151, 255, .13), transparent 31%),
    radial-gradient(circle at 84% 78%, rgba(232, 178, 75, .12), transparent 30%),
    linear-gradient(145deg, #05070b 0%, #090e17 45%, #07101c 100%);
  color: var(--bbb-login-text);
  font-family: var(--auth-font);
}
.auth-page [hidden] { display: none !important; }

.bbb-login-stage {
  position: relative; z-index: 1; flex: 1 0 auto;
  display: grid; place-items: center;
  padding: max(64px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 28px max(18px, env(safe-area-inset-left));
}

/* izbor jezika u gornjem desnom uglu */
.auth-lang { position: fixed; z-index: 20; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
.auth-lang .language-button { background: rgba(10, 16, 26, .6); border-color: rgba(255, 255, 255, .13); }
.auth-lang .language-menu { background: rgba(10, 16, 26, .92); border-color: rgba(255, 255, 255, .13); }
.auth-lang .language-menu a.active { background: rgba(255, 255, 255, .05); color: var(--bbb-login-gold); }

/* ---- pozadina: kugle svetla, mreža i šum ---- */
.bbb-login-ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bbb-login-orb { position: absolute; display: block; border-radius: 999px; filter: blur(2px); opacity: .8; will-change: transform; }
.bbb-login-orb-a { width: min(38vw, 560px); aspect-ratio: 1; left: -10vw; top: -14vw; background: radial-gradient(circle at 63% 62%, rgba(54, 137, 255, .24), rgba(18, 75, 152, .06) 55%, transparent 72%); animation: bbbLoginFloatA 16s ease-in-out infinite alternate; }
.bbb-login-orb-b { width: min(32vw, 480px); aspect-ratio: 1; right: -7vw; bottom: -12vw; background: radial-gradient(circle at 38% 34%, rgba(255, 193, 84, .20), rgba(134, 84, 14, .05) 58%, transparent 74%); animation: bbbLoginFloatB 19s ease-in-out infinite alternate; }
.bbb-login-orb-c { width: 260px; aspect-ratio: 1; left: 48%; top: 6%; background: radial-gradient(circle, rgba(255, 255, 255, .05), transparent 68%); animation: bbbLoginFloatC 13s ease-in-out infinite alternate; }
.bbb-login-grid { position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent 88%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent 88%); }
.bbb-login-noise { position: absolute; inset: 0; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }

/* ---- okvir ---- */
.bbb-login-shell {
  position: relative; z-index: 2;
  width: min(1060px, 96vw); min-height: min(690px, 88svh);
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 34px; overflow: hidden;
  background: linear-gradient(135deg, rgba(18, 25, 39, .62), rgba(6, 10, 17, .55));
  box-shadow: 0 42px 120px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 0, 0, .18);
  backdrop-filter: blur(26px) saturate(125%); -webkit-backdrop-filter: blur(26px) saturate(125%);
  animation: bbbLoginShellIn .82s cubic-bezier(.16, 1, .3, 1) both;
}
.bbb-login-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, .075), transparent 20%, transparent 75%, rgba(232, 178, 75, .035)); mix-blend-mode: screen; }

/* ---- brend panel ---- */
.bbb-login-brand {
  position: relative; min-width: 0; padding: 42px 46px 38px;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, .085);
  background: radial-gradient(circle at 44% 42%, rgba(72, 151, 255, .10), transparent 32%), linear-gradient(155deg, rgba(8, 18, 33, .72), rgba(4, 8, 14, .58));
}
.bbb-login-brand::after { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; left: 50%; top: 49%; transform: translate(-50%, -50%); border: 1px solid rgba(232, 178, 75, .09); box-shadow: 0 0 0 45px rgba(255, 255, 255, .008), 0 0 0 90px rgba(72, 151, 255, .012); pointer-events: none; }
.bbb-login-brand-glow { position: absolute; width: 68%; aspect-ratio: 1; left: 50%; top: 47%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(232, 178, 75, .11), rgba(72, 151, 255, .045) 42%, transparent 70%); filter: blur(18px); animation: bbbLoginPulse 6.8s ease-in-out infinite; }
.bbb-login-brand-top, .bbb-login-brand-bottom { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; color: #8f9bad; font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.bbb-login-status-dot, .bbb-login-secure-dot { width: 7px; height: 7px; border-radius: 50%; background: #46d49a; box-shadow: 0 0 14px rgba(70, 212, 154, .68); flex: 0 0 7px; }
.bbb-login-brand-center { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; align-content: center; margin: auto 0; transition: opacity .22s ease; }
.bbb-login-logo-wrap { position: relative; width: 176px; height: 176px; display: grid; place-items: center; margin-bottom: 22px; }
.bbb-login-logo-wrap img { position: relative; z-index: 3; display: block; width: 122px; height: 122px; object-fit: contain; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .26)) drop-shadow(0 0 22px rgba(232, 178, 75, .16)); animation: bbbLoginLogoIn .95s .14s cubic-bezier(.16, 1, .3, 1) both; }
.bbb-login-logo-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(232, 178, 75, .18); }
.bbb-login-logo-ring-one { animation: bbbLoginRing 12s linear infinite; }
.bbb-login-logo-ring-one::before, .bbb-login-logo-ring-two::before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--bbb-login-gold-hot); box-shadow: 0 0 15px rgba(255, 202, 104, .75); }
.bbb-login-logo-ring-one::before { left: 19px; top: 22px; }
.bbb-login-logo-ring-two { inset: 14px; border-color: rgba(72, 151, 255, .16); animation: bbbLoginRingReverse 16s linear infinite; }
.bbb-login-logo-ring-two::before { right: 14px; bottom: 26px; width: 6px; height: 6px; background: #5da7ff; box-shadow: 0 0 14px rgba(72, 151, 255, .7); }
.bbb-login-eyebrow { margin: 0 0 8px; color: var(--bbb-login-gold); font-size: 10px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; }
.bbb-login-brand h1 { margin: 0; color: #fff; font: 800 clamp(38px, 4.4vw, 58px)/.96 var(--auth-font); letter-spacing: -.055em; text-shadow: 0 8px 36px rgba(0, 0, 0, .22); }
.bbb-login-brand-copy { width: min(360px, 92%); margin: 18px auto 0; color: #8f99aa; font-size: 13px; line-height: 1.65; }
.bbb-login-brand-bottom { justify-content: center; gap: 13px; font-size: 9px; color: #6f7a8c; }
.bbb-login-brand-bottom i { width: 3px; height: 3px; border-radius: 50%; background: rgba(232, 178, 75, .65); }

.bbb-login-switch {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; padding: 11px 20px;
  border: 1px solid rgba(255, 205, 112, .45); border-radius: 999px; background: transparent;
  color: var(--bbb-login-gold); font: 800 11.5px/1.2 var(--auth-font); letter-spacing: .09em; text-transform: uppercase; cursor: pointer;
  transition: background .24s ease, color .24s ease, border-color .24s ease;
}
.bbb-login-switch:hover { background: linear-gradient(145deg, var(--bbb-login-gold-hot), var(--bbb-login-gold)); border-color: transparent; color: #1a1205; }
.bbb-login-switch:focus-visible { outline: 2px solid var(--bbb-login-gold); outline-offset: 3px; }
.bbb-login-switch-arrow { font-size: 14px; line-height: 1; transition: transform .3s cubic-bezier(.4, .1, .2, 1); }
.bbb-login-shell[data-side="register"] .bbb-login-switch-arrow { transform: scaleX(-1); }

/* ---- strana sa formom i stakleni prozor ---- */
.bbb-login-panel { position: relative; display: grid; place-items: center; padding: 48px; min-width: 0; background: linear-gradient(145deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .008)); }
.bbb-login-glass {
  position: relative; width: min(100%, 410px); padding: 36px 34px 28px; border-radius: 26px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  background: linear-gradient(145deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .028));
  box-shadow: 0 28px 72px rgba(0, 0, 0, .31), inset 0 1px 0 rgba(255, 255, 255, .11);
  backdrop-filter: blur(24px) saturate(135%); -webkit-backdrop-filter: blur(24px) saturate(135%);
  animation: bbbLoginGlassIn .85s .08s cubic-bezier(.16, 1, .3, 1) both;
}
.bbb-login-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(145deg, rgba(255, 255, 255, .23), rgba(232, 178, 75, .10) 42%, rgba(72, 151, 255, .08), rgba(255, 255, 255, .04)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.bbb-login-glass-shine { position: absolute; width: 240px; height: 100%; left: -70%; top: -20%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .075), transparent); filter: blur(4px); pointer-events: none; animation: bbbLoginShine 8.5s 1.8s ease-in-out infinite; }
.bbb-login-mobile-logo { display: none; }
.auth-pane { position: relative; z-index: 2; transition: opacity .2s ease; }
.bbb-login-shell.is-swapping .auth-pane { opacity: 0; }
.auth-pane.is-entering { animation: bbbStepIn .34s cubic-bezier(.4, .1, .2, 1) both; }
.bbb-login-heading { position: relative; z-index: 2; margin-bottom: 24px; }
.bbb-login-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; color: var(--bbb-login-gold); font-size: 9px; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; }
.bbb-login-kicker::before { content: ""; width: 18px; height: 1px; background: linear-gradient(90deg, var(--bbb-login-gold), transparent); }
.bbb-login-heading h2 { margin: 0 0 9px; color: #fff; font: 800 30px/1.08 var(--auth-font); letter-spacing: -.035em; }
.bbb-login-heading p { margin: 0; color: var(--bbb-login-muted); font-size: 13px; line-height: 1.55; }

.bbb-login-error { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin: -6px 0 18px; padding: 11px 13px; border: 1px solid rgba(255, 108, 108, .2); border-radius: 13px; background: rgba(150, 33, 33, .13); color: #ffb1b1; font-size: 12.5px; animation: bbbLoginShake .42s ease both; }
.bbb-login-error-icon { display: grid; place-items: center; flex: 0 0 23px; width: 23px; height: 23px; border-radius: 50%; background: rgba(255, 93, 93, .15); color: #ff9a9a; font-weight: 900; }
.bbb-login-glass .flash { position: relative; z-index: 2; margin: 0 0 16px; border-radius: 13px; font-size: 12.5px; background: rgba(4, 8, 14, .5); box-shadow: none; }

.bbb-login-form { position: relative; z-index: 2; display: grid; gap: 17px; margin: 0; }
.bbb-login-form.is-compact { gap: 13px; }
.bbb-login-field { display: grid; gap: 7px; margin: 0; }
.bbb-login-field-label { color: #bdc5d0; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.bbb-login-hint { color: #7f8a9c; font-size: 10.5px; line-height: 1.45; }
.bbb-login-input-wrap {
  position: relative; display: flex; align-items: center; min-height: 52px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 15px; background: rgba(4, 8, 14, .46);
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.is-compact .bbb-login-input-wrap { min-height: 46px; }
.bbb-login-input-wrap:focus-within { border-color: rgba(232, 178, 75, .62); background: rgba(5, 9, 15, .64); box-shadow: 0 0 0 3px rgba(232, 178, 75, .075), 0 8px 30px rgba(0, 0, 0, .16); transform: translateY(-1px); }
.bbb-login-input-wrap > svg { flex: 0 0 19px; width: 19px; height: 19px; margin-left: 16px; fill: none; stroke: #758195; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; transition: stroke .22s ease; }
.bbb-login-input-wrap:focus-within > svg { stroke: var(--bbb-login-gold); }
.auth-page .bbb-login-input-wrap input {
  width: 100%; max-width: none; min-width: 0; height: 50px; padding: 0 15px; border: 0; outline: 0; border-radius: 0;
  background: transparent; color: #f8fafc; box-shadow: none; font: 500 14px/1 var(--auth-font);
}
.auth-page .is-compact .bbb-login-input-wrap input { height: 44px; }
.auth-page .bbb-login-input-wrap input:focus { background: transparent; box-shadow: none; }
.bbb-login-input-wrap input::placeholder { color: #596477; opacity: 1; }
.bbb-login-input-wrap input:-webkit-autofill { -webkit-text-fill-color: #f8fafc; -webkit-box-shadow: 0 0 0 40px #0b111b inset; caret-color: #f8fafc; }
.bbb-login-password-toggle { flex: 0 0 43px; width: 43px; height: 43px; display: grid; place-items: center; margin-right: 5px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: #758195; cursor: pointer; transition: background .18s ease, color .18s ease; }
.bbb-login-password-toggle:hover, .bbb-login-password-toggle:focus-visible { background: rgba(255, 255, 255, .055); color: #dce3ec; outline: 0; }
.bbb-login-password-toggle svg { grid-area: 1 / 1; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; transition: opacity .16s ease, transform .16s ease; }
.bbb-eye-closed { opacity: 0; transform: scale(.82); }
.bbb-login-password-toggle[aria-pressed="true"] .bbb-eye-open { opacity: 0; transform: scale(.82); }
.bbb-login-password-toggle[aria-pressed="true"] .bbb-eye-closed { opacity: 1; transform: scale(1); }
.bbb-login-caps { margin-top: -2px; color: #e5b760; font-size: 10px; font-weight: 650; }

.bbb-login-submit {
  position: relative; min-height: 54px; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; width: 100%;
  border: 1px solid rgba(255, 205, 112, .48); border-radius: 15px;
  background: linear-gradient(135deg, #c98b26 0%, #e5ad43 42%, #f0c267 100%);
  color: #11151b; font: 850 13px/1 var(--auth-font); letter-spacing: .025em; cursor: pointer;
  box-shadow: 0 14px 34px rgba(180, 116, 25, .2), inset 0 1px 0 rgba(255, 255, 255, .48);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.bbb-login-submit::before { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .32), transparent 70%); transition: transform .55s ease; }
.bbb-login-submit:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.04); box-shadow: 0 18px 42px rgba(180, 116, 25, .29), inset 0 1px 0 rgba(255, 255, 255, .54); }
.bbb-login-submit:hover::before { transform: translateX(120%); }
.bbb-login-submit:active { transform: translateY(0) scale(.995); }
.bbb-login-submit:focus-visible { outline: 3px solid rgba(232, 178, 75, .22); outline-offset: 3px; }
.bbb-login-submit-arrow { font-size: 18px; transition: transform .2s ease; }
.bbb-login-submit:hover .bbb-login-submit-arrow { transform: translateX(3px); }
.bbb-login-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(10, 15, 20, .24); border-top-color: #11151b; border-radius: 50%; animation: bbbLoginSpin .68s linear infinite; }
.bbb-login-submit.is-loading { pointer-events: none; filter: saturate(.82); }
.bbb-login-submit.is-loading .bbb-login-submit-label, .bbb-login-submit.is-loading .bbb-login-submit-arrow { display: none; }
.bbb-login-submit.is-loading .bbb-login-spinner { display: block; }
.bbb-login-closed { position: relative; z-index: 2; margin: 0 0 18px; color: var(--bbb-login-muted); font-size: 13px; line-height: 1.6; }

.bbb-login-footer { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .075); color: #687486; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; }

/* prekidač Prijava / Registracija iznad forme (samo kad je brend panel sakriven) */
.bbb-login-modes { position: relative; z-index: 2; display: none; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 20px; padding: 4px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 15px; background: rgba(4, 8, 14, .46); }
.bbb-login-mode { position: relative; z-index: 2; min-height: 40px; padding: 0 10px; border: 0; border-radius: 11px; background: transparent; color: var(--bbb-login-muted); font: 800 12px/1 var(--auth-font); letter-spacing: .04em; cursor: pointer; transition: color .22s ease; }
.bbb-login-mode:hover { color: var(--bbb-login-text); }
.bbb-login-shell[data-side="login"] .bbb-login-mode[data-switch-to="login"],
.bbb-login-shell[data-side="register"] .bbb-login-mode[data-switch-to="register"] { color: #1a1205; }
.bbb-login-mode-thumb { position: absolute; z-index: 1; top: 4px; left: 4px; width: calc(50% - 6px); height: calc(100% - 8px); border-radius: 11px; border: 1px solid rgba(255, 205, 112, .48); background: linear-gradient(145deg, var(--bbb-login-gold-hot), var(--bbb-login-gold)); box-shadow: 0 6px 18px rgba(232, 178, 75, .22); transition: transform .26s cubic-bezier(.4, .1, .2, 1); }
.bbb-login-shell[data-side="register"] .bbb-login-mode-thumb { transform: translateX(calc(100% + 4px)); }
.bbb-login-mode:focus-visible { outline: 2px solid var(--bbb-login-gold); outline-offset: 2px; }

/* ==========================================================
   Široki ekran: brend panel je trapez i zameni mesto sa formom
   ========================================================== */
@media (min-width: 881px) {
  .bbb-login-shell[data-shell] { --wedge: 118px; --wedge-clear: calc(var(--wedge) * .86 + 30px); grid-template-columns: 1fr 1fr; }
  .bbb-login-shell[data-shell] > .bbb-login-brand,
  .bbb-login-shell[data-shell] > .bbb-login-panel { transition: transform .62s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
  .bbb-login-shell[data-shell] > .bbb-login-brand {
    position: relative; z-index: 3; width: calc(100% + var(--wedge)); padding-right: calc(46px + var(--wedge)); border-right: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--wedge)) 100%, 0 100%);
    background:
      radial-gradient(circle at 44% 40%, rgba(72, 151, 255, .16), transparent 36%),
      linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .055)),
      linear-gradient(155deg, rgba(26, 42, 66, .78), rgba(12, 21, 34, .66));
    filter: drop-shadow(1.5px 0 0 rgba(255, 255, 255, .4)) drop-shadow(-18px 0 42px rgba(0, 0, 0, .46));
  }
  .bbb-login-shell[data-shell] > .bbb-login-panel { z-index: 2; padding-left: var(--wedge-clear); background: none; }
  .bbb-login-shell[data-side="register"] > .bbb-login-brand {
    transform: translateX(calc(100% - 2 * var(--wedge)));
    clip-path: polygon(var(--wedge) 0, 100% 0, 100% 100%, 0 100%);
    padding-right: 46px; padding-left: calc(46px + var(--wedge));
    filter: drop-shadow(-1.5px 0 0 rgba(255, 255, 255, .4)) drop-shadow(18px 0 42px rgba(0, 0, 0, .46));
  }
  .bbb-login-shell[data-side="register"] > .bbb-login-panel { transform: translateX(-100%); padding-left: 48px; padding-right: var(--wedge-clear); }
  .bbb-login-shell.is-swapping .bbb-login-brand-center { opacity: 0; }
  .bbb-login-glass { width: min(100%, 350px); }
}

/* ---- telefon i uži ekran: samo stakleni prozor, prekidač iznad forme ---- */
@media (max-width: 880px) {
  .bbb-login-stage { padding: 64px 14px 20px; }
  .bbb-login-shell { width: min(540px, 100%); min-height: auto; grid-template-columns: 1fr; border-radius: 28px; }
  .bbb-login-brand { display: none; }
  .bbb-login-panel { padding: 26px; }
  .bbb-login-glass { width: min(100%, 430px); }
  .bbb-login-modes { display: grid; }
  .bbb-login-mobile-logo { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 0 20px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; background: rgba(255, 255, 255, .035); box-shadow: 0 16px 45px rgba(0, 0, 0, .22); position: relative; z-index: 2; }
  .bbb-login-mobile-logo img { display: block; width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 5px 16px rgba(232, 178, 75, .18)); }
}
@media (max-width: 520px) {
  .bbb-login-panel { padding: 14px; }
  .bbb-login-shell { border-radius: 24px; }
  .bbb-login-glass { padding: 28px 20px 22px; border-radius: 22px; }
  .bbb-login-heading h2 { font-size: 27px; }
  .bbb-login-footer { font-size: 8px; }
}
@media (max-height: 740px) and (min-width: 881px) {
  .bbb-login-shell { min-height: 640px; }
}

@keyframes bbbLoginShellIn { from { opacity: 0; transform: translateY(20px) scale(.985); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bbbLoginGlassIn { from { opacity: 0; transform: translateX(24px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes bbbLoginLogoIn { from { opacity: 0; transform: scale(.74) rotate(-4deg); filter: blur(5px); } to { opacity: 1; transform: none; } }
@keyframes bbbLoginFloatA { to { transform: translate(7vw, 6vh) scale(1.08); } }
@keyframes bbbLoginFloatB { to { transform: translate(-6vw, -7vh) scale(.94); } }
@keyframes bbbLoginFloatC { to { transform: translate(4vw, 5vh) scale(1.2); } }
@keyframes bbbLoginPulse { 0%, 100% { opacity: .65; transform: translate(-50%, -50%) scale(.94); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes bbbLoginRing { to { transform: rotate(360deg); } }
@keyframes bbbLoginRingReverse { to { transform: rotate(-360deg); } }
@keyframes bbbLoginShine { 0%, 72% { left: -75%; opacity: 0; } 78% { opacity: 1; } 92% { left: 125%; opacity: 0; } 100% { left: 125%; opacity: 0; } }
@keyframes bbbLoginShake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes bbbLoginSpin { to { transform: rotate(360deg); } }
@keyframes bbbStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .auth-page *, .auth-page *::before, .auth-page *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}