:root{
  --bg:#f4f6f8;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --brand:#0971a8;
  --brand2:#075c87;
  --border:#e5e7eb;
  --shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 12px;
}

.auth-card{
  width:100%;
  max-width:420px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:22px 20px 18px;
}

.auth-head{ text-align:center; }
.brand{
  font-weight:800;
  letter-spacing:.3px;
  color:var(--brand);
  margin-bottom:6px;
}
.auth-head h1{
  font-size:22px;
  margin:6px 0 6px;
}
.auth-head p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.label{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin:10px 0 6px;
}

/* Auth inputs (email/password/text/number) */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"]{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  outline:none;
  font-size:14px;
  background:#fff;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
input[type="number"]:focus{
  border-color:rgba(9,113,168,.55);
  box-shadow:0 0 0 4px rgba(9,113,168,.12);
}

.muted{
  color:var(--muted);
  font-size:12px;
  margin-top:10px;
}


.btn--secondary{
  background:#ffffff;
  color:var(--brand);
  border:1px solid rgba(9,113,168,.35);
}
.btn--secondary:hover{
  background:rgba(9,113,168,.06);
}
.btn--secondary:disabled{
  opacity:.6;
  cursor:not-allowed;
}


.btn{
  width:100%;
  margin-top:14px;
  padding:11px 12px;
  border:0;
  border-radius:10px;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.btn:hover{ background:var(--brand2); }

.auth-foot{
  margin-top:14px;
  text-align:center;
  font-size:13px;
}

.link{
  color:var(--brand);
  text-decoration:none;
}
.link:hover{ text-decoration:underline; }

.alert{
  background:rgba(9,113,168,.08);
  border:1px solid rgba(9,113,168,.18);
  color:#0b527a;
  padding:10px 12px;
  border-radius:10px;
  font-size:13px;
  margin:10px 0 6px;
}
        
        .auth-wrapper {
            max-width: 420px;
            margin: 40px auto 60px;
            padding: 0 12px;
        }

        .auth-card {
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
            padding: 24px 22px 28px;
        }

        .auth-card h2 {
            font-size: 22px;
            margin: 0 0 12px;
            text-align: center;
            color: #0971a8;
        }

        .auth-subtitle {
            font-size: 13px;
            text-align: center;
            color: #666;
            margin-bottom: 18px;
        }

        .auth-fieldgroup {
            margin-bottom: 14px;
        }

        .auth-fieldgroup label {
            display: block;
            font-size: 13px;
            margin-bottom: 4px;
            color: #555;
        }

        .auth-fieldgroup input[type="email"],
        .auth-fieldgroup input[type="password"] {
            width: 100%;
            box-sizing: border-box;
            padding: 8px 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
            font-size: 14px;
        }

        .auth-fieldgroup input[type="email"]:focus,
        .auth-fieldgroup input[type="password"]:focus {
            border-color: #0971a8;
            outline: none;
        }

        .auth-actions {
            margin-top: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px;
        }

        .auth-forgot {
            font-size: 12px;
        }

        .auth-forgot a {
            color: #0971a8;
            text-decoration: none;
        }

        .auth-forgot a:hover {
            text-decoration: underline;
        }

        .auth-submit-btn {
            background-color: #0971a8;
            border: 1px solid #0971a8;
            color: #ffffff;
            padding: 8px 20px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            min-width: 90px;
        }

        .auth-submit-btn:hover {
            background-color: #075c87;
        }

        .auth-bottom {
            margin-top: 16px;
            text-align: center;
            font-size: 13px;
        }

        .auth-bottom a {
            color: #0971a8;
            text-decoration: none;
        }

        .auth-bottom a:hover {
            text-decoration: underline;
        }

        .auth-alert {
            font-size: 13px;
            padding: 8px 10px;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .auth-alert-error {
            background: #ffe6e6;
            border: 1px solid #ffb3b3;
            color: #c62828;
        }

        .auth-alert-success {
            background: #e7f6e7;
            border: 1px solid #b2d8b2;
            color: #2e7d32;
        }

        .captcha-wrapper {
            margin: 10px 0 4px;
            display: flex;
            justify-content: center;
        }

        @media (max-width: 480px) {
            .auth-card {
                padding: 18px 16px 22px;
            }
        }