:root {
  --ao-bg: #f5f7ff;
  --ao-surface: #ffffff;
  --ao-surface-soft: #f8fbff;
  --ao-border: #e2e8f0;
  --ao-text: #0f172a;
  --ao-muted: #64748b;
  --ao-primary: #2563eb;
  --ao-accent: #38bdf8;
  --ao-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  --ao-radius: 18px;
}
body {
  background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
  color: var(--ao-text);
  font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
}
.navbar, .card, .modal-content, .alert, .table, .form-control, .form-select, .input-group-text {
  border-radius: var(--ao-radius);
  box-shadow: var(--ao-shadow);
  border-color: var(--ao-border) !important;
}
.navbar {
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(14px);
}
.card {
  border: 1px solid var(--ao-border);
  background: var(--ao-surface);
}
.btn, .btn-primary, .btn-info, .btn-success, .btn-danger, .btn-warning {
  border: none;
  border-radius: 999px;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover, .btn-primary:hover, .btn-info:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover {
  transform: translateY(-1px);
}
.btn-primary, .btn-info {
  background: linear-gradient(135deg, var(--ao-primary), var(--ao-accent));
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
}
.table thead th {
  background: var(--ao-surface-soft);
  color: var(--ao-text);
  font-weight: 700;
}
.form-control, .form-select, .input-group-text {
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
}
.badge, .alert {
  border-radius: 999px;
}
.logo-img {
  max-height: 56px;
  object-fit: contain;
}
a:hover {
  opacity: 0.9;
}