/* BSTCRM sign-in / sign-up — «ночной шоурум»: графит логотипа, латунь, холодный синий.
   Everything is visible without JavaScript; motion is CSS only and stops under
   prefers-reduced-motion. */
:root {
  --lx-night: #0b1220;
  --lx-deep: #0f172a;           /* the logo's own background */
  --lx-panel: rgba(17, 26, 45, .72);
  --lx-line: rgba(214, 180, 112, .18);
  --lx-line-soft: rgba(148, 170, 205, .14);
  --lx-ink: #eef2f8;
  --lx-mute: #97a6bd;
  --lx-faint: #66758d;
  --lx-gold: #d9ad63;
  --lx-gold-hi: #f6dc9c;
  --lx-gold-lo: #9c7433;
  --lx-blue: #6f9bff;
  --lx-ok: #46c992;
  --lx-bad: #ff8a8f;
  --lx-display: "Unbounded", "Onest", sans-serif;
  --lx-body: "Onest", "Segoe UI", sans-serif;
  --lx-ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { background: var(--lx-night); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body.auth-page {
  background:
    radial-gradient(120% 90% at 18% 0%, #16223a 0%, transparent 55%),
    linear-gradient(180deg, var(--lx-deep) 0%, var(--lx-night) 70%);
  color: var(--lx-ink);
  font: 400 15px/1.55 var(--lx-body);
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; }
a, button { touch-action: manipulation; }
.auth-skip { background: var(--lx-gold); border-radius: 8px; color: #1b1407; font-weight: 700; left: 12px; padding: 8px 12px; position: fixed; top: -60px; z-index: 50; }
.auth-skip:focus { top: 12px; }

/* ---------- atmosphere ---------- */
.lx-atmosphere { inset: 0; overflow: hidden; pointer-events: none; position: fixed; z-index: 0; }
.lx-glow { border-radius: 50%; filter: blur(80px); position: absolute; }
.lx-glow--gold { animation: lx-drift 18s ease-in-out infinite alternate; background: radial-gradient(circle, rgba(217, 173, 99, .30), transparent 65%); height: 620px; left: -160px; top: 8%; width: 620px; }
.lx-glow--blue { animation: lx-drift 22s ease-in-out infinite alternate-reverse; background: radial-gradient(circle, rgba(92, 132, 255, .22), transparent 65%); height: 720px; right: -220px; top: 30%; width: 720px; }
.lx-lines { height: 100%; inset: 0; opacity: .55; position: absolute; width: 100%; }
.lx-lines path { animation: lx-flow 9s linear infinite; fill: none; stroke: rgba(217, 173, 99, .22); stroke-dasharray: 2 18; stroke-width: 1.2; }
.lx-lines path:nth-child(2) { animation-duration: 12s; stroke: rgba(111, 155, 255, .18); }
.lx-lines path:nth-child(3) { animation-duration: 15s; stroke: rgba(217, 173, 99, .12); }
.lx-grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); inset: -50%; mix-blend-mode: overlay; opacity: .09; position: absolute; }

/* ---------- frame ---------- */
.lx-shell { display: flex; flex-direction: column; margin: 0 auto; max-width: 1320px; min-height: 100vh; padding: 0 max(clamp(16px, 4vw, 48px), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(clamp(16px, 4vw, 48px), env(safe-area-inset-left)); position: relative; z-index: 1; }
.lx-topbar { align-items: center; display: flex; gap: 16px; justify-content: space-between; padding: 18px 0; }
.lx-brand { display: block; line-height: 0; visibility: hidden; }
.lx-brand img { filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5)); height: 50px; width: auto; }
.auth-switch { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.auth-switch > span { color: var(--lx-mute); font-size: 13px; }
.auth-switch a { border: 1px solid var(--lx-line); border-radius: 999px; font-size: 13px; font-weight: 600; padding: 8px 15px; text-decoration: none; transition: background .25s, border-color .25s, color .25s; }
.auth-switch a:hover { background: rgba(217, 173, 99, .1); border-color: rgba(217, 173, 99, .5); color: var(--lx-gold-hi); }
.auth-switch a:focus-visible { outline: 2px solid var(--lx-gold); outline-offset: 3px; }

.lx-main { align-items: start; display: grid; flex: 1; gap: clamp(28px, 5vw, 72px); grid-template-columns: minmax(0, 1.08fr) minmax(360px, 460px); padding: clamp(12px, 3vh, 36px) 0 clamp(24px, 4vh, 48px); }

/* ---------- story ---------- */
.lx-story { min-width: 0; }
.lx-emblem { animation: lx-emblem-in 1.2s var(--lx-ease) both; margin: 0 0 16px -6px; max-width: 300px; position: relative; }
.lx-emblem img { display: block; filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .55)) drop-shadow(0 0 60px rgba(217, 173, 99, .10)); height: auto; width: 100%; }
.lx-emblem__shine { -webkit-mask-image: url("/static/img/bstcrm-logo-cut.webp"); -webkit-mask-size: 100% 100%; animation: lx-sweep 6.5s ease-in-out 1.4s infinite; background: linear-gradient(105deg, transparent 42%, rgba(255, 238, 196, .75) 50%, transparent 58%) no-repeat; background-position: 150% 0; background-size: 300% 100%; inset: 0; mask-image: url("/static/img/bstcrm-logo-cut.webp"); mask-size: 100% 100%; mix-blend-mode: screen; position: absolute; }
.lx-kicker { color: var(--lx-gold); font: 600 12px/1.3 var(--lx-body); letter-spacing: .22em; margin: 0 0 14px; text-transform: uppercase; }
.lx-title { font: 700 clamp(30px, 3.6vw, 50px)/1.08 var(--lx-display); letter-spacing: -.02em; margin: 0 0 22px; max-width: 13em; text-wrap: balance; }
.lx-title em { background: linear-gradient(100deg, var(--lx-gold-lo), var(--lx-gold-hi) 45%, var(--lx-gold) 70%, var(--lx-gold-lo)); -webkit-background-clip: text; background-clip: text; background-size: 220% 100%; color: transparent; font-style: normal; animation: lx-gold-move 7s ease-in-out infinite; }
.lx-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 30px; padding: 0; }
.lx-chips li { background: rgba(255, 255, 255, .035); border: 1px solid var(--lx-line-soft); border-radius: 999px; color: #c9d3e3; font-size: 13px; padding: 6px 13px; }
.lx-chips li::before { color: var(--lx-gold); content: "◆"; font-size: 8px; margin-right: 7px; vertical-align: 2px; }

.lx-fair { background: radial-gradient(120% 140% at 0% 0%, rgba(217, 173, 99, .13), transparent 55%), rgba(255, 255, 255, .025); border: 1px solid rgba(217, 173, 99, .32); border-radius: 18px; margin: 0 0 16px; max-width: 600px; padding: 18px 22px; position: relative; }
.lx-fair__head { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 12px; }
.lx-fair__badge { background: linear-gradient(135deg, #f3d392, #c99a4c); border-radius: 999px; color: #1c1407; font: 700 10px/1 var(--lx-display); letter-spacing: .08em; padding: 6px 10px; text-transform: uppercase; }
.lx-fair__title { font: 700 clamp(18px, 1.6vw, 22px)/1.15 var(--lx-display); letter-spacing: -.01em; margin: 0; }
.lx-fair__title em { color: var(--lx-gold-hi); font-style: normal; }
.lx-fair__list { display: grid; gap: 9px 18px; grid-template-columns: 1fr 1fr; list-style: none; margin: 0 0 14px; padding: 0; }
.lx-fair__list li { align-items: flex-start; color: #dbe3ef; display: flex; font-size: 13.5px; gap: 9px; line-height: 1.35; }
.lx-fair__list li::before { animation: lx-check .5s var(--lx-ease) both; animation-delay: calc(900ms + var(--k) * 120ms); background: rgba(70, 201, 146, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2346c992' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; border-radius: 50%; content: ""; flex: 0 0 18px; height: 18px; margin-top: 1px; }
.lx-fair__note { border-top: 1px solid var(--lx-line-soft); color: var(--lx-mute); font-size: 12px; margin: 12px 0 0; padding-top: 10px; }
@keyframes lx-check { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

.lx-quotes { background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)); border: 1px solid var(--lx-line); border-radius: 18px; max-width: 600px; padding: 18px 20px 16px; position: relative; }
.lx-quotes__label { color: var(--lx-mute); font-size: 11px; font-weight: 600; letter-spacing: .18em; margin: 0 0 10px; text-transform: uppercase; }
.lx-quotes__stage { display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lx-quote { background: rgba(9, 16, 29, .36); border: 1px solid var(--lx-line-soft); border-radius: 12px; min-width: 0; padding: 12px 13px; }
.lx-benefit-tag { color: var(--lx-gold); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lx-quote h3 { color: var(--lx-ink); font-size: 14px; line-height: 1.3; margin: 6px 0 4px; }
.lx-quote p { color: var(--lx-mute); font-size: 12.5px; line-height: 1.4; margin: 0; }
.lx-quotes__note { color: var(--lx-mute); font-size: 12px; margin: 12px 0 0; }

/* ---------- panel ---------- */
.lx-panel { align-self: start; position: sticky; top: 24px; -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); background: var(--lx-panel); border: 1px solid var(--lx-line-soft); border-radius: 24px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .06); padding: clamp(24px, 3vw, 36px); }
.lx-panel__edge { border-radius: inherit; inset: -1px; padding: 1px; pointer-events: none; position: absolute; background: conic-gradient(from var(--lx-angle, 0deg), transparent 0 70%, rgba(246, 220, 156, .75) 80%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: lx-edge 7s linear infinite; }
@property --lx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.auth-heading { margin-bottom: 20px; }
.auth-eyebrow { color: var(--lx-gold); display: block; font: 600 11px/1 var(--lx-body); letter-spacing: .22em; margin-bottom: 12px; }
.auth-heading h1 { font: 700 clamp(26px, 2.4vw, 32px)/1.1 var(--lx-display); letter-spacing: -.02em; margin: 0 0 10px; text-wrap: balance; }
.auth-heading p { color: var(--lx-mute); font-size: 14px; margin: 0; }
.auth-heading .desktop-break { display: none; }

.auth-notice, .auth-error { border-radius: 12px; font-size: 13.5px; line-height: 1.45; margin: 0 0 16px; padding: 11px 14px; }
.auth-notice { background: rgba(70, 201, 146, .09); border: 1px solid rgba(70, 201, 146, .3); color: #c6f1dd; }
.auth-notice b { color: #fff; }
.auth-error { background: rgba(255, 110, 118, .1); border: 1px solid rgba(255, 110, 118, .35); color: #ffd0d3; }

.auth-form { display: grid; gap: 14px; }
.auth-form label { color: #c5cfdf; display: grid; font-size: 13px; font-weight: 600; gap: 7px; }
.auth-form input { background: rgba(8, 13, 24, .62); border: 1px solid rgba(148, 170, 205, .2); border-radius: 12px; color: var(--lx-ink); font: 500 15px/1.2 var(--lx-body); min-height: 48px; padding: 0 14px; transition: border-color .2s, box-shadow .2s, background .2s; width: 100%; }
.auth-form input::placeholder { color: #5f6d84; }
.auth-form input:hover { border-color: rgba(148, 170, 205, .34); }
.auth-form input:focus { background: rgba(8, 13, 24, .85); border-color: var(--lx-gold); box-shadow: 0 0 0 4px rgba(217, 173, 99, .14); outline: none; }
.auth-form input:disabled { color: var(--lx-mute); }
.auth-password { display: block; position: relative; }
.auth-password input { padding-right: 96px; }
.auth-password button { background: none; border: 0; border-radius: 8px; color: var(--lx-gold); cursor: pointer; font: 600 12px/1 var(--lx-body); padding: 8px 10px; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.auth-password button:hover { background: rgba(217, 173, 99, .1); }
.auth-password button:focus-visible { outline: 2px solid var(--lx-gold); }

.auth-submit { align-items: center; background: linear-gradient(135deg, #f3d392 0%, #d9ad63 45%, #b98a3f 100%); border: 0; border-radius: 13px; box-shadow: 0 14px 30px -12px rgba(217, 173, 99, .7), inset 0 1px 0 rgba(255, 255, 255, .45); color: #1c1407; cursor: pointer; display: flex; font: 700 15px/1 var(--lx-display); gap: 10px; justify-content: space-between; letter-spacing: -.01em; margin-top: 6px; min-height: 54px; overflow: hidden; padding: 0 20px; position: relative; transition: transform .2s var(--lx-ease), box-shadow .2s; }
.auth-submit::after { animation: lx-shine 4.5s ease-in-out 2s infinite; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); content: ""; inset: 0; position: absolute; transform: translateX(-120%); }
.auth-submit span:last-child { font-size: 18px; transition: transform .25s var(--lx-ease); }
.auth-submit:hover { box-shadow: 0 20px 38px -14px rgba(217, 173, 99, .85), inset 0 1px 0 rgba(255, 255, 255, .5); transform: translateY(-1px); }
.auth-submit:hover span:last-child { transform: translateX(4px); }
.auth-submit:focus-visible { outline: 2px solid var(--lx-gold-hi); outline-offset: 3px; }
.auth-submit:disabled { cursor: progress; filter: saturate(.6); }
.auth-help { color: var(--lx-mute); font-size: 13px; margin: 14px 0 0; }

.auth-contacts { border-top: 1px solid var(--lx-line-soft); margin-top: 22px; padding-top: 16px; }
.auth-contact-heading { color: var(--lx-gold-hi); display: inline-block; font-size: 13px; font-weight: 600; margin-bottom: 10px; text-decoration: none; }
.auth-contact-heading:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-contact-links { display: grid; gap: 6px 14px; grid-template-columns: 1fr 1fr; }
.auth-contact-links > * { color: var(--lx-mute); font-size: 12px; text-decoration: none; }
.auth-contact-links > * > span { color: #d3dbe8; display: block; font-size: 12.5px; }
.auth-contact-links a:hover > span { color: var(--lx-gold-hi); }
.auth-contact-links small { color: var(--lx-faint); display: block; font-size: 11px; }

/* ---------- footer ---------- */
.lx-footer { border-top: 1px solid var(--lx-line-soft); color: var(--lx-faint); display: flex; flex-wrap: wrap; font-size: 12px; gap: 8px 20px; justify-content: space-between; padding: 16px 0 22px; }
.lx-footer__status { align-items: center; display: inline-flex; gap: 8px; }
.lx-footer__status i { animation: lx-pulse 2.4s ease-in-out infinite; background: var(--lx-ok); border-radius: 50%; box-shadow: 0 0 0 0 rgba(70, 201, 146, .5); height: 7px; width: 7px; }

/* ---------- load choreography ---------- */
.lx-rise { animation: lx-rise .9s var(--lx-ease) both; animation-delay: calc(var(--d, 0) * 110ms + 150ms); }

@keyframes lx-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lx-emblem-in { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lx-sweep { 0%, 55% { background-position: 150% 0; } 90%, 100% { background-position: -50% 0; } }
@keyframes lx-shine { 0%, 62% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }
@keyframes lx-gold-move { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes lx-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(60px, -40px, 0) scale(1.12); } }
@keyframes lx-flow { to { stroke-dashoffset: -400; } }
@keyframes lx-edge { to { --lx-angle: 360deg; } }
@keyframes lx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(70, 201, 146, .45); } 50% { box-shadow: 0 0 0 6px rgba(70, 201, 146, 0); } }

/* ---------- registration page: the form is longer, the story shorter ---------- */
.auth-register .lx-quotes { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .lx-main { gap: 28px; grid-template-columns: 1fr; }
  .lx-panel { margin: 0 auto; max-width: 520px; order: -1; position: relative; top: auto; width: 100%; }
  .lx-story { margin: 0 auto; max-width: 560px; text-align: center; }
  .lx-emblem { display: none; }
  .lx-brand { visibility: visible; }
  .lx-title { margin-left: auto; margin-right: auto; }
  .lx-chips { justify-content: center; }
  .lx-quotes, .lx-fair { margin-left: auto; margin-right: auto; text-align: left; }
}
@media (max-width: 520px) {
  body.auth-page { font-size: 14px; }
  .lx-brand img { filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5)); height: 50px; width: auto; }
  .auth-switch > span { display: none; }
  .lx-panel { border-radius: 20px; padding: 22px 18px; }
  .auth-contact-links { grid-template-columns: 1fr; }
  .lx-fair { padding: 16px; }
  .lx-fair__list { grid-template-columns: 1fr; }
  .lx-quotes { padding: 16px; }
  .lx-quotes__stage { grid-template-columns: 1fr; }
  .lx-footer { justify-content: center; text-align: center; }
}

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