:root{
      --accent-1: #6E8CFB;
      --accent-2: #0875e9;
      --muted: #6b7280;
      --card-bg: #ffffff;
      --radius: 14px;
      --max-width: 520px;
    }

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

    .wrap{
      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(--radius) + 6px);
      box-shadow: 0 18px 46px rgba(2,6,23,0.45);
      overflow:hidden;
    }

    .header{
      display:flex;
      gap:12px;
      align-items:center;
      padding:18px;
      background: linear-gradient(90deg,var(--accent-1),var(--accent-2));
      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);
    }
    .header h1{ font-size:18px; margin:0 }
    .header p{ margin:0; font-size:13px; opacity:0.95 }

    .body{
      padding:20px;
    }

    form { display:flex; flex-direction:column; gap:12px; }

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

    .input{
      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 26px rgba(110,140,251,0.08);
      border-color: rgba(110,140,251,0.9);
      transform:translateY(-1px);
    }

    .field-row{ position:relative; }
    .toggle-btn{
      position:absolute; right:8px; top:50%; transform:translateY(-50%);
      border:0; background:transparent; padding:6px 8px; cursor:pointer; color:var(--muted); font-size:13px;
    }

    .pw-meter{
      height:8px; width:100%; background:#eef2ff; border-radius:8px; overflow:hidden; margin-top:6px;
    }
    .pw-meter > i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent-1),var(--accent-2)); transition:width .22s ease; }

    .meta{ font-size:13px; color:var(--muted); margin-top:6px; }

    .row{
      display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:6px;
    }

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

    .links{ display:flex; justify-content:space-between; margin-top:10px; gap:12px; flex-wrap:wrap; }
    .links a{ text-decoration:none; color:var(--accent-2); font-weight:700; font-size:14px; }

    .msg{ font-size:13px; min-height:18px; margin-top:6px; }
    .msg.error{ color:#e24b4b; }
    .msg.ok{ color:#0b7a3a; }

    /* responsive */
    @media (max-width:520px){
      :root{ --max-width:98vw; }
      .header{ padding:14px }
      .body{ padding:16px }
      .logo{ width:46px; height:46px; font-size:18px }
    }

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