:root{
  --bg1:#1b2a3a;
  --bg2:#0f1720;
  --card1:#2b3f55;
  --card2:#1c2a3a;
  --text:#ffffff;
  --muted:rgba(255,255,255,0.75);
  --border:rgba(255,255,255,0.10);
  --shadow:0 8px 20px rgba(0,0,0,0.35);
  --shadow-hover:0 14px 28px rgba(0,0,0,0.45);
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  background:radial-gradient(circle at top,var(--bg1),var(--bg2));
  color:var(--text);

  /* ✅ keeps footer at bottom */
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.page{
  max-width:900px;
  margin:0 auto;
  padding:18px;
  flex:1;
}

.title-row{
  text-align:center;
  margin:12px 0 20px;
}

h1{
  font-size:2rem;
  margin:0;
}

.subtitle{
  text-align:center;
  color:var(--muted);
  margin-bottom:20px;
}

.card{
  background:linear-gradient(135deg,var(--card1),var(--card2));
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:16px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}

.form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
}

input,select,button{
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.1);
  background:#111827;
  color:#fff;
}

button{
  cursor:pointer;
}

.actions{
  margin-top:14px;
}

/* ✅ Footer (fixed properly) */
.footer{
  border-top:1px solid var(--border);
  text-align:center;
  padding:20px;
  color:var(--muted);
  background:rgba(0,0,0,0.15);
}

.footer a{
  color:#93c5fd;
  text-decoration:none;
}

.footer a:hover{
  text-decoration:underline;
}

.footer-content{
  max-width:900px;
  margin:0 auto;
}

/* Mobile */
@media (max-width:768px){
  h1{
    font-size:1.6rem;
  }
}


.notice {
  margin-bottom: 20px;
}