.patterns-page{color:#fff;background:#0a0a0f;max-width:960px;min-height:100vh;margin:0 auto;padding:80px 20px 60px}.patterns-loading{color:#6b7280;justify-content:center;align-items:center;gap:10px;padding:60px 0;font-size:14px;display:flex}.patterns-spinner{border:2px solid #00e59b4d;border-top-color:#00e59b;border-radius:50%;width:20px;height:20px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.patterns-locked,.patterns-empty{text-align:center;color:#6b7280;flex-direction:column;justify-content:center;align-items:center;padding:60px 20px;display:flex}.patterns-search{color:#fff;box-sizing:border-box;background:#ffffff0a;border:1px solid #ffffff14;border-radius:10px;outline:none;width:100%;padding:10px 10px 10px 36px;font-size:13px;transition:border-color .2s}.patterns-search:focus{border-color:#a78bfa4d}.patterns-search::placeholder{color:#4b5563}.patterns-refresh-btn{color:#9ca3af;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-size:12px;font-weight:600;transition:all .2s;display:inline-flex}.patterns-refresh-btn:hover{color:#fff;background:#ffffff14}.patterns-refresh-btn:disabled{opacity:.5;cursor:not-allowed}.patterns-paywall{position:relative}.patterns-paywall-header{text-align:center;flex-direction:column;align-items:center;gap:8px;padding:20px 0 30px;display:flex}.patterns-preview-blur{filter:blur(6px);opacity:.4;pointer-events:none;-webkit-user-select:none;user-select:none;flex-direction:column;gap:8px;display:flex}.patterns-preview-row{background:linear-gradient(135deg,#a78bfa0a 0%,#ffffff05 100%);border:1px solid #ffffff0f;border-radius:10px;height:60px}.patterns-preview-row:first-child{background:linear-gradient(135deg,#fb923c0f 0%,#ffffff05 100%);border-color:#fb923c26}.patterns-preview-row:nth-child(3){background:linear-gradient(135deg,#fbbf240d 0%,#ffffff05 100%);border-color:#fbbf241f}.patterns-paywall-overlay{z-index:10;justify-content:center;display:flex;position:absolute;top:80px;left:0;right:0}.patterns-paywall-card{text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0a0a0ff2;border:1px solid #ffffff14;border-radius:16px;width:100%;max-width:400px;padding:32px 28px;box-shadow:0 20px 60px #00000080}.patterns-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;display:flex}.patterns-title{color:#fff;align-items:center;gap:8px;margin-bottom:4px;font-size:24px;font-weight:800;display:flex}.patterns-subtitle{color:#6b7280;font-size:13px}.patterns-summary{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;display:grid}.patterns-summary-card{text-align:center;border-radius:10px;padding:14px}.patterns-summary-card .value{font-size:28px;font-weight:800}.patterns-summary-card .label{color:#6b7280;text-transform:uppercase;letter-spacing:.05em;font-size:11px}.patterns-controls{flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:16px;display:flex}.patterns-filter-btn{cursor:pointer;white-space:nowrap;border:none;border-radius:8px;padding:6px 14px;font-size:12px;font-weight:600}.patterns-sort-group{gap:4px;margin-left:auto;display:flex}.patterns-sort-btn{cursor:pointer;border:none;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:600}.patterns-list{flex-direction:column;gap:6px;display:flex}.pattern-row{border-radius:10px;transition:border-color .2s;overflow:hidden}.pattern-row-btn{cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:12px 14px;display:flex}.pattern-team-info{flex-shrink:0;align-items:center;gap:10px;min-width:130px;display:flex}.pattern-team-logo{flex-shrink:0;width:28px;height:28px}.pattern-team-name{color:#fff;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;font-weight:700;display:flex}.pattern-team-division{color:#4b5563;font-size:10px}.pattern-today-badge{color:#00e59b;white-space:nowrap;background:#00e59b26;border-radius:4px;padding:1px 6px;font-size:9px;font-weight:700}.pattern-dots{flex-wrap:wrap;flex:1;justify-content:center;align-items:center;gap:3px;display:flex;overflow:hidden}.pattern-dot{border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:10px;font-weight:800;transition:all .3s;display:flex;position:relative}.pattern-dot.dimmed{opacity:.3;transform:scale(.85)}.pattern-dot.streak{z-index:1;transform:scale(1.1)}.pattern-dot.streak.win{animation:2s ease-in-out infinite streakPulse;box-shadow:0 0 6px #00e59b66,0 0 16px #00e59b26,inset 0 0 4px #00e59b1a}.pattern-dot.streak.loss{animation:2s ease-in-out infinite streakPulse;box-shadow:0 0 6px #ef444466,0 0 16px #ef444426,inset 0 0 4px #ef44441a}.pattern-streak-connector{opacity:.6;border-radius:1px;flex-shrink:0;width:6px;height:2px}.pattern-streak-divider{background:#ffffff1a;border-radius:1px;flex-shrink:0;width:2px;height:18px;margin:0 2px}.pattern-break-dot{z-index:2;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:10px;font-weight:900;animation:1.5s ease-in-out infinite breakPulse;display:flex;position:relative}.pattern-break-dot.break-mode{animation:1.2s ease-in-out infinite breakGlow}.pattern-break-wrapper{flex-direction:column;flex-shrink:0;align-items:center;gap:2px;display:flex}.pattern-break-label{text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;font-size:7px;font-weight:800}.pattern-break-arrow{flex-shrink:0;font-size:10px;animation:1.5s ease-in-out infinite arrowPulse}@keyframes streakPulse{0%,to{transform:scale(1.1)}50%{transform:scale(1.15)}}@keyframes breakPulse{0%,to{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}@keyframes breakGlow{0%,to{transform:scale(1);box-shadow:0 0 8px #fb923c4d,0 0 20px #fb923c1a}50%{transform:scale(1.15);box-shadow:0 0 14px #fb923c80,0 0 30px #fb923c33}}@keyframes arrowPulse{0%,to{opacity:.5;transform:translate(0)}50%{opacity:1;transform:translate(2px)}}.pattern-metrics{flex-shrink:0;justify-content:flex-end;align-items:center;gap:10px;min-width:100px;display:flex}.pattern-alt-score{text-align:center}.pattern-alt-score .value{font-size:14px;font-weight:800}.pattern-alt-score .label{color:#4b5563;text-transform:uppercase;font-size:8px}.pattern-streak-badge{border-radius:6px;align-items:center;gap:4px;padding:4px 8px;display:flex}.pattern-streak-badge span{font-size:11px;font-weight:700}.pattern-prediction{flex-direction:column;align-items:center;gap:2px;display:flex}.pattern-prediction-box{border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;font-size:10px;font-weight:800;display:flex}.pattern-prediction-label{text-transform:uppercase;letter-spacing:.05em;font-size:7px;font-weight:800}.pattern-expanded{border-top:1px solid #ffffff0a;padding:0 14px 14px}.pattern-games-grid{flex-wrap:wrap;gap:6px;padding-top:10px;display:flex}.pattern-game-card{background:#ffffff08;border-radius:8px;flex:1;min-width:120px;padding:8px 10px}.pattern-game-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.pattern-game-result{font-size:11px;font-weight:700}.pattern-game-date{color:#4b5563;font-size:10px}.pattern-game-opponent{color:#9ca3af;font-size:11px}.pattern-game-score{color:#fff;font-size:13px;font-weight:700}@media (max-width:768px){.patterns-page{padding:80px 12px 60px}.patterns-title{font-size:18px}.patterns-summary{grid-template-columns:repeat(3,1fr);gap:6px}.patterns-summary-card{padding:10px 6px}.patterns-summary-card .value{font-size:22px}.patterns-summary-card .label{font-size:9px}.pattern-row-btn{flex-wrap:wrap;gap:8px;padding:10px 12px}.pattern-team-info{min-width:unset;flex:1}.pattern-dots{flex-wrap:wrap;order:3;justify-content:flex-start;gap:3px;width:100%}.pattern-dot{width:22px;height:22px;font-size:9px}.pattern-metrics{min-width:unset;gap:8px}.patterns-sort-group{width:100%;margin-left:0}.patterns-filter-btn{padding:6px 10px;font-size:11px}.pattern-game-card{flex:0 0 calc(50% - 3px);min-width:calc(50% - 3px)}.patterns-paywall-card{padding:24px 20px}}@media (max-width:480px){.patterns-title{font-size:16px}.patterns-summary-card .value{font-size:20px}.pattern-dot{border-radius:4px;width:20px;height:20px;font-size:8px}.pattern-team-logo{width:24px;height:24px}.pattern-team-name,.pattern-alt-score .value{font-size:12px}.pattern-streak-badge{padding:3px 6px}.pattern-streak-badge span{font-size:10px}.pattern-prediction-box{width:24px;height:24px;font-size:9px}.pattern-game-card{flex:0 0 100%;min-width:100%}.pattern-expanded{padding:0 10px 10px}.patterns-controls{gap:4px}.patterns-filter-btn{padding:5px 8px;font-size:10px}.patterns-sort-btn{padding:3px 8px;font-size:10px}}