:root{--bg-primary:#0b0f17;--bg-secondary:#121927;--bg-tertiary:#1a2130;--accent-orange:#e9762b;--accent-orange-hover:#ff8533;--text-primary:#fff;--text-secondary:#ffffffb3;--text-muted:#ffffff80;--border-color:#ffffff1a;--success-green:#22c55e;--error-red:#ef4444;--warning-yellow:#eab308}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-primary);max-width:100vw;color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--accent-orange);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-orange-hover)}.loading-overlay{z-index:9999;background:#000c;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.loading-spinner{text-align:center;color:var(--text-primary)}.spinner{border:3px solid var(--bg-tertiary);border-top-color:var(--accent-orange);border-radius:50%;width:50px;height:50px;margin:0 auto 10px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.toast-container{z-index:10000;flex-direction:column;gap:10px;display:flex;position:fixed;top:20px;right:20px}.toast{border-radius:8px;justify-content:space-between;align-items:center;gap:12px;min-width:250px;max-width:400px;padding:12px 16px;animation:.3s slideIn;display:flex}.toast button{color:inherit;opacity:.7;background:0 0;border:none;font-size:18px}.toast button:hover{opacity:1}.toast-success{background:var(--success-green);color:#fff}.toast-error{background:var(--error-red);color:#fff}.toast-warning{background:var(--warning-yellow);color:#000}.toast-info{background:var(--accent-orange);color:#fff}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.offline-banner{background:var(--error-red);color:#fff;text-align:center;z-index:9998;padding:10px;position:fixed;bottom:0;left:0;right:0}.connection-banner{z-index:9999;color:#fff;justify-content:center;align-items:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:500;animation:.3s ease-out bannerSlideDown;display:flex;position:fixed;top:0;left:0;right:0}.connection-banner--offline,.connection-banner--disconnected{background:#dc2626}.connection-banner--reconnecting{background:#d97706}.connection-banner--restored{background:#16a34a;animation:.3s ease-out bannerSlideDown,.5s ease-in 2.5s forwards bannerFadeOut}.connection-banner__dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.connection-banner__dot--red{background:#fca5a5}.connection-banner__dot--amber{background:#fde68a}.connection-banner__dot--green{background:#86efac}.connection-banner__dot--pulse{animation:1.5s ease-in-out infinite dotPulse}@keyframes bannerSlideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes bannerFadeOut{0%{opacity:1}to{opacity:0}}@keyframes dotPulse{0%,to{opacity:1}50%{opacity:.3}}.fixtures-stale-overlay{opacity:.5;pointer-events:none;transition:opacity .3s}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.p-2{padding:.5rem}.p-4{padding:1rem}.rounded{border-radius:.5rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.font-bold{font-weight:700}.text-muted{color:var(--text-muted)}.main-container{min-height:100vh;display:flex}.sidebar-left{background:var(--bg-secondary);border-right:1px solid var(--border-color);flex-shrink:0;width:250px}.main-content{flex-direction:column;flex:1;min-width:0;display:flex}.sidebar-right{background:var(--bg-secondary);border-left:1px solid var(--border-color);flex-shrink:0;width:300px}@media (max-width:1000px){.sidebar-left,.sidebar-right{display:none}}@media (max-width:768px){.toast-container{top:10px;left:10px;right:10px}.toast{min-width:auto;max-width:none;padding:10px 12px;font-size:13px}.btn{padding:10px 16px;font-size:14px}input[type=text],input[type=email],input[type=password],input[type=number]{padding:12px 14px;font-size:16px}}@media (max-width:480px){.toast-container{top:8px;left:8px;right:8px}.toast{padding:10px;font-size:12px}.spinner{width:40px;height:40px}}input,select,textarea{font-family:inherit;font-size:inherit}input[type=text],input[type=email],input[type=password],input[type=number]{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:6px;width:100%;padding:10px 12px}input:focus,select:focus,textarea:focus{border-color:var(--accent-orange);outline:none}.btn{border:none;border-radius:6px;padding:10px 20px;font-weight:600;transition:all .2s}.btn-primary{background:var(--accent-orange);color:#fff}.btn-primary:hover{background:var(--accent-orange-hover)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-secondary)}.oddsUp{animation:.3s ease-out oddsFlashUp;background-color:#22c55e4d!important;border-color:#22c55e99!important}.oddsDown{animation:.3s ease-out oddsFlashDown;background-color:#ef44444d!important;border-color:#ef444499!important}@keyframes oddsFlashUp{0%{background-color:#22c55e99;transform:scale(1.02)}to{background-color:#22c55e4d;transform:scale(1)}}@keyframes oddsFlashDown{0%{background-color:#ef444499;transform:scale(1.02)}to{background-color:#ef44444d;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (max-width:768px){.login-container{padding:16px!important}.login-card{border-radius:10px!important;padding:32px 24px!important}.login-title{font-size:26px!important}}@media (max-width:480px){.login-container{align-items:flex-start!important;padding:30px 12px 12px!important}.login-card{border-radius:8px!important;padding:24px 18px!important}.login-title{margin-bottom:16px!important;font-size:22px!important}.login-input{padding:14px 12px!important;font-size:16px!important}.login-button{padding:16px!important;font-size:16px!important}.login-label{font-size:13px!important}}@media (max-width:360px){.login-container{padding:20px 8px 8px!important}.login-card{padding:20px 14px!important}.login-title{font-size:20px!important}}
