/* =========================
   GLOBAL
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

html{
  scroll-behavior:smooth;
}

body{
  background:
  linear-gradient(
    135deg,
    #0f172a,
    #111827,
    #1e293b
  );

  color:#e5e7eb;
  overflow-x:hidden;
}

/* =========================
   NAVBAR
========================= */

.navbar{
  position:sticky;
  top:0;
  z-index:1000;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:16px 30px;

  background:
  rgba(15,23,42,.95);

  backdrop-filter:blur(12px);

  border-bottom:
  1px solid rgba(255,255,255,.08);
}

.logo{
  font-size:20px;
  font-weight:700;
  color:#60a5fa;
}

.nav-links a{
  color:#cbd5e1;
  text-decoration:none;
  margin:0 12px;
  transition:.3s;
}

.nav-links a:hover{
  color:#60a5fa;
}

.clock{
  background:
  rgba(255,255,255,.06);

  padding:8px 12px;
  border-radius:10px;
}

/* =========================
   HERO
========================= */

.hero{

  min-height:70vh;

  display:flex;
  justify-content:center;
  align-items:center;

  text-align:center;

  background:
  linear-gradient(
    rgba(15,23,42,.92),
    rgba(15,23,42,.92)
  ),

  url("https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&w=1400&q=80");

  background-size:cover;
  background-position:center;
}

.hero-content{
  max-width:900px;
  padding:20px;
}

.badge{

  display:inline-block;

  padding:8px 14px;

  border-radius:20px;

  background:
  rgba(59,130,246,.15);

  color:#93c5fd;

  margin-bottom:15px;
}

.hero h1{

  font-size:52px;

  margin-bottom:20px;

  color:white;
}

.hero p{

  font-size:18px;

  line-height:1.7;

  color:#cbd5e1;

  margin-bottom:25px;
}

.hero-buttons button{

  padding:14px 22px;

  border:none;

  border-radius:12px;

  cursor:pointer;

  margin:5px;

  font-weight:600;
}

.hero-buttons button:first-child{

  background:#2563eb;
  color:white;
}

.secondary{

  background:#334155;
  color:white;
}
/* =========================
   STATS SECTION
========================= */

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;
  padding:40px;
}

.card{
  background:#1e293b;
  border:1px solid #334155;
  border-radius:18px;
  padding:22px;
  transition:.3s;
  box-shadow:0 5px 20px rgba(0,0,0,.25);
}

.card:hover{
  transform:translateY(-5px);
  border-color:#3b82f6;
}

.card h3{
  color:#94a3b8;
  font-size:14px;
}

.num{
  font-size:32px;
  font-weight:700;
  color:#60a5fa;
  margin-top:10px;
}

/* =========================
   SHOWCASE
========================= */

.showcase{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
  gap:25px;
  padding:40px;
}

.image-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
}

.image-card img{
  width:100%;
  height:260px;
  object-fit:cover;
  transition:.4s;
}

.image-card:hover img{
  transform:scale(1.05);
}

.overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;

  padding:20px;

  background:
  linear-gradient(
    transparent,
    rgba(0,0,0,.85)
  );

  color:white;
}

/* =========================
   FEATURES
========================= */

.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
  padding:40px;
}

.features .card{
  text-align:center;
}

.icon{
  font-size:40px;
  margin-bottom:12px;
}

/* =========================
   DASHBOARD
========================= */

.main{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:25px;
  padding:40px;
}

.reception h2,
.live h2{
  margin-bottom:10px;
}

input{
  width:100%;
  padding:12px;
  margin:10px 0;

  border-radius:10px;
  border:1px solid #334155;

  background:#0f172a;
  color:white;
}

input:focus{
  outline:none;
  border-color:#3b82f6;
}

.btn-group{
  margin-top:15px;
}

button{
  background:#2563eb;
  color:white;

  border:none;
  border-radius:10px;

  padding:12px 16px;

  cursor:pointer;

  transition:.3s;
}

button:hover{
  background:#1d4ed8;
}

.export-btn{
  background:#059669;
}

.export-btn:hover{
  background:#047857;
}

/* =========================
   QUEUE LIST
========================= */

.queue-list{
  margin-top:20px;
}

.queue-item{
  background:#0f172a;
  border:1px solid #334155;

  padding:12px;
  margin-bottom:10px;

  border-radius:10px;
}
/* =========================
   LIVE CONSULTATION PANEL
========================= */

.live{
  position:relative;
}

.live-tag{
  display:inline-block;

  background:#dc2626;
  color:white;

  padding:6px 12px;

  border-radius:20px;

  font-size:12px;
  font-weight:600;

  margin-bottom:15px;

  animation:pulse 1.5s infinite;
}

@keyframes pulse{

  0%{
    box-shadow:0 0 0 0 rgba(220,38,38,.7);
  }

  70%{
    box-shadow:0 0 0 12px rgba(220,38,38,0);
  }

  100%{
    box-shadow:0 0 0 0 rgba(220,38,38,0);
  }

}

.token{
  text-align:center;

  font-size:40px;
  font-weight:700;

  color:#60a5fa;

  margin:20px 0;
}

.current-status{
  text-align:center;
  margin-bottom:20px;
}

#currentStatus{

  display:inline-block;

  background:#059669;

  color:white;

  padding:8px 16px;

  border-radius:20px;

  font-weight:600;
}

.timer{
  margin-top:20px;
}

#countdown{

  text-align:center;

  font-size:34px;
  font-weight:700;

  margin:15px 0;
}

.progress-bar{

  width:100%;
  height:10px;

  background:#0f172a;

  border-radius:20px;

  overflow:hidden;
}

#progressBar{

  width:0%;

  height:100%;

  background:
  linear-gradient(
    90deg,
    #2563eb,
    #60a5fa
  );

  transition:.5s;
}

/* =========================
   INFO BOXES
========================= */

.info{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:15px;

  margin-top:25px;
}

.info div{

  background:#0f172a;

  border:1px solid #334155;

  border-radius:12px;

  padding:15px;

  text-align:center;
}

/* =========================
   HISTORY TABLE
========================= */

.history{
  padding:40px;
}

table{

  width:100%;

  border-collapse:collapse;

  overflow:hidden;

  border-radius:12px;

  background:#111827;
}

thead{

  background:#1e293b;
}

th{

  color:#60a5fa;

  text-align:left;

  padding:15px;
}

td{

  padding:15px;

  border-top:
  1px solid #334155;
}

tbody tr:hover{

  background:
  rgba(59,130,246,.08);
}

#emptyHistory td{

  text-align:center;
  color:#94a3b8;
}

/* =========================
   FOOTER
========================= */

.footer{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:30px 40px;

  margin-top:40px;

  background:#0f172a;

  border-top:
  1px solid #334155;
}

.footer h3{
  color:#60a5fa;
}

.footer p{
  color:#cbd5e1;
  margin-top:5px;
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:900px){

  .main{
    grid-template-columns:1fr;
  }

  .stats{
    grid-template-columns:
    repeat(2,1fr);
  }

  .showcase{
    grid-template-columns:1fr;
  }

  .features{
    grid-template-columns:1fr;
  }

  .hero h1{
    font-size:32px;
  }

  .hero p{
    font-size:15px;
  }

  .nav-links{
    display:none;
  }

  .info{
    grid-template-columns:1fr;
  }

  .footer{
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
  }
}

/* =========================
   EXTRA PREMIUM TOUCH
========================= */

.card,
.image-card{
  transition:.3s;
}

.card:hover,
.image-card:hover{

  box-shadow:
  0 10px 25px rgba(37,99,235,.15);
}

::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-thumb{
  background:#2563eb;
  border-radius:20px;
}