:root{
      --bg-1: #0f172a;
      --bg-2: #0b2545;
      --accent-1: #6E8CFB;
      --accent-2: #87E0A6;
      --accent-3: #FFB86B;
      --muted: #6b7280;
      --card-radius: 14px;
      --max-width: 460px;
    }

    *{ box-sizing:border-box; margin:0; padding:0; }
    html,body{ height:100%; }
    body{
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
      background: linear-gradient(135deg,#f3f6ff,#eef7ff);
      color:#071427;
    }

    .card {
      width:100%;
      max-width:var(--max-width);
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,255,0.98));
      border-radius: calc(var(--card-radius) + 4px);
      box-shadow: 0 18px 46px rgba(2,6,23,0.45);
      overflow:hidden;
      border: 1px solid rgba(255,255,255,0.06);
    }

    .card-header{
      display:flex;
      gap:12px;
      align-items:center;
      padding:18px;
      background: linear-gradient(90deg, var(--accent-1));
      color:white;
    }
    .logo {
      width:52px; height:52px; border-radius:12px; display:grid; place-items:center;
      background: rgba(255,255,255,0.12); font-weight:700; font-size:20px;
      box-shadow: 0 8px 22px rgba(14,30,60,0.18);
    }
    .card-header h1{ font-size:18px; margin:0; }
    .card-header p{ font-size:13px; margin:0; opacity:0.95; }

    .card-body{
      padding:20px;
    }
    .lead{
      color: #0b1b2b;
      font-size:15px;
      margin-bottom:12px;
    }

    label{
      display:block;
      font-weight:600;
      font-size:13px;
      color:var(--muted);
      margin-bottom:6px;
    }

    input[type="email"]{
      width:100%;
      padding:12px 14px;
      border-radius:10px;
      border:1px solid rgba(10,20,40,0.06);
      background:linear-gradient(180deg,#fff,#fbfdff);
      font-size:15px;
      color:#071427;
      outline:none;
      transition: box-shadow .12s ease, border-color .12s ease, transform .06s ease;
    }
    input::placeholder{ color:#a7b1c2; }
    input:focus{
      box-shadow: 0 8px 28px rgba(110,140,251,0.12);
      border-color: rgba(110,140,251,0.9);
      transform: translateY(-1px);
    }

    .btn{
      display:inline-block;
      width:100%;
      padding:12px;
      border-radius:10px;
      border:0;
      background: linear-gradient(90deg,var(--accent-1));
      color:white;
      font-weight:800;
      font-size:15px;
      cursor:pointer;
      box-shadow: 0 12px 34px rgba(110,140,251,0.14);
      transition: transform .12s ease, box-shadow .12s ease;
      margin-top:12px;
    }
    .btn:active{ transform: translateY(-1px); }

    .helper{
      font-size:13px;
      color:var(--muted);
      margin-top:10px;
    }
    .links{
      display:flex; justify-content:space-between; align-items:center; margin-top:16px; gap:12px; flex-wrap:wrap;
    }
    .links a{ text-decoration:none; color:var(--accent-1); font-weight:700; }

    .msg {
      margin-top:12px;
      font-size:14px;
      min-height:20px;
    }
    .msg.success{ color:#0b7a3a; }
    .msg.error{ color:#e24b4b; }

    /* small screen tweaks */
    @media (max-width:480px){
      .card{ border-radius:12px; }
      .card-header{ padding:14px; gap:10px; }
      .logo{ width:46px; height:46px; font-size:18px; }
      .card-body{ padding:16px; }
    }

    /* focus for keyboard users */
    :focus{ outline: 3px solid rgba(14,120,255,0.12); outline-offset:2px; }