:root{
  --card-width: 720px;
  --accent: #0d6efd; /* cor principal da agência */
  --muted: #6c757d;
  --bg: #f5f7fb;
}

/* Reset simples */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background: linear-gradient(180deg, #f7f9fc 0%, var(--bg) 100%);
  color:#222;
}

/* Card central */
.offline-card{
  width: min(92%, var(--card-width));
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(13,110,253,0.06);
}

/* Logo */
.logo img{
  max-height:64px;
  object-fit:contain;
  filter: saturate(0.98);
}

/* Status box */
.status-box{
  background: rgba(13,110,253,0.06);
  border-radius: 8px;
  padding: 10px 14px;
  display: inline-block;
}

/* Countdown */
#countdown{
  color: var(--accent);
  letter-spacing: 0.6px;
}

/* Buttons */
.btn-primary{
  background: linear-gradient(180deg, var(--accent), #0b5ed7);
  border-color: rgba(0,0,0,0.05);
}
.btn-outline-secondary{
  color: #495057;
  border-color: #ced4da;
}

/* Responsividade */
@media (max-width:520px){
  .offline-card{border-radius:10px}
  .logo img{max-height:48px}
  #countdown{font-size:1rem}
}