* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; position: relative; overflow-x: hidden; padding-block: clamp(18px,4vh,44px); color: #172033; background: linear-gradient(135deg,#f8fbff 0%,#f4f7ff 45%,#faf7ff 100%); font-family: Arial,Helvetica,sans-serif; }
.background-shape { position: fixed; z-index: 0; border-radius: 50%; pointer-events: none; }
.background-shape.one { width: 420px; height: 420px; top: -220px; left: -180px; background: radial-gradient(circle,rgba(0,190,230,.16) 0%,rgba(0,190,230,0) 70%); }
.background-shape.two { width: 500px; height: 500px; right: -220px; bottom: -280px; background: radial-gradient(circle,rgba(105,50,235,.15) 0%,rgba(105,50,235,0) 70%); }
.reset-wrapper { position: relative; z-index: 1; width: min(100%,460px); padding: clamp(16px,4vw,30px); }
.logo-wrapper { margin-bottom: 28px; text-align: center; }
.logo { display: block; width: clamp(205px,58vw,270px); max-width: 90%; height: auto; margin: 0 auto; }
.reset-card { position: relative; overflow: hidden; width: 100%; padding: clamp(24px,6vw,38px); border: 1px solid rgba(203,213,225,.8); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 20px 50px rgba(30,45,80,.12); }
.reset-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg,#00bfe8 0%,#168de2 38%,#4f46e5 68%,#7928e8 100%); }
h1 { margin: 0 0 12px; color: #172033; font-size: 28px; line-height: 1.2; text-align: center; }
p { margin: 0 0 24px; color: #667085; font-size: 14px; line-height: 1.6; text-align: center; }
label { display: block; margin: 0 0 8px; color: #273449; font-size: 14px; font-weight: 600; }
label:not(:first-of-type) { margin-top: 20px; }
input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #d7dce5; border-radius: 9px; color: #172033; background: #fff; font: inherit; font-size: 15px; outline: none; transition: border-color .2s ease,box-shadow .2s ease; }
input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.10); }
.button:focus-visible,.back:focus-visible,input:focus-visible { outline: 3px solid rgba(21,186,229,.35); outline-offset: 2px; }
.button { width: 100%; height: 50px; margin-top: 24px; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(90deg,#00bfe8 0%,#168de2 38%,#4f46e5 70%,#7928e8 100%); box-shadow: 0 8px 18px rgba(79,70,229,.22); font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .15s ease,box-shadow .15s ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 11px 22px rgba(79,70,229,.28); }
.notice,.error { margin: 0 0 22px; padding: 13px 15px; border-radius: 9px; font-size: 14px; line-height: 1.45; }
.notice { color: #087443; border: 1px solid #afe2c7; background: #effbf4; }
.error { color: #be123c; border: 1px solid #fecdd3; background: #fff1f2; }
.back { display: block; margin-top: 20px; color: #405ee0; font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; }
.back:hover { text-decoration: underline; }
.reset-footer { margin-top: 22px; color: #98a2b3; font-size: 12px; text-align: center; }
.reset-footer strong { color: #667085; font-weight: 600; }
@media (max-width: 520px) { body { align-items: flex-start; } .reset-wrapper { padding: 16px; } .logo-wrapper { margin-bottom: 20px; } .reset-card { padding: 28px 22px; border-radius: 15px; } h1 { font-size: 25px; } input { font-size: 16px; } }
@media (max-width: 360px) { .reset-wrapper { padding: 12px; } .reset-card { padding: 24px 17px; } h1 { font-size: 23px; } }
@media (max-height: 680px) and (orientation: landscape) { body { align-items: flex-start; padding-block: 12px; } .logo-wrapper { margin-bottom: 14px; } .logo { width: 190px; } .reset-card { padding-block: 24px; } .reset-footer { margin-top: 14px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }