:root {
      color-scheme: dark;
      --bg: #050607;
      --panel: #101317;
      --panel-2: #202838;
      --line: #303641;
      --text: #f6f7fb;
      --accent: #f2b21a;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100dvh;
      font-family: Arial, Helvetica, sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    main {
      min-height: 100dvh;
      display: grid;
      grid-template-columns: minmax(420px, clamp(560px, 54vw, 920px)) minmax(360px, 1fr);
    }

    .visual {
      position: relative;
      overflow: hidden;
      min-height: 100dvh;
      background: #0b0f14;
    }

    .visual img {
      width: 100%;
      height: 100%;
      min-height: 100dvh;
      display: block;
      object-fit: cover;
      object-position: center;
    }

    .visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 72%, #070809 100%);
      pointer-events: none;
    }

    .reference {
      position: absolute;
      left: 32px;
      bottom: 28px;
      z-index: 1;
      padding: 9px 12px;
      border: 1px solid rgb(255 255 255 / .34);
      border-radius: 6px;
      background: rgb(0 0 0 / .76);
      color: #fff;
      font-size: 13px;
    }

    .login-wrap {
      min-height: 100dvh;
      display: grid;
      place-items: center;
      padding: 32px;
      background: #070809;
    }

    .card {
      width: min(100%, 486px);
      padding: 40px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
    }

    .logo {
      display: block;
      width: 100%;
      height: auto;
      margin: 0 auto 36px;
    }

    .eyebrow {
      color: var(--accent);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    h1 {
      margin: 18px 0 14px;
      font-size: clamp(36px, 4vw, 46px);
      line-height: 1;
      letter-spacing: 0;
    }

    .intro {
      margin: 0 0 30px;
      color: #dce5f2;
      font-size: 17px;
    }

    label {
      display: block;
      margin: 0 0 10px;
      font-size: 15px;
      font-weight: 800;
    }

    input {
      width: 100%;
      height: 56px;
      margin-bottom: 24px;
      padding: 0 16px;
      border: 1px solid #69758a;
      border-radius: 8px;
      background: var(--panel-2);
      color: #fff;
      font: 700 14px Arial, Helvetica, sans-serif;
    }

    .password { position: relative; }
    .password input { padding-right: 56px; }
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
    button:disabled { cursor: not-allowed; }

    .password button {
      position: absolute;
      right: 12px;
      top: 41px;
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #eaf0f8;
      cursor: pointer;
    }

    .password button svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
    }

    .sign-in {
      width: 100%;
      height: 56px;
      border: 0;
      border-radius: 8px;
      background: var(--accent);
      color: #070809;
      font: 800 16px Arial, Helvetica, sans-serif;
    }

    .forgot {
      display: block;
      width: 100%;
      padding: 0;
      border: 0;
      background: none;
      font-family: inherit;
      text-decoration: underline;
      margin: -6px 0 18px;
      color: var(--accent);
      text-align: right;
      font-size: 14px;
    }

    .oauth {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 14px 0;
    }

    .oauth button {
      height: 74px;
      display: grid;
      place-items: center;
      gap: 0;
      border: 1px solid #e1e4ea;
      border-radius: 8px;
      background: #fff;
      color: #111318;
      font: 700 14px Arial, Helvetica, sans-serif;
      box-shadow: 0 8px 18px rgb(0 0 0 / .16);
    }

    .oauth svg {
      width: 36px;
      height: 36px;
    }

    .notice {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 12px;
      align-items: center;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #16191e;
      color: #dce5f2;
      font-size: 14px;
      line-height: 1.5;
    }

    .notice strong {
      display: block;
      color: #fff;
    }

    .shield {
      width: 34px;
      height: 34px;
      color: var(--accent);
    }

    @media (max-width: 920px) {
      main { grid-template-columns: 1fr; }
      .visual {
        height: clamp(260px, 42dvh, 420px);
        min-height: 0;
      }
      .visual img { min-height: 0; }
      .login-wrap {
        min-height: auto;
        padding: 24px 16px 40px;
      }
      .card { padding: 28px; }
      .oauth { grid-template-columns: 1fr; }
    }

[hidden] { display: none !important; }
button { cursor: pointer; }
#status { line-height: 1.5; color: #dce5f2; overflow-wrap: anywhere; }
#status[data-error="true"] { color: #ffb4ab; }
.account-value { overflow-wrap: anywhere; line-height: 1.5; }
.secondary { margin-top: 16px; padding: 10px 0; border: 0; background: none; color: var(--accent); text-decoration: underline; font: inherit; }
.notice { margin-top: 24px; }