:root{--font-display: ui-serif, Georgia, "Times New Roman", "Songti SC", "STSong", "Noto Serif SC", "Source Serif 4", serif;--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;--color-bg: #F7F4EF;--color-bg-card: #FFFFFF;--color-bg-soft: #F6E9DE;--color-bg-deep: #EFE7DC;--color-bg-overlay: rgba(247, 244, 239, .85);--color-border: #E7E1D7;--color-border-light: #F0EBE3;--color-text-primary: #1F2421;--color-text-secondary: #5C635D;--color-text-muted: #8b877d;--color-primary: #C4612F;--color-primary-strong: #A94E22;--color-primary-light: #F2E3D6;--color-primary-soft: #FAF0E7;--color-success: #52745a;--color-warning: #a56b28;--color-danger: #aa443f;--color-bg-dark: #1F2421;--color-bg-dark-card: #292824;--color-text-dark-primary: #f1eee5;--color-text-dark-secondary: #bbb6aa;--color-netease: #ec4141;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 18px;--radius-xl: 24px;--radius-full: 999px;--shadow-sm: 0 1px 2px rgba(53, 47, 38, .04), 0 0 0 1px rgba(80, 70, 56, .03);--shadow-md: 0 8px 24px rgba(53, 47, 38, .06), 0 0 0 1px rgba(80, 70, 56, .04);--shadow-lg: 0 18px 48px rgba(53, 47, 38, .12), 0 0 0 1px rgba(80, 70, 56, .06);--sidebar-width: 232px;--player-height: 78px;--topbar-height: 64px;--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-out-expo: cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:var(--font-sans);font-size:15.5px;line-height:1.62;color:var(--color-text-primary);background:var(--color-bg);-webkit-font-smoothing:antialiased;overflow:hidden;height:100vh}#root{height:100vh}button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}input{font-family:inherit}.app-shell{display:grid;grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:1fr var(--player-height);grid-template-areas:"sidebar main" "player player";height:100vh;width:100vw;position:relative;background:var(--color-bg)}.bg-photo{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background-size:cover;background-position:center 20%;opacity:.16;filter:blur(1px) saturate(.9)}.bg-photo:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#f7f4ef8c,#f7f4efd9,#f7f4effa)}.sidebar{grid-area:sidebar;position:relative;z-index:1;background:var(--color-bg-soft);border-right:1px solid var(--color-border-light);display:flex;flex-direction:column;padding:20px 12px;overflow-y:auto}.brand{display:flex;align-items:center;gap:12px;padding:8px 12px 22px;border-bottom:1px solid var(--color-border-light);margin-bottom:18px}.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-strong) 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-size:22px;font-weight:700;box-shadow:var(--shadow-md)}.brand-name{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--color-text-primary);letter-spacing:-.01em}.brand-sub{font-size:11px;color:var(--color-text-muted);letter-spacing:.08em;text-transform:uppercase}.nav-group{margin-bottom:22px}.nav-group-label{font-size:11px;color:var(--color-text-muted);letter-spacing:.1em;text-transform:uppercase;padding:0 12px 8px;font-weight:600}.nav-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:14.5px;cursor:pointer;transition:all .18s var(--ease-out-expo);margin-bottom:2px}.nav-item:hover{background:#c4612f14;color:var(--color-text-primary)}.nav-item.active{background:var(--color-primary);color:#fff;font-weight:600;box-shadow:0 2px 8px #c4612f4d}.nav-item .icon{width:18px;height:18px;flex-shrink:0}.main{grid-area:main;position:relative;z-index:1;overflow-y:auto;overflow-x:hidden;padding:24px 32px 40px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}.search-bar{flex:1;max-width:480px;position:relative}.search-bar input{width:100%;padding:10px 16px 10px 42px;border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-bg-card);font-size:14.5px;color:var(--color-text-primary);outline:none;transition:all .2s}.search-bar input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.search-bar .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);width:16px;height:16px}.user-chip{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:var(--radius-full);background:var(--color-bg-card);border:1px solid var(--color-border);cursor:pointer}.user-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#d77a58,#a94e22);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:13px}.hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:32px;min-height:280px;background:linear-gradient(135deg,#2a2521,#1a1714);box-shadow:var(--shadow-lg)}.hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center 25%;opacity:.55}.hero-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#141210d9,#14121066,#1412101a)}.hero-content{position:relative;z-index:2;padding:42px 48px;color:var(--color-text-dark-primary);max-width:600px}.hero-kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-primary-light);margin-bottom:12px;font-weight:600}.hero-title{font-family:var(--font-display);font-size:clamp(32px,4.2vw,46px);font-weight:700;line-height:1.15;letter-spacing:-.015em;margin:0 0 14px;text-shadow:0 2px 12px rgba(0,0,0,.4)}.hero-sub{font-size:15px;color:var(--color-text-dark-secondary);line-height:1.7;margin-bottom:24px}.hero-actions{display:flex;gap:12px}.btn-hero{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:var(--radius-full);font-size:14.5px;font-weight:600;transition:all .2s var(--ease-spring)}.btn-hero.primary{background:var(--color-primary);color:#fff;box-shadow:0 4px 16px #c4612f66}.btn-hero.primary:hover{background:var(--color-primary-strong);transform:translateY(-1px);box-shadow:0 6px 20px #c4612f80}.btn-hero.ghost{background:#ffffff1f;color:#fff;border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.btn-hero.ghost:hover{background:#fff3}.section{margin-bottom:36px}.section-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}.section-title{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--color-text-primary)}.section-link{font-size:13px;color:var(--color-text-muted);cursor:pointer}.section-link:hover{color:var(--color-primary)}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px}.album-card{cursor:pointer;transition:transform .25s var(--ease-out-expo)}.album-card:hover{transform:translateY(-4px)}.album-cover{position:relative;width:100%;aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg-deep);box-shadow:var(--shadow-sm);margin-bottom:10px}.album-cover img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease-out-expo)}.album-card:hover .album-cover img{transform:scale(1.06)}.album-cover .play-btn{position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(6px);transition:all .25s var(--ease-spring);box-shadow:0 4px 12px #c4612f73}.album-card:hover .play-btn{opacity:1;transform:translateY(0)}.album-title{font-size:14.5px;font-weight:600;color:var(--color-text-primary);line-height:1.4;margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.album-meta{font-size:12.5px;color:var(--color-text-muted)}.track-list{background:var(--color-bg-card);border-radius:var(--radius-md);border:1px solid var(--color-border-light);overflow:hidden}.track-row{display:grid;grid-template-columns:40px 1fr 200px 80px 60px;align-items:center;gap:12px;padding:10px 18px;cursor:pointer;border-bottom:1px solid var(--color-border-light);transition:background .15s}.track-row:last-child{border-bottom:none}.track-row:hover{background:var(--color-primary-soft)}.track-row.playing{background:var(--color-primary-light)}.track-row.playing .track-title{color:var(--color-primary);font-weight:600}.track-num{font-family:var(--font-mono);font-size:13px;color:var(--color-text-muted);text-align:center}.track-title{font-size:14.5px;color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-artist{font-size:13px;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-album{font-size:13px;color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-duration{font-family:var(--font-mono);font-size:12.5px;color:var(--color-text-muted);text-align:right}.player{grid-area:player;position:relative;z-index:10;background:var(--color-bg-card);border-top:1px solid var(--color-border);display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;padding:0 24px;gap:24px;box-shadow:0 -4px 20px #352f260f}.player-track{display:flex;align-items:center;gap:12px;min-width:0}.player-cover{width:50px;height:50px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:var(--color-bg-deep)}.player-cover img{width:100%;height:100%;object-fit:cover}.player-info{min-width:0;flex:1}.player-title{font-size:14px;font-weight:600;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-artist{font-size:12px;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-controls{display:flex;flex-direction:column;align-items:center;gap:6px}.player-buttons{display:flex;align-items:center;gap:20px}.player-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);transition:all .2s}.player-btn:hover{background:var(--color-bg-soft);color:var(--color-text-primary)}.player-btn.play{width:42px;height:42px;background:var(--color-primary);color:#fff;box-shadow:0 2px 8px #c4612f59}.player-btn.play:hover{background:var(--color-primary-strong);transform:scale(1.05)}.player-progress{display:flex;align-items:center;gap:10px;width:100%;max-width:520px}.progress-time{font-family:var(--font-mono);font-size:11.5px;color:var(--color-text-muted);min-width:38px;text-align:center}.progress-bar{flex:1;height:4px;background:var(--color-bg-deep);border-radius:2px;position:relative;cursor:pointer}.progress-fill{height:100%;background:var(--color-primary);border-radius:2px;position:relative;transition:width .15s linear}.progress-fill:after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:var(--color-primary);opacity:0;transition:opacity .2s}.progress-bar:hover .progress-fill:after{opacity:1}.player-extras{display:flex;align-items:center;justify-content:flex-end;gap:8px}.volume-bar{width:80px;height:4px;background:var(--color-bg-deep);border-radius:2px;position:relative;cursor:pointer}.volume-fill{height:100%;background:var(--color-text-secondary);border-radius:2px}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fade-in .5s var(--ease-out-expo)}@keyframes spin-disc{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.player-cover.playing img{animation:spin-disc 20s linear infinite;border-radius:50%}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.login-shell{height:100vh;display:flex;align-items:center;justify-content:center;position:relative;background:var(--color-bg)}.login-card{position:relative;z-index:2;background:var(--color-bg-card);border-radius:var(--radius-lg);padding:44px 42px;width:400px;box-shadow:var(--shadow-lg);border:1px solid var(--color-border-light)}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}.login-title{font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:-.015em;margin:0 0 8px;color:var(--color-text-primary)}.login-sub{font-size:14px;color:var(--color-text-muted);margin:0 0 28px}.login-form{display:flex;flex-direction:column;gap:14px}.login-form input{padding:12px 16px;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-bg);font-size:14.5px;color:var(--color-text-primary);outline:none;transition:all .2s}.login-form input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light);background:var(--color-bg-card)}.login-error{padding:10px 14px;background:var(--color-danger-soft, #f4dfdc);color:var(--color-danger);border-radius:var(--radius-sm);font-size:13px}.login-btn{padding:12px 20px;background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);font-size:15px;font-weight:600;transition:all .2s;box-shadow:0 2px 8px #c4612f4d}.login-btn:hover:not(:disabled){background:var(--color-primary-strong);transform:translateY(-1px);box-shadow:0 4px 12px #c4612f66}.login-btn:disabled{opacity:.6;cursor:not-allowed}