html,body,#root{height:100%}body{background:#f0fdf4;font-family:Segoe UI,Arial,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{color:#1e293b;background:linear-gradient(135deg,#f0fdf4,#ecfdf5);font-family:Segoe UI,Arial,sans-serif}.app{min-height:100vh;padding:20px}.header{text-align:center;color:#fff;background:linear-gradient(135deg,#16a34a,#4ade80);border-radius:16px;margin-bottom:20px;padding:25px;box-shadow:0 8px 20px #0000001a}.header h1{font-size:2rem}.header p{opacity:.9;margin-top:5px}.grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;display:grid}.card{text-align:center;background:#fff;border-radius:16px;padding:20px;transition:all .3s;box-shadow:0 10px 25px #00000014}.card:hover{transform:translateY(-5px)}.card svg{color:#16a34a}.card h2{margin-top:10px;margin-bottom:10px}input{border:1px solid #cbd5e1;border-radius:10px;outline:none;width:100%;margin-top:10px;padding:10px}button{color:#fff;cursor:pointer;background:#16a34a;border:none;border-radius:10px;width:100%;margin-top:12px;padding:10px;font-weight:700;transition:all .2s}button:hover{background:#15803d}.result{text-align:left;background:#ecfdf5;border-left:5px solid #16a34a;border-radius:10px;margin-top:12px;padding:12px}.result p{margin:5px 0}.card:last-child{text-align:left}@media (width<=768px){.header h1{font-size:1.5rem}}