.mixes-page{padding:calc(var(--nav-h) + var(--sp-48)) var(--sp-24) var(--sp-64);min-height:80vh}.mixes-hero{text-align:center;margin-bottom:var(--sp-48);max-width:var(--max-w);margin-left:auto;margin-right:auto;animation:.6s both fadeUp;position:relative}.mixes-hero-title{font-family:var(--font-display);letter-spacing:-.03em;margin-bottom:var(--sp-8);background:linear-gradient(135deg, var(--text-0), var(--brand-light));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800}.mixes-hero-desc{font-size:var(--text-body);color:var(--text-1);max-width:480px;margin:0 auto}.mixes-hero-actions{margin-top:var(--sp-24)}.mixes-create-btn{align-items:center;gap:var(--sp-8);padding:var(--sp-12) var(--sp-32);background:var(--brand);color:#fff;border-radius:var(--r-md);font-family:var(--font-body);font-size:var(--text-body);cursor:pointer;border:none;font-weight:700;transition:background .2s,transform .15s,box-shadow .3s;display:inline-flex}.mixes-create-btn:hover{background:var(--brand-dim);box-shadow:0 8px 32px var(--brand-glow);transform:translateY(-2px)}.mixes-create-btn:active{transform:translateY(0)}.mixes-create-btn svg{width:18px;height:18px}.mixes-browse-section{transition:opacity .3s,transform .3s}.mixes-browse-section.hidden{display:none}.mixes-create-panel{max-width:720px;margin:0 auto;animation:.4s both fadeUp;display:none}.mixes-create-panel.active{display:block}.mixes-back-btn{align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-16);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);font-family:var(--font-body);font-size:var(--text-small);color:var(--text-1);cursor:pointer;margin-bottom:var(--sp-24);font-weight:600;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.mixes-back-btn:hover{background:var(--surface-2);border-color:var(--brand);color:var(--text-0)}.mixes-back-btn svg{width:16px;height:16px}.explore-carousel-section{margin-bottom:var(--sp-48);max-width:var(--max-w);margin-left:auto;margin-right:auto;animation:.6s .15s both fadeUp}.explore-carousel-header{margin-bottom:var(--sp-16);justify-content:space-between;align-items:center;display:flex}.explore-carousel-label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--yellow);text-transform:uppercase;letter-spacing:.08em;font-weight:600}.explore-carousel-nav{gap:var(--sp-8);display:flex}.explore-carousel-btn{border-radius:var(--r-sm);background:var(--surface-1);border:1px solid var(--border);cursor:pointer;justify-content:center;align-items:center;width:32px;height:32px;transition:background .15s,border-color .15s;display:flex}.explore-carousel-btn:hover{background:var(--surface-2);border-color:var(--brand)}.explore-carousel-btn:disabled{opacity:.3;cursor:default}.explore-carousel-btn svg{width:16px;height:16px;color:var(--text-1)}.explore-carousel-track{gap:var(--sp-16);scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:var(--sp-8);scroll-behavior:smooth;display:flex;overflow-x:auto}.explore-carousel-track::-webkit-scrollbar{display:none}.explore-carousel-wrapper{position:relative}.explore-carousel-wrapper:before,.explore-carousel-wrapper:after{content:"";z-index:2;pointer-events:none;width:40px;position:absolute;top:0;bottom:0}.explore-carousel-wrapper:before{background:linear-gradient(to right, var(--surface-0), transparent);left:0}.explore-carousel-wrapper:after{background:linear-gradient(to left, var(--surface-0), transparent);right:0}.explore-card{scroll-snap-align:start;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);width:220px;padding:var(--sp-16);cursor:pointer;color:inherit;flex-direction:column;flex-shrink:0;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s;display:flex}.explore-card:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:0 8px 32px #6a5be826}.explore-card-icon{border-radius:var(--r-md);object-fit:cover;border:1px solid var(--border);width:48px;height:48px;margin-bottom:var(--sp-12);background:linear-gradient(135deg,#6a5be826,#e8e5111a);flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden}.explore-card-icon img{object-fit:cover;width:100%;height:100%}.explore-card-icon svg{width:24px;height:24px;color:var(--brand)}.explore-card-name{font-family:var(--font-display);font-size:var(--text-small);margin-bottom:var(--sp-4);white-space:nowrap;text-overflow:ellipsis;font-weight:700;line-height:1.3;overflow:hidden}.explore-card-author{color:var(--text-1);margin-bottom:var(--sp-8);font-size:.75rem}.explore-card-author strong{color:var(--brand-light);font-weight:600}.explore-card-meta{margin-bottom:var(--sp-8);flex-wrap:wrap;gap:6px;display:flex}.explore-card-tag{background:var(--surface-2);color:var(--text-2);white-space:nowrap;border-radius:4px;padding:2px 8px;font-size:.625rem;font-weight:600}.explore-card-stats{gap:var(--sp-12);padding-top:var(--sp-8);margin-top:auto;display:flex}.explore-card-stat{color:var(--text-2);align-items:center;gap:4px;font-size:.6875rem;display:flex}.explore-card-stat svg{width:12px;height:12px}.explore-card-stat strong{color:var(--text-1);font-weight:600}.explore-card-badge{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--surface-0);background:var(--yellow);margin-bottom:var(--sp-8);border-radius:4px;padding:2px 8px;font-size:.5625rem;font-weight:700;display:inline-block}.explore-card-rating{align-items:center;gap:2px;display:flex}.explore-card-rating svg{width:11px;height:11px}.explore-card-rating .star-filled{color:var(--yellow);fill:var(--yellow)}.explore-card-rating .star-empty{color:var(--text-2);fill:none}.explore-card-rating-text{color:var(--text-2);margin-left:4px;font-size:.625rem}.explore-filters{align-items:center;gap:var(--sp-8);margin-bottom:var(--sp-24);flex-wrap:wrap;animation:.6s .3s both fadeUp;display:flex}.explore-search{background:var(--surface-1);border:1.5px solid var(--border);border-radius:var(--r-md);min-width:200px;font-family:var(--font-body);font-size:var(--text-small);color:var(--text-0);outline:none;flex:1;padding:10px 14px 10px 36px;transition:border-color .2s,box-shadow .2s}.explore-search:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}.explore-search::placeholder{color:var(--text-2)}.explore-search-wrapper{flex:1;min-width:200px;position:relative}.explore-search-wrapper svg{width:16px;height:16px;color:var(--text-2);pointer-events:none;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.explore-filter-select{background:var(--surface-1);border:1.5px solid var(--border);border-radius:var(--r-md);font-family:var(--font-body);font-size:var(--text-small);color:var(--text-0);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6A7E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;outline:none;padding:10px 32px 10px 14px;transition:border-color .2s}.explore-filter-select:focus{border-color:var(--brand)}.explore-filter-select option{background:var(--surface-1);color:var(--text-0)}.explore-grid-section{animation:.6s .35s both fadeUp}.explore-grid-label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--sp-16);font-weight:600}.explore-grid{gap:var(--sp-16);grid-template-columns:repeat(auto-fill,minmax(260px,1fr));display:grid}.explore-grid .explore-card{width:auto}.explore-load-more{margin-top:var(--sp-32);justify-content:center;display:flex}.explore-load-more-btn{background:var(--surface-1);border:1.5px solid var(--border);border-radius:var(--r-md);font-family:var(--font-body);font-size:var(--text-small);color:var(--text-1);cursor:pointer;padding:12px 32px;font-weight:600;transition:background .15s,border-color .15s,transform .15s}.explore-load-more-btn:hover{background:var(--surface-2);border-color:var(--brand);transform:translateY(-2px)}.explore-load-more-btn:disabled{opacity:.4;cursor:default;transform:none}.explore-scroll-sentinel{width:100%;height:1px}.explore-empty{text-align:center;padding:var(--sp-64) var(--sp-24)}.explore-empty-icon{border-radius:var(--r-lg);background:var(--surface-1);border:1px solid var(--border);width:56px;height:56px;margin:0 auto var(--sp-16);color:var(--text-2);justify-content:center;align-items:center;display:flex}.explore-empty-icon svg{width:28px;height:28px}.explore-empty-title{font-family:var(--font-display);font-size:var(--text-h3);margin-bottom:var(--sp-8);font-weight:700}.explore-empty-desc{font-size:var(--text-small);color:var(--text-1)}.explore-grid-loading{padding:var(--sp-48);justify-content:center;display:flex}.explore-spinner{border:3px solid var(--surface-2);border-top-color:var(--brand);border-radius:50%;width:28px;height:28px;animation:.7s linear infinite card-spin}.create-auth{align-items:center;gap:var(--sp-16);padding:var(--sp-48);flex-direction:column;animation:.6s .15s both fadeUp;display:flex}.create-auth-text{font-size:var(--text-small);color:var(--text-1);text-align:center;max-width:400px;line-height:1.6}.create-auth-btn{align-items:center;gap:var(--sp-8);padding:var(--sp-12) var(--sp-32);background:var(--brand);color:#fff;border-radius:var(--r-md);font-family:var(--font-body);font-size:var(--text-body);cursor:pointer;border:none;font-weight:700;transition:background .2s,transform .15s,box-shadow .3s;display:inline-flex}.create-auth-btn:hover{background:var(--brand-dim);box-shadow:0 8px 32px var(--brand-glow);transform:translateY(-2px)}.create-auth-btn:active{transform:translateY(0)}.create-auth-btn svg{width:20px;height:20px}.create-auth-notice{color:var(--text-2);text-align:center;max-width:440px;padding:var(--sp-12);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);font-size:.6875rem;line-height:1.6}.create-auth-notice strong{color:var(--text-1)}.create-user-badge{align-items:center;gap:var(--sp-12);padding:var(--sp-12) var(--sp-16);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:var(--sp-24);animation:.4s both fadeUp;display:flex}.create-user-avatar{border-radius:var(--r-sm);border:1px solid var(--border);background:linear-gradient(135deg,#6a5be826,#e8e5111a);width:40px;height:40px;overflow:hidden}.create-user-avatar img{object-fit:cover;width:100%;height:100%}.create-user-info{flex:1}.create-user-name{font-size:var(--text-small);color:var(--text-0);font-weight:600}.create-user-uuid{color:var(--text-2);font-size:.625rem;font-family:var(--font-mono)}.create-user-signout{font-size:var(--text-xs);color:var(--text-2);cursor:pointer;border-radius:var(--r-sm);background:0 0;border:none;padding:4px 8px;transition:color .15s,background .15s}.create-user-signout:hover{color:var(--text-0);background:var(--surface-2)}.create-form{animation:.6s .15s both fadeUp}.create-section{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-24);margin-bottom:var(--sp-24)}.create-section-title{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);margin-bottom:var(--sp-16);font-weight:600}.create-icon-picker{align-items:center;gap:var(--sp-16);margin-bottom:var(--sp-16);display:flex}.create-icon-preview{border-radius:var(--r-md);border:2px dashed var(--border);cursor:pointer;background:var(--surface-0);flex-shrink:0;justify-content:center;align-items:center;width:72px;height:72px;transition:border-color .2s,background .2s;display:flex;overflow:hidden}.create-icon-preview:hover{border-color:var(--brand);background:#6a5be80d}.create-icon-preview.has-image{border-style:solid}.create-icon-preview img{object-fit:cover;width:100%;height:100%}.create-icon-preview svg{width:28px;height:28px;color:var(--text-2)}.create-icon-text{font-size:var(--text-xs);color:var(--text-2)}.create-field{margin-bottom:var(--sp-16)}.create-field:last-child{margin-bottom:0}.create-label{font-size:var(--text-xs);color:var(--text-1);margin-bottom:var(--sp-4);font-weight:600;display:block}.create-input{background:var(--surface-0);border:1.5px solid var(--border);border-radius:var(--r-sm);width:100%;font-family:var(--font-body);font-size:var(--text-small);color:var(--text-0);box-sizing:border-box;outline:none;padding:10px 14px;transition:border-color .2s,box-shadow .2s}.create-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}.create-input::placeholder{color:var(--text-2)}textarea.create-input{resize:vertical;min-height:80px;line-height:1.5}.create-row{gap:var(--sp-16);display:flex}.create-row .create-field{flex:1}.create-select{background:var(--surface-0);border:1.5px solid var(--border);border-radius:var(--r-sm);width:100%;font-family:var(--font-body);font-size:var(--text-small);color:var(--text-0);cursor:pointer;appearance:none;box-sizing:border-box;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6A7E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;outline:none;padding:10px 32px 10px 14px;transition:border-color .2s}.create-select:focus{border-color:var(--brand)}.create-select option{background:var(--surface-1);color:var(--text-0)}.create-template-toggle{align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-12);border-radius:var(--r-sm);margin-bottom:var(--sp-16);background:#e8e51114;border:1px solid #e8e51133;display:flex}.create-template-toggle label{font-size:var(--text-xs);color:var(--yellow);cursor:pointer;font-weight:600}.create-template-toggle input[type=checkbox]{accent-color:var(--yellow);cursor:pointer;width:16px;height:16px}.create-mod-search-wrapper{margin-bottom:var(--sp-16);position:relative}.create-mod-search-wrapper svg{width:16px;height:16px;color:var(--text-2);pointer-events:none;position:absolute;top:12px;left:12px}.create-mod-search{background:var(--surface-0);border:1.5px solid var(--border);border-radius:var(--r-sm);width:100%;font-family:var(--font-body);font-size:var(--text-small);color:var(--text-0);box-sizing:border-box;outline:none;padding:10px 14px 10px 36px;transition:border-color .2s,box-shadow .2s}.create-mod-search:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}.create-mod-search::placeholder{color:var(--text-2)}.create-mod-results{border:1px solid var(--border);border-radius:var(--r-sm);max-height:260px;margin-bottom:var(--sp-16);overflow-y:auto}.create-mod-results:empty{display:none}.create-mod-result{align-items:center;gap:var(--sp-12);border-bottom:1px solid var(--border);padding:10px 14px;transition:background .12s;display:flex}.create-mod-result:last-child{border-bottom:none}.create-mod-result:hover{background:var(--surface-2)}.create-mod-result-icon{border-radius:var(--r-sm);object-fit:cover;background:var(--surface-2);flex-shrink:0;width:32px;height:32px}.create-mod-result-icon-fb{border-radius:var(--r-sm);width:32px;height:32px;font-family:var(--font-display);color:#fffc;flex-shrink:0;justify-content:center;align-items:center;font-size:.75rem;font-weight:700;display:flex}.create-mod-result-info{flex:1;min-width:0}.create-mod-result-name{font-size:var(--text-xs);color:var(--text-0);white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.create-mod-result-desc{color:var(--text-2);white-space:nowrap;text-overflow:ellipsis;font-size:.6875rem;overflow:hidden}.create-mod-add-btn{background:var(--brand);color:#fff;border-radius:var(--r-sm);font-family:var(--font-body);cursor:pointer;border:none;flex-shrink:0;padding:4px 12px;font-size:.6875rem;font-weight:600;transition:background .15s}.create-mod-add-btn:hover{background:var(--brand-dim)}.create-mod-add-btn.added{background:var(--surface-2);color:var(--text-2);cursor:default}.create-selected-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);margin-bottom:var(--sp-8);font-size:.625rem;font-weight:600}.create-selected-mods{border:1px solid var(--border);border-radius:var(--r-sm);flex-direction:column;display:flex;overflow:hidden}.create-selected-mods:empty{display:none}.create-selected-mod{align-items:center;gap:var(--sp-12);border-bottom:1px solid var(--border);padding:10px 14px;display:flex}.create-selected-mod:last-child{border-bottom:none}.create-selected-mod-icon{object-fit:cover;background:var(--surface-2);border-radius:6px;flex-shrink:0;width:28px;height:28px}.create-selected-mod-icon-fb{width:28px;height:28px;font-family:var(--font-display);color:#fffc;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;font-size:.625rem;font-weight:700;display:flex}.create-selected-mod-info{flex:1;min-width:0}.create-selected-mod-name{font-size:var(--text-xs);color:var(--text-0);font-weight:500}.create-selected-mod-ver{color:var(--text-2);font-size:.625rem}.create-selected-remove{cursor:pointer;width:24px;height:24px;color:var(--text-2);background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex}.create-selected-remove:hover{color:#ef4444;background:#ef44441a}.create-selected-remove svg{width:14px;height:14px}.create-mods-empty{text-align:center;padding:var(--sp-24);color:var(--text-2);font-size:var(--text-xs)}.create-mod-searching{justify-content:center;align-items:center;gap:var(--sp-8);padding:var(--sp-16);color:var(--text-2);font-size:var(--text-xs);display:flex}.create-mod-searching .mini-spinner{border:2px solid var(--surface-2);border-top-color:var(--brand);border-radius:50%;width:16px;height:16px;animation:.7s linear infinite card-spin}.create-submit-section{text-align:center;animation:.6s .3s both fadeUp}.create-submit-btn{align-items:center;gap:var(--sp-8);padding:var(--sp-16) var(--sp-48);background:var(--brand);color:#fff;border-radius:var(--r-md);font-family:var(--font-body);font-size:var(--text-body);cursor:pointer;border:none;font-weight:700;transition:background .2s,transform .15s,box-shadow .3s;display:inline-flex}.create-submit-btn:hover{background:var(--brand-dim);box-shadow:0 8px 32px var(--brand-glow);transform:translateY(-2px)}.create-submit-btn:active{transform:translateY(0)}.create-submit-btn:disabled{opacity:.4;cursor:default;transform:none}.create-submit-btn svg{width:20px;height:20px}.create-success{text-align:center;padding:var(--sp-48);animation:.5s both fadeUp}.create-success-icon{border-radius:var(--r-lg);width:64px;height:64px;margin:0 auto var(--sp-16);color:#1db954;background:#1eaa641a;border:1.5px solid #1eaa6433;justify-content:center;align-items:center;display:flex}.create-success-icon svg{width:32px;height:32px}.create-success-title{font-family:var(--font-display);font-size:var(--text-h3);margin-bottom:var(--sp-8);font-weight:700}.create-success-desc{font-size:var(--text-small);color:var(--text-1);margin-bottom:var(--sp-24)}.create-success-link{font-size:var(--text-small);color:var(--brand-light);text-decoration:underline}.create-error-msg{font-size:var(--text-xs);color:#ef4444;text-align:center;margin-top:var(--sp-12)}@media (width<=768px){.explore-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.explore-card{width:180px}}@media (width<=640px){.mixes-page{padding-top:calc(var(--nav-h) + var(--sp-32))}.create-row{flex-direction:column;gap:0}.create-section{padding:var(--sp-16)}}@media (width<=480px){.explore-filters{flex-direction:column}.explore-search-wrapper,.explore-filter-select{width:100%}.explore-grid{grid-template-columns:1fr}.explore-card{width:160px}}