:root {
  color-scheme: light dark;
  --primary-color: #173872;
  --accent-color: #59a5bb;
  --bg-color: #f8fafc;
  --text-color: #334155;
  --card-bg: #fff;
  --border-color: #e2e8f0;
  --label-color: #64748b;
  --input-bg: #fff;
  --input-text: #1e293b;
  --error-color: #b91c1c;
  --error-bg: #fee2e2;
  --error-border: #fecaca;
  --success-color: #065f46;
  --success-bg: #d1fae5;
  --success-border: #6ee7b7;
}

body{ margin:0; background:var(--bg-color); color:var(--text-color); font-family:'Fredoka', sans-serif; }
.wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; box-sizing:border-box; gap:10vw}

.login-header { text-align:center; margin-bottom:2rem; }
.login-header img { height:25vh }
.login-header h1 { margin:0; font-size:1.8rem; color:var(--primary-color); }

.card{ width:100%; max-width:440px; background:var(--card-bg); border:none; border-radius:16px; box-shadow:0 10px 25px rgba(0,0,0,.05); overflow:hidden; transition: all 0.3s ease; }
.card.hidden{ display:none; }
.hd{ padding:20px 25px; border-bottom:1px solid #f1f5f9; font-weight:600; font-size:1.2rem; color:var(--primary-color); display:flex; align-items:center; gap:12px; }
.bd{ padding:25px; }

.toggle-container { display:flex; justify-content:space-between; margin-bottom:1.5rem; }
.toggle-link{ color:var(--accent-color); text-decoration:none; font-size:.9rem; display:inline-flex; align-items:center; gap:6px; transition: color 0.2s; }
.toggle-link:hover{ color:var(--primary-color); text-decoration:underline; }

form {margin-bottom:2vh;}
.form-group { margin-bottom:1.2rem; }
label{ display:block; font-size:.9rem; font-weight:500; color:var(--label-color); margin-bottom:6px; }

.input-with-icon { position:relative; }
.input-with-icon i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:0.9rem; }
.input-with-icon input { padding-left:38px !important; }

input[type=email], input[type=password], input[type=text], select{ width:100%; padding:11px 14px; font-size: 1em; border:1px solid var(--border-color); border-radius:10px; outline:none; background:var(--input-bg); color:var(--input-text); box-sizing:border-box; font-family:inherit; transition: all 0.2s; }
input[type=email]:focus, input[type=password]:focus, input[type=text]:focus, select:focus{ border-color:var(--accent-color); box-shadow:0 0 0 4px rgba(89,165,187,.1); }

.btn{ width:100%; margin-top:14px; padding:12px 16px; border:none; border-radius:10px; background:var(--primary-color); color:#fff; font-weight:600; font-size:1rem; cursor:pointer; transition: all 0.2s; }
.btn:hover{ background: var(--accent-color); transform:translateY(-1px); box-shadow:0 4px 12px rgba(37,99,235,0.2); }
.btn:active{ transform:translateY(0); }

.err{ color:var(--error-color); background:var(--error-bg); border:1px solid var(--error-border); padding:10px 14px; border-radius:10px; margin-bottom:15px; font-size:0.9rem; display:flex; align-items:center; gap:10px; }
.success{ color:var(--success-color); background:var(--success-bg); border:1px solid var(--success-border); padding:10px 14px; border-radius:10px; margin-bottom:15px; font-size:0.9rem; display:flex; align-items:center; gap:10px; }

@media (prefers-color-scheme: dark){
  :root {
    --bg-color: #0f172a;
    --text-color: #f1f5f9;
    --primary-color: #59a5bb;
    --card-bg: #1e293b;
    --hd-border: #334155;
    --label-color: #94a3b8;
    --input-bg: #0f172a;
    --border-color: #334155;
    --input-text: #f1f5f9;
  }
  .hd{ border-color:var(--hd-border); }
}

@media screen and (max-width: 991px) {
    .wrap {
        flex-direction: column;
        gap: 2vh;
    }
}