@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { background: #0f172a; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; overflow-x: hidden; }
.bg-shape { position: absolute; border-radius: 50%; filter: blur(80px); z-index: -1; }
.shape-1 { width: 300px; height: 300px; background: rgba(0, 210, 255, 0.15); top: -50px; left: -50px; }
.shape-2 { width: 400px; height: 400px; background: rgba(139, 26, 52, 0.15); bottom: -100px; right: -50px; }
.auth-wrapper { display: flex; width: 100%; max-width: 950px; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; overflow: hidden; box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3); }
.welcome-section { flex: 1; background: linear-gradient(135deg, rgba(0, 210, 255, 0.05), rgba(58, 123, 213, 0.1)); display: flex; flex-direction: column; justify-content: center; padding: 50px; color: #ffffff; }
.welcome-section h2 { font-size: 3.2rem; font-weight: 700; margin-bottom: 10px; }
.tagline { color: #00ffcc; font-weight: 600; border-left: 3px solid #00ffcc; padding-left: 15px; }
.auth-card { flex: 1; padding: 40px 50px; background: rgba(15, 23, 42, 0.7); }
.brand-status { color: #00ffcc; font-size: 0.85rem; margin-bottom: 30px; display: flex; align-items: center; gap: 8px; }
.field-wrapper { position: relative; width: 100%; margin-bottom: 25px; border-bottom: 2px solid rgba(255, 255, 255, 0.3); }
.field-wrapper input { width: 100%; height: 45px; background: transparent; border: none; outline: none; color: #fff; padding: 0 35px; }
.field-wrapper i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #fff; }
.field-wrapper label { position: absolute; left: 35px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.6); transition: 0.4s; pointer-events: none; }
.field-wrapper input:focus~label, .field-wrapper input:valid~label { top: -10px; font-size: 0.85rem; color: #00ffcc; }
.submit-button { width: 100%; height: 50px; background: linear-gradient(90deg, #00d2ff, #3a7bd5); border: none; border-radius: 50px; color: #fff; font-weight: 600; cursor: pointer; transition: 0.3s; margin-top: 10px; }
.submit-button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 210, 255, 0.4); }
.switch-link { margin-top: 25px; text-align: center; color: #fff; }
.switch-link a { color: #00ffcc; text-decoration: none; font-weight: 700; }
@media (max-width: 850px) { .auth-wrapper { flex-direction: column; } .auth-card { border-left: none; border-top: 1px solid rgba(255,255,255,0.1); } }