@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
:root{--bg:#f5f7fa;--card:#fff;--accent:#1a73e8;--text:#202124}
body{background:var(--bg);font-family:Roboto,Arial,Helvetica,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased}
.login-page{display:flex;align-items:center;justify-content:center;height:calc(100vh - 80px)}
.login-card{width:380px;background:var(--card);border-radius:8px;box-shadow:0 8px 24px rgba(32,33,36,0.12);padding:28px}
.login-header{display:flex;flex-direction:column;align-items:center;margin-bottom:12px}
.login-logo{font-weight:700;color:var(--accent);font-size:26px}
.login-header h2{font-size:20px;margin:6px 0 0 0;color:#202124}
.input-wrap{margin-bottom:14px}
.input-wrap label{display:block;font-size:13px;color:#5f6368;margin-bottom:6px}
.input-wrap input{width:100%;padding:12px 14px;border:1px solid #e3e6ea;border-radius:8px;font-size:15px;background:#fff;transition:box-shadow .12s ease,border-color .12s ease}
.input-wrap input:focus{outline:none;border-color:var(--accent);box-shadow:0 1px 0 rgba(26,115,232,0.12),0 0 0 4px rgba(26,115,232,0.06)}
.login-btn{width:100%;background:var(--accent);color:#fff;border:none;padding:10px 12px;border-radius:8px;font-weight:600;margin-top:8px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,0.08)}
.login-btn:hover{filter:brightness(.98);transform:translateY(-1px)}
.login-btn:active{transform:translateY(0)}
.login-error{background:#fce8e6;color:#b00020;padding:8px;border-radius:4px;margin-bottom:12px}
.login-actions{margin-top:10px;text-align:center}
.login-actions a{color:var(--accent);text-decoration:none;font-size:14px}
.login-footer{margin-top:16px;text-align:center;color:#5f6368;font-size:13px}
@media(max-width:420px){.login-card{width:92%;padding:18px}}