.template-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.template-btn{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border:2px solid #dee2e6;border-radius:12px;padding:15px 10px;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:5px}.template-btn:hover{border-color:#667eea;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;transform:translateY(-3px);box-shadow:0 8px 16px rgba(102,126,234,.3)}.template-btn i{font-size:1.5rem}.template-btn span{font-weight:600;font-size:.95rem}.template-btn small{font-size:.75rem;opacity:.8}.options-list{display:flex;flex-direction:column;gap:10px;margin-bottom:15px}.option-item{display:flex;align-items:center;gap:10px;animation:fadeInUp .3s ease}.option-number{width:32px;height:32px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.9rem;flex-shrink:0}.option-input{flex:1}.btn-remove-option{width:32px;height:32px;background:#fee;color:#c53030;border:none;border-radius:50%;cursor:pointer;transition:all .3s ease;flex-shrink:0}.btn-remove-option:hover{background:#c53030;color:#fff;transform:scale(1.1)}.btn-add-option{width:100%;padding:10px;background:linear-gradient(135deg,#48bb78 0%,#38a169 100%);color:#fff;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px}.btn-add-option:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(72,187,120,.4)}.wheel-container{position:relative;width:100%;max-width:500px;margin:0 auto;aspect-ratio:1/1}#wheelCanvas{width:100%;height:100%;border-radius:50%;box-shadow:0 8px 32px rgba(102,126,234,.3)}.btn-spin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;font-size:1.2rem;font-weight:700;border:5px solid #fff;box-shadow:0 8px 24px rgba(102,126,234,.5);cursor:pointer;transition:all .3s ease;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.btn-spin:hover{transform:translate(-50%,-50%) scale(1.1)}.btn-spin:active{transform:translate(-50%,-50%) scale(.95)}.btn-spin:not(.spinning){animation:spinButtonPulse 2s infinite}.btn-spin.spinning{pointer-events:none}.btn-spin i{font-size:1.8rem}.btn-spin span{font-size:.8rem}.result-winner{text-align:center;padding:30px 20px;animation:bounceIn .6s ease}.result-winner i{font-size:3rem;color:#f59e0b;animation:pulse 1.5s infinite}.result-winner .winner-text{display:block;font-size:2rem;font-weight:700;margin-top:15px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;font-weight:600}.btn-clear-history{background:none;border:none;color:#c53030;cursor:pointer;font-size:.85rem;padding:5px 10px;border-radius:6px;transition:all .3s ease}.btn-clear-history:hover{background:#fee}.history-items{max-height:300px;overflow-y:auto}.history-item{display:flex;align-items:center;gap:12px;padding:12px;background:#f8f9fa;border-radius:8px;margin-bottom:8px;animation:historyFadeIn .3s ease}.history-rank{width:36px;height:36px;background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}.history-content{flex:1}.history-winner{font-weight:600;color:#2d3748;margin-bottom:4px}.history-time{font-size:.75rem;color:#718096}.history-empty{text-align:center;color:#718096;padding:20px;font-style:italic}.advanced-settings{display:flex;flex-direction:column;gap:10px}.setting-item{display:flex;align-items:center;gap:10px;padding:10px;background:#f8f9fa;border-radius:8px;cursor:pointer;transition:all .3s ease}.setting-item:hover{background:#e9ecef}.setting-item input[type="checkbox"]{width:20px;height:20px;cursor:pointer}.setting-item label{flex:1;cursor:pointer;margin-bottom:0;font-size:.95rem}@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes spinButtonPulse{0%,100%{box-shadow:0 8px 24px rgba(102,126,234,.5)}50%{box-shadow:0 8px 40px rgba(102,126,234,.8)}}@keyframes historyFadeIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}@media(max-width:767px){.wheel-container{max-width:350px}.btn-spin{width:80px;height:80px;font-size:1rem}.btn-spin i{font-size:1.5rem}.btn-spin span{font-size:.7rem}.result-winner i{font-size:2rem}.result-winner .winner-text{font-size:1.5rem}.template-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:576px){.template-grid{grid-template-columns:1fr}.wheel-container{max-width:300px}.btn-spin{width:70px;height:70px;font-size:.9rem}.btn-spin i{font-size:1.2rem}}