body { background:#f7f7fb; }
.navbar-brand { font-weight:700; }
.q-card { background:#fff; border:1px solid #eee; border-radius:12px; padding:16px; margin-bottom:12px; }
.q-meta { font-size:12px; opacity:.7; }
.timer-pill { font-weight:700; padding:6px 10px; border-radius:999px; background:#111; color:#fff; }
.small-muted { font-size:12px; opacity:.75; }


/* Elegant UI enhancements */
:root{
  --card-radius: 18px;
}
body{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(18,52,120,.08), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(232,182,74,.12), transparent 55%),
              #f7f7fb;
}
.navbar{
  backdrop-filter: blur(8px);
}
.card, .q-card{
  border-radius: var(--card-radius) !important;
}
.card.shadow-sm, .shadow-sm{
  box-shadow: 0 10px 30px rgba(16,24,40,.08) !important;
}
.btn{
  border-radius: 12px;
}
.btn-dark{
  background: #0f1f3d;
  border-color: #0f1f3d;
}
.btn-dark:hover{
  background: #0b1730;
  border-color: #0b1730;
}
.btn-outline-dark{
  border-color: rgba(15,31,61,.35);
}
.alert{
  border-radius: 14px;
}
.timer-pill{
  background: linear-gradient(135deg, #0f1f3d, #123478);
}
.q-card{
  border: 1px solid rgba(15,31,61,.08);
}
.q-meta{
  letter-spacing: .02em;
}

/* Fullscreen Login Enhancements */
body {
    margin:0;
}

/* ----------------------------
   BIG RED BLOCKING WARNING POPUP
   ---------------------------- */
.warn-overlay{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(180, 0, 0, 0.88);
  display: none; /* toggled by JS */
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
}
.warn-overlay.is-visible{
  display: flex;
}
.warn-modal{
  background: #fff;
  width: 100%;
  max-width: 560px;
  border-radius: 18px;
  padding: 28px 26px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
  animation: warnPop .18s ease-out;
}
.warn-modal h2{
  margin: 0 0 12px;
  font-weight: 800;
  color: #b00000;
  letter-spacing: .01em;
}
.warn-modal p{
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.45;
}
.warn-modal .warn-btn{
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 800;
  color: #fff;
  background: #b00000;
  cursor: pointer;
}
.warn-modal .warn-btn:hover{
  background: #8a0000;
}
@keyframes warnPop{
  from{ transform: scale(.96); opacity: .5; }
  to{ transform: scale(1); opacity: 1; }
}