*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1a1a1a;line-height:1.5;background:#f5f7fa}
.container{max-width:1100px;margin:0 auto;padding:0 1.5rem}
a{color:#1E4E8C;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:#1E4E8C;font-weight:600}

/* Topbar */
.topbar{background:#fff;border-bottom:1px solid #e2e8f0;padding:1rem 0;position:sticky;top:0;z-index:10}
.topbar .container{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:0.75rem;color:#1E4E8C;font-weight:700;font-size:1.25rem;text-decoration:none}
.brand-text em{color:#666;font-style:normal;font-weight:400;font-size:0.95rem;margin-left:0.4rem}
nav a{margin-left:1.5rem;color:#555;font-size:0.95rem}

/* Hero */
.hero{background:linear-gradient(135deg,#1E4E8C 0%,#2c6cb8 100%);color:#fff;padding:3.5rem 0 2rem}
.hero h1{color:#fff;font-size:2rem;margin-bottom:0.5rem}
.hero .lead{color:#e2ecf7;font-size:1.15rem;max-width:640px}

/* Login card */
.login-panel{padding:2rem 0}
.card{background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.06);padding:2.5rem;max-width:460px;margin:-3rem auto 0;position:relative}
.card h2{margin-bottom:0.5rem}
.hint{color:#666;font-size:0.9rem;margin-bottom:1.5rem}
label{display:block;margin-bottom:1rem}
label span{display:block;color:#555;font-size:0.85rem;font-weight:500;margin-bottom:0.35rem}
input[type=text],input[type=password]{width:100%;padding:0.7rem 0.9rem;border:1px solid #cbd5e0;border-radius:6px;font-size:0.95rem;transition:border-color 0.15s}
input[type=text]:focus,input[type=password]:focus{outline:none;border-color:#1E4E8C;box-shadow:0 0 0 3px rgba(30,78,140,0.1)}
label.checkbox{display:flex;align-items:center;font-size:0.9rem;color:#555;margin-bottom:1.5rem}
label.checkbox input{margin-right:0.5rem}
.btn-primary{width:100%;padding:0.8rem;background:#1E4E8C;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:background 0.15s}
.btn-primary:hover{background:#163e70}
.oauth{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #e2e8f0}
.or-line{display:block;text-align:center;color:#999;font-size:0.85rem;margin-bottom:1rem}
.btn-oauth{width:100%;padding:0.7rem;background:#fff;color:#333;border:1px solid #cbd5e0;border-radius:6px;font-size:0.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem}
.btn-oauth:hover{background:#f5f7fa}
.footer-hint{margin-top:1.5rem;font-size:0.85rem;color:#666;text-align:center}

/* Modules */
.modules{padding:3rem 0}
.modules h2{margin-bottom:1.5rem;font-size:1.5rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.module-card{background:#fff;padding:1.5rem;border-radius:8px;border:1px solid #e2e8f0}
.module-card h3{font-size:1rem;margin-bottom:0.4rem}
.module-card p{color:#666;font-size:0.9rem}

/* Footer */
footer{padding:2rem 0;background:#1a2a3f;color:#a0aec0;margin-top:2rem;font-size:0.85rem}
footer a{color:#a0aec0}
footer .small{color:#718096;margin-top:0.4rem;font-size:0.8rem}

@media (max-width:640px){
  .hero{padding:2rem 0 1.5rem}
  .hero h1{font-size:1.5rem}
  .card{padding:1.5rem;margin-top:-1.5rem}
}