:root { --bg:#0b0e12; --fg:#e7ebf0; --mut:#9aa7b2; --card:#11161d; --accent:#5da0ff; }
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,Segoe UI,Roboto,Arial}
.wrap{min-height:100%;display:grid;place-items:center;padding:24px}
.card{width:min(560px,92vw);background:var(--card);border-radius:16px;padding:28px 24px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);border:1px solid #1c2430}
h1{margin:0 0 8px;font-size:24px}
p{margin:6px 0}
.hint{color:var(--mut)}
.warn{color:#ffb3b3}
.progress{margin:18px 0 6px;height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--accent),transparent 60%);
  background-size:200% 100%;animation:bar 1.2s linear infinite}
@keyframes bar{0%{background-position:0 0}100%{background-position:-200% 0}}

altcha-widget { display: none; }

.logo {
  display:block;
  width: 400px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 18px;
}
@media (max-width: 480px){
  .logo { width: 240px; margin-bottom: 16px; }
}


#status { display: none; }
#status-nojs { display: block; }

html.js #status { display: block; }
html.js #status-nojs { display: none; }