:root{
  --bg:#000;
  --bg-alt:#050505;
  --accent:#9fff00;
  --muted:#bdbdbd;
  --container:1100px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{min-height:100vh;display:flex;flex-direction:column;align-items:stretch;background:linear-gradient(180deg,var(--bg),var(--bg-alt));color:var(--accent);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}

main{flex:1;display:flex;align-items:center;justify-content:center;padding:4rem 1rem;text-align:center}
.hero{max-width:900px;padding:2rem}
.hero h1{font-family:monospace,ui-monospace,Menlo,Consolas,monospace;font-size:clamp(1.6rem,5vw,3.2rem);margin-bottom:.6rem;color:var(--accent)}
.hero p{color:var(--muted);margin-bottom:.5rem;font-size:1.05rem}

.site-footer{background:#0a0a0a;color:#ddd;padding:40px 0 0;font-family:Arial,Helvetica,sans-serif;width:100%}
.footer-container{max-width:var(--container);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;padding:20px}
.footer-brand{flex:1 1 300px;margin-bottom:20px}
.footer-brand h2{color:#fff;margin-bottom:10px}
.footer-links,.footer-social{flex:1 1 200px;margin-bottom:20px}
.footer-links h3,.footer-social h3{color:#fff;margin-bottom:12px}
.footer-links ul{list-style:none;padding:0}
.footer-links li{margin-bottom:8px}
.footer-links a,.footer-social a{color:var(--muted);text-decoration:none;transition:color .2s}
.footer-links a:hover,.footer-social a:hover{color:#fff}
.social-icons a{display:block;margin-bottom:8px}
.footer-bottom{text-align:center;padding:15px 0;background:var(--bg-alt);font-size:14px;border-top:1px solid #222;color:#999}

@media (max-width:700px){
  .footer-container{padding:0 16px}
  .footer-links,.footer-social,.footer-brand{flex:1 1 100%}
  main{padding:3rem 12px}
}

/* Utility */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

.save-button {
  background: linear-gradient(135deg, #4CAF50, #43A047);
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.save-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.save-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.save-button:disabled {
  background: #aaa;
  cursor: not-allowed;
  box-shadow: none;
}