:root{--bg-color:#0f1115;--blob-1:#1a1d23;--blob-2:#14161b;--blob-3:#1c2026;--glass-panel:#16191ed9;--glass-border:#ffffff0f;--glass-highlight:#ffffff0a;--text-main:#fff;--text-muted:#9ca3af;--divider-color:#ffffff14;--logo-grad-1:#fff;--logo-grad-2:#e5e7eb;--pill-bg:#ffffff08;--pill-border:#ffffff0d;--pill-hover:#ffffff14;--input-bg:#0003;--input-border:#374151;--input-focus:#3b82f6;--primary-color:#2563eb;--primary-hover:#1d4ed8;--primary-text:#fff;--primary-glow:#2563eb33;--accent-green:#10b981;--live-red:#ef4444;--sidebar-width:260px;--header-height:64px;--radius-sm:4px;--radius-md:6px;--radius-lg:12px}body.light-mode{--bg-color:#f8fafc;--blob-1:#f1f5f9;--blob-2:#e2e8f0;--blob-3:#fff;--glass-panel:#fffffff2;--glass-border:#0000000f;--text-main:#0f172a;--text-muted:#64748b;--input-bg:#fff;--input-border:#cbd5e1;--input-focus:#2563eb;--logo-grad-1:#0f172a;--logo-grad-2:#334155;--pill-bg:#fff;--pill-border:#e2e8f0;--pill-hover:#f1f5f9;--primary-color:#2563eb;--primary-hover:#1d4ed8;--primary-glow:#2563eb26}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;outline:none;margin:0;padding:0}body{background-color:var(--bg-color);width:100vw;height:100vh;color:var(--text-main);justify-content:center;align-items:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transition:background-color .5s,color .5s;display:flex;overflow:hidden}.background-container{z-index:0;opacity:0;width:100%;height:100%;animation:2s ease-out forwards fadeInBg;position:absolute;top:0;left:0;overflow:hidden}@keyframes fadeInBg{to{opacity:1}}.blob{opacity:1;filter:blur(100px);border-radius:50%;animation:30s ease-in-out infinite float;position:absolute}.blob-1{background:var(--blob-1);width:70vw;height:70vw;top:-20%;left:-10%}.blob-2{background:var(--blob-2);width:60vw;height:60vw;animation-delay:-5s;bottom:-20%;right:-10%}.blob-3{background:var(--blob-3);width:50vw;height:50vw;animation-delay:-10s;bottom:10%;left:30%}@keyframes float{0%,to{transform:translate(0)scale(1)}33%{transform:translate(20px,-30px)scale(1.05)}66%{transform:translate(-20px,20px)scale(.95)}}.noise-overlay{z-index:1;opacity:.02;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");position:absolute;inset:0}.app-window{z-index:10;background:var(--glass-panel);-webkit-backdrop-filter:blur(40px)saturate(120%);width:100%;height:100%;box-shadow:none;border:none;border-radius:0;flex-direction:column;transition:background .5s;display:flex;position:relative;overflow:hidden}@media (min-width:1600px){.app-window{border-radius:var(--radius-lg);border:1px solid var(--glass-border);width:1600px;height:90vh;animation:1s cubic-bezier(.2,.8,.2,1) forwards morphSequence;box-shadow:0 0 0 1px #00000008,0 25px 60px -15px #0000004d}}@keyframes morphSequence{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.startup-spinner{background:var(--bg-color);z-index:100;justify-content:center;align-items:center;width:100%;height:100%;animation:.5s ease-out 1s forwards fadeOutSpinner;display:flex;position:absolute;top:0;left:0}.spinner-circle{border:3px solid #0000;border-top-color:var(--primary-color);border-right-color:var(--primary-color);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spinLoad}@keyframes spinLoad{to{transform:rotate(360deg)}}@keyframes fadeOutSpinner{to{opacity:0;visibility:hidden}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.window-header{height:var(--header-height);border-bottom:1px solid var(--glass-border);z-index:50;background:var(--glass-panel);flex-shrink:0;justify-content:space-between;align-items:center;width:100%;padding:0 24px;display:flex}.header-left{align-items:center;gap:24px;display:flex}.app-logo{letter-spacing:-.02em;color:var(--text-main);cursor:pointer;align-items:center;gap:8px;font-size:20px;font-weight:800;text-decoration:none;display:flex}.logo-badge{background:var(--primary-color);color:var(--primary-text);border-radius:var(--radius-sm);padding:2px 6px;font-size:11px;font-weight:800;transform:translateY(-1px)}.header-right{align-items:center;gap:16px;display:flex}.btn-pill-primary{background:var(--primary-color);color:var(--primary-text);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;border:none;padding:9px 20px;font-size:13px;font-weight:600;transition:all .2s;box-shadow:0 2px 10px #0000000d}.btn-pill-primary:hover{background:var(--primary-hover)}.icon-btn{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;align-items:center;padding:8px;transition:all .2s;display:flex}.icon-btn:hover{color:var(--text-main);background:var(--pill-hover)}#burgerBtn{display:none}.alert-banner{color:#059669;z-index:30;background:#10b9811a;border-bottom:1px solid #10b98133;justify-content:center;align-items:center;gap:8px;width:100%;padding:12px;font-size:13px;font-weight:500;display:none;position:relative}body:not(.light-mode) .alert-banner{color:#6ee7b7}.alert-banner.visible{animation:.4s cubic-bezier(.2,.8,.2,1) slideDown;display:flex}.sidebar{width:var(--sidebar-width);background:var(--glass-panel);-webkit-backdrop-filter:blur(30px);border-right:1px solid var(--glass-border);z-index:40;flex-direction:column;padding:24px 16px;transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;position:absolute;top:0;bottom:0;left:0;transform:translate(-100%)}.sidebar.visible{transform:translate(0)}.user-mini-profile{background:var(--pill-bg);border:1px solid var(--pill-border);border-radius:var(--radius-md);align-items:center;gap:12px;margin-bottom:24px;padding:16px;transition:background .2s;display:flex}.user-mini-profile:hover{background:var(--pill-hover)}.user-avatar{border-radius:var(--radius-sm);background:var(--primary-color);color:#fff;place-items:center;width:40px;height:40px;font-weight:700;display:grid}.user-info{flex-direction:column;gap:2px;display:flex;overflow:hidden}.user-name{color:var(--text-main);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.user-balance{color:var(--accent-green);letter-spacing:-.5px;font-family:monospace;font-size:13px;font-weight:600}.sidebar-nav{flex-direction:column;flex:1;gap:4px;display:flex;overflow-y:auto}.sidebar-item{color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;align-items:center;gap:12px;padding:10px 12px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.sidebar-item:hover{background:var(--pill-hover);color:var(--text-main)}.sidebar-item.active{background:var(--pill-bg);color:var(--primary-color);font-weight:600;box-shadow:0 1px 2px #0000000d}.sidebar-item.active svg{stroke:var(--primary-color)}.sidebar-footer{border-top:1px solid var(--divider-color);margin-top:16px;padding-top:16px}.logout-item{color:var(--text-muted)}.logout-item:hover{color:#ef4444;background:#ef444414}.app-body{height:calc(100% - var(--header-height));width:100%;display:flex;position:relative}.click-overlay{z-index:30;cursor:pointer;width:100%;height:100%;display:none;position:absolute;top:0;left:0}.main-view{scroll-behavior:smooth;flex-direction:column;flex:1;padding:0;transition:padding-left .3s;display:flex;position:relative;overflow-y:auto}@media (min-width:1024px){.main-view.sidebar-open{padding-left:var(--sidebar-width)}}@media (max-width:1023px){.main-view.sidebar-open>:not(.click-overlay){filter:blur(4px);pointer-events:none;transition:filter .3s}.main-view.sidebar-open .click-overlay{display:block}}.view-section{width:100%;max-width:1200px;margin:0 auto;padding:32px 40px;animation:.4s fadeIn;display:none}.view-section.active{display:block}.view-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.view-title{color:var(--text-main);letter-spacing:-.02em;font-size:24px;font-weight:700}.profile-grid{grid-template-columns:1.5fr 1fr;gap:24px;display:grid}.filter-bar{scrollbar-width:none;gap:8px;margin-bottom:20px;padding-bottom:4px;display:flex;overflow-x:auto}.filter-bar::-webkit-scrollbar{display:none}.filter-pill{border-radius:var(--radius-sm);border:1px solid var(--pill-border);background:var(--pill-bg);color:var(--text-muted);cursor:pointer;white-space:nowrap;padding:6px 14px;font-size:12px;font-weight:500;transition:all .2s}.filter-pill:hover{background:var(--pill-hover)}.filter-pill.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.table-container{background:var(--pill-bg);border:1px solid var(--pill-border);border-radius:var(--radius-md);overflow-x:auto}.history-table{border-collapse:collapse;white-space:nowrap;width:100%;font-size:14px}.history-table th{text-align:left;color:var(--text-muted);border-bottom:1px solid var(--pill-border);text-transform:uppercase;letter-spacing:.5px;padding:14px 20px;font-size:12px;font-weight:600}.history-table td{color:var(--text-main);border-bottom:1px solid var(--pill-border);padding:16px 20px}.history-table tr:last-child td{border-bottom:none}.status-badge{border-radius:var(--radius-sm);text-transform:uppercase;padding:4px 8px;font-size:11px;font-weight:600}.status-success{color:#10b981;background:#10b9811a}.status-pending{color:#eab308;background:#eab3081a}.status-fail{color:#ef4444;background:#ef44441a}.status-completed{color:#10b981;background:#10b9811a}.games-grid{gap:16px;display:grid}.game-card{background:var(--pill-bg);border:1px solid var(--pill-border);border-radius:var(--radius-md);opacity:0;transition:border-color .2s,box-shadow .2s;animation:.6s cubic-bezier(.2,.8,.2,1) forwards fadeInUp;overflow:hidden;box-shadow:0 1px 3px #0000000d}.game-card:hover{border-color:var(--input-focus);box-shadow:0 4px 12px #0000000d}.gc-header{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--pill-border);background:#00000005;justify-content:space-between;padding:10px 20px;font-size:11px;font-weight:600;display:flex}.live-badge{color:var(--live-red);align-items:center;gap:6px;font-weight:700;display:flex}.live-badge:before{content:"";background:var(--live-red);border-radius:50%;width:6px;height:6px;animation:1s infinite pulse}.gc-matchup{justify-content:space-between;align-items:center;padding:24px;transition:padding .3s cubic-bezier(.4,0,.2,1);display:flex}.team{color:var(--text-main);align-items:center;gap:12px;font-size:15px;font-weight:600;transition:font-size .3s;display:flex}.team-logo{border-radius:var(--radius-sm);background:#fff;border:1px solid #0000000d;place-items:center;width:36px;height:36px;padding:4px;transition:width .3s,height .3s;display:grid;box-shadow:0 2px 4px #0000000d}.match-score{letter-spacing:-1px;color:var(--text-main);font-size:24px;font-weight:700;transition:font-size .3s}.match-time{color:var(--text-muted);text-align:center;margin-top:4px;font-size:12px;font-weight:500}.game-card.active-game .gc-matchup{padding:12px 24px}.game-card.active-game .team{font-size:13px}.game-card.active-game .team-logo{width:28px;height:28px}.game-card.active-game .match-score{font-size:18px}.gc-odds{background:#00000003;max-height:0;padding:0 24px;transition:max-height .3s;overflow:hidden}.gc-odds.expanded{border-top:1px solid var(--pill-border);max-height:500px;padding-bottom:24px}.odds-category{margin-bottom:20px}.cat-title{text-transform:uppercase;color:var(--text-muted);letter-spacing:.5px;margin-bottom:10px;font-size:11px;font-weight:600}.odds-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.odd-btn{background:var(--input-bg);border:1px solid var(--pill-border);border-radius:var(--radius-sm);cursor:pointer;text-align:center;flex-direction:column;align-items:center;gap:4px;padding:10px;transition:all .2s;display:flex}.odd-btn:hover{background:var(--pill-hover);border-color:var(--input-focus)}.odd-label{color:var(--text-muted);font-size:11px;font-weight:500}.odd-val{color:var(--text-main);font-size:13px;font-weight:700}.gc-footer{text-align:center;border-top:1px solid var(--pill-border);color:var(--primary-color);cursor:pointer;background:#00000003;padding:12px;font-size:12px;font-weight:600;transition:background .2s}.gc-footer:hover{background:#00000008}.input-group{flex-direction:column;gap:8px;display:flex}.input-label{color:var(--text-muted);font-size:13px;font-weight:600}.styled-input,.styled-select,.styled-textarea{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-sm);color:var(--text-main);outline:none;width:100%;padding:12px 16px;font-family:inherit;font-size:14px;transition:all .2s}.styled-textarea{resize:vertical;min-height:100px}.styled-input:focus,.styled-select:focus,.styled-textarea:focus{border-color:var(--input-focus);box-shadow:0 0 0 3px var(--primary-glow)}.action-btn{background:var(--primary-color);border-radius:var(--radius-sm);color:var(--primary-text);cursor:pointer;border:none;margin-top:8px;padding:14px;font-size:14px;font-weight:600;transition:all .2s}.action-btn:hover{background:var(--primary-hover)}.modern-form{background:var(--glass-panel);border:1px solid var(--glass-border);border-radius:var(--radius-md);flex-direction:column;gap:20px;width:100%;max-width:420px;padding:40px;display:flex;box-shadow:0 20px 50px #00000026}.form-title{color:var(--text-main);letter-spacing:-.5px;margin-bottom:4px;font-size:24px;font-weight:700}.drawer-overlay{z-index:55;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0003;width:100%;height:100%;display:none;position:absolute;top:0;left:0}.drawer-overlay.active{display:block}.right-drawer{background:var(--glass-panel);-webkit-backdrop-filter:blur(30px);border-left:1px solid var(--glass-border);z-index:60;flex-direction:column;width:420px;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:0;bottom:0;right:0;transform:translate(100%);box-shadow:-10px 0 30px #0000004d}.right-drawer.open{transform:translate(0)}.drawer-header{border-bottom:1px solid var(--pill-border);justify-content:space-between;align-items:center;padding:24px;display:flex}.drawer-title{color:var(--text-main);font-size:18px;font-weight:700}.drawer-content{flex:1;padding:24px;overflow-y:auto}.faq-item{border:1px solid var(--pill-border);border-radius:var(--radius-md);background:var(--pill-bg);margin-bottom:8px;overflow:hidden}.faq-header{cursor:pointer;color:var(--text-main);justify-content:space-between;align-items:center;padding:16px;font-size:14px;font-weight:600;display:flex}.faq-header:hover{background:var(--pill-hover)}.faq-body{height:0;color:var(--text-muted);padding:0 16px;font-size:13px;line-height:1.5;transition:height .3s;overflow:hidden}.faq-body.open{height:auto;padding-bottom:16px}.faq-icon{transition:transform .3s}.faq-item.open .faq-icon{transform:rotate(180deg)}.form-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:60;opacity:0;pointer-events:none;background:#0009;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s;display:flex;position:absolute;top:0;left:0}.form-overlay.active{opacity:1;pointer-events:auto}@media (max-width:1023px){.sidebar{width:280px}#burgerBtn{display:flex}.profile-grid{grid-template-columns:1fr}.view-section{padding:24px 20px}.games-grid{gap:12px}.odds-grid{grid-template-columns:repeat(2,1fr)}.gc-matchup{text-align:center;flex-direction:column;gap:12px}.team{justify-content:center;width:100%}.match-score{margin:8px 0}.right-drawer{border-left:none;width:100%;max-width:100%}}@media (max-width:480px){.app-logo{font-size:18px}.btn-pill-primary{padding:8px 14px;font-size:12px}.modern-form{background:var(--bg-color);border:none;border-radius:0;justify-content:center;height:100%;padding:24px}}
