.spinner-wheel-spin-button{display:flex;align-items:center;justify-content:center;width:3.75rem;height:58px;min-width:0;padding:0;border-radius:9999px;border:none;background-color:#348ef6;color:#fff;cursor:pointer;transition:all .1s ease;box-shadow:0 4px #257adc;margin-top:-4px;z-index:20}.spinner-wheel-spin-button:hover:not(:disabled){background-color:#2d8af0}.spinner-wheel-spin-button:active:not(:disabled){height:60px;margin-top:-5px;transform:translateY(2px);box-shadow:0 2px #257adc}.spinner-wheel-spin-button:disabled{opacity:.6;cursor:not-allowed}.spinner-wheel-spin-button .play-icon{margin-left:2px}.wheel-canvas{position:relative;display:flex;align-items:center;justify-content:center;width:512px;height:512px}.wheel-canvas .bg-spinner-wheel{display:none}.wheel-canvas .wheel-ring{position:absolute;top:0;left:0;width:512px;height:512px;pointer-events:none;display:none}.wheel-canvas .wheel-pointer{display:block;position:absolute;top:71px;left:14%;transform:translate(-50%);width:70px;height:70px;z-index:10}@media (max-width: 900px){.wheel-canvas{display:flex;align-items:center;justify-content:center}.wheel-canvas .bg-spinner-wheel{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.07);width:465px;height:465px;background:#fff;border-radius:50%;box-shadow:0 4px 20px #0000001a}.wheel-canvas .wheel-ring{display:none}.wheel-canvas canvas{position:relative;top:auto;left:auto;transform:none}}@media (max-width: 480px){.wheel-canvas{transform:scale(.65);transform-origin:center center}}.wheel-canvas .spin-btn-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;align-items:center;justify-content:center;width:5rem;height:5rem;border-radius:100%;background:#fff;border:3.2px solid #eff1f7;box-shadow:0 7px 0 2px #00000021}.wheel-canvas canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%}.wheel-canvas .canvas-fallback{color:#ff5252;text-align:center;padding:20px}.entries{display:flex;flex-direction:column;height:100%;overflow:hidden}.entries.--dark{color:#fff}.entries__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.entries__title{font-weight:600;font-size:15px;color:#333}.entries.--dark .entries__title{color:#fff}.entries__count{display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:#e8eaef;color:#6b7280;border-radius:10px;font-size:12px;font-weight:600}.entries__input-wrapper{margin-bottom:12px}.entries__input{display:flex;align-items:center;gap:8px}.entries__input-container{position:relative;flex:1}.entries__input-hint{margin-top:6px;font-size:13px;color:#999}.entries__input-limit{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;color:#bbb;pointer-events:none}.entries__input-field{width:100%;padding:10px 50px 10px 14px;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s;background:#fff;box-sizing:border-box}.entries__input-field::placeholder{color:#aaa;font-size:13px}.entries__input-field:focus{border-color:#348ef6}.entries.--dark .entries__input-field{background:#3d3d3d;border-color:#555;color:#fff}.entries__input-field:disabled{opacity:.6;cursor:not-allowed}.entries__add-btn{padding:6px 12px;background-color:#348ef6;color:#f5f5f5;border:none;border-radius:9999px;font-weight:700;font-size:14px;min-width:3rem;cursor:pointer;transition:all .1s ease;box-shadow:0 4px #257adc;display:inline-flex;align-items:center;justify-content:center}.entries__add-btn:hover:not(:disabled){background-color:#2d8af0}.entries__add-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #257adc}.entries__add-btn:disabled{opacity:.6;cursor:not-allowed}.entries-box.__list{overflow-y:auto;max-width:100%;max-height:200px;flex:1;display:flex;flex-direction:column}.entries-box.__list>p{margin-top:20px;font-size:14px;color:#999;text-align:center}.entries-box.__list ul{list-style:none;padding:0;margin:0;width:100%}.entries-box.__list ul li{font-size:14px;padding:6px 10px;border-radius:4px;position:relative;width:100%;box-sizing:border-box}.entries-box.__list ul li:nth-child(odd){background:#d3d7e14d}.entries.--dark .entries-box.__list ul li:nth-child(odd){background:#ffffff1a}.entries-box.__list ul li.--winner{background:#e8f5e9;border:2px solid #4caf50}.entries.--dark .entries-box.__list ul li.--winner{background:#1b5e20;border-color:#4caf50}.entries-box.__list ul li .remove-entry{color:#afafaf;position:absolute;right:10px;top:50%;transform:translateY(-50%);display:none;cursor:pointer;background:none;border:none;padding:4px}.entries-box.__list ul li:hover .remove-entry{display:block}.entries-box.__list ul li .remove-entry:hover{opacity:.6}.spinner-wheel-label{display:flex;align-items:center;justify-content:center;width:312px;padding:.5rem 1rem;border-radius:.5rem;font-weight:700;font-size:20px;text-align:center;transition:all .3s ease;overflow:visible}.spinner-wheel-label.--white{background-color:#fff;border:1.5px solid #EFF1F7;color:#b4bccf}.spinner-wheel-label.--dark{background-color:#0a0a0a66;color:#afafaf}.spinner-wheel-label.--has-text{color:#fff;border:none}.spinner-wheel-label.--white.--has-text{background-color:#348ef6}.spinner-wheel-label.--winning{animation:pulse .5s ease-in-out}.spinner-wheel-label__text{word-break:break-word;max-width:100%;padding:0 1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spinner-wheel-label__prompt{font-weight:700;font-size:20px;white-space:nowrap}@media (max-width: 480px){.spinner-wheel-label{font-size:1rem;line-height:1.5rem;padding:.25rem .75rem}.spinner-wheel-label__prompt{font-size:1rem}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.winner-popup{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:1000}.winner-popup__backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:#0009}.winner-popup__content{position:relative;display:flex;flex-direction:column;align-items:center;padding:40px 60px;background:#fff;border-radius:20px;animation:bounceIn .5s ease;max-width:90%}.winner-popup__close{position:absolute;top:15px;right:15px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;font-size:24px;color:#999;cursor:pointer;transition:all .2s}.winner-popup__close:hover{background:#f5f5f5;color:#333}.winner-popup__title{font-size:32px;font-weight:700;color:#333;margin-bottom:20px}.winner-popup__label{min-width:200px;font-size:24px;padding:20px 40px}.winner-popup__confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1001}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}.spinner-wheel{font-family:Nunito,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;width:100%;max-width:1000px;margin:0 auto}.spinner-wheel.--dark{color:#fff}.spinner-wheel__layout{display:flex;gap:40px;align-items:flex-start}.spinner-wheel__wheel-section{display:flex;flex-direction:column;align-items:center;gap:20px}.spinner-wheel__entries-section{flex:1;min-width:280px;max-width:350px}@media (max-width: 900px){.spinner-wheel__layout{flex-direction:column;align-items:center;gap:24px}.spinner-wheel__entries-section{width:100%;max-width:100%}}@media (max-width: 480px){.spinner-wheel__layout{gap:16px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Nunito,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:#f5f7fa;min-height:100vh}.demo-app{min-height:100vh;display:flex;flex-direction:column}.demo-header{text-align:center;padding:24px;background:#fff;border-bottom:1px solid #e0e0e0}.demo-header h1{font-size:28px;font-weight:700;color:#333;margin-bottom:8px}.demo-header p{font-size:16px;color:#666}.demo-content{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}.demo-footer{text-align:center;padding:20px;background:#fff;border-top:1px solid #e0e0e0;font-size:14px;color:#666}.demo-footer a{color:#348ef6;text-decoration:none}.demo-footer a:hover{text-decoration:underline}@media (max-width: 600px){.demo-header h1{font-size:22px}.demo-content{padding:20px 10px}}
