:root {
  --blue-900: #0a2a5e;
  --blue-700: #1250b3;
  --blue-600: #1a65e5;
  --blue-500: #2d79ff;
  --text: #ffffff;
  --muted: #cccccc;
  --bg: #0a1a35;
  --surface: #1c2945;
}

* {box-sizing: border-box;}
html, body {margin: 0; font-family: Inter, sans-serif; background: var(--bg); color: var(--text);}

.site-header {background: var(--blue-700); padding: 20px 0; color: #fff;}
.site-header .brand {display: flex; align-items: center; font-size: 1.6rem; font-weight: bold;}
.site-header .brand img {width: 35px; height: 35px; margin-right: 10px;}
.site-header a {color: #fff; text-decoration: none;}

.signup, .login {padding: 40px 0; display: flex; justify-content: center; align-items: center; height: 80vh;}
.signup-form, .login-form {max-width: 450px; width: 100%; background: var(--surface); padding: 20px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.1);}
.signup-form input, .login-form input {width: 100%; padding: 12px; margin: 10px 0; border-radius: 8px; border: 1px solid #ccc;}
.signup-form button, .login-form button {width: 100%; padding: 12px; background: var(--blue-600); border: none; color: #fff; border-radius: 8px; font-size: 1.1rem;}
.signup-form button:hover, .login-form button:hover {background: var(--blue-500);}
.already, .forgot-password, .new-account {text-align: center; margin-top: 12px;}
.already a, .forgot-password a, .new-account a {color: var(--blue-500);}

.site-footer {background: var(--blue-700); padding: 20px 0; color: #fff; text-align: center;}
.site-footer .brand {font-size: 1.2rem;}