:root{
  --max-width: 920px;
  --gap: 1rem;
  --muted: #666;
  --card-bg: #fff;
  --radius: 8px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, "Helvetica Neue", Arial;
  background: #f6f7fb; color:#111; margin:0; line-height:1.4;
}
.container{max-width:var(--max-width); margin:0 auto; padding:calc(var(--gap)*1.5)}
h1{font-size:1.5rem;margin-bottom:.5rem}
.card{background:var(--card-bg); padding:1rem; border-radius:var(--radius); box-shadow:0 6px 18px rgba(17,17,17,0.06); margin-bottom:1rem}
label{display:block;margin-bottom:.6rem}
label span{display:block;font-size:.9rem;color:var(--muted);margin-bottom:.25rem}
input,button{width:100%;padding:.6rem .7rem;border-radius:6px;border:1px solid #ddd;font-size:1rem}
button{background:#0b79f7;color:#fff;border:none}

.card--narrow { 
  max-width: 900px;
  margin-top:1rem;
}

.mt-3 { margin-top: .75rem; } 


@media(min-width:720px){
  .two{display:flex; gap:1rem}
  .two > *{flex:1}
}

/* ------------------ Login & Register Forms ------------------ */
/*.card form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card label {
  display: flex;
  flex-direction: column;
  font-size: 0.95rem;
  color: #333;
}

.card input[type="text"],
.card input[type="email"],
.card input[type="password"] {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.card input[type="text"]:focus,
.card input[type="email"]:focus,
.card input[type="password"]:focus {
  border-color: #007bff;
  outline: none;
}

/* Remember Me checkbox */
/*.card label input[type="checkbox"] {
  margin-right: 0.5rem;
  transform: scale(1.1); /* slightly larger for better UX */
  /*vertical-align: middle;*/
}

/*.card label span {
  margin-bottom: 0.25rem;
}*/

/* Align checkbox and text horizontally */
/*.card label input[type="checkbox"] + span,
.card label span.checkbox-text {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.25rem;
}*/

/*.card button {
  padding: 0.6rem 1rem;
  background-color: #007bff;
  color: #fff;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}*/

/*.card button:hover {
  background-color: #0056b3;
}**//*/