:root{
      --bg:#f6f7fb;
      --card:#ffffff;
      --text:#0e1116;
      --muted:#667085;
      --accent:#ff7a2f; /* orange button */
      --accent-600:#ff7a2f;
      --accent-700:#f26e22;
      --accent-100:#fff3eb;
      --primary-700:#6a64fb; /* small links */
      --input:#f3f4f7;
      --ring:#e5e7ee;
      --shadow: 0 10px 30px rgba(20, 20, 43, .08);
      --radius: 22px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      background:radial-gradient(1200px 600px at 15% -10%, #ffffff 0%, #f4f6fb 60%, #eef1f8 100%), var(--bg);
      color:var(--text);
      min-height:100%; display:flex; align-items:flex-start; justify-content:center; padding:72px 16px 120px
    }
    .container{max-width:980px; width:100%; text-align:center}

    /* Header */
    .brand{display:inline-flex; align-items:center; gap:12px; font-weight:800; font-size:28px; letter-spacing:.2px; color:#ff7a2f; margin-bottom:10px}
    .brand svg{width:34px; height:34px}

    h1{margin:8px 0 6px; font-size:48px; font-weight:800; letter-spacing:.2px}
    h1 .thin{font-weight:600; color:#111}
    .subtitle{color:var(--muted); max-width:640px; margin:0 auto 36px; line-height:1.5}

    /* Card */
    .card{width:560px; max-width:100%; margin:0 auto; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:32px; text-align:left; border:1px solid var(--ring)}
    .field{margin:14px 0 18px}
    .label{display:block; font-size:12px; font-weight:600; color:#747a86; margin-bottom:8px}
    .control{position:relative}
    .input{width:100%; height:48px; border:1px solid var(--ring); background:var(--input); border-radius:14px; padding:0 48px 0 14px; outline:none; font:500 14px/48px Inter; color:#161a22; transition:border-color .2s, box-shadow .2s}
    .input::placeholder{color:#9aa3b2}
    .input:focus{border-color:#b8c0ff; box-shadow:0 0 0 4px rgba(104,112,255,.15) !important}
    .icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:#9aa3b2}
    .toggle{position:absolute; right:12px; top:50%; transform:translateY(-50%); background:transparent; border:0; padding:6px; cursor:pointer; color:#9aa3b2}

    .row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px}
    .remember{display:flex; align-items:center; gap:8px; color:#5b6472; font-size:13px}
    .remember input{width:16px; height:16px; accent-color:var(--accent)}
    .link{font-size:12px; color:var(--primary-700); text-decoration:none}

    .submit{width:100%; height:48px; border-radius:14px; border:0; background:linear-gradient(180deg, var(--accent-600), var(--accent-700)); color:#fff; font-weight:700; letter-spacing:.2px; cursor:pointer; margin:14px 0 4px; box-shadow:0 8px 20px rgba(255,122,47,.35)}
    .submit:active{transform:translateY(1px)}

    .create{margin-top:8px; font-size:12px; color:#7a8394; text-align:center}
    .create a{color:var(--primary-700); text-decoration:none}

    @media (max-width:640px){
      h1{font-size:36px}
      .card{padding:24px}
    }