:root {
  --ink-900: #0f172a;
  --ink-800: #1f2937;
  --ink-700: #334155;
  --brand-500: #f97316;
  --brand-400: #fb923c;
  --brand-100: #fff7ed;
  --surface: #f8fafc;
  --card: #ffffff;
}

body {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  color: var(--ink-800);
}

.bg-surface {
  background: radial-gradient(circle at top left, #fff4e6 0%, #f8fafc 35%, #eef2ff 100%);
  min-height: 100vh;
}

.bg-ink {
  background: linear-gradient(120deg, var(--ink-900), var(--ink-700));
}

.brand-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--brand-500);
  margin-right: 0.45rem;
}

.card-modern {
  border: none;
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.badge-soft {
  background: var(--brand-100);
  color: var(--brand-500);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-weight: 600;
}

.table thead {
  color: var(--ink-700);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-brand {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}

.btn-brand:hover {
  background: var(--brand-400);
  border-color: var(--brand-400);
}

.form-control, .form-select {
  border-radius: 12px;
}

.password-field {
  padding-right: 2.75rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--ink-700);
  padding: 0.25rem;
  line-height: 0;
}

.password-toggle:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.35);
  outline-offset: 3px;
  border-radius: 999px;
}

.password-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

.password-toggle .icon-eye-off {
  display: none;
}

.password-toggle.is-visible .icon-eye {
  display: none;
}

.password-toggle.is-visible .icon-eye-off {
  display: inline;
}