*{margin:0;padding:0;box-sizing:border-box;}:root{--primary:#0a0e27;--primary-dark:#060918;--accent:#00d4ff;--accent-glow:rgba(0,212,255,0.3);--text-primary:#ffffff;--text-secondary:#a0aec0;--border-color:rgba(255,255,255,0.1);--error:#ff4757;--success:#00d26a;--card-bg:rgba(10,14,39,0.85);}
body{font-family:'Segoe UI','Inter',system-ui,-apple-system,sans-serif;background:radial-gradient(circle at 20%30%,#0a0e27,#02040f);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;color:var(--text-primary);user-select:none;}.bg-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(0,212,255,0.02)0px,rgba(0,212,255,0.02)2px,transparent 2px,transparent 8px),radial-gradient(ellipse at 70%40%,rgba(0,212,255,0.05)0%,transparent 50%);pointer-events:none;z-index:0;}.container{position:relative;z-index:1;width:100%;max-width:460px;animation:fadeInUp 0.6s ease-out;}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}
to{opacity:1;transform:translateY(0);}}.logo-container{text-align:center;margin-bottom:32px;}.logo-icon{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;background:linear-gradient(135deg,rgba(0,212,255,0.15),rgba(0,212,255,0.05));border-radius:24px;backdrop-filter:blur(10px);border:1px solid rgba(0,212,255,0.2);margin-bottom:20px;color:var(--accent);}.logo-container h1{font-size:36px;font-weight:700;letter-spacing:2px;background:linear-gradient(135deg,#ffffff 0%,var(--accent)100%);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px;}.logo-container h1 span{background:linear-gradient(135deg,var(--accent),#7c4dff);-webkit-background-clip:text;background-clip:text;color:transparent;}.subtitle{font-size:14px;color:var(--text-secondary);letter-spacing:1px;}.card{background:var(--card-bg);backdrop-filter:blur(20px);border-radius:32px;border:1px solid var(--border-color);padding:40px 32px;box-shadow:0 25px 45px rgba(0,0,0,0.3),0 0 0 1px rgba(0,212,255,0.1);transition:transform 0.3s ease,box-shadow 0.3s ease;}.card:hover{transform:translateY(-2px);box-shadow:0 30px 55px rgba(0,0,0,0.4),0 0 0 1px rgba(0,212,255,0.2);}.card-header{text-align:center;margin-bottom:32px;}.card-header h3{font-size:24px;font-weight:600;margin-bottom:8px;}.card-header p{font-size:14px;color:var(--text-secondary);}.input-group{margin-bottom:24px;}.input-group label{display:block;font-size:13px;font-weight:500;margin-bottom:8px;color:var(--text-secondary);letter-spacing:0.3px;}.input-icon{position:relative;display:flex;align-items:center;}.input-icon svg:first-child{position:absolute;left:14px;color:var(--text-secondary);opacity:0.7;pointer-events:none;}.input-icon input{width:100%;padding:14px 14px 14px 42px;background:rgba(0,0,0,0.4);border:1px solid var(--border-color);border-radius:16px;font-size:15px;color:var(--text-primary);transition:all 0.2s ease;font-family:inherit;}.input-icon input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:rgba(0,0,0,0.6);}.input-icon input::placeholder{color:rgba(160,174,192,0.5);}.toggle-password{position:absolute;right:7px;background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:var(--text-secondary);transition:color 0.2s;width:40px;height:40px;}.toggle-password:hover{color:var(--accent);}.btn-submit{width:100%;padding:14px;background:linear-gradient(135deg,var(--accent),#0084b3);border:none;border-radius:16px;font-size:16px;font-weight:600;color:var(--primary-dark);cursor:pointer;transition:all 0.3s ease;margin-top:8px;position:relative;display:flex;align-items:center;justify-content:center;font-family:inherit;}.btn-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,212,255,0.3);filter:brightness(1.05);}.btn-submit:active:not(:disabled){transform:translateY(0);}.btn-submit:disabled{opacity:0.7;cursor:not-allowed;}.btn-text{display:inline-block;}.btn-loader{width:20px;height:20px;border:2px solid var(--primary-dark);border-top-color:transparent;border-radius:50%;animation:spin 0.6s linear infinite;}@keyframes spin{to{transform:rotate(360deg);}}.alert{margin-top:20px;padding:12px 16px;border-radius:14px;font-size:13px;text-align:center;background:rgba(255,71,87,0.15);border:1px solid rgba(255,71,87,0.3);color:#ff8a92;backdrop-filter:blur(4px);animation:shake 0.4s ease;}@keyframes shake{0%,100%{transform:translateX(0);}
25%{transform:translateX(-5px);}
75%{transform:translateX(5px);}}.card-footer{margin-top:32px;padding-top:24px;border-top:1px solid var(--border-color);text-align:center;}.card-footer p{font-size:11px;color:var(--text-secondary);opacity:0.7;margin-bottom:12px;}.status-indicator{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;color:var(--text-secondary);}.dot{width:8px;height:8px;background:var(--success);border-radius:50%;display:inline-block;box-shadow:0 0 6px var(--success);animation:pulse 2s infinite;}@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}
50%{opacity:0.5;transform:scale(1.2);}}@media(max-width:500px){.card{padding:32px 24px;}.logo-container h1{font-size:28px;}.logo-icon{width:64px;height:64px;}}