body{font-family:Arial,sans-serif;background-color:#f0f4f8;margin:0;padding:0;display:flex;justify-content:center;align-items:center;height:100vh}.App{background-color:#fff;padding:20px 30px;border-radius:10px;box-shadow:0 4px 10px #0000001a;max-width:450px;width:100%;max-height:90vh;overflow:hidden}h1{color:#333;font-size:26px;margin-bottom:20px;text-align:center}input[type=text]{width:100%;padding:10px;margin-bottom:12px;border:1px solid #ccc;border-radius:6px;font-size:16px}button{padding:10px 14px;font-size:14px;border:none;border-radius:6px;cursor:pointer;transition:background-color .3s;margin:4px}.add-button{width:100%;background-color:#007bff;color:#fff}.add-button:hover{background-color:#0056b3}.edit-button{background-color:#17a2b8;color:#fff}.edit-button:hover{background-color:#11707f}.delete-button{background-color:#dc3545;color:#fff}.delete-button:hover{background-color:#a71d2a}.list-container{max-height:300px;overflow-y:auto;margin-top:20px;padding-right:5px}.list-container::-webkit-scrollbar{width:6px}.list-container::-webkit-scrollbar-thumb{background-color:#bbb;border-radius:4px}ul{list-style-type:none;padding:0;margin:0}li{padding:12px;background-color:#f8f9fa;border:1px solid #ddd;border-radius:6px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}.item-name{font-weight:500;color:#333;flex-grow:1}p{color:#28a745;font-size:18px;font-weight:500}.layout-container{display:flex;align-items:flex-start;justify-content:center;padding:30px;gap:30px}