:root{
    --bg:#F6F8F4; --surface:#FFFFFF; --ink:#1B2E29; --ink-soft:#3F5750;
    --teal:#2E6B60; --teal-deep:#1D4640; --sage:#A8C6A0; --sand:#EADFC5;
    --coral:#E2825C; --border:#DCE3D8; --bad:#C0452E;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
  h1,h2{font-family:'Bricolage Grotesque',sans-serif;color:var(--teal-deep);margin:0;letter-spacing:-0.01em;}
  a{color:inherit;text-decoration:none;}

  header{padding:22px 32px;border-bottom:1px solid var(--border);}
  .header-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;}
  .back-link{font-size:14px;color:var(--ink-soft);}
  .back-link:hover{color:var(--teal);}

  .auth{padding:64px 32px;}
  .auth-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;max-width:1000px;margin:0 auto;}
  .auth-image-frame{border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(29,70,64,0.18);border:6px solid var(--surface);}
  .auth-image-frame img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5;}

  .auth-card{max-width:400px;}
  .eyebrow{font-size:13px;font-weight:600;color:var(--coral);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px;}
  .auth-card h1{font-size:30px;margin-bottom:8px;}
  .auth-card .sub{font-size:14.5px;color:var(--ink-soft);margin-bottom:30px;line-height:1.55;}

  .field{margin-bottom:18px;}
  .field label{display:block;font-size:13px;font-weight:600;color:var(--teal-deep);margin-bottom:6px;}
  .field input{
    width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;
    font-size:15px;font-family:'Inter',sans-serif;color:var(--ink);background:var(--surface);
  }
  .field input:focus{outline:none;border-color:var(--teal);}
  .field .hint{font-size:12px;color:var(--ink-soft);margin-top:5px;}

  .submit-btn{
    width:100%;background:var(--coral);color:#fff;border:none;border-radius:999px;
    padding:13px 20px;font-size:15px;font-weight:600;cursor:pointer;margin-top:6px;
  }
  .submit-btn:hover{background:#C96A44;}

  .row-between{display:flex;justify-content:space-between;align-items:center;margin:14px 0 0;font-size:13.5px;}
  .row-between a{color:var(--teal);font-weight:600;}
  .row-between a:hover{text-decoration:underline;}

  .divider-note{margin-top:28px;padding-top:22px;border-top:1px solid var(--border);font-size:13.5px;color:var(--ink-soft);}
  .divider-note a{color:var(--teal);font-weight:600;}

  @media (max-width:760px){
    .auth-grid{grid-template-columns:1fr;gap:32px;}
    .auth-image-frame{order:-1;max-width:360px;margin:0 auto;aspect-ratio:16/9;}
    .auth-image-frame img{aspect-ratio:16/9;}
    .auth-card{max-width:100%;}
  }

  .dev-toggle{background:var(--sand);padding:10px 32px;font-size:12.5px;color:var(--teal-deep);text-align:center;}
  .dev-toggle button{
    background:var(--surface);border:1px solid var(--teal);color:var(--teal-deep);
    border-radius:999px;padding:5px 14px;font-size:12px;margin:0 4px;cursor:pointer;font-weight:600;
  }
  .dev-toggle button.active{background:var(--teal);color:#fff;}
  .pw-strength{display:flex;gap:4px;margin-top:8px;}
  .pw-strength span{height:4px;flex:1;background:var(--border);border-radius:2px;}
  .state-view{display:none;}
  .state-view.active{display:block;}
  .error-icon{
    width:52px;height:52px;border-radius:50%;background:#FBEAE5;color:var(--bad);
    display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  }
  .resend-btn{
    width:100%;background:var(--teal);color:#fff;border:none;border-radius:999px;
    padding:13px 20px;font-size:15px;font-weight:600;cursor:pointer;margin-top:6px;
  }
  .resend-btn:hover{background:var(--teal-deep);}