:root {
  --navy: #0b1b34;
  --blue: #0f3c68;
  --soft: #f3f6fb;
}
body { background: var(--soft); color: #0f172a; }
.bg-navy { background: linear-gradient(120deg, var(--navy), var(--blue)); }
.card { border-radius: 18px; }
.btn-primary { background: #0f3c68; border-color: #0f3c68; }
.slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.slot-btn { border: 1px solid #d7dee8; border-radius: 14px; padding: 14px; background: #fff; text-align: left; cursor: pointer; transition: .2s; }
.slot-btn:hover { border-color: #0f3c68; transform: translateY(-1px); }
.slot-btn.selected { background: #e6f1ff; border-color: #0f3c68; }
.slot-btn.disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; text-decoration: line-through; }
.qr-img { width: 280px; max-width: 100%; border: 1px solid #e5e7eb; border-radius: 16px; padding: 10px; background: #fff; }
.stat-card { background: #fff; border-radius: 18px; padding: 20px; box-shadow: 0 6px 20px rgba(15,23,42,.06); }
.stat-card span { display:block; color:#64748b; }
.stat-card strong { font-size: 2rem; }
.scan-result { min-height: 280px; border-radius: 18px; padding: 24px; font-size: 1.1rem; background: #fff; box-shadow: 0 6px 20px rgba(15,23,42,.06); }
.scan-result.success { background: #dcfce7; border: 1px solid #22c55e; }
.scan-result.warning { background: #fef3c7; border: 1px solid #f59e0b; }
.scan-result.danger { background: #fee2e2; border: 1px solid #ef4444; }