html,body{margin:0;padding:0;min-height:100vh;overflow-x:hidden}body{font-family:Segoe UI,sans-serif;position:relative}body:before{content:"";position:fixed;inset:0;background:url(https://png.pngtree.com/thumb_back/fh260/background/20240104/pngtree-mystic-blackberry-a-textured-design-on-an-abstract-dark-purple-background-image_13879614.png) no-repeat center center;background-size:cover;z-index:-2}body:after{content:"";position:fixed;inset:0;background:#0000008c;z-index:-1}@keyframes bgZoom{0%{transform:scale(1)}to{transform:scale(1.1)}}.container{width:min(95%,900px);margin:40px auto;padding:20px;background:#fffffff2;border-radius:16px;box-shadow:0 20px 40px #0000004d;box-sizing:border-box}@keyframes floatCard{0%{transform:translateY(0)}50%{transform:translateY(-8px)}to{transform:translateY(0)}}h1{margin-bottom:20px;color:#111827;text-align:center;animation:fadeIn 1s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px}form input{padding:10px;border:1px solid #ddd;border-radius:8px;font-size:14px;width:100%;min-width:0;box-sizing:border-box}form button{grid-column:1 / -1;width:100%;padding:12px;border:none;border-radius:8px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;font-weight:600;cursor:pointer;transition:.3s ease}form button:hover{background:#4338ca}form button:disabled{background:#aaa;cursor:not-allowed}.controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.controls input{padding:8px;border-radius:6px;border:1px solid #ddd}.controls button{padding:8px 12px;border:none;border-radius:6px;background:#e5e7eb;cursor:pointer}.total{font-weight:600;margin-bottom:15px;font-size:18px}table{width:100%;border-collapse:collapse;border-radius:8px;overflow:hidden}thead{background-color:#f3f4f6}th,td{padding:12px;text-align:left}tbody tr:nth-child(2n){background-color:#f9fafb}tbody tr:hover{background-color:#eef2ff;transition:.2s ease}@media(max-width:768px){form{grid-template-columns:1fr}.controls{flex-direction:column;align-items:stretch;gap:10px}.controls button{width:100%}table{font-size:13px}th,td{padding:8px}}@media(max-width:600px){.container{margin:20px auto;padding:15px}}@media(max-width:600px){form{grid-template-columns:1fr}}