:root {
  --brand: #0ea5e9; /* sky-500 */
  --brand-dark: #0284c7; /* sky-600 */
  --accent: #22c55e; /* green-500 */
  --ink: #0b1220;
  --ring: #e2e8f0; /* slate-200 */
  
  /* Map to login.html's existing var names */
  --bg-primary: #f8fafc; /* light page bg (slate-50) */
  --bg-secondary: #ffffff; /* white card bg */
  --bg-tertiary: #f1f5f9; /* slate-100 */
  --border-color: var(--ring);
  --text-primary: var(--ink);
  --text-secondary: #334155; /* slate-700 */
  --text-muted: #64748b; /* slate-500 */
  
  /* Use brand for the main accent */
  --accent-primary: var(--brand);
  --accent-primary-hover: var(--brand-dark);
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Inter", sans-serif;
  background-color: var(--bg-primary); /* Now light gray */
  color: var(--text-primary); /* Now dark */
  -webkit-font-smoothing: antialiased;
}
.widget {
  background: var(--bg-secondary); /* Now white */
  border: 1px solid var(--border-color); /* Now light gray */
  border-radius: 0.75rem;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 600; border-radius: 0.5rem; padding: 0.6rem 1rem;
  transition: all 0.2s; border: 1px solid transparent;
  width: 100%;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { 
  background-image: linear-gradient(90deg, var(--brand), var(--accent)); /* Changed */
  color: white; /* Changed */
}
.btn-primary:hover:not(:disabled) { 
  filter: brightness(0.95); /* Changed */
}
.btn-secondary { 
  background: #f9fafb; 
  color: #1f2937; 
  border-color: #d1d5db; 
} /* Unchanged, already light theme */
.btn-secondary:hover:not(:disabled) { background: #f3f4f6; }

.input {
  display: block; width: 100%; border: 1px solid var(--border-color);
  background: var(--bg-secondary); /* Changed (uses white) */
  border-radius: 0.5rem;
  padding: 0.65rem 0.85rem; color: var(--text-primary); /* Now dark text */
}
.input:focus { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--accent-primary); } /* Will use new blue */

.tab-btn {
  border: 0; background: transparent; padding: 0.75rem 1rem;
  font-weight: 600; color: var(--text-muted); /* Will use new muted color */
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  flex: 1;
}
.tab-btn.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); } /* Will use new blue */

.password-wrapper { position: relative; }
.password-toggle {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; /* Will use new muted color */
  display: inline-flex; align-items: center;
}
.divider { display: flex; align-items: center; text-align: center; color: var(--text-muted); font-size: 0.8rem; font-weight: 500; margin: 1.25rem 0; } /* Will use new muted color */
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border-color); } /* Will use new light border */
.divider:not(:empty)::before { margin-right: .75em; }
.divider:not(:empty)::after { margin-left: .75em; }

input[type="checkbox"]:checked + .custom-checkbox {
  background-color: var(--accent-primary); /* Will use new blue */
  border-color: var(--accent-primary); /* Will use new blue */
}
input[type="checkbox"]:checked + .custom-checkbox > span {
  opacity: 1;
}