.player{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--border-subtle);border-radius:var(--r-xl);padding:var(--sp-6);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;grid-template-areas:"art meta" "art progress" "art controls";gap:var(--sp-4) var(--sp-6);box-shadow:var(--shadow-md);align-items:center}@media (max-width: 720px){.player{grid-template-columns:1fr;grid-template-areas:"art" "meta" "progress" "controls";padding:var(--sp-4)}}.player__artwork{grid-area:art;width:220px;aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2);box-shadow:0 12px 32px #00000073;position:relative;display:grid;place-items:center}@media (max-width: 720px){.player__artwork{width:100%;max-width:280px;margin:0 auto}}.player__art{width:100%;height:100%;object-fit:cover}.player__art-fallback{color:var(--accent);opacity:.8}.player__meta{grid-area:meta;min-width:0}.player__title{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player__artist{color:var(--fg-muted);font-size:var(--fs-sm);margin-top:2px}.player__progress{grid-area:progress;display:grid;grid-template-columns:48px 1fr 48px;gap:var(--sp-3);align-items:center}.player__time{color:var(--fg-muted);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;text-align:center}.player__time:last-child{text-align:left}.player__bar{height:6px;background:var(--bg-3);border-radius:var(--r-full);cursor:pointer;overflow:hidden;position:relative;transition:height var(--dur-fast) var(--ease)}.player__bar:hover{height:8px}.player__bar-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--accent) 0%,var(--highlight) 120%);border-radius:var(--r-full)}.player__controls{grid-area:controls;display:flex;align-items:center;justify-content:center;gap:var(--sp-3);flex-wrap:wrap}.player__spacer{width:1px;height:24px;background:var(--border);margin:0 var(--sp-2)}@media (max-width: 720px){.player__spacer{display:none}}.player__btn{background:transparent;border:none;color:var(--fg-secondary);width:40px;height:40px;border-radius:var(--r-full);display:inline-grid;place-items:center;cursor:pointer;transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}.player__btn:hover:not(:disabled){color:var(--fg-primary);background:var(--surface-alpha-hover)}.player__btn:disabled{opacity:.5;cursor:not-allowed}.player__btn--active{color:var(--accent)}.player__btn--primary{width:52px;height:52px;background:var(--accent);color:#061016;box-shadow:0 8px 24px #5ec6d859}.player__btn--primary:hover:not(:disabled){background:var(--accent-strong);color:#061016}.player__btn--primary:active{transform:translateY(1px)}.player__volume{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--fg-muted)}.player__volume input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100px;height:4px;background:var(--bg-3);border-radius:var(--r-full)}.player__volume input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border-radius:var(--r-full);cursor:pointer;transition:background var(--dur-fast) var(--ease)}.player__volume input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--accent);border-radius:var(--r-full);cursor:pointer;border:none}.tracklist{background:var(--bg-1);border:1px solid var(--border-subtle);border-radius:var(--r-lg);overflow:hidden}.tracklist__toolbar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-subtle)}.tracklist__search{flex:1;display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-2);color:var(--fg-muted);transition:border-color var(--dur-fast) var(--ease)}.tracklist__search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.tracklist__search input{flex:1;border:none;background:transparent;color:var(--fg-primary);padding:.55rem 0;outline:none}.tracklist__items{list-style:none;padding:0;margin:0;max-height:520px;overflow-y:auto}.tracklist__row{display:grid;grid-template-columns:36px 34px 1fr auto;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-subtle);transition:background var(--dur-fast) var(--ease)}.tracklist__row:last-child{border-bottom:none}.tracklist__row:hover{background:var(--surface-alpha)}.tracklist__row--current{background:var(--accent-soft)}.tracklist__row--current .tracklist__title{color:var(--accent)}.tracklist__play{width:32px;height:32px;border-radius:var(--r-full);background:var(--bg-2);border:1px solid var(--border);color:var(--fg-primary);display:grid;place-items:center;cursor:pointer;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}.tracklist__row--current .tracklist__play,.tracklist__play:hover{background:var(--accent);color:#061016;border-color:transparent}.tracklist__meta{min-width:0}.tracklist__artwork{width:34px;height:34px;border-radius:var(--r-md);overflow:hidden;background:var(--bg-2);border:1px solid var(--border-subtle);display:grid;place-items:center}.tracklist__art{width:100%;height:100%;object-fit:cover;display:block}.tracklist__art-fallback{color:var(--fg-muted)}.tracklist__title{font-size:var(--fs-sm);font-weight:500}.tracklist__sub{font-size:var(--fs-xs);color:var(--fg-muted)}.tracklist__duration{font-size:var(--fs-xs);color:var(--fg-muted);font-variant-numeric:tabular-nums}:root{--bg-0: #07080b;--bg-1: #0e1017;--bg-2: #151823;--bg-3: #1d212f;--border-subtle: rgba(255, 255, 255, .06);--border: rgba(255, 255, 255, .1);--border-strong: rgba(255, 255, 255, .18);--fg-primary: #f2f4f8;--fg-secondary: #b6bac6;--fg-muted: #7b8090;--fg-disabled: #4a4e5a;--accent: #5ec6d8;--accent-strong: #35a7bd;--accent-soft: rgba(94, 198, 216, .14);--highlight: #ff8ba7;--success: #5fd19a;--warning: #f5c36e;--danger: #ef6e6e;--danger-strong: #d8524f;--info: #6ea3e7;--surface-alpha: rgba(255, 255, 255, .03);--surface-alpha-hover: rgba(255, 255, 255, .06);--font-sans: "Inter", "Segoe UI", "SF Pro Text", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;--fs-xs: .75rem;--fs-sm: .875rem;--fs-base: 1rem;--fs-md: 1.125rem;--fs-lg: 1.375rem;--fs-xl: 1.75rem;--fs-2xl: 2.25rem;--r-sm: 6px;--r-md: 10px;--r-lg: 14px;--r-xl: 20px;--r-full: 999px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--sp-12: 48px;--sp-16: 64px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .35);--shadow-lg: 0 16px 48px rgba(0, 0, 0, .45);--ease: cubic-bezier(.2, .8, .2, 1);--dur-fast: .12s;--dur-base: .2s;--dur-slow: .32s;--shell-max-width: 1200px;--nav-height: 60px;--player-bar-height: 92px}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.55;color:var(--fg-primary);background:radial-gradient(circle at 20% 0%,#151a2a 0,var(--bg-0) 55%) no-repeat,var(--bg-0);background-attachment:fixed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1,h2,h3,h4,h5,h6{margin:0 0 var(--sp-3);font-weight:600;line-height:1.2;color:var(--fg-primary);letter-spacing:-.01em}h1{font-size:var(--fs-2xl)}h2{font-size:var(--fs-xl)}h3{font-size:var(--fs-lg)}h4{font-size:var(--fs-md)}p{margin:0 0 var(--sp-3)}a{color:var(--accent);text-decoration:none;transition:color var(--dur-fast) var(--ease)}a:hover{color:var(--accent-strong)}button{font-family:inherit}input,textarea,select,button{font:inherit;color:inherit}img{max-width:100%;display:block}code{font-family:var(--font-mono);font-size:.9em;background:var(--bg-2);padding:.1em .35em;border-radius:var(--r-sm)}::selection{background:var(--accent-soft);color:var(--fg-primary)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:var(--r-full);border:2px solid var(--bg-0)}::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}*{scrollbar-width:thin;scrollbar-color:var(--bg-3) transparent}:focus{outline:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}.shell{display:flex;flex-direction:column;min-height:100vh}.shell__main{flex:1 0 auto;padding:var(--sp-8) var(--sp-6);width:100%;max-width:var(--shell-max-width);margin:0 auto}.shell__footer{color:var(--fg-muted);font-size:var(--fs-xs);text-align:center;padding:var(--sp-4) var(--sp-6) var(--sp-5)}@media (max-width: 640px){.shell__main{padding:var(--sp-6) var(--sp-4) calc(var(--player-bar-height) + var(--sp-6))}}.page{display:flex;flex-direction:column;gap:var(--sp-6)}.page__header{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap}.page__title{margin:0}.page__subtitle{margin:0;color:var(--fg-muted);font-size:var(--fs-sm)}.navbar{position:sticky;top:0;z-index:40;background:#07080bd9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border-subtle)}.navbar__inner{max-width:var(--shell-max-width);margin:0 auto;padding:0 var(--sp-6);height:var(--nav-height);display:flex;align-items:center;gap:var(--sp-6)}.navbar__brand{font-size:var(--fs-md);font-weight:700;letter-spacing:-.02em;color:var(--fg-primary);display:inline-flex;align-items:center;gap:var(--sp-2)}.navbar__brand-dot{width:10px;height:10px;border-radius:var(--r-full);background:var(--accent);box-shadow:0 0 12px var(--accent)}.navbar__links{display:flex;gap:var(--sp-1);flex:1;list-style:none;padding:0;margin:0}.navbar__link{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);color:var(--fg-secondary);font-size:var(--fs-sm);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}.navbar__link:hover{background:var(--surface-alpha-hover);color:var(--fg-primary)}.navbar__link--active{background:var(--accent-soft);color:var(--accent)}.navbar__user{display:flex;align-items:center;gap:var(--sp-3);color:var(--fg-secondary);font-size:var(--fs-sm)}.navbar__toggle{display:none;background:none;border:1px solid var(--border);border-radius:var(--r-md);width:36px;height:36px;align-items:center;justify-content:center;cursor:pointer}.navbar__toggle span,.navbar__toggle span:before,.navbar__toggle span:after{display:block;width:16px;height:2px;background:var(--fg-primary);border-radius:var(--r-full);position:relative}.navbar__toggle span:before{content:"";position:absolute;top:-6px}.navbar__toggle span:after{content:"";position:absolute;top:6px}@media (max-width: 720px){.navbar__toggle{display:flex}.navbar__links,.navbar__user{display:none}.navbar--open .navbar__links,.navbar--open .navbar__user{display:flex;position:absolute;top:var(--nav-height);left:0;right:0;flex-direction:column;padding:var(--sp-3);gap:var(--sp-1);background:var(--bg-1);border-bottom:1px solid var(--border-subtle)}}.card{background:var(--bg-1);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow-sm)}.card--raised{background:var(--bg-2);box-shadow:var(--shadow-md)}.card__head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}.card__title{margin:0;font-size:var(--fs-md);font-weight:600}.card__subtitle{margin:var(--sp-1) 0 0;color:var(--fg-muted);font-size:var(--fs-sm)}.tile{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5);background:var(--bg-1);border:1px solid var(--border-subtle);border-radius:var(--r-lg);color:var(--fg-primary);transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}.tile:hover{transform:translateY(-2px);border-color:var(--border);background:var(--bg-2);color:var(--fg-primary)}.tile__icon{width:48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:var(--fs-lg)}.tile__label{font-size:var(--fs-sm);color:var(--fg-muted)}.tile__value{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.02em}.btn{--btn-bg: var(--bg-2);--btn-bg-hover: var(--bg-3);--btn-border: var(--border);--btn-fg: var(--fg-primary);display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:.55rem 1rem;font-size:var(--fs-sm);font-weight:500;color:var(--btn-fg);background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:var(--r-md);cursor:pointer;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);text-decoration:none;white-space:nowrap}.btn:hover:not(:disabled){background:var(--btn-bg-hover)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{cursor:not-allowed;opacity:.5}.btn--primary{--btn-bg: var(--accent);--btn-bg-hover: var(--accent-strong);--btn-border: transparent;--btn-fg: #061016;font-weight:600}.btn--ghost{--btn-bg: transparent;--btn-bg-hover: var(--surface-alpha-hover);--btn-border: transparent}.btn--danger{--btn-bg: transparent;--btn-bg-hover: rgba(239, 110, 110, .12);--btn-border: transparent;--btn-fg: var(--danger)}.btn--danger-solid{--btn-bg: var(--danger-strong);--btn-bg-hover: var(--danger);--btn-border: transparent;--btn-fg: #fff}.btn--sm{padding:.35rem .7rem;font-size:var(--fs-xs)}.btn--icon{width:36px;padding:0;aspect-ratio:1}.btn--block{width:100%}.field{display:flex;flex-direction:column;gap:var(--sp-2)}.field__label{font-size:var(--fs-sm);color:var(--fg-secondary);font-weight:500}.field__hint{font-size:var(--fs-xs);color:var(--fg-muted)}.field__error{font-size:var(--fs-xs);color:var(--danger)}.input,.textarea,.select{width:100%;padding:.6rem .85rem;background:var(--bg-2);color:var(--fg-primary);border:1px solid var(--border);border-radius:var(--r-md);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}.input:focus,.textarea:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.input::placeholder,.textarea::placeholder{color:var(--fg-muted)}.player-page__playlist-select{padding-right:2.8rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg-muted) 50%),linear-gradient(135deg,var(--fg-muted) 50%,transparent 50%);background-position:calc(100% - 1.2rem) calc(50% + 1px),calc(100% - .85rem) calc(50% + 1px);background-size:.4rem .4rem,.4rem .4rem;background-repeat:no-repeat}.textarea{min-height:6rem;resize:vertical}.checkbox{display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--fs-sm);color:var(--fg-secondary)}.checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border:1px solid var(--border-strong);border-radius:4px;background:var(--bg-2);cursor:pointer;display:inline-grid;place-items:center;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}.checkbox input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}.checkbox input[type=checkbox]:checked:after{content:"";width:5px;height:9px;border:solid #061016;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}.table th,.table td{text-align:left;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-subtle)}.table th{color:var(--fg-muted);font-weight:500;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em}.table tbody tr:hover{background:var(--surface-alpha)}.badge{display:inline-flex;align-items:center;padding:.15rem .55rem;border-radius:var(--r-full);font-size:var(--fs-xs);background:var(--accent-soft);color:var(--accent);font-weight:500}.badge--muted{background:var(--surface-alpha);color:var(--fg-muted)}.badge--danger{background:#ef6e6e26;color:var(--danger)}.badge--success{background:#5fd19a26;color:var(--success)}.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-10) var(--sp-6);text-align:center;color:var(--fg-muted);gap:var(--sp-3);border:1px dashed var(--border);border-radius:var(--r-lg)}.empty__icon{font-size:var(--fs-2xl);opacity:.7}.toast-region{position:fixed;bottom:calc(var(--player-bar-height) + var(--sp-4));right:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);z-index:80;pointer-events:none}.toast{min-width:260px;max-width:380px;padding:var(--sp-3) var(--sp-4);background:var(--bg-2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-md);box-shadow:var(--shadow-md);font-size:var(--fs-sm);color:var(--fg-primary);pointer-events:auto;animation:toast-in .2s var(--ease)}.toast--success{border-left-color:var(--success)}.toast--danger{border-left-color:var(--danger)}.toast--warning{border-left-color:var(--warning)}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.stack{display:flex;flex-direction:column}.stack>*+*{margin-top:var(--stack-gap, var(--sp-4))}.stack-2{--stack-gap: var(--sp-2)}.stack-3{--stack-gap: var(--sp-3)}.stack-5{--stack-gap: var(--sp-5)}.stack-6{--stack-gap: var(--sp-6)}.row{display:flex;align-items:center;gap:var(--sp-3)}.row--between{justify-content:space-between}.row--wrap{flex-wrap:wrap}.grid{display:grid;gap:var(--sp-4)}.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width: 720px){.grid--2,.grid--3{grid-template-columns:1fr}}.muted{color:var(--fg-muted)}.text-sm{font-size:var(--fs-sm)}.text-xs{font-size:var(--fs-xs)}.text-center{text-align:center}.flex-1{flex:1}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite;display:inline-block}.spinner--lg{width:36px;height:36px;border-width:3px}@keyframes spin{to{transform:rotate(360deg)}}