:root{--primary-blue:#183a78;--primary-blue-light:#2c4f9e;--primary-blue-dark:#122c5c;--accent:#6366f1;--glass-bg:rgba(255,255,255,0.12);--glass-border:rgba(255,255,255,0.25)}*{box-sizing:border-box;font-family:'Kanit',sans-serif}html{height:100%;overflow-x:hidden}body{margin:0;min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at center,var(--primary-blue-light) 0%,var(--primary-blue-dark) 100%);overflow-x:hidden;overflow-y:auto;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));-webkit-text-size-adjust:100%}.background-blobs{position:fixed;width:min(400px,80vw);height:min(400px,80vw);background:var(--accent);filter:blur(150px);border-radius:50%;z-index:-1;top:10%;left:20%;opacity:0.25;pointer-events:none}.glass-container{background:var(--glass-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--glass-border);border-radius:24px;padding:32px 24px;width:100%;max-width:450px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,0.4);margin:auto}.logo-wrapper{display:flex;justify-content:center;margin-bottom:16px}.logo-icon{width:64px;height:64px;background:linear-gradient(135deg,var(--primary-blue-light),var(--accent));border-radius:18px;position:relative;transform:rotate(-15deg);box-shadow:0 10px 20px rgba(0,0,0,0.3);overflow:hidden;flex-shrink:0}.logo-icon::before{content:'';position:absolute;width:80px;height:1px;background-image:linear-gradient(to right,white 40%,rgba(255,255,255,0) 0%);background-size:8px 1px;background-repeat:repeat-x;bottom:20px;left:-10px;transform:rotate(15deg);opacity:0.4}.logo-icon::after{content:'';position:absolute;width:32px;height:32px;background-color:#fff;top:50%;left:50%;transform:translate(-45%,-55%) rotate(75deg);clip-path:polygon(50% 0%,100% 100%,50% 75%,0% 100%);filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2))}.login-header h1{font-weight:700;font-size:clamp(1.4rem,5vw,2rem);background:linear-gradient(to bottom,#fff,#cbd5e1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0;line-height:1.25;word-break:break-word}.login-header p{color:#94a3b8;font-size:0.95rem;margin:8px 0 0}.login-form{width:100%;min-width:0}.input-group{text-align:left;margin-bottom:20px;min-width:0}.input-group label,.otp-section label{display:block;color:#cbd5e1;font-size:0.85rem;margin-bottom:8px;margin-left:5px}.input-group input{width:100%;max-width:100%;padding:12px 16px;border-radius:12px;border:1px solid var(--glass-border);background:rgba(255,255,255,0.05);color:#fff;font-size:16px;outline:none;transition:0.3s;min-width:0}.input-group input:focus{border-color:var(--accent);background:rgba(255,255,255,0.1)}.otp-input-wrapper{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:24px;width:100%;min-width:0}.otp-field{width:100%;min-width:0;height:48px;border-radius:12px;border:1px solid var(--glass-border);background:rgba(255,255,255,0.15);color:#fff;text-align:center;transition:all 0.3s ease;padding:0;font-size:clamp(1rem,4.5vw,1.5rem)}.otp-field:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,0.1);box-shadow:0 0 15px rgba(99,102,241,0.3)}.otp-section{text-align:left;margin-bottom:20px;min-width:0}.otp-section label{text-align:left}.login-btn{width:100%;padding:14px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-size:1.05rem;font-weight:600;cursor:pointer;transition:0.3s;margin-top:8px;min-height:48px;touch-action:manipulation}.login-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(99,102,241,0.4)}.required-marker{color:#ff8a8a;font-weight:700}@media (max-width:400px){.glass-container{padding:24px 16px;border-radius:20px}.logo-icon{width:52px;height:52px;border-radius:14px}.otp-input-wrapper{gap:4px;margin-bottom:20px}.otp-field{height:44px;border-radius:10px}.input-group{margin-bottom:16px}.otp-section{margin-bottom:16px}}@media (max-height:700px){body{align-items:flex-start}.glass-container{padding:20px 16px;margin-top:8px;margin-bottom:8px}.logo-wrapper{margin-bottom:10px}.logo-icon{width:48px;height:48px}}