/* ====== Bukikoubou Maintenance Page (metal theme) ====== */
:root{
  --bg:#0c0f13;
  --grid:#1b222b;
  --accent:#c0c8d0;
  --accent-2:#8aa1b2;
  --gold:#d6b46c;
  --metal-1:#93a1ad;
  --metal-2:#5f6b75;
  --metal-3:#2b3137;
  --shadow:#000000c0;
  --radius:22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background: radial-gradient(1200px 800px at 70% 20%, #16202b 0%, var(--bg) 60%);
  color:#e6ebef; overflow:hidden;
}

#bg .grid{
  position:fixed; inset:0;
  background:
     linear-gradient(0deg, transparent 39px, var(--grid) 40px),
     linear-gradient(90deg, transparent 39px, var(--grid) 40px);
  background-size:40px 40px;
  opacity:.25;
}
#bg .vignette{
  position:fixed; inset:0; pointer-events:none;
  background: radial-gradient(1200px 700px at 50% 30%, transparent 0 60%, rgba(0,0,0,.65) 80%),
              radial-gradient(800px 500px at 10% 90%, rgba(0,0,0,.6), transparent 60%);
}

.panel{
  position:relative; z-index:2;
  max-width:960px; margin:6vh auto; padding:24px;
  background: linear-gradient(160deg, var(--metal-3), var(--metal-2));
  border:1px solid #21262d; border-radius: var(--radius);
  box-shadow: 0 20px 50px var(--shadow), inset 0 1px 0 #ffffff1a;
  backdrop-filter: blur(4px);
}

/* header */
.brand{ display:flex; align-items:center; gap:16px; padding:4px 8px 18px; border-bottom:1px solid #26313a; }
.brand .logo{
  width:58px; height:58px; border-radius:14px;
  display:grid; place-items:center;
  background: conic-gradient(from 210deg, #bfc7cf, #6b7680, #aab7c2, #6b7680, #bfc7cf);
  color:#101418; font-weight:900; font-size:28px; text-shadow:0 2px 6px #0008;
  box-shadow: inset 0 2px 1px #ffffff40, inset 0 -2px 10px #00000080, 0 8px 20px #0008;
  border:1px solid #52606b;
}
.brand .title h1{ margin:0; letter-spacing: .06em; font-weight:800; }
.brand .title .subtitle{ margin:.2em 0 0; color:#cbd5dd }
.brand .title .subtitle strong{ color: var(--gold) }

/* status */
.status{ padding:18px 8px 8px; }
.status .gears{ position:relative; height:160px; margin:8px 0 6px; }
.gear{ position:absolute; filter: drop-shadow(0 6px 20px rgba(0,0,0,.6)); opacity:.9 }
.gear-big{ width:140px; left:8px; top:8px; animation: spin 9s linear infinite; }
.gear-small{ width:90px; left:108px; top:52px; animation: spin-rev 7s linear infinite; }
@keyframes spin{ to { transform: rotate(360deg); } }
@keyframes spin-rev{ to { transform: rotate(-360deg); } }

.lead{ margin:8px 0 16px; line-height:1.9 }
.eta{ display:flex; align-items:center; gap:12px; margin:6px 0 20px; }
.eta label{ font-weight:700; color:#d5dde6 }
.eta output{ padding:6px 10px; background:#0e141a; border:1px solid #2b3946; border-radius:10px; color:#d5e0ea }

.notify{ display:flex; gap:8px; flex-wrap:wrap }
.notify input{
  flex:1 1 260px; min-width:220px; padding:12px 14px; border-radius:12px;
  border:1px solid #445360; background:#0f151b; color:#eaf2f7; outline:none;
}
.notify button{
  padding:12px 16px; border-radius:12px; border:1px solid #7a8895;
  background: linear-gradient(#a9b4be, #7b8792);
  color:#111; font-weight:700; cursor:pointer;
  box-shadow: inset 0 1px 0 #ffffff66, 0 6px 14px #0006;
}
.notify button:hover{ filter:brightness(1.04) }
.msg{ width:100%; margin:0; color:#a9c6ff }

.footer{ display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid #26313a; margin-top:18px; padding-top:12px }
.footer .sns a{
  display:inline-block; margin-right:12px; text-decoration:none; color:#c9d3dc;
  border-bottom:1px dashed #93a3b3; padding-bottom:2px;
}
.footer .sns a:hover{ color:#fff }

/* Canvas sparks fits screen */
#sparks{ position:fixed; inset:auto 0 0 0; height:38vh; width:100%; z-index:1; opacity:.55; }

@media (max-width: 640px){
  .panel{ margin:2vh 10px; padding:14px }
  .brand .logo{ width:46px; height:46px; font-size:22px }
  .gear-big{ width:110px }
  .gear-small{ width:70px; left:90px; top:52px }
}