*{box-sizing:border-box;margin:0;padding:0}body{background:#f3f7fb;font-family:Arial,sans-serif}.app{color:#111;min-height:100vh;transition:all .3s}.dark{color:#fff;background:#121212}.hero{color:#fff;text-align:center;background:linear-gradient(135deg,#09f,#036);padding:50px 20px}.hero h1{margin-bottom:10px;font-size:48px}.theme-btn{color:#036;cursor:pointer;background:#fff;border:none;border-radius:10px;margin-top:20px;padding:12px 20px;font-weight:700}.controls{text-align:center;padding:30px 20px}.controls input{border:1px solid #ccc;border-radius:10px;width:300px;max-width:90%;margin-bottom:20px;padding:12px}.filters{justify-content:center;gap:10px;display:flex}.filters button{cursor:pointer;color:#fff;background:#09f;border:none;border-radius:10px;padding:10px 18px;font-weight:700}.fish-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;padding:20px;display:grid}.fish-card{background:#fff;border-radius:20px;transition:all .3s;overflow:hidden;box-shadow:0 4px 12px #00000026}.dark .fish-card{background:#1f1f1f}.fish-card:hover{transform:translateY(-5px)}.fish-card img{object-fit:cover;width:100%;height:220px}.fish-content{padding:20px}.fish-content h2{margin-bottom:10px}.fish-type{color:#fff;background:#09f;border-radius:20px;margin-bottom:10px;padding:6px 12px;font-size:14px;display:inline-block}.form-section{padding:50px 20px}.form-section h2{text-align:center;margin-bottom:30px}form{flex-direction:column;gap:15px;max-width:500px;margin:auto;display:flex}form input,form select,form textarea{border:1px solid #ccc;border-radius:10px;padding:14px}form textarea{resize:vertical;min-height:120px}form button{color:#fff;cursor:pointer;background:#036;border:none;border-radius:10px;padding:14px;font-size:16px;font-weight:700}footer{text-align:center;margin-top:40px;padding:30px}