:root {
        color-scheme: dark;
        --bg-1: #08131d;
        --bg-2: #0f2232;
        --panel: rgba(7, 14, 22, 0.86);
        --line: rgba(255, 255, 255, 0.12);
        --text: #f8fbff;
        --muted: rgba(248, 251, 255, 0.68);
        --accent: #8fd3ff;
        --accent-strong: #0aa6ff;
        --gold: #f0bc57;
        --success: #63d781;
        --danger: #ff8787;
        --site-bg-position: center center;
      }


      * { box-sizing: border-box; }

      body {
        margin: 0;
        min-height: 100vh;
        font-family: Georgia, "Times New Roman", serif;
        color: var(--text);
        background:
          linear-gradient(180deg, rgba(5, 8, 12, 0.34) 0%, rgba(5, 8, 12, 0.62) 54%, rgba(5, 8, 12, 0.9) 100%),
          var(--site-bg-raster) var(--site-bg-position) / cover no-repeat,
          linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
        background-color: #08131d;
        position: relative;
        isolation: isolate;
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background:
          linear-gradient(180deg, rgba(5, 8, 12, 0.34) 0%, rgba(5, 8, 12, 0.62) 54%, rgba(5, 8, 12, 0.9) 100%),
          radial-gradient(circle at top left, rgba(10, 166, 255, 0.18), transparent 26%),
          radial-gradient(circle at right 18%, rgba(240, 188, 87, 0.18), transparent 24%),
          var(--site-bg-raster) var(--site-bg-position) / cover no-repeat,
          linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
        transform: translateZ(0);
        will-change: transform;
      }

      .login-shell {
        min-height: 100vh;
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(360px, 470px);
        align-items: stretch;
      }

      .login-hero {
        position: relative;
        padding: clamp(32px, 5vw, 64px) clamp(24px, 6vw, 88px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
      }

      .login-hero::before,
      .login-hero::after {
        content: "";
        position: absolute;
        border-radius: 999px;
        filter: blur(12px);
        opacity: 0.38;
      }

      .login-hero::before {
        inset: 0;
        border-radius: 0;
        filter: none;
        opacity: 1;
        background:
          linear-gradient(90deg, rgba(2, 8, 18, 0.82) 0%, rgba(2, 8, 18, 0.5) 32%, rgba(2, 8, 18, 0.18) 62%, rgba(2, 8, 18, 0.06) 100%),
          linear-gradient(180deg, rgba(8, 20, 36, 0.26) 0%, rgba(8, 20, 36, 0.12) 100%);
      }

      .login-hero::after {
        top: 50%;
        right: clamp(20px, 10vw, 120px);
        width: clamp(320px, 32vw, 520px);
        height: 1px;
        border-radius: 0;
        filter: none;
        opacity: 0.62;
        background:
          linear-gradient(90deg, rgba(143, 211, 255, 0) 0%, rgba(143, 211, 255, 0.75) 45%, rgba(143, 211, 255, 0) 100%);
        box-shadow:
          0 -26px 0 rgba(143, 211, 255, 0.08),
          0 26px 0 rgba(143, 211, 255, 0.08),
          0 0 40px rgba(143, 211, 255, 0.22);
      }

      .hero-top {
        position: relative;
        z-index: 1;
        width: min(100%, 720px);
      }

      .hero-top {
        max-width: 720px;
      }

      .hero-top::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -48px;
        width: min(460px, 62vw);
        height: 120px;
        background:
          linear-gradient(90deg, rgba(143, 211, 255, 0.22) 0 1px, transparent 1px 48px),
          linear-gradient(180deg, rgba(143, 211, 255, 0.14) 0 1px, transparent 1px 32px);
        background-size: 48px 32px;
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0));
        opacity: 0.34;
        pointer-events: none;
      }

      .brand-tag {
        display: inline-flex;
        gap: 10px;
        align-items: center;
        padding: 10px 16px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.86);
        font-size: 0.78rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        backdrop-filter: blur(10px);
      }

      .hero-title {
        max-width: 10ch;
        margin: 24px 0 18px;
        font-size: clamp(3.4rem, 6.2vw, 6.4rem);
        line-height: 0.86;
        letter-spacing: -0.052em;
        text-wrap: balance;
      }

      .hero-title span {
        display: block;
        color: var(--gold);
        text-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
      }

      .hero-copy {
        max-width: 540px;
        margin: 0;
        color: rgba(248, 251, 255, 0.76);
        font-size: 1.03rem;
        line-height: 1.8;
      }

      .login-panel {
        padding: clamp(20px, 3vw, 32px);
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, rgba(3, 7, 11, 0.44), rgba(3, 7, 11, 0.56));
        backdrop-filter: blur(18px);
      }

      .login-card {
        position: relative;
        overflow: hidden;
        width: min(100%, 430px);
        padding: clamp(22px, 3vw, 30px);
        border-radius: 32px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
          var(--panel);
        box-shadow: 0 34px 90px rgba(0, 0, 0, 0.36);
        backdrop-filter: blur(18px);
      }

      .login-card::before {
        content: "";
        position: absolute;
        inset: 0 24px auto;
        height: 1px;
        background: linear-gradient(90deg, rgba(143, 211, 255, 0), rgba(143, 211, 255, 0.78), rgba(143, 211, 255, 0));
        opacity: 0.88;
      }

      .login-topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 214px);
        gap: 16px;
        align-items: flex-start;
        margin-bottom: 18px;
      }

      .login-kicker {
        margin: 0 0 8px;
        color: rgba(240, 188, 87, 0.92);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .language-control {
        width: 100%;
        min-width: 0;
        max-width: 214px;
        justify-self: end;
        position: relative;
      }

      .field-label {
        display: grid;
        gap: 8px;
        color: var(--muted);
        font-size: 0.88rem;
      }

      .language-select,
      .login-input {
        width: 100%;
        min-height: 50px;
        padding: 0 16px;
        border-radius: 16px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.06);
        color: var(--text);
        font: inherit;
      }

      .language-select-native {
        position: absolute;
        inset: auto;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: 0;
        opacity: 0;
        pointer-events: none;
      }

      .language-dropdown {
        position: relative;
      }

      .language-trigger {
        width: 100%;
        min-height: 50px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: linear-gradient(180deg, rgba(18, 27, 40, 0.96), rgba(8, 14, 24, 0.96));
        color: #f8fbff;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26);
        cursor: pointer;
        transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
      }

      .language-trigger:hover,
      .language-trigger:focus-visible {
        border-color: rgba(143, 211, 255, 0.48);
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.32);
        outline: none;
      }

      .language-trigger-main {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }

      .language-trigger-label,
      .language-option-label {
        color: #f8fbff;
        font-size: 0.95rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .language-trigger-caret {
        width: 10px;
        height: 10px;
        border-right: 2px solid rgba(248, 251, 255, 0.72);
        border-bottom: 2px solid rgba(248, 251, 255, 0.72);
        transform: rotate(45deg) translateY(-2px);
        transition: transform 180ms ease;
        flex: 0 0 auto;
      }

      .language-dropdown.is-open .language-trigger-caret {
        transform: rotate(-135deg) translate(-2px, -1px);
      }

      .language-menu {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        left: auto;
        z-index: 8;
        display: grid;
        gap: 6px;
        width: min(248px, calc(100vw - 40px));
        max-height: min(360px, 58vh);
        overflow-y: auto;
        padding: 10px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(8, 14, 24, 0.98);
        box-shadow: 0 24px 54px rgba(0, 0, 0, 0.38);
        backdrop-filter: blur(18px);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
      }

      .language-dropdown.is-open .language-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .language-option {
        width: 100%;
        min-height: 44px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        gap: 12px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        text-align: left;
        cursor: pointer;
        transition: background 160ms ease, transform 160ms ease;
      }

      .language-option:hover,
      .language-option:focus-visible,
      .language-option.is-active {
        background: rgba(143, 211, 255, 0.14);
        outline: none;
      }

      .language-option:hover .language-flag,
      .language-option:focus-visible .language-flag,
      .language-option.is-active .language-flag,
      .language-trigger:hover .language-flag,
      .language-trigger:focus-visible .language-flag {
        animation: flag-wave 1.15s ease-in-out infinite;
        transform-origin: 22% 50%;
      }

      .language-flag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        padding: 0;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
        color: #ffffff;
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      @keyframes flag-wave {
        0%, 100% { transform: rotate(0deg) translateY(0); }
        25% { transform: rotate(-5deg) translateY(-1px); }
        50% { transform: rotate(4deg) translateY(0); }
        75% { transform: rotate(-2deg) translateY(-1px); }
      }

      .login-input::placeholder {
        color: rgba(248, 251, 255, 0.44);
      }

      .login-title {
        margin: 0;
        font-size: clamp(2rem, 4vw, 2.8rem);
        line-height: 0.94;
      }

      .login-title span {
        display: block;
        color: var(--accent);
      }

      .login-copy,
      .social-copy,
      .login-help {
        color: var(--muted);
        line-height: 1.62;
      }

      .login-copy { margin: 14px 0 0; }
      .social-copy { margin: 4px 0 0; font-size: 0.88rem; }
      .login-help { margin: 18px 0 0; font-size: 0.84rem; }

      .social-block {
        margin-top: 24px;
        display: grid;
        gap: 0;
      }

      .social-title {
        margin: 0 0 8px;
        font-size: 0.88rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.84);
      }

      .social-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 18px;
      }

      .social-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-height: 54px;
        padding: 0 18px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.06);
        color: #f8fbff;
        text-decoration: none;
        font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
        box-shadow: 0 10px 18px rgba(4, 8, 15, 0.26);
        transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
      }

      .social-button-main {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 11px;
        min-width: 0;
        width: auto;
      }

      .social-button-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
      }

      .social-button-icon svg {
        width: 20px;
        height: 20px;
        display: block;
      }

      .social-button-label {
        display: inline-flex;
        align-items: center;
        font-size: 0.97rem;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0;
        white-space: normal;
        text-align: center;
      }

      .social-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 24px rgba(4, 8, 15, 0.34);
      }

      .social-button[aria-disabled="true"] {
        opacity: 0.56;
        pointer-events: none;
      }

      .social-button--google {
        background: linear-gradient(180deg, #ffffff 0%, #f1f3f4 100%);
        color: #4a628e;
        border-color: #d8dde6;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
      }

      .social-button--google:hover {
        background: linear-gradient(180deg, #ffffff 0%, #f8fafb 100%);
        border-color: #ffffff;
      }

      .social-button--facebook {
        background: linear-gradient(180deg, #2f6ef4 0%, #1f58d7 100%);
        border-color: #3f74ea;
        color: #ffffff;
      }

      .social-button--facebook:hover {
        background: linear-gradient(180deg, #3a78fb 0%, #265fe0 100%);
        border-color: #5b8df8;
      }

      .social-button--apple {
        width: 100%;
        margin-inline: 0;
        background: linear-gradient(180deg, #141820 0%, #07090d 100%);
        border-color: rgba(119, 133, 170, 0.28);
        color: #ffffff;
      }

      .social-button--apple:hover {
        background: linear-gradient(180deg, #191e28 0%, #0b0d11 100%);
        border-color: rgba(145, 160, 198, 0.34);
      }

      .social-button--facebook .social-button-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
        border-radius: 4px;
        background: #ffffff;
      }

      .social-button--facebook .social-button-icon svg {
        width: 18px;
        height: 18px;
      }

      .social-button--apple .social-button-icon svg {
        width: 18px;
        height: 18px;
      }

      .login-divider {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 24px 0 18px;
        color: rgba(248, 251, 255, 0.52);
        font-size: 0.84rem;
      }

      .login-divider::before,
      .login-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
      }

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

      .team-picker,
      .team-static {
        display: grid;
        gap: 10px;
      }

      .team-picker[hidden],
      .team-static[hidden],
      .team-selection-note[hidden] {
        display: none;
      }

      .team-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .team-option {
        position: relative;
      }

      .team-radio {
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
      }

      .team-chip,
      .team-static-card,
      .team-selection-note {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 50px;
        padding: 0 14px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.05);
        color: var(--text);
      }

      .team-chip {
        cursor: pointer;
        transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
      }

      .team-chip:hover {
        transform: translateY(-1px);
      }

      .team-swatch {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
      }

      .team-chip-label {
        flex: 1;
      }

      .team-chip-badge {
        min-width: 36px;
        padding: 5px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.08);
        color: rgba(248, 251, 255, 0.82);
        font-size: 0.72rem;
        font-weight: 700;
        text-align: center;
      }

      .team-option.is-disabled .team-chip {
        opacity: 0.38;
        cursor: not-allowed;
        transform: none;
      }

      .team-radio:checked + .team-chip {
        border-color: var(--team-accent-strong);
        background: linear-gradient(180deg, var(--team-accent-soft), rgba(255, 255, 255, 0.08));
        box-shadow: 0 0 0 3px var(--team-accent-ring), 0 12px 26px rgba(0, 0, 0, 0.22);
        transform: translateY(-2px) scale(1.01);
      }

      .team-radio:checked + .team-chip .team-chip-badge {
        border-color: var(--team-accent-strong);
        background: var(--team-accent-strong);
      }

      .login-button {
        min-height: 54px;
        border: 1px solid rgba(10, 166, 255, 0.55);
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(143, 211, 255, 0.34), rgba(10, 166, 255, 0.24));
        color: #f8fcff;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
      }

      .login-error {
        padding: 12px 14px;
        border-radius: 16px;
        line-height: 1.5;
      }

      .login-error[hidden] { display: none; }
      .login-error.is-error { border: 1px solid rgba(255, 135, 135, 0.28); background: rgba(180, 37, 37, 0.18); color: #ffdada; }
      .login-error.is-info { border: 1px solid rgba(240, 188, 87, 0.32); background: rgba(161, 111, 8, 0.18); color: #ffeab8; }
      .login-error.is-success { border: 1px solid rgba(99, 215, 129, 0.32); background: rgba(19, 153, 76, 0.18); color: #deffe7; }
      .login-error.is-blinking { animation: pulse 1.1s ease-in-out infinite; }

      @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.66; }
      }

      @media (max-width: 980px) {
        .login-shell {
          grid-template-columns: 1fr;
          min-height: auto;
        }

        .login-hero {
          min-height: auto;
          padding-bottom: 20px;
        }

        .login-panel {
          padding-top: 0;
        }

        .login-card {
          width: min(100%, 760px);
        }

        .hero-top::after { width: min(360px, 82vw); }
      }

      @media (max-width: 720px) {
        .login-hero {
          padding-top: 28px;
          padding-bottom: 12px;
        }

        .hero-top::after {
          width: min(280px, 76vw);
          bottom: -28px;
          height: 80px;
        }

        .hero-title {
          max-width: 9ch;
          margin-top: 18px;
          font-size: clamp(2.7rem, 13vw, 4.4rem);
        }

        .hero-copy {
          max-width: 34rem;
          font-size: 0.96rem;
          line-height: 1.65;
        }

        .login-panel {
          padding-inline: 16px;
          padding-bottom: 24px;
        }

        .login-card {
          border-radius: 26px;
        }
      }

      @media (max-width: 560px) {
        .login-shell {
          min-height: 100dvh;
        }

        .login-topbar {
          grid-template-columns: 1fr;
          gap: 12px;
          margin-bottom: 16px;
        }

        .language-control {
          max-width: none;
          justify-self: stretch;
        }

        .language-menu {
          left: 0;
          right: 0;
          width: auto;
          max-width: none;
        }

        .brand-tag {
          width: fit-content;
          max-width: 100%;
          font-size: 0.72rem;
          letter-spacing: 0.1em;
        }

        .hero-title {
          font-size: clamp(2.45rem, 12vw, 3.6rem);
          line-height: 0.9;
        }

        .hero-copy {
          font-size: 0.92rem;
        }

        .login-card {
          width: 100%;
          padding: 20px 16px 18px;
          border-radius: 22px;
        }

        .login-title {
          font-size: clamp(1.75rem, 9vw, 2.3rem);
        }

        .login-copy {
          font-size: 0.92rem;
          line-height: 1.55;
        }

        .social-buttons {
          gap: 10px;
          margin-top: 14px;
        }

        .social-button {
          min-height: 52px;
          padding-inline: 14px;
          border-radius: 14px;
        }

        .social-button-main {
          width: 100%;
          gap: 10px;
        }

        .social-button-label {
          flex: 1 1 auto;
          justify-content: center;
          font-size: 0.92rem;
        }
      }

      @media (max-width: 390px) {
        .login-hero {
          padding-inline: 16px;
        }

        .login-panel {
          padding-inline: 12px;
        }

        .brand-tag {
          padding-inline: 12px;
        }

        .hero-title {
          font-size: clamp(2.15rem, 11vw, 3rem);
        }

        .social-button-label {
          font-size: 0.88rem;
        }
      }

      @media (max-height: 720px) and (min-width: 981px) {
        .login-hero,
        .login-panel {
          min-height: 100vh;
        }

        .hero-title {
          font-size: clamp(2.8rem, 5.1vw, 4.8rem);
        }
      }