/* Maintenance Page Styles */
:root{
  --bg1:#000000;
  --bg2:#111111;
  --fg:#f5f5f5;
  --muted:#bdbdbd;
  --brand:#ffffff;
  --accent:#cccccc;
  --card: rgba(255,255,255,0.05);
  --card-border: rgba(255,255,255,0.14);
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
}
@media (prefers-color-scheme: light){
  :root{
    --bg1:#ffffff;
    --bg2:#f5f5f5;
    --fg:#111111;
    --muted:#444444;
    --card: rgba(255,255,255,0.8);
    --card-border: rgba(0,0,0,0.08);
    --shadow: 0 10px 30px rgba(0,0,0,0.08);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  /* Robust centering across browsers and mobile */
  min-height: 100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
/* floating blobs */
.blob{
  position:fixed; inset:auto;
  width:42vmax; aspect-ratio:1;
  filter: blur(60px);
  opacity:.12; z-index:0; pointer-events:none;
  transform-origin:center;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), transparent 35%),
              radial-gradient(circle at 70% 70%, rgba(255,255,255,.06), transparent 40%);
  animation: float 28s linear infinite alternate;
}
.blob.b2{ top:10%; right:-10%; transform:rotate(20deg); animation-duration: 34s; opacity:.14}
.blob.b1{ bottom:-12%; left:-10%; transform:rotate(-10deg); }

@keyframes float{
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  100% { transform: translateY(-20px) rotate(8deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce){
  .blob{ animation: none }
}

.wrap{
  position:relative; z-index:1;
  width:min(92vw, 720px);
  background: var(--card);
  border:1px solid var(--card-border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  padding: clamp(1.25rem, 4vw, 2.25rem);
}
.header{
  display:flex; align-items:center; gap:.75rem; margin-bottom: .5rem;
}
.logo{ display:inline-block; width:40px; height:40px; border-radius:12px; box-shadow: 0 6px 18px rgba(0,0,0,.35); object-fit: cover; object-position: center; border:1px solid var(--card-border); filter: grayscale(100%); }
.brand{ font-weight:700; letter-spacing:.2px; color:var(--fg); font-size: clamp(1rem, 2.2vw, 1.125rem); }

.title{ font-size: clamp(1.6rem, 4.5vw, 2.2rem); line-height:1.2; margin:.25rem 0 .75rem; font-weight:800; }
.desc{ color:var(--muted); font-size: clamp(.98rem, 2.5vw, 1.05rem); line-height:1.6; margin:0 0 1rem; }

.status{
  display:flex; align-items:center; gap:.75rem; margin:1rem 0 1.25rem;
}
.pulse{
  width:10px; height:10px; border-radius:999px; background: #ffffff; box-shadow:0 0 0 0 rgba(255,255,255,.6); animation: pulse 2s infinite;
}
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.6)} 70%{ box-shadow:0 0 0 12px rgba(255,255,255,0)} 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0)} }

.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top: .25rem; }
.btn{
  appearance:none; border:1px solid transparent; border-radius:12px; cursor:pointer; font-weight:600; letter-spacing:.2px;
  padding:.7rem 1rem; font-size: .98rem; transition: transform .12s ease, box-shadow .12s ease, background .2s ease, border-color .2s ease; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn.primary{ background:#ffffff; color:#000000; box-shadow: 0 8px 18px rgba(0,0,0,.25); border-color: transparent; }
.btn.primary:hover{ box-shadow: 0 10px 22px rgba(0,0,0,.35); }
.btn.outline{ background:transparent; color:var(--fg); border-color: var(--card-border); }

.social{ display:flex; gap:.5rem; margin-top: .5rem; }
.social a{ width:40px; height:40px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--card-border); color:var(--fg); text-decoration:none; opacity:.9 }
.social a:hover{ opacity:1 }

.footer{ color:var(--muted); font-size:.9rem; margin-top:1rem }