:root{
            --bg0:#f7f9ff;
            --bg1:#eef2ff;
            --bg2:#eff6ff;

            --ink:#0f172a;
            --muted:#64748b;

            --glass: rgba(255,255,255,.72);
            --glass2: rgba(248,250,252,.54);
            --border: rgba(148,163,184,.24);

            --shadow: 0 34px 100px -76px rgba(15,23,42,.64);
            --shadow2: 0 18px 55px -44px rgba(15,23,42,.34);

            --r: 20px;
            --r2: 28px;

            --a: rgb(37,99,235);
            --b: rgb(99,102,241);
            --c: rgb(14,165,233);

            --ease: cubic-bezier(.22,1,.36,1);

            /* safe-area (чтобы удобно переиспользовать) */
            --safeTop: env(safe-area-inset-top);
            --safeRight: env(safe-area-inset-right);
            --safeBottom: env(safe-area-inset-bottom);
            --safeLeft: env(safe-area-inset-left);

            /* spotlight */
            --mx: 50vw;
            --my: 18vh;

            /* parallax */
            --px: 0px;
            --py: 0px;

            /* сцена */
            --cx: 50vw;
            --cy: 52vh;
        }

        *{ box-sizing:border-box; }
        html, body{ height:100%; }

        body{
            margin:0;
            font-family:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
            color: var(--ink);
            overflow:hidden;

            background:
                radial-gradient(1200px 720px at 12% 0%, var(--bg1), transparent 60%),
                radial-gradient(980px 640px at 92% 12%, var(--bg2), transparent 55%),
                linear-gradient(180deg, var(--bg0), #ffffff);
        }

        /* мягкие облака */
        body::before{
            content:"";
            position:fixed;
            inset:-10%;
            z-index:0;
            pointer-events:none;

            background:
                radial-gradient(740px 740px at 14% 16%, rgba(99,102,241,.18), transparent 65%),
                radial-gradient(900px 820px at 92% 88%, rgba(59,130,246,.14), transparent 66%),
                radial-gradient(640px 640px at 86% 18%, rgba(14,165,233,.10), transparent 70%);
            filter: blur(16px);
            animation: bgFloat 22s ease-in-out infinite;
            will-change: transform;
        }
        @keyframes bgFloat{
            0%,100%{ transform: translate(-2%, -2%) scale(1); }
            50%{ transform: translate(3%, 2%) scale(1.05); }
        }

        /* сетка + шум */
        body::after{
            content:"";
            position:fixed;
            inset:0;
            z-index:0;
            pointer-events:none;

            background-image:
                linear-gradient(to right, rgba(148,163,184,.55) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(148,163,184,.55) 1px, transparent 1px),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
            background-size: 56px 56px, 56px 56px, 220px 220px;
            opacity:.045;
            mix-blend-mode: overlay;

            -webkit-mask-image: radial-gradient(980px 620px at 50% 0%, #000 36%, transparent 76%);
            mask-image: radial-gradient(980px 620px at 50% 0%, #000 36%, transparent 76%);
        }

        .spot{
            position:fixed;
            inset:0;
            z-index:1;
            pointer-events:none;
            background:
                radial-gradient(900px 900px at var(--mx) var(--my), rgba(99,102,241,.18), transparent 60%),
                radial-gradient(680px 680px at calc(var(--mx) + 160px) calc(var(--my) + 110px), rgba(59,130,246,.12), transparent 62%);
            filter: blur(8px);
        }

        #stars{
            position:fixed;
            inset:0;
            z-index:2;
            pointer-events:none;
            opacity:.60;
        }

        .vignette{
            position:fixed;
            inset:-1px;
            z-index:3;
            pointer-events:none;
            background: radial-gradient(1200px 720px at 50% 45%, transparent 55%, rgba(15,23,42,.05) 100%);
            mix-blend-mode: multiply;
            opacity: .9;
        }

        .stage{
            position:relative;
            z-index:4;
            width:100%;
            height:100vh;
            isolation:isolate;
        }

        /* ✅ Backdrop (blur overlay) */
        .backdrop{
            position:fixed;
            inset:0;
            z-index:9;
            pointer-events:none;
            opacity:0;

            background: rgba(15,23,42,.07);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);

            transition: opacity 240ms ease;
        }
        body.login-opened .backdrop{
            opacity:1;
            pointer-events:auto;
        }

        /* центр (DESKTOP) */
        .center{
            position:absolute;
            left: calc(var(--cx) - 1vw);
            top:  calc(var(--cy) - 2vh);
            transform: translate(-50%,-50%);
            z-index:12;

            display:flex;
            flex-direction:column;
            align-items:center;
            gap: 10px;
            text-align:center;

            animation: centerIn 720ms var(--ease) both;
        }
        @keyframes centerIn{
            from{ opacity:0; transform: translate(-50%,-50%) translate3d(0,14px,0) scale(.98); filter: blur(2px); }
            to{ opacity:1; transform: translate(-50%,-50%) translate3d(0,0,0) scale(1); filter: blur(0); }
        }

        .center-orbit{
            position:relative;
            width:142px;
            height:142px;
            display:grid;
            place-items:center;
            isolation:isolate;
        }
        .center-orbit::before,
        .center-orbit::after{
            content:"";
            position:absolute;
            inset:5px;
            border-radius:999px;
            pointer-events:none;
        }
        .center-orbit::before{
            border:1px solid rgba(99,102,241,.26);
            border-top-color:rgba(37,99,235,.70);
            border-right-color:rgba(14,165,233,.45);
            animation:orbitSpin 11s linear infinite;
            box-shadow:
                inset 0 0 34px rgba(99,102,241,.08),
                0 0 64px rgba(56,189,248,.08);
        }
        .center-orbit::after{
            width:8px;
            height:8px;
            inset:6px auto auto 58px;
            background:#6366f1;
            box-shadow:
                45px 47px 0 -1px #38bdf8,
                -38px 65px 0 -2px #2563eb;
            animation:orbitCounterSpin 8s linear infinite;
        }
        @keyframes orbitSpin{ to{ transform:rotate(360deg); } }
        @keyframes orbitCounterSpin{ to{ transform:rotate(-360deg); } }

        .center-mark{
            width: 92px;
            height: 92px;
            border-radius: 30px;
            display:grid;
            place-items:center;
            color:#fff;
            border:1px solid rgba(255,255,255,.48);
            background:
                radial-gradient(circle at 28% 18%, rgba(255,255,255,.42), transparent 34%),
                linear-gradient(145deg, #1d4ed8 0%, #4657f5 50%, #7c3aed 100%);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.48),
                inset 0 -16px 28px rgba(49,46,129,.20),
                0 32px 70px -30px rgba(37,99,235,.92);
            position:relative;
            overflow:hidden;

            animation: markFloat 6.4s ease-in-out infinite;
            will-change: transform;
        }
        .center-mark::before{
            content:"";
            position:absolute;
            inset:7px;
            border:1px solid rgba(255,255,255,.16);
            border-radius:23px;
            background:linear-gradient(145deg, rgba(255,255,255,.08), transparent 58%);
            pointer-events:none;
        }
        .center-logo{
            position:relative;
            z-index:2;
            width:52px;
            height:52px;
            filter:drop-shadow(0 5px 12px rgba(30,41,120,.34));
        }

        .brand-field{
            position:absolute;
            left:50%;
            top:50%;
            width:330px;
            height:210px;
            transform:translate(-50%,-50%);
            pointer-events:none;
            z-index:-1;
        }
        .brand-field::before,
        .brand-field::after{
            content:"";
            position:absolute;
            inset:14px 28px;
            border-radius:50%;
            border:1px solid rgba(96,165,250,.12);
            transform:rotate(-9deg);
        }
        .brand-field::after{
            inset:34px 0;
            border-color:rgba(99,102,241,.10);
            transform:rotate(12deg);
        }
        .brand-node{
            position:absolute;
            width:34px;
            height:34px;
            display:grid;
            place-items:center;
            border-radius:13px;
            color:rgba(37,99,235,.82);
            border:1px solid rgba(191,219,254,.72);
            background:rgba(255,255,255,.66);
            box-shadow:0 18px 42px -30px rgba(37,99,235,.72), inset 0 1px 0 rgba(255,255,255,.82);
            backdrop-filter:blur(8px);
            -webkit-backdrop-filter:blur(8px);
            animation:brandNodeFloat 5.4s ease-in-out infinite;
        }
        .brand-node svg{ width:16px; height:16px; }
        .brand-node.is-a{ left:14px; top:66px; animation-delay:-1.2s; }
        .brand-node.is-b{ right:16px; top:34px; animation-delay:-2.8s; }
        .brand-node.is-c{ right:42px; bottom:14px; animation-delay:-4s; }
        @keyframes brandNodeFloat{
            0%,100%{ transform:translate3d(0,0,0) rotate(-2deg); }
            50%{ transform:translate3d(0,-7px,0) rotate(3deg); }
        }

        .brand-wordmark{
            margin-top:-2px;
            color:rgba(15,23,42,.96);
            font-size:24px;
            line-height:1;
            letter-spacing:-.045em;
            font-weight:950;
            text-shadow:0 1px 0 rgba(255,255,255,.88);
        }
        .center-mark::after{
            content:"";
            position:absolute;
            inset:-2px;
            background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.32) 35%, transparent 70%);
            transform: translateX(-120%);
            animation: shine 2.9s linear infinite;
            opacity:.52;
            pointer-events:none;
        }
        @keyframes shine{
            0%{ transform: translateX(-120%); }
            100%{ transform: translateX(120%); }
        }
        @keyframes markFloat{
            0%,100%{ transform: translate3d(0,0,0); }
            50%{ transform: translate3d(0,9px,0); }
        }

        /* стекло (для карточек вокруг) */
        .glass{
            background: linear-gradient(180deg, var(--glass), var(--glass2));
            border: 1px solid var(--border);
            border-radius: var(--r2);
            box-shadow: var(--shadow2);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            overflow:hidden;
        }

        /* ====== ПУЛЬС ====== */
        .pulse{
            position:absolute;
            inset:-22px;
            border-radius: 26px;
            background: radial-gradient(300px 160px at 50% 50%, rgba(99,102,241,.22), transparent 70%);
            filter: blur(14px);
            z-index:-1;
            animation: pulse 2.2s ease-in-out infinite;
            opacity:.95;
            pointer-events:none;
        }
        @keyframes pulse{
            0%,100%{ transform: scale(0.98); opacity:.62; }
            50%{ transform: scale(1.06); opacity:.95; }
        }

        /* ====== КНОПКА ОТКРЫТЬ (auth) ====== */
        .ctaWrap{
            position:relative;
            width: min(520px, 92vw);
            display:flex;
            justify-content:center;
        }

        .cta{
            position:relative;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap: 10px;

            height: 56px;
            width: 100%;
            padding: 0 26px;
            border-radius: 18px;

            font-weight: 950;
            text-decoration:none;
            color:#fff;

            background: linear-gradient(135deg, rgba(37,99,235,.98), rgba(99,102,241,.98));
            border: 1px solid rgba(99,102,241,.34);
            box-shadow: 0 34px 94px -72px rgba(37,99,235,.82);

            transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
            will-change: transform;
            overflow:hidden;

            animation: ctaFloat 5.8s ease-in-out infinite;
        }
        @keyframes ctaFloat{
            0%,100%{ transform: translate3d(0,0,0); }
            50%{ transform: translate3d(0,7px,0); }
        }
        .cta::after{
            content:"";
            position:absolute;
            inset:-2px;
            border-radius: inherit;
            background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.30) 35%, transparent 70%);
            transform: translateX(-120%);
            transition: transform 520ms var(--ease);
            pointer-events:none;
        }
        .cta:hover{
            transform: translate3d(0,-2px,0) scale(1.01);
            box-shadow: 0 44px 110px -84px rgba(37,99,235,.90);
            filter: saturate(1.06);
        }
        .cta:hover::after{ transform: translateX(120%); }
        .cta:active{ transform: translate3d(0,0,0) scale(1); }

        /* ====== ВХОД: МОРФ "кнопка -> карточка" ====== */
        .loginWrap{
            position:relative;
            isolation:isolate;

            width: min(220px, 72vw);         /* закрыто */
            will-change: width, transform;
            transition:
                width 620ms var(--ease),
                transform 620ms var(--ease);
        }
        .loginWrap.open{
            width: min(520px, 92vw);         /* открыто */
        }
        body.login-opened .loginWrap{
            transform: translateY(-1px) scale(1.01);
        }

        /* в закрытом виде “пульс” меньше, чтобы не было серой подложки */
        .loginWrap:not(.open) .pulse{
            inset: -14px;
            opacity: .55;
            filter: blur(16px);
        }

        .loginPanel{
            position:relative;
            border-radius: 999px;   /* закрыто: пилюля */
            padding: 0;             /* закрыто */
            overflow: visible;

            transition:
                border-radius 620ms var(--ease),
                padding 620ms var(--ease),
                box-shadow 620ms var(--ease);
        }

        /* “стекло” включаем ТОЛЬКО когда открыто */
        .loginWrap.open .loginPanel{
            border-radius: 26px;
            padding: 18px 18px 18px;
            background: linear-gradient(180deg, var(--glass), var(--glass2));
            border: 1px solid var(--border);
            box-shadow: var(--shadow2);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            overflow:hidden;
        }

        .loginPanel::before{
            content:"";
            position:absolute;
            inset:-1px;
            border-radius: inherit;
            background: radial-gradient(560px 240px at 30% 0%, rgba(99,102,241,.18), transparent 65%);
            opacity:0;
            pointer-events:none;
            transition: opacity 420ms ease;
        }
        .loginWrap.open .loginPanel::before{
            opacity:.82;
        }
        .loginPanel > *{ position:relative; z-index:1; }

        .openLoginWrap{
            display:flex;
            justify-content:center;

            overflow:hidden;
            max-height: 56px;
            opacity: 1;
            transform: translateY(0);
            transition:
                max-height 560ms var(--ease),
                opacity 220ms ease,
                transform 560ms var(--ease);
        }
        .loginWrap.open .openLoginWrap{
            max-height: 0;
            opacity: 0;
            transform: translateY(-8px);
            pointer-events:none;
            transition-delay: 140ms, 0ms, 140ms;
        }

        .miniCta{
            position:relative;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap: 10px;

            width: min(220px, 100%);
            height: 48px;
            padding: 0 18px;
            border-radius: 999px;

            font-weight: 950;
            color:#fff;
            border: 1px solid rgba(99,102,241,.34);
            background: linear-gradient(135deg, rgba(37,99,235,.98), rgba(99,102,241,.98));
            box-shadow: 0 26px 72px -62px rgba(37,99,235,.85);

            cursor:pointer;
            user-select:none;

            transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
            overflow:hidden;
        }
        .miniCta::after{
            content:"";
            position:absolute;
            inset:-2px;
            border-radius: inherit;
            background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.30) 35%, transparent 70%);
            transform: translateX(-120%);
            transition: transform 520ms var(--ease);
            pointer-events:none;
        }
        .miniCta:hover{
            transform: translateY(-1px);
            box-shadow: 0 34px 92px -72px rgba(37,99,235,.92);
            filter: saturate(1.05);
        }
        .miniCta:hover::after{ transform: translateX(120%); }
        .miniCta:active{ transform: translateY(0); }

        .loginForm{
            overflow:hidden;
            max-height: 0;
            opacity: 0;
            transform: translateY(-10px) scale(.985);
            pointer-events:none;

            display:grid;
            gap: 12px;
            margin-top: 0;

            transition:
                max-height 720ms var(--ease),
                opacity 220ms ease,
                transform 720ms var(--ease);
        }
        .loginWrap.open .loginForm{
            max-height: 500px;
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events:auto;
            transition-delay: 0ms, 220ms, 0ms;
        }

        .loginBrandLockup{
            display:flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            margin:0 0 2px;
        }
        .loginBrandMark{
            width:38px;
            height:38px;
            display:grid;
            place-items:center;
            flex:0 0 auto;
            border-radius:13px;
            color:#fff;
            background:
                radial-gradient(circle at 26% 18%, rgba(255,255,255,.40), transparent 38%),
                linear-gradient(145deg,#1d4ed8,#4f5df4 56%,#7c3aed);
            border:1px solid rgba(255,255,255,.56);
            box-shadow:0 16px 34px -24px rgba(37,99,235,.86), inset 0 1px 0 rgba(255,255,255,.44);
        }
        .loginBrandMark svg{ width:24px; height:24px; }
        .loginBrand{
            margin:0;
            color:rgba(15,23,42,.98);
            font-size:20px;
            line-height:1.08;
            letter-spacing:-.025em;
            font-weight:950;
            text-align:center;
        }

        .field{
            display:grid;
            gap: 8px;
            text-align:left;
        }

        .input{
            width: 100%;
            height: 50px;
            border-radius: 18px;
            padding: 0 16px;

            border: 1px solid rgba(148,163,184,.20);
            background: rgba(255,255,255,.74);
            outline: none;

            font-size: 14px;
            font-weight: 750;
            color: rgba(15,23,42,.98);

            box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
            transition: box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
            transform: translateZ(0);
        }
        .input::placeholder{
            color: rgba(100,116,139,.70);
            font-weight: 700;
        }
        .input:focus{
            border-color: rgba(99,102,241,.56);
            background: rgba(255,255,255,.92);
            box-shadow:
                0 0 0 3px rgba(99,102,241,.18),
                0 14px 34px -28px rgba(37,99,235,.55),
                inset 0 1px 0 rgba(255,255,255,.80);
        }

        .error{
            display:inline-flex;
            align-items:center;
            gap: 8px;
            border-radius: 999px;
            padding: 6px 10px;
            border: 1px solid rgba(239,68,68,.20);
            background: rgba(239,68,68,.08);
            color: rgba(185,28,28,.98);
            font-weight: 900;
            font-size: 12px;
        }
        .error::before{
            content:"";
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: rgba(239,68,68,.65);
        }

        .formMeta{
            display:flex;
            align-items:center;
            justify-content:flex-start;
            gap: 12px;
            padding-top: 2px;
        }

        .remember{
            display:inline-flex;
            align-items:center;
            gap: 10px;
            font-weight: 900;
            font-size: 13px;
            color: rgba(100,116,139,.92);
            user-select:none;
            cursor:pointer;
        }

        .rememberTitle{
            color:rgba(51,65,85,.96);
            line-height:1.2;
        }

        .remember input{
            appearance:none;
            -webkit-appearance:none;

            width: 18px;
            height: 18px;
            margin: 0;

            border-radius: 6px;
            border: 1px solid rgba(148,163,184,.30);
            background: rgba(255,255,255,.72);

            display:grid;
            place-content:center;

            box-shadow: 0 10px 26px -22px rgba(15,23,42,.35);
            transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
        }
        .remember input::after{
            content:"";
            width: 10px;
            height: 6px;
            border-left: 2.4px solid #fff;
            border-bottom: 2.4px solid #fff;
            transform: rotate(-45deg) scale(0);
            transition: transform 140ms var(--ease);
        }
        .remember input:checked{
            border-color: rgba(99,102,241,.44);
            background: linear-gradient(135deg, rgba(37,99,235,.98), rgba(99,102,241,.98));
            box-shadow: 0 20px 52px -44px rgba(37,99,235,.85);
        }
        .remember input:checked::after{
            transform: rotate(-45deg) scale(1);
        }
        .remember input:active{
            transform: scale(.96);
        }
        .remember input:focus-visible{
            outline: none;
            box-shadow:
                0 0 0 3px rgba(99,102,241,.20),
                0 20px 52px -44px rgba(37,99,235,.55);
        }

        /* ✅ КРЕСТИК: прижат к краю экрана (viewport), а не к карточке */
        .closeLogin{
            position: fixed;
            top: calc(10px + env(safe-area-inset-top));
            right: calc(10px + env(safe-area-inset-right));

            width: 40px;
            height: 40px;
            border-radius: 16px;

            border: 1px solid rgba(148,163,184,.22);
            background: rgba(255,255,255,.55);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);

            display:flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;

            color: rgba(15,23,42,.68);
            box-shadow: 0 18px 50px -40px rgba(15,23,42,.55);

            opacity:0;
            pointer-events:none;

            transition: opacity 220ms ease, color 160ms ease, background-color 160ms ease, transform 160ms ease;
            z-index: 50;
        }
        body.login-opened .closeLogin{
            opacity:1;
            pointer-events:auto;
        }
        .closeLogin:hover{ color: rgba(15,23,42,.92); }
        .closeLogin:active{ transform: scale(.98); }
        .closeLogin:focus-visible{
            outline: 3px solid rgba(99,102,241,.28);
            outline-offset: 4px;
        }

        .submitBtn{
            height: 52px;
            width: min(240px, 100%);
            justify-self: center;
            border-radius: 999px;

            border: 1px solid rgba(99,102,241,.34);
            background: linear-gradient(135deg, rgba(37,99,235,.98), rgba(99,102,241,.98));
            color:#fff;
            font-weight: 950;
            letter-spacing: -.01em;

            cursor:pointer;
            box-shadow: 0 34px 94px -72px rgba(37,99,235,.82);

            position:relative;
            overflow:hidden;
            transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
        }
        .submitBtn::after{
            content:"";
            position:absolute;
            inset:-2px;
            border-radius: inherit;
            background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.30) 35%, transparent 70%);
            transform: translateX(-120%);
            transition: transform 520ms var(--ease);
            pointer-events:none;
        }
        .submitBtn:disabled{
            cursor:wait;
            opacity:.78;
            filter:saturate(.75);
        }
        .submitBtn.is-loading::before{
            content:"";
            display:inline-block;
            width:14px;
            height:14px;
            margin-right:9px;
            border:2px solid rgba(255,255,255,.40);
            border-top-color:#fff;
            border-radius:50%;
            vertical-align:-2px;
            animation:buttonSpin .72s linear infinite;
        }
        @keyframes buttonSpin{ to{ transform:rotate(360deg); } }
        .submitBtn:hover{
            transform: translateY(-1px);
            box-shadow: 0 44px 110px -84px rgba(37,99,235,.90);
            filter: saturate(1.06);
        }
        .submitBtn:hover::after{ transform: translateX(120%); }
        .submitBtn:active{ transform: translateY(0); }

        /* ===== Карточки вокруг ===== */
        .wrap{
            position:absolute;
            left: var(--cx);
            top:  var(--cy);
            transform:
                translate(-50%,-50%)
                translate(var(--x), var(--y))
                rotate(var(--rot));
            will-change: transform;
            z-index:6;
        }

        .wrap.par{
            transform:
                translate(-50%,-50%)
                translate(calc(var(--x) + var(--px)), calc(var(--y) + var(--py)))
                rotate(var(--rot));
        }

        .card{
            width: clamp(420px, 36vw, 620px);
            border-radius: var(--r2);
            padding: 16px;
            position:relative;

            transform: translate3d(0,0,0);
            transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
            will-change: transform;
        }

        .card::before{
            content:"";
            position:absolute;
            inset:-1px;
            border-radius: inherit;
            background: radial-gradient(520px 280px at 30% 0%, rgba(99,102,241,.18), transparent 65%);
            opacity:.92;
            pointer-events:none;
        }

        .card[data-hot]{ --hx: 50%; --hy: 50%; }
        .card[data-hot]::after{
            content:"";
            position:absolute;
            inset:-1px;
            border-radius: inherit;
            background: radial-gradient(320px 220px at var(--hx) var(--hy), rgba(99,102,241,.26), transparent 62%);
            opacity: 0;
            transition: opacity 220ms ease;
            pointer-events:none;
        }

        .card:hover{
            transform: translate3d(0,-5px,0) scale(1.01);
            box-shadow: var(--shadow);
            border-color: rgba(99,102,241,.34);
        }
        .card:hover::after{ opacity: 1; }

        .head{
            position:relative;
            z-index:1;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap: 10px;
            margin-bottom: 12px;
        }

        .titleRow{
            display:flex;
            align-items:center;
            gap: 10px;
            min-width:0;
        }

        .ico{
            width: 44px;
            height: 44px;
            border-radius: 16px;
            display:grid;
            place-items:center;
            color: var(--a);
            background: rgba(239,246,255,.85);
            border: 1px solid rgba(191,219,254,.75);
            flex: 0 0 auto;
        }

        .t{
            font-weight: 950;
            letter-spacing: -.01em;
            font-size: 17px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow: ellipsis;
        }

        .pill{
            display:inline-flex;
            align-items:center;
            height: 24px;
            padding: 0 10px;
            border-radius: 999px;
            font-weight: 950;
            font-size: 11px;
            border: 1px solid rgba(191,219,254,.70);
            background: rgba(239,246,255,.72);
            color: rgba(29,78,216,.98);
            flex: 0 0 auto;
            user-select:none;
        }

        .rows{
            position:relative;
            z-index:1;
            display:grid;
            gap: 9px;
        }

        .row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap: 12px;
            padding: 11px 12px;
            border-radius: 16px;
            border: 1px solid rgba(148,163,184,.16);
            background: rgba(255,255,255,.64);
        }

        .bar{
            height: 10px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(148,163,184,.20), rgba(148,163,184,.10), rgba(148,163,184,.20));
            background-size: 200% 100%;
            animation: shimmer 1.25s linear infinite;
            flex: 1 1 auto;
        }
        .bar.w90{ max-width:90%; }
        .bar.w75{ max-width:75%; }
        .bar.w60{ max-width:60%; }
        .bar.w65{ max-width:65%; }
        .bar.w80{ max-width:80%; }

        @keyframes shimmer{
            0%{ background-position: 0% 0; }
            100%{ background-position: 200% 0; }
        }

        .tag{
            display:inline-flex;
            align-items:center;
            height: 22px;
            padding: 0 10px;
            border-radius: 999px;
            font-weight: 950;
            font-size: 11px;
            border: 1px solid rgba(148,163,184,.18);
            background: rgba(255,255,255,.78);
            color: rgba(100,116,139,.96);
            flex: 0 0 auto;
            user-select:none;
        }

        /* влёт + левитация */
        .cardA{ animation: inLeft 780ms var(--ease) both, floatA 6.4s ease-in-out infinite; animation-delay: 0ms, 860ms; }
        .cardB{ animation: inRight 820ms var(--ease) both, floatB 7.2s ease-in-out infinite; animation-delay: 70ms, 980ms; }
        .cardC{ animation: inUp 860ms var(--ease) both, floatC 6.8s ease-in-out infinite; animation-delay: 140ms, 1060ms; }

        @keyframes inLeft{
            from{ opacity:0; transform: translate3d(-30px, 12px, 0) scale(.98); filter: blur(2px); }
            to{ opacity:1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
        }
        @keyframes inRight{
            from{ opacity:0; transform: translate3d(30px, 14px, 0) scale(.98); filter: blur(2px); }
            to{ opacity:1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
        }
        @keyframes inUp{
            from{ opacity:0; transform: translate3d(0, 28px, 0) scale(.98); filter: blur(2px); }
            to{ opacity:1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
        }

        @keyframes floatA{ 0%,100%{ transform: translate3d(0,0,0) rotate(0deg);} 50%{ transform: translate3d(0,12px,0) rotate(.35deg);} }
        @keyframes floatB{ 0%,100%{ transform: translate3d(0,0,0) rotate(0deg);} 50%{ transform: translate3d(0,14px,0) rotate(-.45deg);} }
        @keyframes floatC{ 0%,100%{ transform: translate3d(0,0,0) rotate(0deg);} 50%{ transform: translate3d(0,11px,0) rotate(.25deg);} }

        .posA{ --x: clamp(-510px, -31vw, -360px); --y: clamp(-235px, -18vh, -155px); --rot: -8deg; }
        .posB{ --x: clamp( 300px,  27vw,  440px); --y: clamp(-235px, -17vh, -150px); --rot:  7deg; }
        .posC{ --x: clamp(-120px,  -7vw,  -30px); --y: clamp( 225px,  23vh,  310px); --rot: -6deg; }

        /* ✅ МОБИЛКА / ПЛАНШЕТ */
        @media (max-width: 980px){
            body{
                overflow:auto;
                overflow-x:hidden;
            }

            /*
             * Декоративные карточки занимают весь экран.
             * Дополнительного верхнего отступа под кнопку больше нет,
             * потому что кнопка входа теперь находится по центру viewport.
             */
            .stage{
                height:auto;
                min-height:100dvh;
                padding:
                    calc(14px + env(safe-area-inset-top))
                    0
                    calc(34px + env(safe-area-inset-bottom));
            }

            /*
             * Кнопка «Войти» и раскрытая форма находятся строго по центру
             * видимой части экрана. Переменная --mobileCenterY обновляется
             * через visualViewport, поэтому центр остаётся правильным
             * на iPhone при открытии адресной строки и клавиатуры.
             */
            .center{
                position:fixed;
                top:0;
                left:50%;

                --centerY: calc(var(--mobileCenterY, 50dvh) - 50%);
                transform:translate3d(-50%, var(--centerY), 0) !important;

                animation:none !important;
                filter:none !important;
                opacity:1 !important;

                width:min(560px, 92vw);
                margin:0;
                padding:0;

                will-change:transform;
                transition:transform 420ms var(--ease);
            }

            .center-orbit{
                width:126px;
                height:126px;
            }
            .center-mark{
                width:82px;
                height:82px;
                border-radius:27px;
            }
            .center-logo{ width:46px; height:46px; }
            .brand-field{
                width:min(310px,84vw);
                height:190px;
                opacity:.82;
            }
            .brand-wordmark{ font-size:22px; }

            /*
             * При открытии формы положение не меняется:
             * кнопка плавно превращается в карточку прямо в центре экрана.
             */
            body.login-opened .center{
                --centerY: calc(var(--mobileCenterY, 50dvh) - 50%);
            }

            /* мягкое центральное свечение вместо подложки у верхнего края */
            .center::before{
                content:"";
                position:absolute;
                inset:-28px -34px;
                border-radius:42px;
                background:
                    radial-gradient(
                        ellipse at center,
                        rgba(247,249,255,.94) 0%,
                        rgba(239,246,255,.68) 48%,
                        rgba(247,249,255,0) 76%
                    );
                filter:blur(4px);
                pointer-events:none;
                z-index:-1;
                transition:opacity 240ms ease;
            }

            body.login-opened .center::before{
                opacity:.35;
            }

            /* открыли логин — стопаем скролл фона */
            body.login-opened{
                overflow:hidden;
                overscroll-behavior:contain;
            }

            /* карточки — колонкой за центральной кнопкой */
            .wrap{
                position:relative;
                left:auto;
                top:auto;
                transform:none !important;
                margin:14px auto;
                width:min(720px, 92vw);
            }

            .wrap.par{
                transform:none !important;
            }

            .card{
                width:100%;
            }

            /* центральная кнопка остаётся читаемой поверх декора */
            .loginWrap:not(.open){
                filter:drop-shadow(0 18px 30px rgba(37,99,235,.14));
            }

            /* hover на мобилке не нужен */
            .card:hover{
                transform:none;
                box-shadow:var(--shadow2);
            }
        }

        @media (prefers-reduced-motion: reduce){
            body::before{ animation:none !important; }
            .bar{ animation:none !important; }
            .cardA,.cardB,.cardC{ animation:none !important; }
            .center-mark,.center-orbit::before,.center-orbit::after,.brand-node{ animation:none !important; }
            .pulse{ animation:none !important; }

            .cta{ animation:none !important; }
            .miniCta{ transition:none !important; }
            .loginWrap, .loginPanel, .loginForm, .openLoginWrap{ transition:none !important; }
            .center{ transition:none !important; }
        }