/* SMK Login Redesign */
:root {
  --cream: #fffbef;
  --card: #ffffff;
  --border: rgba(0,0,0,.06);
  --shadow: 0 30px 60px rgba(31,41,55,.12);
  --title: #111827;
  --muted: #6b7280;
  --blue: #2563eb;
  --blue-700: #1e40af;
}
:root[data-theme="dark"] {
  --cream: #0b1222;
  --card: #111827;
  --border: rgba(255,255,255,.08);
  --shadow: 0 30px 80px rgba(0,0,0,.6);
  --title: #e5e7eb;
  --muted: #9ca3af;
  --blue: #60a5fa;
  --blue-700: #2563eb;
}

.login-wrap {
  min-height: 100vh;
  display: flex; align-items: flex-start; justify-content: center;
  background: radial-gradient(900px 500px at 10% 0%, rgba(37,99,235,.08), transparent),
              radial-gradient(1000px 600px at 90% 10%, rgba(16,185,129,.10), transparent),
              var(--cream);
  padding: 48px 16px;
}
.login-header {
  text-align: center; margin-bottom: 22px;
}
.login-header .title { font-weight: 800; font-size: 40px; color: var(--title); }
.login-header .subtitle { color: var(--muted); margin-top: 6px; }

.login-card {
  width: 100%; max-width: 560px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 26px; margin: 0 auto;
}
.tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  background: #f3f4f6; border-radius: 12px; padding: 6px;
}
:root[data-theme="dark"] .tabs { background: #0f172a; }
.tabs .tab { text-align: center; padding: 12px; border-radius: 10px; font-weight: 600; color: var(--muted); }
.tabs .tab.active { background: #fffceb; color: #111827; box-shadow: inset 0 0 0 1px #fce7b2; }
:root[data-theme="dark"] .tabs .tab.active { background: #1f2937; color: #e5e7eb; box-shadow: none; }

.form-group { margin-bottom: 16px; }
.label { font-weight: 700; color: var(--title); margin-bottom: 8px; display:block; }
.input-icon { position: relative; }
.input-icon .fa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.input-control {
  width: 100%; padding: 14px 14px 14px 40px; border-radius: 12px;
  border: 1px solid var(--border); background: #fffdf5; color: var(--title);
}
:root[data-theme="dark"] .input-control { background: #0f172a; color: #e5e7eb; }

.btn-gradient {
  display:block; width:100%; padding: 14px; border:0; border-radius: 12px; color: #fff; font-weight: 700;
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 50%, #0ea5e9 100%);
  box-shadow: 0 12px 24px rgba(37,99,235,.30);
}
.btn-gradient:hover { filter: brightness(1.05); }

.helper { color: var(--muted); text-align:center; margin: 8px 0 18px; }
.card-title { font-size: 28px; font-weight: 800; text-align:center; color: var(--title); margin: 6px 0 6px; }