:root{--color-primary: oklch(.2 .01 296.81);--color-primary-light: oklch(.3 .01 296.81);--color-primary-dark: oklch(.1 .01 296.81);--color-text-primary: oklch(.2 .01 296.81);--color-text-secondary: oklch(.5 .01 296.81);--color-text-tertiary: oklch(.6 .01 296.81);--color-text-quaternary: oklch(.7 .01 296.81);--color-background-primary: oklch(1 0 0);--color-background-secondary: oklch(.98 .01 296.81);--color-background-tertiary: oklch(.96 .01 296.81);--color-background-quaternary: oklch(.94 .01 296.81);--color-border-primary: oklch(.9 .01 296.81);--color-border-secondary: oklch(.85 .01 296.81);--color-shadow: oklch(0 0 0 / .1);--color-shadow-light: oklch(0 0 0 / .05);--color-shadow-medium: oklch(0 0 0 / .15);--color-overlay: oklch(0 0 0 / .02);--color-overlay-light: oklch(.87 0 0 / .1);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 20px;--space-2xl: 24px;--space-3xl: 32px;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 10px;--radius-xl: 12px;--radius-2xl: 16px;--radius-full: 50%;--size-xs: 24px;--size-sm: 32px;--size-md: 40px;--size-lg: 50px;--size-xl: 60px;--size-2xl: 80px;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--transition-fast: .1s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--shadow-sm: 0 2px 8px var(--color-shadow-light);--shadow-md: 0 4px 15px var(--color-shadow);--shadow-lg: 0 8px 25px var(--color-shadow);--shadow-xl: 0 20px 40px var(--color-shadow);--shadow-accent: 0 4px 15px var(--color-shadow-medium);--shadow-accent-lg: 0 8px 25px var(--color-shadow-medium)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh;padding:var(--space-xl);margin:0;display:flex;align-items:center;justify-content:center}.container{width:100%;max-width:600px;display:flex;justify-content:center}.player{width:620px;min-width:220px;background:oklch(1 .01 296.81 / .95);backdrop-filter:blur(20px);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-xl),0 0 0 1px var(--color-overlay-light);box-sizing:border-box}.main-title-section{display:flex;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-xl);padding:var(--space-lg);background:var(--color-overlay);border-radius:var(--radius-xl);border:2px solid var(--color-shadow-light)}.album-cover-main{width:var(--size-2xl);height:var(--size-2xl);border-radius:var(--radius-md);border:1px solid var(--color-border-primary);display:flex;align-items:center;justify-content:center;background:var(--color-background-primary);font-size:var(--size-sm);flex-shrink:0;overflow:hidden}.album-cover-main img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md)}.title-text-section{flex:1;display:flex;flex-direction:column;text-align:left;gap:var(--space-xs)}.song-title-main{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-text-primary);line-height:1;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:2px}.artist-name-main{font-size:var(--text-base);color:var(--color-text-secondary);font-weight:var(--font-medium);overflow:hidden;text-overflow:ellipsis;max-width:100%}.loading{text-align:center;color:var(--color-text-tertiary);margin:var(--space-lg) 0;padding:var(--space-md);border-radius:var(--radius-md);border:2px solid var(--color-background-quaternary)}.controls{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:85px}.controls button{background:var(--color-primary);border:none;color:var(--color-background-primary);padding:var(--space-sm) var(--space-sm);border-radius:var(--radius-lg);font-weight:var(--font-semibold);font-size:var(--text-base);cursor:pointer;transition:var(--transition-slow);box-shadow:var(--shadow-accent);width:var(--size-lg);height:var(--size-lg);display:flex;align-items:center;justify-content:center}svg{display:block;margin:0 auto}.controls button:hover{transform:translateY(-2px);box-shadow:var(--shadow-accent-lg)}.controls button:active{transform:translateY(0)}.player-control{width:100%;display:flex;justify-content:center;align-items:center;gap:var(--space-sm)}.volume-control{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:var(--space-sm)}.volume-icon{font-size:18px;min-width:var(--size-xs);cursor:pointer;padding:var(--space-xs);border-radius:var(--radius-xs);transition:var(--transition-normal);display:flex;align-items:center;justify-content:center}.volume-icon:hover{background-color:var(--color-overlay-light)}.volume-progress{height:var(--space-sm);background:var(--color-border-primary);border-radius:var(--radius-sm);overflow:visible;position:relative;cursor:pointer;user-select:none;width:100%;margin-right:20px}.volume-progress.dragging{cursor:grabbing}.volume-bar{height:100%;background:var(--color-primary);border-radius:var(--radius-sm);position:relative}.volume-bar:after{content:"";position:absolute;top:50%;right:0;width:var(--space-md);height:var(--space-md);background:var(--color-background-primary);border:2px solid var(--color-primary);border-radius:var(--radius-full);transform:translate(50%,-50%);box-shadow:var(--shadow-sm);transition:var(--transition-fast)}.progress-wrapper{display:flex;align-items:center;gap:var(--space-md);margin:var(--space-2xl) 0}.progress{height:var(--space-sm);background:var(--color-border-primary);border-radius:var(--radius-sm);overflow:visible;position:relative;cursor:pointer;user-select:none;flex:1}.progress.dragging{cursor:grabbing}.progress-bar{height:100%;width:0%;background:var(--color-primary);border-radius:var(--radius-sm);position:relative}.progress-bar:after{content:"";position:absolute;top:50%;right:0;width:var(--space-md);height:var(--space-md);background:var(--color-background-primary);border:2px solid var(--color-primary);border-radius:var(--radius-full);transform:translate(50%,-50%);box-shadow:var(--shadow-sm);transition:var(--transition-fast)}.time-display{font-size:var(--text-xs);color:var(--color-text-tertiary);font-weight:var(--font-medium);min-width:35px;text-align:center;user-select:none}.total-time{order:3}ul{list-style:none;margin-top:var(--space-2xl);max-height:266px;overflow-y:auto;overflow-x:visible;padding:var(--space-sm) var(--space-xl);scrollbar-width:thin;scrollbar-color:var(--color-border-secondary) var(--color-background-secondary)}ul::-webkit-scrollbar{width:var(--space-sm)}ul::-webkit-scrollbar-track{background:var(--color-background-secondary);border-radius:var(--radius-xs)}ul::-webkit-scrollbar-thumb{background:var(--color-border-secondary);border-radius:var(--radius-xs)}ul::-webkit-scrollbar-thumb:hover{background:var(--color-text-quaternary)}li{padding:var(--space-md) var(--space-lg);margin:var(--space-sm) 0;background:var(--color-background-tertiary);border-radius:var(--radius-xl);cursor:pointer;transition:var(--transition-slow);border:2px solid var(--color-shadow-medium);font-weight:var(--font-medium);color:var(--color-text-primary)}li:hover{transform:translate(var(--space-sm));border-color:var(--color-border-secondary)}.track-info{display:flex;align-items:center;justify-content:center;min-height:85px;gap:var(--space-md);flex:1}.album-cover{width:var(--size-md);height:var(--size-md);border-radius:var(--radius-xs);object-fit:cover;flex-shrink:0}.album-cover-placeholder{width:var(--size-md);height:var(--size-md);border:1px solid var(--color-border-primary);background-color:var(--color-background-primary);color:var(--color-primary);border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;font-size:var(--space-xl);flex-shrink:0}.track-details{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.track-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-title.active{font-weight:var(--font-bold);color:var(--color-text-primary)}.track-title.inactive{font-weight:var(--font-normal);color:var(--color-text-primary)}.track-artist{font-size:var(--text-xs);color:var(--color-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-duration{font-size:11px;color:var(--color-text-quaternary)}.playlist-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);margin:var(--space-sm) 0;border-radius:var(--radius-xl);cursor:pointer;transition:var(--transition-slow);border:2px solid var(--color-shadow-light)}.playlist-item.active{border-color:var(--color-text-primary)}@media (max-width: 540px){body{padding:var(--space-sm)}.container{max-width:calc(100vw - var(--space-xl));width:100%}.player{padding:var(--space-lg);border-radius:var(--radius-md)}.main-title-section{flex-direction:column;gap:var(--space-lg)}.title-text-section{text-align:center}.controls,.player-control{gap:var(--space-sm)}.controls button{width:44px;height:44px;padding:var(--space-sm)}.volume-control{justify-content:center}.song-title-main{font-size:var(--text-xl)}.artist-name-main{font-size:var(--text-sm)}}@media (max-width: 620px){.container{max-width:calc(100vw - var(--space-xl))}.player{padding:14px}}@media (max-width: 480px){body{padding:var(--space-sm)}.container{max-width:calc(100vw - var(--space-lg))}.player{padding:var(--space-md)}.controls button{width:var(--size-md);height:var(--size-md);padding:var(--space-sm)}li{padding:var(--space-sm) var(--space-md);margin:var(--space-sm) 0}.song-title-main{font-size:var(--text-lg)}.artist-name-main{font-size:var(--text-xs)}}@media (max-width: 360px){body{padding:var(--space-sm)}.container{max-width:calc(100vw - var(--space-md))}.player{padding:var(--space-sm)}.controls button{width:36px;height:36px;padding:var(--space-xs)}.song-title-main{font-size:var(--text-base)}.artist-name-main{font-size:var(--text-xs)}}