.homepage-container{margin:0 auto;max-width:1400px;padding:var(--spacing-sm)}.homepage-actions{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:center;margin-bottom:var(--spacing-md)}.homepage-actions .btn{align-items:center;border:none;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;flex:1 1 auto;font-size:var(--font-size-sm);font-weight:600;gap:8px;justify-content:center;max-width:100%;min-width:140px;padding:12px 20px;text-decoration:none;transition:all .2s ease}.homepage-actions .btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.homepage-actions .btn-primary:hover{box-shadow:0 4px 12px rgba(102,126,234,.4);transform:translateY(-2px)}.homepage-actions .btn-warning{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.homepage-actions .btn-warning:hover{box-shadow:0 4px 12px rgba(245,87,108,.4);transform:translateY(-2px)}.homepage-actions .btn-success{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}.homepage-actions .btn-success:hover{box-shadow:0 4px 12px rgba(79,172,254,.4);transform:translateY(-2px)}.homepage-tabs{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:visible}.homepage-tabs-dropdown{display:block;margin-bottom:var(--spacing-sm);position:relative}.tab-dropdown-button{align-items:center;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);color:var(--color-text-primary);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:600;gap:10px;justify-content:space-between;padding:16px 20px;transition:all var(--transition-base);width:100%}.tab-dropdown-button:hover{background:var(--color-hover);border-color:var(--color-primary)}.tab-dropdown-button i:first-child{color:var(--color-primary)}.tab-dropdown-button i:last-child{font-size:var(--font-size-xs);transition:transform var(--transition-base)}.tab-dropdown-menu{animation:dropdownSlide .2s ease-out;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);left:0;overflow:hidden;position:absolute;right:0;top:calc(100% + 8px);z-index:1000}@keyframes dropdownSlide{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tab-dropdown-item{align-items:center;background:transparent;border:none;border-bottom:1px solid var(--color-border);color:var(--color-text-primary);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:500;gap:12px;padding:14px 20px;text-align:left;transition:all var(--transition-base);width:100%}.tab-dropdown-item:last-child{border-bottom:none}.tab-dropdown-item i{color:var(--color-text-secondary);text-align:center;width:20px}.tab-dropdown-item:hover{background:var(--color-hover);padding-left:24px}.tab-dropdown-item.active{background:var(--color-primary);color:#fff}.tab-dropdown-item.active i{color:#fff}.homepage-tabs-nav{background:var(--color-surface-alt);border-bottom:2px solid var(--color-border-light);display:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.homepage-tabs-nav::-webkit-scrollbar{display:none}.tab-button{background:transparent;border:none;color:var(--color-text-secondary);cursor:pointer;flex:1 1 auto;font-size:var(--font-size-xs);font-weight:500;min-width:100px;padding:12px 10px;position:relative;text-align:center;transition:all var(--transition-base);white-space:nowrap}.tab-button:hover{background:rgba(0,0,0,.05);color:var(--color-text-primary)}.tab-button.active{color:var(--color-primary);font-weight:600}.tab-button.active:after{background:var(--color-primary);bottom:-2px;content:"";height:2px;left:0;position:absolute;right:0}.tab-content{min-height:300px;padding:var(--spacing-md)}.tab-pane{display:none}.tab-pane.active{animation:fadeIn var(--transition-base);display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.homepage-search{margin-bottom:var(--spacing-lg);position:relative}.homepage-search input{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--font-size-base);padding:var(--spacing-md) var(--spacing-xl);transition:all var(--transition-base);width:100%}.homepage-search input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(192,0,0,.1);outline:none}.homepage-search input::placeholder{color:var(--color-text-tertiary);opacity:.7}.homepage-search .search-icon{color:var(--color-text-tertiary);left:var(--spacing-md);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.songs-list{display:grid;gap:var(--spacing-sm);grid-template-columns:1fr}.song-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;padding:var(--spacing-sm);position:relative;transition:all var(--transition-base)}.song-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.song-card:active{transform:translateY(0)}.song-card-header{align-items:flex-start;display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-sm)}.song-card-favorite{cursor:pointer;flex-shrink:0;font-size:var(--font-size-lg);transition:all var(--transition-fast)}.song-card-favorite.active{color:var(--color-favorite)}.song-card-favorite.inactive{color:var(--color-favorite-disabled)}.song-card-favorite:hover{transform:scale(1.2)}.song-card-content{flex:1;min-width:0}.song-card-title{color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--spacing-xs);word-wrap:break-word}.song-card-author{color:var(--color-text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--spacing-sm)}.song-card-footer{align-items:center;border-top:1px solid var(--color-border-light);display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:space-between;margin-top:var(--spacing-md);padding-top:var(--spacing-md)}.song-card-stats{color:var(--color-text-tertiary);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-md)}.song-card-stat{align-items:center;display:flex;gap:var(--spacing-xs)}.song-card-stat i{font-size:var(--font-size-xs)}.song-card-rating{align-items:center;display:flex;font-size:var(--font-size-sm);gap:var(--spacing-xs)}.song-card-rating.no-rating{color:var(--color-text-tertiary)}.song-card-actions{display:flex;gap:var(--spacing-sm)}.song-card-action{background:transparent;border:none;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;font-size:var(--font-size-sm);padding:var(--spacing-xs) var(--spacing-md);transition:all var(--transition-fast)}.song-card-action:hover{background:var(--color-surface-alt);color:var(--color-primary)}.empty-state{color:var(--color-text-tertiary);padding:var(--spacing-xl) var(--spacing-md);text-align:center}.empty-state i{font-size:3rem;margin-bottom:var(--spacing-md);opacity:.5}.empty-state p{font-size:var(--font-size-lg);margin-bottom:var(--spacing-sm)}.homepage-pagination{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:center;margin-top:var(--spacing-lg)}.pagination-button{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary);cursor:pointer;font-size:var(--font-size-sm);padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-fast)}.pagination-button:hover:not(:disabled){background:var(--color-surface-alt);border-color:var(--color-primary);color:var(--color-primary)}.pagination-button:disabled{cursor:not-allowed;opacity:.5}.pagination-button.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.table-component-wrapper{position:relative}.loading-overlay{background:var(--color-surface);inset:0;min-height:80px;opacity:.7;position:absolute;z-index:10}.loading-overlay,.loading-spinner{align-items:center;display:flex;justify-content:center}.loading-spinner{padding:var(--spacing-xl)}.spinner{animation:spin .8s linear infinite;border:3px solid var(--color-border-light);border-radius:50%;border-top-color:var(--color-primary);height:40px;width:40px}@keyframes spin{to{transform:rotate(1turn)}}@media only screen and (min-width:768px){.homepage-container{padding:var(--spacing-md)}.homepage-actions{justify-content:flex-start;margin-bottom:var(--spacing-lg)}.homepage-actions .btn{flex:0 1 auto;font-size:var(--font-size-base);max-width:200px}.homepage-tabs-dropdown{display:none}.homepage-tabs-nav{display:flex}.tab-button{font-size:var(--font-size-sm);min-width:120px;padding:var(--spacing-md) var(--spacing-md)}.tab-content{min-height:400px;padding:var(--spacing-lg)}.songs-list{gap:var(--spacing-md);grid-template-columns:repeat(2,1fr)}.song-card{padding:var(--spacing-md)}}@media only screen and (min-width:1024px){.homepage-container{padding:var(--spacing-lg)}.tab-button{font-size:var(--font-size-base);padding:var(--spacing-md) var(--spacing-lg)}.songs-list{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:1400px){.songs-list{grid-template-columns:repeat(4,1fr)}}.data-table-container,.homepage-tables,.table-column{display:none}