.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);height:var(--size-button-height-md);font-family:var(--font-family-sans);font-size:var(--font-size-body);font-weight:var(--font-weight-medium);line-height:1;text-align:center;text-decoration:none;white-space:nowrap;border-radius:var(--radius-md);border:2px solid transparent;cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-bg-primary),0 0 0 5px var(--color-primary)}.btn-sm{height:var(--size-button-height-sm);padding:var(--space-1) var(--space-3);font-size:var(--font-size-body-sm)}.btn-lg{height:var(--size-button-height-lg);padding:var(--space-3) var(--space-6);font-size:var(--font-size-h5)}.btn-primary{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-light);border-color:var(--color-primary-light);box-shadow:var(--shadow-md)}.btn-secondary{background-color:transparent;color:var(--color-text-primary);border-color:var(--color-border)}.btn-secondary:hover:not(:disabled){background-color:var(--color-bg-hover);border-color:var(--color-border-light)}.btn-accent{background-color:var(--color-accent);color:#fff;border-color:var(--color-accent)}.btn-accent:hover:not(:disabled){background-color:var(--color-accent-light);border-color:var(--color-accent-light);box-shadow:var(--shadow-md)}.btn-danger{background-color:var(--color-danger);color:#fff;border-color:var(--color-danger)}.btn-danger:hover:not(:disabled){background-color:var(--color-danger-light);border-color:var(--color-danger-light);box-shadow:var(--shadow-md)}.btn-success{background-color:var(--color-success);color:#fff;border-color:var(--color-success)}.btn-success:hover:not(:disabled){background-color:var(--color-success-light);border-color:var(--color-success-light);box-shadow:var(--shadow-md)}.btn-ghost{background-color:transparent;color:var(--color-text-primary);border-color:transparent}.btn-ghost:hover:not(:disabled){background-color:var(--color-bg-hover)}.btn-block{width:100%}.btn-icon{padding:0;width:var(--size-button-height-md);aspect-ratio:1}.btn-icon.btn-sm{width:var(--size-button-height-sm)}.btn-icon.btn-lg{width:var(--size-button-height-lg)}.card{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast)}.card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border-light)}.card-interactive{cursor:pointer}.card-interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.card-interactive:active{transform:translateY(0)}.card-header{padding:var(--space-4);border-bottom:1px solid var(--color-border)}.card-header h3{margin:0;font-size:var(--font-size-h4);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.card-body{padding:var(--space-4)}.card-footer{padding:var(--space-4);border-top:1px solid var(--color-border);background-color:var(--color-bg-tertiary)}.song-card{position:relative;background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.song-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}.song-card-image{position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden;background:linear-gradient(135deg,var(--color-primary),var(--color-accent))}.song-card-image img{width:100%;height:100%;object-fit:cover}.song-card-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0006;opacity:0;transition:opacity var(--transition-fast)}.song-card:hover .song-card-overlay{opacity:1}.song-card-play-btn{width:64px;height:64px;border-radius:var(--radius-full);background-color:var(--color-accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform var(--transition-fast)}.song-card:hover .song-card-play-btn{transform:scale(1.1)}.song-card-info{padding:var(--space-4)}.song-card-title{font-size:var(--font-size-h5);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0 0 var(--space-2) 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-card-artist{font-size:var(--font-size-body-sm);color:var(--color-text-secondary);margin:0 0 var(--space-3) 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-card-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);font-size:var(--font-size-body-xs);color:var(--color-text-tertiary)}.song-card-stats{display:flex;align-items:center;gap:var(--space-3)}.song-card-stat{display:flex;align-items:center;gap:var(--space-1)}.input{width:100%;height:var(--size-input-height);padding:0 var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-body);color:var(--color-text-primary);background-color:var(--color-bg-secondary);border:2px solid var(--color-border);border-radius:var(--radius-md);outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input::placeholder{color:var(--color-text-tertiary)}.input:hover:not(:disabled){border-color:var(--color-border-light)}.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #3b82f61a}.input:disabled{opacity:.5;cursor:not-allowed;background-color:var(--color-bg-tertiary)}.input.input-error{border-color:var(--color-danger)}.input.input-error:focus{box-shadow:0 0 0 3px #ef44441a}.textarea{min-height:120px;padding:var(--space-3) var(--space-4);resize:vertical}.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3) center;padding-right:var(--space-8);cursor:pointer}.form-group{margin-bottom:var(--space-4)}.form-label{display:block;margin-bottom:var(--space-2);font-size:var(--font-size-body-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.form-label-required:after{content:"*";margin-left:var(--space-1);color:var(--color-danger)}.form-help{display:block;margin-top:var(--space-1);font-size:var(--font-size-body-xs);color:var(--color-text-tertiary)}.form-error{display:block;margin-top:var(--space-1);font-size:var(--font-size-body-xs);color:var(--color-danger)}.input-search-wrapper{position:relative}.input-search{padding-left:var(--space-10)}.input-search-icon{position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);width:var(--size-icon-md);height:var(--size-icon-md);color:var(--color-text-tertiary);pointer-events:none}.nav{display:flex;gap:var(--space-2)}.nav-vertical{flex-direction:column}.nav-horizontal{flex-direction:row}.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);color:var(--color-text-secondary);text-decoration:none;border-radius:var(--radius-md);font-weight:var(--font-weight-medium);transition:background-color var(--transition-fast),color var(--transition-fast);cursor:pointer}.nav-item:hover{background-color:var(--color-bg-hover);color:var(--color-text-primary)}.nav-item.active{background-color:var(--color-primary);color:#fff}.nav-item-icon{width:var(--size-icon-md);height:var(--size-icon-md);flex-shrink:0}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-sticky);display:flex;background-color:var(--color-bg-secondary);border-top:1px solid var(--color-border);box-shadow:var(--shadow-lg);padding:var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom))}.bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-2);color:var(--color-text-tertiary);text-decoration:none;font-size:var(--font-size-body-xs);transition:color var(--transition-fast);-webkit-tap-highlight-color:transparent}.bottom-nav-item:active{transform:scale(.95)}.bottom-nav-item.active{color:var(--color-primary)}.bottom-nav-icon{width:var(--size-icon-md);height:var(--size-icon-md)}.sidebar-nav{position:fixed;top:0;left:0;bottom:0;width:260px;z-index:var(--z-fixed);background-color:var(--color-bg-secondary);border-right:1px solid var(--color-border);padding:var(--space-6) var(--space-4);overflow-y:auto}.modal-overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-4);background-color:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{position:relative;width:100%;max-width:600px;max-height:90vh;background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-2xl);overflow:hidden;animation:slideUp var(--transition-base)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-6);border-bottom:1px solid var(--color-border)}.modal-title{margin:0;font-size:var(--font-size-h3);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.modal-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--color-text-secondary);font-size:1.5rem;cursor:pointer;border-radius:var(--radius-md);transition:background-color var(--transition-fast),color var(--transition-fast)}.modal-close:hover{background-color:var(--color-bg-hover);color:var(--color-text-primary)}.modal-body{padding:var(--space-6);overflow-y:auto;max-height:calc(90vh - 160px)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-6);border-top:1px solid var(--color-border)}.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);font-size:var(--font-size-body-xs);font-weight:var(--font-weight-medium);line-height:1;border-radius:var(--radius-full);white-space:nowrap}.badge-primary{background-color:var(--color-primary);color:#fff}.badge-success{background-color:var(--color-success);color:#fff}.badge-warning{background-color:var(--color-warning);color:#fff}.badge-danger{background-color:var(--color-danger);color:#fff}.badge-neutral{background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:var(--z-notification);display:flex;flex-direction:column;gap:var(--space-3);max-width:420px}.toast{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);animation:slideInRight var(--transition-base)}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast-success{border-left:4px solid var(--color-success)}.toast-error{border-left:4px solid var(--color-danger)}.toast-warning{border-left:4px solid var(--color-warning)}.toast-info{border-left:4px solid var(--color-primary)}.toast-icon{flex-shrink:0;width:var(--size-icon-md);height:var(--size-icon-md)}.toast-content{flex:1}.toast-title{margin:0 0 var(--space-1) 0;font-size:var(--font-size-body-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.toast-message{margin:0;font-size:var(--font-size-body-xs);color:var(--color-text-secondary)}.skeleton{background:linear-gradient(90deg,var(--color-bg-secondary) 0%,var(--color-bg-tertiary) 50%,var(--color-bg-secondary) 100%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-text{height:1em;margin-bottom:var(--space-2)}.skeleton-heading{height:2em;margin-bottom:var(--space-3);width:60%}.skeleton-card{height:200px;border-radius:var(--radius-lg)}.song-skeleton{background-color:var(--color-bg-secondary);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.song-skeleton-image{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,var(--color-bg-tertiary) 0%,var(--color-border) 50%,var(--color-bg-tertiary) 100%);background-size:200% 200%;animation:shimmer-diagonal 2s ease-in-out infinite;position:relative}.song-skeleton-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 50%,transparent 100%);background-size:200% 100%;animation:shimmer-overlay 1.5s ease-in-out infinite}@keyframes shimmer-diagonal{0%{background-position:100% 100%}to{background-position:0% 0%}}@keyframes shimmer-overlay{0%{transform:translate(-100%)}to{transform:translate(100%)}}.song-skeleton-info{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}.song-skeleton-title{height:20px;width:75%;background:var(--color-bg-tertiary);border-radius:var(--radius-sm);animation:shimmer 1.5s infinite;background:linear-gradient(90deg,var(--color-bg-tertiary) 0%,var(--color-border) 50%,var(--color-bg-tertiary) 100%);background-size:200% 100%}.song-skeleton-artist{height:16px;width:50%;background:var(--color-bg-tertiary);border-radius:var(--radius-sm);animation:shimmer 1.5s infinite .2s;background:linear-gradient(90deg,var(--color-bg-tertiary) 0%,var(--color-border) 50%,var(--color-bg-tertiary) 100%);background-size:200% 100%}.song-skeleton-footer{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2)}.song-skeleton-badge{height:28px;width:70px;background:var(--color-bg-tertiary);border-radius:var(--radius-full);animation:shimmer 1.5s infinite .4s;background:linear-gradient(90deg,var(--color-bg-tertiary) 0%,var(--color-border) 50%,var(--color-bg-tertiary) 100%);background-size:200% 100%}.song-skeleton-button{height:36px;width:36px;background:var(--color-bg-tertiary);border-radius:50%;margin-left:auto;animation:shimmer 1.5s infinite .6s;background:linear-gradient(90deg,var(--color-bg-tertiary) 0%,var(--color-border) 50%,var(--color-bg-tertiary) 100%);background-size:200% 100%}@media(max-width:480px){.hide-mobile{display:none!important}.modal{max-width:100%;max-height:100vh;border-radius:0}.bottom-nav{display:flex}.sidebar-nav{display:none}}@media(min-width:481px){.hide-tablet-up{display:none!important}.bottom-nav{display:none}}@media(min-width:1025px){.hide-desktop{display:none!important}}@media(min-width:1921px){.hide-tv{display:none!important}.btn-primary:hover:not(:disabled){background-color:var(--color-primary);border-color:var(--color-primary);box-shadow:none}.btn-secondary:hover:not(:disabled){background-color:transparent;border-color:var(--color-border)}.btn-accent:hover:not(:disabled){background-color:var(--color-accent);border-color:var(--color-accent);box-shadow:none}.btn-danger:hover:not(:disabled){background-color:var(--color-danger);border-color:var(--color-danger);box-shadow:none}.btn-success:hover:not(:disabled){background-color:var(--color-success);border-color:var(--color-success);box-shadow:none}.btn-ghost:hover:not(:disabled){background-color:transparent}.btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--color-bg-primary),0 0 0 8px var(--color-primary);transform:scale(1.05)}.card:hover,.card.interactive:hover{transform:none;box-shadow:var(--shadow-lg)}.card:focus-visible,.card.interactive:focus-visible{outline:3px solid var(--color-primary);outline-offset:4px}.input:hover{border-color:var(--color-border);box-shadow:none}.input:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 3px #3b82f61a,0 0 0 5px var(--color-primary)}input[type=checkbox],input[type=radio]{width:28px;height:28px}select{padding:12px 16px;font-size:1.5rem}textarea:hover{border-color:var(--color-border);box-shadow:none}textarea:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 3px #3b82f61a}.badge:hover{transform:none}.toast:focus-visible{outline:3px solid var(--color-primary);outline-offset:3px}.modal{box-shadow:0 20px 80px #00000080}}