/* framewed — sign in, sign up, set password, reset, verify.
   The same design system as the studio app: warm paper and bronze, the
   Cormorant display serif for the wordmark and headings, Inter for reading,
   rounded surfaces that lift rather than outlines that box in. */

:root{
  --paper:#F6F3EE;
  --card:#FFFFFF;
  --sink:#F1ECE4;
  --line:#EBE4D9;
  --line-2:#DDD3C4;
  --ink:#1A1714;
  --muted:#6E655B;
  --faint:#A1978B;
  --bronze:#8A6520;
  --bronze-2:#A67A2A;
  --bronze-soft:#F6EEDD;
  --red:#A33A3A;
  --green:#3E6B45;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Noto Sans Bengali","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;min-height:100vh;
  background:
    radial-gradient(900px 520px at 50% -8%, #F3E3C2 0%, rgba(243,227,194,0) 70%),
    var(--paper);
  color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.55;
  display:grid;place-items:center;padding:1.5rem 1.1rem 2.5rem;
  -webkit-font-smoothing:antialiased;
}

button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bronze);outline-offset:2px;border-radius:6px}
a{color:var(--bronze);text-decoration:none;font-weight:500}
a:hover{text-decoration:underline;text-underline-offset:3px}

.shell{width:100%;max-width:25rem}

.brand{
  display:block;text-align:center;
  font-family:var(--serif);font-size:2.2rem;font-weight:600;letter-spacing:.01em;
  color:var(--ink);margin-bottom:1.4rem;
}
.brand:hover{text-decoration:none}

.card{
  background:var(--card);border:0;border-radius:22px;
  padding:2rem 1.6rem 1.8rem;
  box-shadow:0 2px 6px rgba(26,23,20,.05),0 24px 60px rgba(26,23,20,.10);
}

h1{
  font-family:var(--serif);font-weight:600;font-size:2.1rem;line-height:1.1;
  margin:0 0 .4rem;letter-spacing:0;
}
.sub{color:var(--muted);font-size:.92rem;margin:0 0 1.6rem}
.sub strong{font-weight:600;color:var(--ink)}

.field{display:block;margin-bottom:1rem}
.field span{display:block;font-size:.8rem;font-weight:500;color:var(--muted);margin-bottom:.35rem}
.field input{
  width:100%;background:var(--card);border:1px solid var(--line-2);
  border-radius:12px;padding:.8rem .85rem;font-size:16px;  /* 16px stops iOS zooming */
  transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder{color:var(--faint)}
.field input:hover{border-color:#CDBFA9}
.field input:focus{border-color:var(--bronze);box-shadow:0 0 0 4px rgba(138,101,32,.12);outline:none}
.field input[aria-invalid="true"]{border-color:var(--red)}
.field .hint{font-size:.76rem;color:var(--faint);margin-top:.3rem}

/* one-time code */
.code-input{
  letter-spacing:.6em;text-align:center;font-size:1.5rem;font-weight:600;
  padding-left:.6em;font-variant-numeric:tabular-nums;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  min-height:48px;padding:.75rem 1rem;border:0;border-radius:12px;
  cursor:pointer;color:#fff;font-weight:600;font-size:.95rem;letter-spacing:.01em;
  background:linear-gradient(160deg,var(--bronze-2),var(--bronze));
  box-shadow:0 6px 16px rgba(138,101,32,.25);
  transition:transform .1s,box-shadow .15s,opacity .15s;
}
.btn:hover:not(:disabled){box-shadow:0 8px 22px rgba(138,101,32,.32)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{background:var(--line-2);box-shadow:none;cursor:default}

.btn-quiet{
  background:none;color:var(--muted);border:0;width:auto;min-height:0;padding:.4rem 0;box-shadow:none;
  font-size:.88rem;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.btn-quiet:hover:not(:disabled){background:none;color:var(--ink);box-shadow:none}
.btn-quiet:disabled{background:none;color:var(--faint);text-decoration:none;cursor:default}

.msg{min-height:1.4rem;margin:.9rem 0 0;font-size:.88rem;color:var(--bronze)}
.msg.bad{color:var(--red)}
.msg.good{color:var(--green)}

.alt{
  margin:1.5rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--muted);text-align:center;
}

.note{
  margin-top:1.2rem;padding:.9rem 1rem;background:var(--bronze-soft);
  border-radius:12px;font-size:.85rem;color:var(--muted);
}
.note strong{color:var(--ink);font-weight:600}

/* password strength */
.meter{display:flex;gap:.3rem;margin-top:.5rem}
.meter i{flex:1;height:4px;background:var(--line);border-radius:2px;transition:background .25s}
.meter i.on-1{background:#C58A8A}
.meter i.on-2{background:#D6B072}
.meter i.on-3{background:#9FBF8E}
.meter i.on-4{background:var(--green)}

.step{display:none}
.step.is-on{display:block}

.back{display:block;text-align:center;margin-top:1.3rem;font-size:.9rem;color:var(--muted)}

@media (min-width:600px){
  .card{padding:2.4rem 2.2rem 2.1rem}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}