:root { --bg:#0a0a0a; --panel:#111111; --line:#2e2e2e; --text:#e8e8e8; --muted:#8b8b8b; }
* { box-sizing:border-box; margin:0; padding:0; }

body {
  background:var(--bg);
  color:var(--text);
  font:14px/1.5 ui-monospace,Consolas,monospace;
}

.grain {
  position:fixed; inset:0; pointer-events:none; opacity:.14; z-index:5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color:#cfcfcf; text-decoration:none; }
a:hover { background:#f5f5f5; color:#0a0a0a; }

main { max-width:860px; margin:36px auto 24px; padding:0 16px; position:relative; }

header { text-align:center; margin-bottom:26px; }
h1 {
  font-family:'Oswald',Impact,sans-serif; font-weight:700; font-size:42px; letter-spacing:6px;
  color:#f5f5f5; text-transform:uppercase;
  text-shadow:1px 1px 0 #000, 0 0 14px rgba(255,255,255,.18);
}
.sub {
  margin-top:4px; font-family:'Oswald',sans-serif; font-weight:500; font-size:13px;
  letter-spacing:5px; color:var(--muted); text-transform:uppercase;
}
.tag { margin-top:12px; font-size:12px; color:var(--muted); font-style:italic; }

.status-line { margin-top:14px; font-size:12px; color:var(--muted); }
.pill {
  display:inline-block; padding:2px 12px; font-size:11px; font-weight:700; margin-right:8px;
  border:1px solid var(--line); text-transform:uppercase; letter-spacing:1px;
}
.pill.on { background:#1c1c1c; color:#f5f5f5; }
.pill.off { background:#0f0f0f; color:var(--muted); }
.muted { color:var(--muted); }

.ca-line {
  display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap;
  border:1px solid var(--line); padding:10px 14px; max-width:680px; margin:16px auto 0;
}
.ca-line .label { color:var(--muted); }
.ca-line code { word-break:break-all; font-size:13px; }
.ca-line button {
  background:none; border:none; color:var(--text); font:inherit; cursor:pointer;
}
.ca-line button:hover { background:#f5f5f5; color:#0a0a0a; }
.toast { color:var(--muted); font-size:12px; }

nav { margin-top:14px; display:flex; justify-content:center; gap:16px; font-size:13px; }

.tiles {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:12px; margin-bottom:20px;
}
.tile { background:var(--panel); border:1px solid var(--line); padding:18px 14px; text-align:center; }
.tile b { display:block; font-size:26px; font-weight:800; color:#ffffff; }
.tile span {
  display:block; margin-top:6px; color:var(--muted); font-size:10px;
  letter-spacing:2px; text-transform:uppercase;
}

.card { background:var(--panel); border:1px solid var(--line); padding:16px; margin-bottom:14px; }
.card-title {
  color:var(--muted); font-size:10px; letter-spacing:2px; text-transform:uppercase; margin-bottom:10px;
}
.steps { list-style-position:inside; color:var(--muted); font-size:13px; }
.steps li { margin:4px 0; }

.log {
  background:#0a0a0a; border:1px solid var(--line); padding:10px; height:220px; overflow-y:auto;
  font-size:12px; white-space:pre-wrap; word-break:break-all; color:var(--muted);
}

footer {
  text-align:center; color:#4d4d4d; font-size:11px; margin:22px 16px 30px; letter-spacing:1px;
}

@media (max-width:560px) {
  h1 { font-size:28px; letter-spacing:4px; }
  .tile b { font-size:21px; }
}