body{margin:0;font-family:Arial;background:#eef6ff}
.hero{background:linear-gradient(135deg,#4f8cff,#7b61ff);color:#fff;text-align:center;padding:30px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:20px}
.grid button{padding:15px;border:none;border-radius:12px;cursor:pointer;font-size:16px}
.panel{background:#fff;margin:20px;border-radius:14px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.card{display:inline-flex;width:80px;height:80px;align-items:center;justify-content:center;border:1px solid #ccc;margin:5px;font-size:30px;cursor:pointer}
input{padding:10px}