:root {
      --bg-url: url('https://images.unsplash.com/photo-1586773860418-d37222d8fce3?q=80&w=1920&auto=format&fit=crop');
      --accent-1: 99, 102, 241;
      --accent-2: 56, 189, 248;
    }

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

    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
      color: rgba(255,255,255,.92);
      background: #0b1020;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .bg {
      position: fixed;
      inset: 0;
      background-image: var(--bg-url);
      background-size: cover;
      background-position: center;
      filter: brightness(.8) saturate(1.15);
    }

    .bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(1100px 700px at 85% 20%, rgba(var(--accent-1), .35), transparent 60%),
        linear-gradient(to bottom right, rgba(0,0,0,.45), rgba(0,0,0,.75));
    }

    .container {
      position: relative;
      min-height: 100%;
      display: grid;
      place-items: center;
      padding: 2rem;
    }

    .card {
      width: 100%;
      max-width: 500px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.15);
      backdrop-filter: blur(12px) saturate(140%);
      -webkit-backdrop-filter: blur(12px) saturate(140%);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 30px 60px rgba(0,0,0,.35);
      animation: floatIn .5s cubic-bezier(.2,.8,.2,1) 1;
    }

    @keyframes floatIn {
      from { transform: translateY(10px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    .header {
      padding: 1.35rem 1.35rem 0;
      display: block;
    }

    .login-brand-lockup {
      width: 100%;
      text-align: center;
    }

    .login-logo-box {
      width: 100%;
      padding: .75rem 1rem;
      border-radius: 16px;
      background: rgba(255,255,255,.96);
      box-shadow: 0 10px 26px rgba(0,0,0,.22);
    }

    .login-brand-logo {
      display: block;
      width: min(100%, 360px);
      max-height: 92px;
      height: auto;
      object-fit: contain;
      margin: 0 auto;
    }

    .brand {
      margin-top: 1rem;
      font-size: 1.45rem;
      font-weight: 800;
      letter-spacing: 2.5px;
    }

    p.sub {
      margin: .3rem 0 0;
      font-size: .88rem;
      color: rgba(255,255,255,.80);
    }

    .content { padding: 1.25rem; }

    .form {
      margin-top: 1rem;
      display: grid;
      gap: 1rem;
    }

    .field {
      position: relative;
    }

    .field input {
      width: 100%;
      padding: .95rem 2.6rem .95rem .95rem;
      border-radius: 14px;
      background: rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.18);
      color: #fff;
      outline: none;
      transition: .2s;
    }

    .field input::placeholder {
      color: transparent;
    }

    .field input:focus {
      border-color: rgba(var(--accent-1), .75);
      box-shadow: 0 0 0 4px rgba(var(--accent-1), .2);
      background: rgba(0,0,0,.45);
    }

    .field label {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      padding: 0 .25rem;
      color: rgba(255,255,255,.65);
      transition: .18s ease;
    }

    .field input:not(:placeholder-shown) + label,
    .field input:focus + label {
      top: 0;
      transform: translateY(-50%) scale(.9);
      background: rgba(20,24,45,.8);
      color: rgba(255,255,255,.9);
    }

    .toggle {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      background: transparent;
      border: 0;
      color: rgba(255,255,255,.85);
      cursor: pointer;
      padding: .25rem .5rem;
      border-radius: 10px;
    }

    .actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      font-size: .9rem;
    }

    .checkbox {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      opacity: .95;
    }

    button.primary {
      width: 100%;
      padding: .95rem 1rem;
      border-radius: 14px;
      border: 0;
      cursor: pointer;
      font-weight: 700;
      letter-spacing: .3px;
      background: linear-gradient(135deg, rgba(var(--accent-1), .97), rgba(var(--accent-2), .97));
      color: #fff;
      box-shadow: 0 10px 30px rgba(var(--accent-2), .35);
    }

    .helper {
      margin-top: .75rem;
      text-align: center;
      font-size: .9rem;
      color: rgba(255,255,255,.84);
    }

    a {
      color: rgb(125, 211, 252);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .footer {
      padding: .95rem 1rem;
      background: rgba(0,0,0,.35);
      border-top: 1px dashed rgba(255,255,255,.15);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: .45rem;
      text-align: center;
      font-size: .78rem;
      color: rgba(255,255,255,.72);
    }

    .footer strong {
      color: rgba(255,255,255,.95);
      letter-spacing: .5px;
    }

    .footer-dot {
      color: rgba(255,255,255,.45);
    }

    .flash-area {
      margin-bottom: .75rem;
    }

    .flash {
      padding: .75rem .9rem;
      border-radius: 10px;
      margin-bottom: .5rem;
      font-size: .88rem;
      background: rgba(255,255,255,.10);
    }

    .flash.success { background: rgba(34,197,94,.18); }
    .flash.error { background: rgba(239,68,68,.18); }
    .flash.warning { background: rgba(245,158,11,.18); }

    small.error {
      color: #fecaca;
      display: none;
    }

    input:invalid[focused="true"] ~ small.error {
      display: block;
    }

    @media (max-width: 480px) {
      .card { max-width: 94vw; }
    }