:root {
  --primary:#0072CE;
  --dark:#111;
  --light:#f4f4f4;
  --white:#fff;
  --radius:12px;
  --shadow:0 4px 12px rgba(0,0,0,.1);
  --muted:#6b7280;
}

/* ---------- Base (LIGHT by default) ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: var(--light);
  color: var(--dark);
  min-height: 100vh;
  transition: background .3s, color .3s;
  position: relative;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:url("assets/dumbell-art.png");
  background-size:200px;
  background-repeat:repeat;
  opacity:.08;
  z-index:-1;
}

/* Dark mode ON toggle */
body.dark { background:#121212; color:var(--light); }
body.dark::before { opacity:.04; }

/* ---------- NAVBAR ---------- */
.navbar{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--primary); color:#fff; padding:1rem 2rem;
}
.nav-logo img{ max-height:50px; width:auto; object-fit:contain; }

.hamburger{
  display:none; flex-direction:column; gap:4px;
  background:transparent; border:0; cursor:pointer;
}
.hamburger span{ width:25px; height:3px; background:#fff; }

.nav-links{
  display:flex; align-items:center; gap:1rem; flex-wrap:nowrap;
}
.nav-links .nav-button,
.theme-toggle{
  color:#fff; text-decoration:none; font-weight:600;
  padding:.4rem .8rem; border:1px solid #fff; border-radius:var(--radius);
  background:transparent; cursor:pointer; line-height:1;
}
.nav-links .nav-button:hover{ background:#fff; color:var(--primary); }

/* Mobile nav */
@media (max-width:768px){
  .hamburger{ display:flex; }
  .nav-links{ display:none; flex-direction:column; width:100%; padding-top:1rem; }
  .nav-links.active{ display:flex; }
  .nav-links .nav-button{ width:100%; }
}

/* ---------- LAYOUT ---------- */
.page-container{
  max-width:900px; margin:40px auto; padding:16px;
  display:flex; justify-content:center; align-items:flex-start;
  min-height:calc(100vh - 80px);
}

/* Card */
.login-card{
  width:100%; max-width:520px;
  background:#ffffffd9;               /* light glass */
  backdrop-filter: blur(8px);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:28px;
}
body.dark .login-card{
  background:rgba(30,30,30,.88);
}

/* Title */
.title{
  margin:0 0 18px;
  text-align:center;
  color:var(--primary);
}

/* Fields (labels like your register page) */
.field{ margin-bottom:14px; }
.field label{
  display:block; font-weight:600; margin:0 0 6px; color:var(--muted);
}
body.dark .field label{ color:#9aa4b2; }
.field input{
  width:100%; height:48px; border-radius:12px;
  border:1px solid #ccc; background:#fff; color:inherit;
  padding:0 14px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder{ color:#8a8f99; }
.field input:focus{
  border-color:#2b7de9; box-shadow:0 0 0 3px rgba(43,125,233,.2);
}
body.dark .field input{
  background:#1e1e1e; border-color:#444; color:var(--light);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 18px; border-radius:12px; border:1px solid transparent;
  font-weight:700; cursor:pointer; transition:filter .15s, transform .08s;
}
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--primary); color:#fff; width:100%; }
.btn.primary:hover{ filter:brightness(1.05); }
.btn.ghost{
  margin-top:8px; width:100%;
  background:transparent; color:#333; border-color:#d1d5db;
}
.btn.ghost:hover{ background:#f3f4f6; }
body.dark .btn.ghost{ color:#cdd6e1; border-color:#2a3240; }
body.dark .btn.ghost:hover{ background:#141a22; }

/* Message line */
.message{ margin-top:12px; min-height:20px; text-align:center; }

/* ---------- Footer (consistent with other pages) ---------- */
.ur-foot {
  max-width: 1100px;
  margin: 32px auto;
  padding: 0 18px;
  text-align: center;
  font-size: 0.95rem;
  color: #555;
}
.ur-foot a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.ur-foot a:hover {
  text-decoration: underline;
}

/* Dark mode */
body.dark .ur-foot {
  color: #cfcfcf;
}
body.dark .ur-foot a {
  color: #6fb3ff;
}

/* Footer shouldn't stick to the bottom on the login page */
.page-container{
  min-height: auto;           /* was calc(100vh - 80px) */
  margin: 40px auto 24px;     /* add a bit of bottom space before the footer */
}

/* If some cached CSS still wins, force it */
@media all {
  .page-container{ min-height: unset !important; }
}