@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800;900&display=swap');

*{box-sizing:border-box;margin:0;padding:0;font-family:"Sarabun",sans-serif!important}
body{min-height:100vh;padding:18px;color:#d1d5db;background:linear-gradient(135deg,#1f2d3d,#111a24 50%,#1a102f);display:grid;place-items:center}
body::before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(74,144,226,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(74,144,226,.045) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
a{text-decoration:none;color:#c7d2fe;font-weight:900}
button,input{font:inherit}
button{border:0;cursor:pointer}
.reset-shell{width:min(100%,620px);position:relative;z-index:2}
.reset-card{border-radius:24px;background:rgba(23,29,38,.82);border:1px solid rgba(255,255,255,.11);box-shadow:0 30px 90px rgba(0,0,0,.45);backdrop-filter:blur(18px);padding:24px;display:grid;gap:18px}
.reset-brand{display:flex;align-items:center;gap:14px}.logo{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,#4f46e5,#2ecc71);display:grid;place-items:center;box-shadow:0 10px 26px rgba(79,70,229,.30)}.logo-grid{display:grid;grid-template-columns:repeat(2,9px);grid-template-rows:repeat(2,9px);gap:3px}.logo-grid span{display:block;background:#fff;border-radius:2px}
.reset-brand h1{color:#fff;font-size:1.22rem;font-weight:900}.reset-brand p{color:#94a3b8;font-size:.78rem;margin-top:2px}
.stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.step{min-height:36px;border-radius:12px;display:grid;place-items:center;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:.70rem;font-weight:900;color:#94a3b8}.step.active{color:#fff;background:rgba(79,70,229,.24);border-color:rgba(129,140,248,.45)}.step.done{color:#bbf7d0;background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.22)}
.alert{border-radius:14px;border:1px solid rgba(96,165,250,.22);background:rgba(59,130,246,.08);padding:12px 13px;color:#bfdbfe;font-size:.72rem;line-height:1.55;font-weight:800}
.reset-step{display:none;gap:12px}.reset-step.active{display:grid}.reset-step h2{color:#fff;font-size:1rem;font-weight:900}.reset-step p{color:#94a3b8;font-size:.76rem;line-height:1.5}
.form-stack{display:grid;gap:13px}label{display:block;color:#94a3b8;font-size:.70rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;margin-bottom:7px}.matrix-input{width:100%;border-radius:11px;border:1px solid rgba(55,65,81,.95);background:#222a36;color:#f8fafc;outline:none;padding:12px 12px;font-size:.84rem;transition:.16s}.matrix-input:focus{border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.14)}.otp-input{text-align:center;letter-spacing:.28em;font-size:1.25rem;font-weight:900}
.btn{min-height:42px;border-radius:13px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.80rem;font-weight:900;transition:.16s;color:#dbeafe;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);white-space:nowrap}.btn:hover{background:rgba(255,255,255,.13);color:#fff}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:#4f46e5;color:#fff;box-shadow:0 10px 24px rgba(79,70,229,.25);border-color:transparent}
.inline-actions{display:flex;gap:10px;flex-wrap:wrap}.pass-wrap{position:relative}.pass-wrap .matrix-input{padding-right:76px}.eye-btn{position:absolute;right:7px;top:7px;min-height:30px;border-radius:9px;padding:0 9px;background:rgba(255,255,255,.07);color:#cbd5e1;font-size:.66rem;font-weight:900}
.done-icon{width:64px;height:64px;border-radius:22px;background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.28);display:grid;place-items:center;color:#bbf7d0;font-size:2rem;font-weight:900}
.bottom-link{text-align:center;font-size:.78rem;color:#94a3b8}.toast{position:fixed;right:18px;bottom:18px;z-index:7000;border-radius:14px;border:1px solid rgba(34,197,94,.28);background:rgba(22,101,52,.92);color:#dcfce7;padding:12px 14px;font-size:.78rem;font-weight:900;box-shadow:0 16px 40px rgba(0,0,0,.35);opacity:0;transform:translateY(12px);pointer-events:none;transition:.18s}.toast.show{opacity:1;transform:translateY(0)}.toast.error{border-color:rgba(239,68,68,.35);background:rgba(127,29,29,.94);color:#fecaca}
@media(max-width:540px){body{padding:8px}.reset-card{padding:18px;border-radius:18px}.stepper{grid-template-columns:1fr}.inline-actions{display:grid}.btn{width:100%}}