:root{
  --yellow:#f2cf00;
  --yellow-2:#ffdf19;
  --ink:#111111;
  --muted:#6f6f6f;
  --line:#dedede;
  --paper:#ffffff;
  --soft:#f7f6f2;
  --danger:#b42318;
  --success:#137333;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--soft)}
button,input{font:inherit}
a{color:inherit}
.brand{display:flex;align-items:baseline;gap:.08em;font-weight:800;letter-spacing:-.04em;font-size:clamp(2.4rem,5vw,4.4rem);line-height:1}
.brand .d{color:var(--yellow)}
.brand .dot{color:var(--yellow);font-size:.8em}
.brand small{display:block;font-size:.68rem;letter-spacing:.35em;text-transform:uppercase;font-weight:700;color:#333;margin-top:.7rem}
.field{position:relative}
.field img{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:21px;height:21px;opacity:.82}
.field input{width:100%;min-height:56px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:0 50px 0 52px;font-size:16px;outline:none;transition:.2s}
.field input:focus{border-color:#b99f00;box-shadow:0 0 0 4px rgba(242,207,0,.18)}
.eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;width:42px;height:42px;cursor:pointer;border-radius:10px;font-size:20px}
.eye:focus-visible,.btn:focus-visible,.link-btn:focus-visible{outline:3px solid rgba(0,0,0,.28);outline-offset:2px}
.btn{width:100%;min-height:56px;border:0;border-radius:15px;background:linear-gradient(90deg,var(--yellow),var(--yellow-2));font-weight:800;font-size:1rem;cursor:pointer;color:#111;transition:transform .15s ease,filter .15s ease}
.btn:hover{filter:brightness(1.02)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.link-btn{border:0;background:transparent;padding:8px 0;text-decoration:underline;cursor:pointer;color:#222}
.status{min-height:22px;margin-top:12px;font-size:.9rem;color:var(--muted)}
.status.error{color:var(--danger)}
.status.ok{color:var(--success)}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(0,0,0,.25);border-top-color:#111;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}