:root {
  --fc-primary: #2563EB;
  --fc-primary-dark: #1D4ED8;
  --fc-primary-soft: #EFF6FF;
  --fc-success: #22C55E;
  --fc-success-dark: #16A34A;
  --fc-staff: #F59E0B;
  --fc-staff-dark: #EA580C;
  --fc-warning: #F59E0B;
  --fc-danger: #EF4444;
  --fc-info: #0EA5E9;
  --fc-bg: #F8FAFC;
  --fc-surface: #FFFFFF;
  --fc-border: #E5E7EB;
  --fc-text: #1F2937;
  --fc-muted: #6B7280;
  --fc-dark: #0F172A;
  --fc-font: 'Inter', 'Noto Sans Arabic', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fc-radius-sm: 8px;
  --fc-radius-md: 12px;
  --fc-radius-lg: 16px;
  --fc-radius-xl: 24px;
  --fc-space-1: 4px;
  --fc-space-2: 8px;
  --fc-space-3: 12px;
  --fc-space-4: 16px;
  --fc-space-6: 24px;
  --fc-space-8: 32px;
  --fc-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --fc-shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
  --fc-focus-ring: 0 0 0 3px rgba(37, 99, 235, .25);
}

body {
  font-family: var(--fc-font);
}

:focus-visible {
  outline: 2px solid var(--fc-primary);
  outline-offset: 2px;
  box-shadow: var(--fc-focus-ring);
}

.fc-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-2);
  color: inherit;
  text-decoration: none;
}

.fc-brand-logo {
  display: block;
  max-width: 150px;
  max-height: 44px;
  object-fit: contain;
}

.fc-brand-fallback {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--fc-primary);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.fc-card {
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  box-shadow: var(--fc-shadow-sm);
  color: var(--fc-text);
}

.fc-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-2);
  border: 0;
  border-radius: var(--fc-radius-md);
  padding: 0 var(--fc-space-4);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.fc-btn-primary { background: var(--fc-primary); color: #fff; }
.fc-btn-primary:hover { background: var(--fc-primary-dark); }
.fc-btn-success { background: var(--fc-success); color: #fff; }
.fc-btn-success:hover { background: var(--fc-success-dark); }
.fc-btn-staff { background: var(--fc-staff); color: #fff; }
.fc-btn-staff:hover { background: var(--fc-staff-dark); }
.fc-btn-danger { background: var(--fc-danger); color: #fff; }

.fc-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .78rem;
  font-weight: 800;
}

.fc-badge-success { background: rgba(34, 197, 94, .12); color: var(--fc-success-dark); }
.fc-badge-warning { background: rgba(245, 158, 11, .14); color: var(--fc-staff-dark); }
.fc-badge-danger { background: rgba(239, 68, 68, .12); color: var(--fc-danger); }
.fc-badge-info { background: rgba(14, 165, 233, .12); color: var(--fc-info); }
.fc-ltr { direction: ltr; unicode-bidi: isolate; }
.fc-rtl { direction: rtl; unicode-bidi: isolate; }
.fc-focusable:focus-visible { outline: 2px solid var(--fc-primary); outline-offset: 2px; box-shadow: var(--fc-focus-ring); }


.auth-shell {
  width: min(100% - 32px, 420px);
  margin: 48px auto;
  padding: var(--fc-space-8);
}
.auth-brand,
.install-brand,
.powered-by {
  margin-bottom: var(--fc-space-6);
}
.auth-shell input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  padding: 10px 12px;
}
.auth-shell button {
  min-height: 44px;
  border: 0;
  border-radius: var(--fc-radius-md);
  padding: 0 18px;
  background: var(--fc-primary);
  color: #fff;
  font-weight: 800;
}
:root {
  --pwa-bottom-nav-height: 68px;
  --pwa-bottom-nav-icon: 23px;
  --pwa-bottom-nav-label: 11px;
  --pwa-bottom-nav-scan-size: 60px;
  --pwa-bottom-nav-scan-lift: -30px;
  --pwa-bottom-nav-border: #dce3ef;
  --pwa-bottom-nav-ink: #111827;
  --pwa-bottom-nav-active: #0f62fe;
}