:root {
      color-scheme: light;
      --bg: #eff4fb;
      --panel: #ffffff;
      --line: #d6dfec;
      --navy: #0f2552;
      --navy-2: #17346f;
      --red: #cf3d3d;
      --text: #18253f;
      --muted: #5f6f89;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      font-family: "Segoe UI", Arial, sans-serif;
      background:
        radial-gradient(circle at right top, rgba(207, 61, 61, 0.10), transparent 26%),
        linear-gradient(180deg, #f6f9fe 0%, var(--bg) 100%);
      color: var(--text);
    }
    .login-shell {
      width: min(420px, calc(100vw - 32px));
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 28px 28px 24px;
      box-shadow: 0 18px 44px rgba(15, 37, 82, 0.10);
    }
    .brand-mark {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      color: var(--navy);
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .brand-mark::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--red);
      box-shadow: 14px 0 0 rgba(207, 61, 61, 0.4);
    }
    h1 {
      margin: 0 0 6px;
      font-size: 30px;
      line-height: 1.05;
      color: var(--navy);
    }
    p {
      margin: 0 0 22px;
      color: var(--muted);
      line-height: 1.45;
    }
    label {
      display: block;
      margin: 0 0 6px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--navy-2);
    }
    input {
      width: 100%;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1px solid #c9d4e4;
      background: #f9fbff;
      color: var(--text);
      font-size: 15px;
      margin-bottom: 16px;
    }
    input:focus {
      outline: none;
      border-color: #6f8ac1;
      box-shadow: 0 0 0 3px rgba(74, 112, 196, 0.14);
      background: #fff;
    }
    button {
      width: 100%;
      border: 0;
      border-radius: 10px;
      padding: 12px 16px;
      background: linear-gradient(180deg, var(--navy-2), var(--navy));
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      cursor: pointer;
    }
    button:disabled {
      opacity: 0.7;
      cursor: wait;
    }
    .login-error {
      min-height: 20px;
      margin: 4px 0 14px;
      color: #b42318;
      font-size: 13px;
    }
    .support {
      margin-top: 18px;
      font-size: 13px;
      color: var(--muted);
    }