* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { background: #0f172a; display: flex; justify-content: center; align-items: center; min-height: 100vh; color: #ffffff; }
body::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(30,41,59,0.5) 0%, rgba(2,6,23,0.95) 100%); pointer-events: none; z-index: 0; }
.login-wrapper { width: 100%; max-width: 600px; padding: 20px; position: relative; z-index: 1; }
.login-container { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 28px; box-shadow: 0 30px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15); position: relative; overflow: hidden; }
.login-grid { display: flex; flex-direction: row; align-items: stretch; }
.form-section { flex: 1; padding: 45px 35px; text-align: center; position: relative; }
.login-title { color: #ffffff; font-size: 28px; font-weight: 700; margin-bottom: 5px; letter-spacing: -0.5px; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.login-subtitle { color: rgba(255, 255, 255, 0.7); font-size: 15px; margin-bottom: 35px; }
.input-group { margin-bottom: 22px; text-align: left; position: relative; }
.input-group label { display: block; color: rgba(255, 255, 255, 0.85); font-size: 13.5px; margin-bottom: 8px; font-weight: 500; }
.input-group i { position: absolute; left: 16px; bottom: 15px; color: #94a3b8; font-size: 15px; }
.input-group input { width: 100%; padding: 15px 15px 15px 45px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 14px; color: #fff; font-size: 15px; outline: none; transition: all .2s ease; }
.input-group input:focus { border-color: #38bdf8; background: rgba(255,255,255,0.12); box-shadow: 0 0 0 4px rgba(56,189,248,0.12); }
.input-group input::placeholder { color: rgba(255,255,255,0.35); }
.submit-btn { width: 100%; border: none; border-radius: 14px; padding: 15px 18px; background: linear-gradient(135deg, #38bdf8, #2563eb); color: #fff; cursor: pointer; font-weight: 700; font-size: 15px; transition: transform .2s ease, opacity .2s ease; }
.submit-btn:hover { transform: translateY(-1px); }
.submit-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }
.hidden-form { display: none; }
.info-box { background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.25); border-radius: 14px; padding: 14px; color: rgba(255,255,255,0.88); font-size: 14px; line-height: 1.45; margin-bottom: 22px; }
.back-link { color: rgba(255,255,255,0.78); text-decoration: none; }
.back-link:hover { color: #fff; }
.g-recaptcha { display: flex; justify-content: center; margin: 18px 0; }
.login-footer { color: rgba(255,255,255,0.45); font-size: 12px; }
@media (max-width: 640px) { .login-wrapper { padding: 14px; } .form-section { padding: 34px 22px; } }