:root {
      --bg: #f4f1f3; --surface: #ffffff; --text: #15172e; --muted: #6f7180;
      --line: #d8d5df; --line-strong: #c7c3cf;
      --navy: #15172e; --gold: #d9a427;
      --login-bg-0: #050b16; --login-bg-1: #081426;
      --login-text: #f5f7fb; --login-text-2: rgba(239, 244, 252, 0.76); --login-text-3: rgba(239, 244, 252, 0.52);
      --login-border-strong: rgba(150, 191, 244, 0.34);
      --login-blue: #4b8fff; --login-gold: #d8a548; --login-gold-2: #f0c66b;
      --login-red: #e32636; --login-red-dark: #a80e22;
      --login-success: #5bcf9a;
    }
    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    body {
      margin: 0; min-width: 320px; background: var(--bg); color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1, "cv11" 1;
    }
    h1, h2, h3, p { margin: 0; }
    h1 { font-size: clamp(1.45rem, 2.15vw, 2.05rem); line-height: 1.05; font-family: Manrope, Inter, sans-serif; }
    h2 { font-size: clamp(1.18rem, 1.65vw, 1.55rem); line-height: 1.15; font-family: Manrope, Inter, sans-serif; }
    .muted { color: var(--muted); }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }

    /* ---------- Фон ---------- */
    .portal-login-page .login-view {
      position: relative; isolation: isolate; display: grid;
      min-height: 100dvh; place-items: center; overflow-x: hidden; overflow-y: auto;
      padding: clamp(32px, 4vw, 56px); color: var(--login-text);
      background:
        radial-gradient(circle at 13% 12%, rgba(76, 135, 222, 0.24), transparent 28%),
        radial-gradient(circle at 89% 88%, rgba(190, 22, 48, 0.24), transparent 31%),
        linear-gradient(135deg, var(--login-bg-0) 0%, var(--login-bg-1) 48%, #07101f 100%);
    }
    .portal-login-page .login-view::before,
    .portal-login-page .login-view::after { content: ""; position: fixed; pointer-events: none; }
    .portal-login-page .login-view::before {
      z-index: -3; inset: 0; opacity: 0.42;
      background:
        linear-gradient(115deg, transparent 0 42%, rgba(89, 144, 226, 0.055) 42.15% 42.35%, transparent 42.5% 100%),
        linear-gradient(72deg, transparent 0 72%, rgba(226, 38, 58, 0.05) 72.15% 72.3%, transparent 72.45% 100%);
    }
    .portal-login-page .login-view::after {
      z-index: -2; inset: 0; opacity: 0.34;
      background-image: radial-gradient(circle, rgba(183, 208, 243, 0.34) 0 0.8px, transparent 1px);
      background-size: 34px 34px;
      mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 76%, transparent);
    }
    .portal-login-page .login-atmosphere { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
    .portal-login-page .login-atmosphere__glow { position: absolute; width: min(54vw, 940px); aspect-ratio: 1; border-radius: 50%; filter: blur(22px); opacity: 0.52; }
    .portal-login-page .login-atmosphere__glow--blue { top: -34%; left: -15%; background: radial-gradient(circle, rgba(70, 132, 229, 0.3), transparent 68%); }
    .portal-login-page .login-atmosphere__glow--red { right: -18%; bottom: -48%; background: radial-gradient(circle, rgba(220, 27, 53, 0.3), transparent 68%); }

    /* ---------- Карточка ---------- */
    .portal-login-page .login-shell {
      position: relative; isolation: isolate; z-index: 1; display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(500px, 0.92fr);
      grid-template-areas: "hero auth";
      width: min(1280px, 100%);
      min-height: min(720px, calc(100dvh - clamp(64px, 8vw, 112px)));
      border: 1px solid rgba(154, 193, 243, 0.27); border-radius: 30px;
      padding: 0; overflow: hidden;
      background:
        radial-gradient(circle at 7% 9%, rgba(84, 142, 228, 0.23), transparent 31%),
        radial-gradient(circle at 97% 91%, rgba(202, 24, 48, 0.2), transparent 35%),
        linear-gradient(123deg, rgba(13, 38, 72, 0.94), rgba(5, 18, 37, 0.96) 52%, rgba(8, 20, 40, 0.96));
      box-shadow:
        0 42px 100px rgba(0, 0, 0, 0.46),
        0 0 76px rgba(43, 96, 177, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
      animation: loginShellEnter 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .portal-login-page .login-shell::before {
      content: ""; position: absolute; z-index: -1; inset: 0 auto 0 calc(54% - 1px); width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(154, 193, 243, 0.25) 10%, rgba(154, 193, 243, 0.25) 90%, transparent);
    }
    .portal-login-page .login-shell::after {
      content: ""; position: absolute; z-index: -2; inset: 0; border-radius: inherit;
      background: linear-gradient(127deg, rgba(255, 255, 255, 0.045), transparent 29%);
      box-shadow: inset 0 0 54px rgba(0, 0, 0, 0.12);
    }
    .portal-login-page .login-shell > * { position: relative; z-index: 1; }

    /* ---------- Бренд ---------- */
    .portal-login-page .login-brand {
      grid-area: hero; display: grid; align-content: center; justify-items: start;
      gap: clamp(16px, 2vh, 22px); min-width: 0;
      padding: clamp(42px, 5vw, 74px) clamp(44px, 5vw, 76px);
      border: 0; color: var(--login-text); text-align: left; background: transparent;
    }
    .portal-login-page .login-brand::before {
      content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.68; pointer-events: none;
      background:
        radial-gradient(circle at 26% 16%, rgba(95, 152, 235, 0.27), transparent 32%),
        radial-gradient(circle at 8% 82%, rgba(220, 31, 54, 0.16), transparent 30%);
    }
    .portal-login-page .login-brand__signal {
      display: inline-flex; align-items: center; gap: 9px;
      color: rgba(225, 235, 248, 0.7); font-size: 0.73rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
    }
    .portal-login-page .login-brand__signal span {
      width: 7px; height: 7px; border-radius: 50%; background: var(--login-success);
      box-shadow: 0 0 12px rgba(91, 207, 154, 0.75);
    }
    .portal-login-page .login-brand__mark {
      position: relative; display: grid; min-height: 0; width: min(340px, 62%);
      place-items: center start; justify-self: start;  /* по левому краю, как надписи под эмблемой */
    }
    .portal-login-page .login-brand__mark::before {
      content: ""; position: absolute; inset: 8% 18%; border-radius: 50%; pointer-events: none;
      background: radial-gradient(circle, rgba(86, 146, 235, 0.27), transparent 66%); filter: blur(9px);
    }
    .portal-login-page .login-brand__hero {
      display: block; width: 100%; max-height: clamp(210px, 28vh, 290px);
      object-fit: contain; object-position: left center;
      filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.48)) drop-shadow(0 0 22px rgba(84, 142, 228, 0.18));
      animation: loginEmblemFloat 11s ease-in-out infinite;
    }
    .portal-login-page .login-brand__text { display: grid; gap: 14px; max-width: 680px; justify-items: start; }
    .portal-login-page .login-brand__kicker {
      display: inline-flex; align-items: center; min-height: 34px;
      border: 1px solid rgba(230, 181, 84, 0.63); border-radius: 999px;
      padding: 0 16px; color: var(--login-gold-2); background: rgba(216, 165, 72, 0.07);
      box-shadow: inset 0 0 18px rgba(216, 165, 72, 0.04);
      font-size: 0.78rem; font-weight: 700; letter-spacing: 0.035em;
    }
    .portal-login-page .login-brand h1 {
      max-width: 690px; color: var(--login-text);
      font-family: Manrope, Inter, sans-serif;
      font-size: clamp(2.45rem, 3.35vw, 4rem); font-weight: 800; line-height: 1.02;
      letter-spacing: -0.035em; text-align: left; text-wrap: balance;
      text-shadow: 0 10px 34px rgba(0, 0, 0, 0.32);
    }
    .portal-login-page .login-brand h1 span { display: block; }
    .portal-login-page .login-brand__note {
      max-width: 630px; color: var(--login-text-2);
      font-size: clamp(0.95rem, 1.15vw, 1.1rem); font-weight: 450; line-height: 1.65;
    }

    /* ---------- Форма ---------- */
    .portal-login-page .login-panel {
      grid-area: auth; display: grid; min-width: 0; align-content: center;
      justify-items: stretch;
      padding: clamp(40px, 4.3vw, 68px) clamp(38px, 4.2vw, 64px);
      background:
        radial-gradient(circle at 84% 20%, rgba(75, 143, 255, 0.11), transparent 31%),
        linear-gradient(155deg, rgba(5, 17, 34, 0.18), rgba(2, 10, 23, 0.36));
      overflow: visible;
    }
    .portal-login-page .login-auth-card {
      position: relative; display: grid; width: 100%; max-width: 610px;
      justify-self: center;
      border: 1px solid var(--login-border-strong); border-radius: 24px;
      padding: clamp(30px, 3vw, 44px); overflow: hidden;
      color: var(--login-text);
      background:
        linear-gradient(145deg, rgba(17, 42, 79, 0.83), rgba(7, 22, 43, 0.89)),
        rgba(8, 23, 44, 0.9);
      box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 42px rgba(75, 143, 255, 0.06);
      backdrop-filter: blur(22px) saturate(122%);
      animation: loginPanelEnter 680ms 80ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .portal-login-page .login-auth-card::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.06), transparent 23%),
        radial-gradient(circle at 100% 100%, rgba(221, 30, 53, 0.08), transparent 32%);
    }
    .portal-login-page .login-auth-card > * { position: relative; z-index: 1; }

    .portal-login-page .login-panel__head { display: grid; gap: 11px; padding: 0 0 24px; text-align: left; }
    .portal-login-page .login-panel__eyebrow {
      display: inline-flex; align-items: center; gap: 11px;
      color: var(--login-gold-2); font-size: 0.77rem; font-weight: 750;
      letter-spacing: 0.09em; text-transform: uppercase;
    }
    .portal-login-page .login-panel__eyebrow svg {
      width: 31px; height: 31px; fill: none; stroke: currentColor;
      stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round;
      filter: drop-shadow(0 0 10px rgba(216, 165, 72, 0.3));
    }
    .portal-login-page .login-panel__head h2 {
      color: var(--login-text); font-family: Manrope, Inter, sans-serif;
      font-size: clamp(2.35rem, 3vw, 3.35rem); font-weight: 800;
      line-height: 1.04; letter-spacing: -0.035em;
    }
    .portal-login-page .login-subtitle { color: var(--login-text-2); font-size: clamp(0.95rem, 1.15vw, 1.08rem); line-height: 1.5; }

    .portal-login-page .login-form { display: grid; gap: 17px; padding: 0; }
    .portal-login-page .login-field { display: grid; gap: 8px; }
    .portal-login-page .login-form label { color: rgba(239, 244, 252, 0.78); font-size: 0.9rem; font-weight: 600; }
    .portal-login-page .login-input-shell { position: relative; display: block; }
    .portal-login-page .login-input-icon {
      position: absolute; z-index: 2; top: 50%; left: 18px;
      width: 23px; height: 23px; color: rgba(181, 204, 236, 0.58);
      fill: none; stroke: currentColor; stroke-width: 1.65;
      stroke-linecap: round; stroke-linejoin: round;
      transform: translateY(-50%); pointer-events: none;
      transition: color 180ms ease, filter 180ms ease;
    }
    .portal-login-page .login-input-shell:focus-within .login-input-icon {
      color: #91bfff; filter: drop-shadow(0 0 7px rgba(75, 143, 255, 0.38));
    }
    .portal-login-page .login-form input {
      width: 100%; min-height: 58px;
      border: 1px solid rgba(137, 179, 232, 0.3); border-radius: 13px;
      padding: 13px 56px; color: var(--login-text);
      caret-color: var(--login-blue); background: rgba(1, 12, 27, 0.72);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        inset 0 10px 24px rgba(0, 0, 0, 0.08);
      font-size: 1rem;
      transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
    }
    .portal-login-page .login-form input::placeholder { color: rgba(219, 231, 248, 0.39); }
    .portal-login-page .login-form input:hover { border-color: rgba(150, 191, 244, 0.45); }
    .portal-login-page .login-form input:focus,
    .portal-login-page .login-form input:focus-visible {
      outline: none;
      border-color: rgba(94, 158, 250, 0.88);
      background: rgba(2, 15, 33, 0.88);
      box-shadow:
        0 0 0 3px rgba(75, 143, 255, 0.13),
        0 0 24px rgba(75, 143, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    }
    .portal-login-page .login-password-field input { padding-right: 62px; }
    .portal-login-page .login-password-toggle {
      position: absolute; z-index: 3; top: 50%; right: 8px;
      display: grid; width: 44px; height: 44px; place-items: center;
      border: 0; border-radius: 10px; padding: 0;
      color: rgba(205, 220, 241, 0.76); background: transparent;
      transform: translateY(-50%);
    }
    .portal-login-page .login-password-toggle:hover { color: var(--login-text); background: rgba(116, 164, 229, 0.1); }
    .portal-login-page .login-password-toggle:focus-visible { outline: 2px solid rgba(97, 159, 246, 0.9); outline-offset: 1px; background: rgba(116, 164, 229, 0.1); }
    .portal-login-page .login-password-toggle svg { width: 23px; height: 23px; }

    .portal-login-page .login-submit {
      position: relative; isolation: isolate;
      display: grid; grid-template-columns: 1fr auto; align-items: center;
      min-height: 60px; margin-top: 3px;
      border: 1px solid rgba(255, 103, 116, 0.8); border-radius: 13px;
      padding: 0 20px; overflow: hidden; color: #fff;
      background: linear-gradient(112deg, #d91d32 0%, #b70f27 55%, #8f0d22 100%);
      box-shadow:
        0 17px 32px rgba(150, 10, 31, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -8px 18px rgba(77, 0, 12, 0.14);
      font-size: 1.04rem; font-weight: 750; cursor: pointer;
      transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }
    .portal-login-page .login-submit::before {
      content: ""; position: absolute; z-index: -1;
      top: -40%; left: -55%; width: 38%; height: 180%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
      transform: skewX(-22deg);
      animation: loginCtaShimmer 7s 2s ease-in-out infinite;
    }
    .portal-login-page .login-submit:hover {
      border-color: rgba(255, 139, 149, 0.95); filter: brightness(1.07);
      transform: translateY(-1px);
      box-shadow:
        0 20px 38px rgba(175, 12, 35, 0.37),
        0 0 20px rgba(227, 38, 55, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }
    .portal-login-page .login-submit:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.92); outline-offset: 3px; }
    .portal-login-page .login-submit:active { filter: brightness(0.92); transform: scale(0.995); }
    .portal-login-page .login-submit__label { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
    .portal-login-page .login-submit__arrow {
      grid-column: 2; grid-row: 1; width: 23px; height: 23px;
      fill: none; stroke: currentColor; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round;
      transition: transform 180ms ease;
    }
    .portal-login-page .login-submit:hover .login-submit__arrow { transform: translateX(3px); }
    .portal-login-page .login-submit__spinner {
      display: none; grid-column: 2; grid-row: 1; width: 19px; height: 19px;
      border: 2px solid rgba(255, 255, 255, 0.32); border-top-color: #fff;
      border-radius: 50%; animation: loginSpinner 720ms linear infinite;
    }
    .portal-login-page .login-submit.is-loading .login-submit__arrow { display: none; }
    .portal-login-page .login-submit.is-loading .login-submit__spinner { display: block; }

    .portal-login-page .login-form-error {
      min-height: 0; margin: -4px 0 16px;
      border: 1px solid rgba(255, 93, 108, 0.35); border-radius: 11px;
      padding: 10px 12px; color: #ffd7db; background: rgba(164, 21, 39, 0.2);
      font-size: 0.86rem; font-weight: 650; line-height: 1.4;
    }
    .portal-login-page .login-form-error:empty { display: none; }

    @keyframes loginShellEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes loginPanelEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes loginEmblemFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
    @keyframes loginCtaShimmer { 0%, 75% { left: -55%; } 92%, 100% { left: 125%; } }
    @keyframes loginSpinner { to { transform: rotate(360deg); } }

    @media (max-width: 1179px) {
      .portal-login-page .login-view { place-items: start center; padding: clamp(16px, 2.3vw, 24px); }
      .portal-login-page .login-shell {
        grid-template-columns: 1fr; grid-template-areas: "hero" "auth";
        grid-template-rows: auto; width: min(960px, 100%); min-height: auto; border-radius: 28px;
      }
      .portal-login-page .login-shell::before {
        inset: auto 8% auto; top: 40%; width: 84%; height: 1px;
        background: linear-gradient(to right, transparent, rgba(154, 193, 243, 0.25) 15%, rgba(154, 193, 243, 0.25) 85%, transparent);
      }
      .portal-login-page .login-brand { align-content: start; justify-items: center; gap: 10px; padding: 25px clamp(30px, 6vw, 58px) 22px; text-align: center; }
      .portal-login-page .login-brand__signal { display: none; }
      .portal-login-page .login-brand__mark { width: min(330px, 52%); justify-self: center; place-items: center; }
      .portal-login-page .login-brand__hero { object-position: center; }
      .portal-login-page .login-brand__hero { max-height: 165px; }
      .portal-login-page .login-brand__text { max-width: 720px; justify-items: center; }
      .portal-login-page .login-brand h1 { max-width: 760px; font-size: clamp(2.15rem, 4.4vw, 2.8rem); text-align: center; }
      .portal-login-page .login-brand__note { max-width: 650px; font-size: 0.9rem; text-align: center; }
      .portal-login-page .login-panel { padding: 22px clamp(42px, 10vw, 116px) 36px; background: transparent; }
      .portal-login-page .login-auth-card { max-width: 720px; padding: clamp(28px, 4vw, 34px); }
      .portal-login-page .login-panel__head h2 { font-size: 2.55rem; }
      .portal-login-page .login-form { gap: 14px; }
      .portal-login-page .login-form input { min-height: 56px; }
      .portal-login-page .login-submit { min-height: 58px; }
    }
    @media (max-width: 767px) {
      .portal-login-page .login-view {
        align-items: start; padding: 0;
        background:
          radial-gradient(circle at 16% 6%, rgba(75, 137, 228, 0.25), transparent 27%),
          radial-gradient(circle at 88% 96%, rgba(193, 23, 46, 0.22), transparent 29%),
          linear-gradient(155deg, #071426 0%, #050b16 54%, #081225 100%);
      }
      .portal-login-page .login-view::after { opacity: 0.22; background-size: 28px 28px; }
      .portal-login-page .login-shell {
        width: 100%; border: 0; border-radius: 0;
        background:
          radial-gradient(circle at 50% 4%, rgba(66, 126, 214, 0.15), transparent 25%),
          linear-gradient(180deg, rgba(9, 26, 51, 0.42), rgba(4, 13, 28, 0.2));
        box-shadow: none;
      }
      .portal-login-page .login-brand { gap: 7px; padding: 16px 18px 15px; }
      .portal-login-page .login-brand__mark { width: min(235px, 62vw); }
      .portal-login-page .login-brand__hero { max-height: 108px; }
      .portal-login-page .login-brand__kicker { min-height: 25px; padding-inline: 13px; font-size: 0.63rem; }
      .portal-login-page .login-brand__text { gap: 7px; }
      .portal-login-page .login-brand h1 { max-width: 420px; font-size: clamp(1.58rem, 7.2vw, 1.95rem); line-height: 1.04; }
      .portal-login-page .login-brand__note { display: block; max-width: 450px; font-size: 0.77rem; line-height: 1.42; }
      .portal-login-page .login-panel { padding: 12px 16px 24px; }
      .portal-login-page .login-auth-card { width: 100%; max-width: 520px; border-radius: 21px; padding: 24px 18px; }
      .portal-login-page .login-panel__head { gap: 8px; padding-bottom: 18px; }
      .portal-login-page .login-panel__eyebrow { gap: 9px; font-size: 0.7rem; }
      .portal-login-page .login-panel__eyebrow svg { width: 27px; height: 27px; }
      .portal-login-page .login-panel__head h2 { font-size: 2rem; }
      .portal-login-page .login-subtitle { font-size: 0.9rem; }
      .portal-login-page .login-form { gap: 14px; }
      .portal-login-page .login-form input { min-height: 54px; padding-block: 11px; padding-left: 50px; font-size: 1rem; }
      .portal-login-page .login-input-icon { left: 16px; width: 21px; height: 21px; }
      .portal-login-page .login-submit { min-height: 57px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .portal-login-page .login-shell,
      .portal-login-page .login-auth-card,
      .portal-login-page .login-brand__hero,
      .portal-login-page .login-atmosphere__glow,
      .portal-login-page .login-submit::before,
      .portal-login-page .login-submit__spinner { animation: none; }
      .portal-login-page .login-submit,
      .portal-login-page .login-form input,
      .portal-login-page .login-password-toggle { transition-duration: 0.01ms; }
    }
  
.portal-login-page .login-form-warning { min-height: 0; margin: -4px 0 16px; border: 1px solid rgba(216,165,72,.35); border-radius: 11px; padding: 10px 12px; color: #fde68a; background: rgba(180,83,9,.2); font-size: .86rem; font-weight: 650; line-height: 1.4; }
.portal-login-page .login-auth-logo { display: grid; place-items: center; margin: 0 auto 20px; width: 96px; height: 96px; }
.portal-login-page .login-auth-logo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0,0,0,.42)) drop-shadow(0 0 16px rgba(84,142,228,.22)); }
.portal-login-page .login-form-error ul { margin: 0; padding-left: 18px; }