@font-face {
  font-family: 'SaudiRiyal';
  src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.sar { font-family: 'SaudiRiyal', sans-serif; font-weight: normal; }

:root {
  --brand-1: #9c3b5e;
  --brand-2: #3d1f3d;
  --brand-light: #f8ecf0;
  --brand-dark: #241220;
  --accent: #c9a15a;
}

* { font-family: 'Tajawal', sans-serif; }

body {
  background: linear-gradient(180deg, #fbf3f5 0%, #f6eef2 100%);
  min-height: 100vh;
}

.main-navbar {
  background: linear-gradient(90deg, var(--brand-2), var(--brand-1));
  box-shadow: 0 2px 12px rgba(60,20,45,.3);
}
.navbar-brand { font-weight: 900; font-size: 1.3rem; }
.brand-logo { height: 38px; width: 38px; object-fit: cover; border-radius: 50%; background: #fff; }
.nav-link { font-weight: 500; }
.nav-link.active { color: #fff !important; font-weight: 700; border-bottom: 2px solid var(--accent); }

.card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(60,20,45,.1);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid #f0dde4;
  font-weight: 700;
  border-radius: 16px 16px 0 0 !important;
}

.stat-card {
  border-radius: 18px;
  color: #fff;
  padding: 1.4rem;
  position: relative;
  overflow: hidden;
}
.stat-card .fa-solid { font-size: 2.2rem; opacity: .35; position: absolute; left: 1rem; top: 1rem; }
.stat-card h2 { font-weight: 900; margin-bottom: 0; }
.stat-card.pink { background: linear-gradient(135deg, #b8496b, #7d2d47); }
.stat-card.purple { background: linear-gradient(135deg, #6b3d63, #3d1f3d); }
.stat-card.green { background: linear-gradient(135deg, #26a69a, #00796b); }
.stat-card.orange { background: linear-gradient(135deg, #d4a45c, #a8792f); }

.btn-brand {
  background: linear-gradient(90deg, var(--brand-2), var(--brand-1));
  border: none; color: #fff; font-weight: 700;
}
.btn-brand:hover { color: #fff; filter: brightness(1.08); }

.badge-status { font-size: .8rem; padding: .45em .8em; border-radius: 20px; }

.login-wrapper {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-2), var(--brand-1));
}
.login-card { border-radius: 20px; max-width: 420px; width: 100%; padding: 2.2rem; background: #fff; }

.member-photo, .member-photo-lg {
  border-radius: 50%; object-fit: cover; border: 3px solid var(--brand-1); background: #f3e5f5;
}
.member-photo { width: 42px; height: 42px; }
.member-photo-lg { width: 120px; height: 120px; }

.qr-box { background: #fff; padding: 1rem; border-radius: 14px; display: inline-block; border: 2px dashed var(--accent); }

#reader { width: 100%; max-width: 420px; margin: 0 auto; border-radius: 16px; overflow: hidden; }

.scan-result-card { border-radius: 18px; padding: 1.5rem; }
.scan-result-card.ok { background: #e8f5e9; border: 2px solid #43a047; }
.scan-result-card.warn { background: #fff8e1; border: 2px solid #fb8c00; }
.scan-result-card.bad { background: #ffebee; border: 2px solid #e53935; }

table th { white-space: nowrap; }