/* Rukkit.net — Version page stylesheet
   Clean, modern glass + simple responsive layout
*/
:root{
  --bg-1:#071129;
  --bg-2:#0b2a43;
  --card:#0f1720cc;
  --muted:#9aa6b2;
  --accent:#7c5cff;
  --accent-2:#ff6b8a;
  --glass-border: rgba(255,255,255,0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(124,92,255,0.12), transparent),
              radial-gradient(1000px 500px at 90% 90%, rgba(255,107,138,0.07), transparent),
              linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

.container{
  width:100%;
  max-width:880px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid var(--glass-border);
  border-radius:16px;
  padding:28px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.6);
  backdrop-filter: blur(8px) saturate(120%);
}

h1{font-size:clamp(3rem, 12vw, 8rem);margin:0 0 8px 0;letter-spacing:-0.02em;line-height:0.95}
p{margin:0 0 18px 0;color:var(--muted);font-size:1rem}

h2{font-size:1.05rem;margin:14px 0 8px;color:var(--accent);font-weight:700}
.fixed-logs{margin:0 0 16px 0;padding-left:18px;color:#dfe9f8;list-style:disc}
.fixed-logs li{margin:6px 0;padding:8px 10px;background:rgba(255,255,255,0.01);border-radius:8px;border:1px solid rgba(255,255,255,0.02);font-size:0.95rem}

button{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:10px 16px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  color:#071129;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 18px rgba(124,92,255,0.12), inset 0 -2px 6px rgba(0,0,0,0.18);
  transition:transform .12s ease, box-shadow .12s ease;
}
button:active{transform:translateY(1px)}

a{
  color:var(--accent-2);
  text-decoration:none;
  font-weight:600;
}

.footer-row{display:flex;gap:16px;align-items:center;margin-top:18px}

@media (max-width:600px){
  .container{padding:18px;border-radius:12px}
  h1{font-size:1.6rem}
  body{padding:18px}
}

/* Utility: center the content when embedded */
body > .container{margin:auto}