*{box-sizing:border-box}
body{padding:0;margin:0;top:0;display:flex;height:100vh;flex-flow:column;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:linear-gradient(135deg,#1e3a5f 0%,#2563eb 100%);color:#333}
h1{text-align:center;font-weight:300;font-size:2em;margin:0 0 0.2em 0;color:#fff}
h4{text-align:center;font-weight:400;color:rgba(255,255,255,0.85);margin:0 0 1em 0}
.top{padding:2em 1em 1.5em 1em;background:transparent;border:none;text-align:center}
.top .links{text-align:right;padding:0 10px 10px 0 !important}
.top .links a{color:rgba(255,255,255,0.8);text-decoration:none;font-size:0.85em;margin-left:12px;transition:color 0.2s}
.top .links a:hover{color:#fff}
.bottom{background:transparent;flex-grow:1;display:flex;align-items:flex-start;justify-content:center;padding:0 1em 2em 1em}
.error{color:#dc2626;background:#fef2f2;padding:8px 16px;border-radius:6px;margin-bottom:1em;text-align:center;border:1px solid #fecaca}
form{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-radius:16px;padding:2em 2.5em;box-shadow:0 20px 60px rgba(0,0,0,0.3);max-width:400px;width:100%}
.form-group{margin-bottom:1em}
.form-group label{display:block;margin-bottom:0.3em}
label{font-weight:500;color:#555;font-size:0.95em}
input[type="text"],input[type="password"]{width:100%;padding:10px 14px;border:2px solid #e0e0e0;border-radius:8px;font-size:1em;transition:border-color 0.2s,box-shadow 0.2s;outline:none;margin:0}
input[type="text"]:focus,input[type="password"]:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.25)}
input[type="submit"]{width:100%;padding:12px;background:#2563eb;color:white;border:none;border-radius:8px;font-size:1.05em;font-weight:600;cursor:pointer;transition:transform 0.15s,box-shadow 0.2s;margin:0.5em 0 0 0}
input[type="submit"]:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(37,99,235,0.4)}
input[type="submit"]:active{transform:translateY(0)}
.oidc-divider{text-align:center;margin:1.5em 0;position:relative}
.oidc-divider::before{content:'';position:absolute;top:50%;left:0;right:0;border-top:1px solid #e0e0e0}
.oidc-divider span{background:rgba(255,255,255,0.95);padding:0 1em;position:relative;color:#888;font-size:0.9em}
.oidc-btn{display:block;width:100%;max-width:400px;padding:12px;background:#4b5563;color:white;border:none;border-radius:8px;font-size:1.05em;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:transform 0.15s,box-shadow 0.2s}
.oidc-btn:hover{background:#374151;transform:translateY(-1px);box-shadow:0 4px 15px rgba(0,0,0,0.3)}
@media screen and (max-width:480px){form{padding:1.5em;margin:0 0.5em;border-radius:12px}
h1{font-size:1.5em}
input[type="text"],input[type="password"]{font-size:16px;/* prevents iOS zoom */}
}