:root {
  --ap-primary: #0b1f3a;
  --ap-secondary: #1e6fd9;
  --ap-accent: #12b886;
  --ap-bg: #f4f7fb;
  --ap-text: #212529;
  --ap-radius: 1rem;
  --ap-shadow: 0 12px 40px rgba(11, 31, 58, 0.08);
}

body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--ap-text);
  background: var(--ap-bg);
}

.btn-primary {
  background: var(--ap-secondary);
  border-color: var(--ap-secondary);
}
.btn-success {
  background: var(--ap-accent);
  border-color: var(--ap-accent);
}

.ap-card {
  border: none;
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow);
}

.ap-hero {
  background: linear-gradient(135deg, var(--ap-primary) 0%, #12325c 50%, var(--ap-secondary) 100%);
  color: #fff;
  border-radius: 0 0 2rem 2rem;
}

.ap-nfc-card {
  width: 280px;
  height: 170px;
  border-radius: 16px;
  background: linear-gradient(145deg, #1a3a5c, #0b1f3a);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}
.ap-nfc-card::after {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  border: 3px solid rgba(18, 184, 134, 0.8);
  border-radius: 50%;
  right: 24px;
  bottom: 24px;
}

.fade-up {
  animation: fadeUp 0.6s ease both;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sidebar-client,
.sidebar-admin {
  min-height: 100vh;
  background: var(--ap-primary);
  color: #fff;
}
.sidebar-client a,
.sidebar-admin a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  display: block;
  padding: 0.55rem 1rem;
  border-radius: 0.5rem;
}
.sidebar-client a:hover,
.sidebar-admin a:hover,
.sidebar-client a.active,
.sidebar-admin a.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}