*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px;color:#333}.container{max-width:1400px;margin:0 auto;background:white;border-radius:20px;padding:40px;box-shadow:0 20px 60px rgba(0,0,0,.3)}h1{color:#1f2937;margin-bottom:10px;font-size:2.5em}.subtitle,h1{text-align:center}.subtitle{color:#6b7280;margin-bottom:30px;font-size:1.1em}h2{color:#374151;margin:30px 0 15px;font-size:1.5em;border-bottom:2px solid #e5e7eb;padding-bottom:10px}.main-content{display:grid;grid-template-columns:1fr 1fr;grid-gap:40px;gap:40px;margin-top:20px}@media (max-width:1024px){.main-content{grid-template-columns:1fr}.container{padding:20px}body{padding:10px}h1{font-size:1.8em}h2{font-size:1.3em}.input-section{padding-right:0}.action-buttons{flex-direction:column}.action-buttons button{width:100%}.team-input-group{gap:5px;padding:8px;flex-wrap:nowrap}.team-input-group input[type=text]{min-width:0;flex:1 1 auto;padding:6px 8px;font-size:.9em}.team-input-group input[type=number]{width:60px;padding:6px 8px;font-size:.9em}.team-input-group span{font-size:.9em}.remove-sport-btn,.remove-team-btn{padding:4px 8px;font-size:1.1em}.sport-header input[type=number]{width:70px}}.input-section{padding-right:10px;overflow-x:hidden}.input-section::-webkit-scrollbar{width:8px}.input-section::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.input-section::-webkit-scrollbar-thumb{background:#888;border-radius:10px}.input-section::-webkit-scrollbar-thumb:hover{background:#555}.sport-group{background:#f9fafb;border:2px solid #e5e7eb;border-radius:12px;padding:20px;margin-bottom:20px;transition:all .3s ease}.sport-group:hover{border-color:#9ca3af;box-shadow:0 4px 6px rgba(0,0,0,.1)}.sport-header{display:flex;align-items:center;gap:10px;margin-bottom:15px}.sport-header label{flex:1 1;font-weight:600;font-size:1.1em;color:#1f2937}.sport-header input[type=text]{flex:1 1}.sport-header input[type=number],.sport-header input[type=text]{padding:8px 12px;border:2px solid #d1d5db;border-radius:8px;font-size:1em}.sport-header input[type=number]{width:80px;text-align:center}.sport-header input:focus{outline:none;border-color:#667eea}.sport-header span{color:#6b7280;font-weight:500}.team-inputs{margin-top:15px}.team-input-group{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:10px;background:white;border-radius:8px;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}.team-input-group input[type=text]{flex:1 1}.team-input-group input[type=number],.team-input-group input[type=text]{padding:8px 12px;border:2px solid #e5e7eb;border-radius:6px;font-size:.95em}.team-input-group input[type=number]{width:70px;text-align:center}.team-input-group input:focus{outline:none;border-color:#667eea}.add-team-btn{margin-top:10px;padding:8px 16px;background:white;border:2px dashed #9ca3af;border-radius:6px;color:#6b7280;font-size:.9em;cursor:pointer;transition:all .2s ease}.add-team-btn:hover{border-color:#667eea;color:#667eea;background:#f3f4f6}.remove-sport-btn,.remove-team-btn{padding:4px 10px;background:#ef4444;border:none;border-radius:6px;color:white;font-size:1.2em;font-weight:700;cursor:pointer;transition:all .2s ease}.remove-sport-btn:hover,.remove-team-btn:hover{background:#dc2626;transform:scale(1.1)}.primary-btn{padding:12px 24px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:white;font-size:1em;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px rgba(0,0,0,.1)}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.15)}.primary-btn:active{transform:translateY(0)}.secondary-btn{padding:12px 24px;background:white;border:2px solid #d1d5db;border-radius:8px;color:#6b7280;font-size:1em;font-weight:600;cursor:pointer;transition:all .3s ease}.secondary-btn:hover{border-color:#9ca3af;background:#f9fafb}#add-sport-btn{width:100%;margin:10px 0 20px}.action-buttons{display:flex;gap:15px;margin-top:30px}.action-buttons button{flex:1 1}.generate-btn{background:linear-gradient(135deg,#10b981,#059669)}.total-display{margin-top:20px;padding:15px;background:#f0f9ff;border:2px solid #bfdbfe;border-radius:8px;text-align:center;font-size:1.2em;font-weight:600;color:#1e40af}#total-percent{color:#1e3a8a;font-size:1.3em}.warning{display:none;color:#dc2626;font-size:.9em;margin-top:5px;font-weight:400}.chart-section{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:#f9fafb;border-radius:12px;padding:30px;min-height:500px;overflow:hidden;position:relative}.chart-section>div{width:100%;max-width:600px;max-height:600px;position:relative}.chart-section canvas{max-width:100%!important;max-height:600px!important;height:auto!important}#fandomChart{max-width:100%;max-height:600px}.other-sport{position:relative}.other-sport .sport-header{background:white;padding:10px;border-radius:8px}.chart-section:empty:before{content:"Your chart will appear here";color:#9ca3af;font-size:1.2em}.chart-actions{display:flex;gap:15px;margin-top:20px;justify-content:center;flex-wrap:wrap}.chart-action-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;background:white;border:2px solid #667eea;border-radius:8px;color:#667eea;font-size:1em;font-weight:600;cursor:pointer;transition:all .3s ease}.chart-action-btn:hover{background:#667eea;color:white;transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.3)}.chart-action-btn svg{flex-shrink:0}.notification{position:fixed;bottom:30px;right:30px;background:#059669;color:white;padding:16px 24px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);font-weight:600;opacity:0;transform:translateY(20px);transition:all .3s ease;z-index:1000}.notification.show{opacity:1;transform:translateY(0)}.footer{text-align:center;padding:30px 20px;margin-top:40px;color:rgba(255,255,255,.9);font-size:.95em}.footer p{margin:0}.footer a{color:white;text-decoration:none;font-weight:600;transition:all .2s ease}.footer a:hover{color:rgba(255,255,255,.8);text-decoration:underline}