* { margin: 0; padding: 0; 
    box-sizing: border-box; 
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
body.auth-body { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; overflow-x: hidden; background: radial-gradient(circle at top left,rgba(255,255,255,.16),transparent 30%),linear-gradient(135deg,#073b24 0%,#0f5a36 45%,#fff 45%,#fff 100%); color: #17231f; }
body.page-loading { overflow: hidden; }.background-seal { position: fixed; inset: 0; pointer-events: none; opacity: .035; background: radial-gradient(circle at 18% 58%,#fff 0 9%,transparent 9.5%); }
.green-effect { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }.green-effect span { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.12); filter: blur(2px); animation: floatEffect 8s infinite ease-in-out; }.green-effect span:nth-child(1) { top: 8%; left: 10%; }.green-effect span:nth-child(2) { top: 18%; right: 12%; width: 150px; height: 150px; animation-delay: 1.5s; }.green-effect span:nth-child(3) { top: 38%; left: 45%; width: 100px; height: 100px; animation-delay: 3s; }
@keyframes floatEffect { 0%,100% { transform: translateY(0) scale(1); opacity: .55; } 50% { transform: translateY(-30px) scale(1.08); opacity: .9; } }
.sms-auth-main { position: relative; z-index: 2; width: 100%; display: grid; place-items: center; }.register-card { position: relative; width: 100%; max-width: 450px; padding: 38px 40px; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 20px; background: rgba(255,255,255,.97); text-align: center; box-shadow: 0 22px 65px rgba(0,0,0,.23); backdrop-filter: blur(10px); animation: cardIn .6s ease; }.registration-ribbon { position: absolute; top: 18px; right: -35px; width: 140px; padding: 7px; transform: rotate(40deg); background: #279947; color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
@keyframes cardIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }.logo-container { margin-bottom: 15px; }.logo-container img { max-width: 180px; max-height: 95px; object-fit: contain; }.register-card h1 { margin-bottom: 5px; color: #113d2d; font-size: 23px; }.tagline { margin-bottom: 24px; color: #52615b; font-size: 13px; font-weight: 500; line-height: 1.55; }.auth-field { display: block; margin-bottom: 15px; text-align: left; }.auth-field > span:first-child { display: block; margin-bottom: 6px; color: #364740; font-size: 10px; font-weight: 800; }.input-group { position: relative; display: block; }.input-group input { width: 100%; min-height: 48px; padding: 12px 45px 12px 42px; border: 1px solid #d0d8d4; border-radius: 10px; outline: none; font-size: 14px; transition: .2s; }.input-group input:focus { border-color: #279947; box-shadow: 0 0 0 4px rgba(39,153,71,.12); }.input-group i { position: absolute; left: 14px; top: 50%; z-index: 2; transform: translateY(-50%); font-style: normal; }.toggle-password { position: absolute; right: 7px; top: 50%; width: 35px; height: 35px; border: 0; border-radius: 8px; transform: translateY(-50%); background: #f2f5f3; cursor: pointer; }.login-options { display: flex; justify-content: flex-end; margin: -3px 0 16px; }.login-options a,.back-login { color: #187c3d; font-size: 11px; font-weight: 700; text-decoration: none; }.login-btn { width: 100%; min-height: 47px; border: 0; border-radius: 10px; background: linear-gradient(135deg,#1f7f3a,#279947); color: #fff; font-weight: 800; cursor: pointer; transition: .2s; }.login-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(39,153,71,.22); }.login-btn:disabled { opacity: .65; cursor: wait; }.msg-success,.msg-error { padding: 11px 13px; margin-bottom: 15px; border-radius: 10px; font-size: 12px; font-weight: 600; text-align: left; }.msg-success { border: 1px solid #abefc6; background: #ecfdf3; color: #067647; }.msg-error { border: 1px solid #f3b3b3; background: #fff1f1; color: #b42318; }[hidden] { display: none!important; }.auth-footer { margin-top: 20px; color: #89948f; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.back-login { display: inline-block; margin-top: 19px; }.recovery-icon { width: 54px; height: 54px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 15px; background: #e7f6ec; color: #187c3d; font-size: 23px; }
.login-animation { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; flex-direction: column; opacity: 0; visibility: hidden; pointer-events: none; background: linear-gradient(145deg,#073b24,#157043); color: #fff; transition: .25s; }.login-animation.show { opacity: 1; visibility: visible; pointer-events: auto; }.sms-loader-box { position: relative; width: 105px; height: 105px; }.sms-loader-ring { position: absolute; inset: 0; border: 4px solid rgba(255,255,255,.16); border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; }.sms-loader-logo { position: absolute; inset: 13px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #fff; }.sms-loader-logo img { width: 86%; height: 86%; object-fit: contain; }.login-animation h3 { margin-top: 17px; }.login-animation p { margin-top: 5px; color: rgba(255,255,255,.75); font-size: 12px; }@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 500px) { body.auth-body { align-items: flex-start; padding-top: 45px; overflow-y: auto; background: linear-gradient(160deg,#073b24 0%,#0f5a36 38%,#fff 38%,#fff 100%); }.register-card { padding: 31px 23px; border-radius: 17px; }.logo-container img { max-width: 150px; } }
.otp-group{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:4px 0 20px}.otp-input{width:100%;height:54px;border:1px solid #d0d8d4;border-radius:10px;background:#fff;color:#173f30;text-align:center;font-size:22px;font-weight:800;outline:none;transition:.2s}.otp-input:focus{border-color:#279947;box-shadow:0 0 0 4px rgba(39,153,71,.12);transform:translateY(-1px)}.recovery-links{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px}.recovery-links a{color:#187c3d;font-size:10px;font-weight:800;text-decoration:none}.recovery-links span{color:#a4aea9}.password-rule{margin:-4px 0 16px;color:#74817b;font-size:9px;text-align:left}@media(max-width:500px){.otp-group{gap:5px}.otp-input{height:48px;border-radius:8px;font-size:19px}}