*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:Arial,sans-serif;background:linear-gradient(135deg,#1e1b2e,#1b1d2d);color:#e0e0e0}a{color:#4ef4c2;text-decoration:none}a:hover{opacity:.8}button{cursor:pointer;background-color:#4ef4c2;color:#1e1b2e;border:none;border-radius:4px;padding:.7rem 1.2rem;font-size:1rem;transition:.3s ease}button:hover{background-color:#3dbfea;color:#fff}.top-bar{background-color:#333;padding:10px}.nav-links{list-style:none;display:flex;margin:0;padding:0}.nav-links li{margin-right:20px}.nav-links li a{color:#fff;text-decoration:none;font-weight:700}.nav-links li a:hover{text-decoration:underline}:root{--color-bg: #1e1b2e;--color-bg-layer: #2b2741;--color-card: #2b2741;--color-accent-green: #4ef4c2;--color-accent-blue: #3dbfea;--color-accent-purple: #b273f3;--text-color: #e0e0e0}.container{max-width:600px;margin:2rem auto;background-color:var(--color-card);padding:2rem;border-radius:8px;box-shadow:0 8px 28px #00000059}p{margin:1rem auto}h1,h2,h3{color:var(--color-accent-purple);margin-bottom:1rem}label{display:block;margin:1rem 0 .5rem;color:var(--color-accent-green)}