/* Login Page CSS extracted */

:root{
  --accent: #d62828;
  --accent-light: #ff4d4d;
  --text: #333;
  --muted: #666;
  --bg-card: #ffffff;
  --bg-body: #ffffff;
  --border: #e5e5e5;
  --radius: 14px;
  --logo-height: 70px;
}

:root.dark{
  --accent: #ff4d4d;
  --accent-light: #ff6b6b;
  --text: #f1f1f1;
  --muted: #bbbbbb;
  --bg-card: #1e1e1e;
  --bg-body: #121212;
  --border: #333;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui,sans-serif;}

body{
  background:var(--bg-body);
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  transition:background 0.3s;
}

.card{
  width:380px;
  background:var(--bg-card);
  padding:32px 28px 28px 28px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:0 8px 28px rgba(0,0,0,0.1);
  transition:background 0.3s, border 0.3s;
}

.logo-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  margin-bottom:22px;
}

.logo{
  height:var(--logo-height);
  width:auto;
  object-fit:contain;
}

label{
  color:var(--muted);
  font-size:14px;
  display:block;
  margin-bottom:4px;
  transition:color 0.3s;
}

.input{
  width:100%;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid #dcdcdc;
  margin-bottom:14px;
  color:var(--text);
  background:var(--bg-card);
  font-size:15px;
  transition:background 0.3s, color 0.3s, border 0.3s;
}

:root.dark .input{
  border:1px solid #555;
}

.input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(214,40,40,0.25);
}

.hcaptcha-wrap{
  display:flex;
  justify-content:center;
  margin:10px 0 14px 0;
}

.btn{
  width:100%;
  padding:12px;
  border:none;
  border-radius:10px;
  font-size:15px;
  font-weight:700;
  color:white;
  background:linear-gradient(90deg,var(--accent),var(--accent-light));
  cursor:pointer;
  transition:0.2s;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(214,40,40,0.25);
}

.msg{
  text-align:center;
  margin-top:10px;
  font-size:14px;
  color:var(--muted);
  transition:color 0.3s;
}

.msg.error{
  color:#d62828;
}

.footer{
  margin-top:18px;
  text-align:center;
  font-size:12px;
  color:#999;
  transition:color 0.3s;
}

.theme-toggle{
  position:absolute;
  top:20px;
  right:20px;
  background:var(--bg-card);
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius:50%;
  cursor:pointer;
  transition:0.3s;
  font-size:18px;
  color:var(--text);
}