body{background:linear-gradient(135deg,#b32e33,#fad0c4,#b32e33,#ffdde1);animation:gradientBG 10s ease infinite;background-size:400% 400%;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;font-family:Arial,sans-serif;padding:10px}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.container{text-align:center;width:100%;max-width:350px}.picker-box{background:#fff;padding:20px;border-radius:15px;box-shadow:0 4px 10px #0003;border:4px solid #ff7675;width:100%;box-sizing:border-box}.logo{width:100px;margin-bottom:15px}input{width:100%;padding:12px;margin:10px 0;border:2px solid #ff7675;border-radius:5px;font-size:16px;box-sizing:border-box}.add-btn{width:100%;padding:12px;background:#ff7675;color:#fff;font-size:16px;font-weight:700;border:none;border-radius:5px;cursor:pointer;transition:all .3s ease}.add-btn:hover{background:#d63031}.name-list{margin:10px 0;max-height:150px;overflow-y:auto;border:1px solid #eee;border-radius:5px;padding:10px;text-align:left}.name-item{background:#f3f4f6;padding:5px;border-radius:4px;margin:5px 0;font-size:14px}.display-box{font-size:18px;font-weight:700;color:#6b21a8;padding:10px;background:#f3f4f6;border-radius:8px;box-shadow:inset 0 2px 4px #0000001a;margin-top:15px}.random-btn{margin-top:15px;padding:14px;background:linear-gradient(to right,#ff7675,#6b21a8);color:#fff;font-size:16px;font-weight:700;border:none;border-radius:8px;cursor:pointer;width:100%;transition:all .3s ease;box-shadow:0 4px 6px #0003}.random-btn:hover{transform:scale(1.05);box-shadow:0 6px 10px #0000004d}.loader{border:6px solid rgba(255,255,255,.3);border-top:6px solid #ff7675;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:10px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 400px){.picker-box{padding:15px;border-width:3px}input{font-size:14px;padding:10px}.random-btn,.add-btn{font-size:14px;padding:12px}.display-box{font-size:16px}}