/* Loading */
.loading-overlay{position:fixed;inset:0;z-index:9999;background:#050814;pointer-events:all;transition:opacity .8s}
.loading-overlay.fade-out{opacity:0;pointer-events:none}
.loading-bg-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.05;z-index:1;pointer-events:none;user-select:none}
.loading-bg-mask{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to right,#050814 0%,#050814 20%,rgba(5,8,20,.98) 70%,rgba(5,8,20,.98) 100%)}
.loading-bg-tint{position:absolute;inset:0;z-index:3;pointer-events:none;background:rgba(139,90,43,.1)}
.loading-bg-light{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(100vh 100vh at 70% 30%,rgba(255,210,120,.05) 0%,transparent 100%)}
.loading-logo{position:absolute;left:72%;top:40%;transform:translate(-50%,-50%);z-index:5;max-width:56vh;max-height:56vh;pointer-events:none;filter:drop-shadow(0 0 30px rgba(77,166,255,.12));opacity:.85}
.loading-track{position:absolute;top:0;left:0;width:1%;height:100%;background:rgba(255,255,255,.06);z-index:6}
.loading-bar{position:absolute;top:0;left:0;width:100%;height:0;background:var(--c-primary);box-shadow:0 0 15px rgba(77,166,255,.6)}
.loading-sweep{position:absolute;top:0;left:0;width:0;height:100%;background:var(--c-primary);z-index:7;transition:width 1s cubic-bezier(.42,0,1,1)}
.loading-sweep.cover{width:100%}
.loading-indicator{position:absolute;left:calc(1% + 20px);top:0;transform:translateY(-50%);z-index:8;pointer-events:none}
.loading-percent{font-family:'Chakra Petch',sans-serif;font-size:36px;font-weight:700;color:var(--c-primary);text-shadow:0 0 10px rgba(77,166,255,.5);white-space:nowrap}
.loading-decor-blocks{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.loading-decor-block{height:6px;border-radius:2px;background:rgba(255,255,255,.1)}
.loading-decor-block:nth-child(1){width:90px}
.loading-decor-block:nth-child(2){width:60px}
.loading-text{font-size:14px;color:rgba(255,255,255,.5);margin-top:10px;white-space:nowrap}
#appContent{opacity:0;transition:opacity 1s ease .3s;visibility:hidden}
#appContent.loaded{opacity:1;visibility:visible}
/* Header */
header{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(18px) saturate(1.4);border-bottom:2px solid var(--c-primary);transition:background .5s,border-color .5s,backdrop-filter .5s;background:linear-gradient(to bottom,rgba(39,39,39,.96),rgba(39,39,39,.84));border-bottom-color:var(--c-primary)}
[data-theme="light"] header{background:linear-gradient(to bottom,rgba(232,230,226,.96),rgba(232,230,226,.84))}
header.nav-transparent{background:transparent!important;border-color:transparent!important;backdrop-filter:blur(0) saturate(1)}
header.nav-transparent .nav-link,header.nav-transparent .ctrl-icon{color:rgba(255,255,255,.7)!important}
header.nav-transparent .nav-link.active{color:#fff!important}
header.nav-transparent .brand-title{color:#fff!important}
header.nav-transparent .brand-sub{color:rgba(255,255,255,.5)!important}
.nav{max-width:1320px;margin:0 auto;padding:8px 24px;display:flex;align-items:center;justify-content:space-between;height:54px;overflow:hidden}
.nav-left{display:flex;align-items:center;flex-shrink:0;min-width:200px;overflow:hidden}
.brand{display:flex;align-items:center;gap:12px;overflow:hidden}
.brand-icon{width:68px;height:68px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.brand-icon img{width:100%;height:100%;object-fit:contain}
.brand-text{display:flex;flex-direction:column;justify-content:center}
.brand-title{font-size:14px;font-weight:700;letter-spacing:.06em;line-height:1.3;transition:color .4s}
.brand-sub{font-size:10px;color:var(--text-sub);letter-spacing:.02em;transition:color .4s}
.nav-center{display:flex;align-items:center;justify-content:center;flex:1;gap:4px;transition:gap .3s}
.nav-link{padding:7px 14px;border-radius:999px;font-size:13px;color:var(--text-sub);transition:all var(--transition-fast);border:1px solid transparent;user-select:none;white-space:nowrap}
.nav-link:hover{color:var(--text-main);background:rgba(128,128,128,.08)}
.nav-link.active{color:#fff;font-weight:600;background:linear-gradient(to right,rgba(77,166,255,.14),rgba(142,197,255,.06));border-color:rgba(77,166,255,.25)}
[data-theme="light"] .nav-link.active{background:linear-gradient(to right,rgba(250,113,46,.1),rgba(250,113,46,.05));border-color:rgba(250,113,46,.3);color:var(--c-primary-dark)}
.nav-dropdown{display:inline-flex;align-items:center;gap:0;transition:gap .25s}
.nav-dropdown.open{gap:4px}
.nav-dropdown-trigger{display:flex;align-items:center;gap:4px}
.nav-dropdown-arrow{font-size:10px;transition:transform .25s;display:inline-block}
.nav-dropdown.open .nav-dropdown-arrow{transform:rotate(90deg)}
.nav-dropdown-item{display:none;padding:7px 14px;border-radius:999px;font-size:13px;color:var(--text-sub);transition:all var(--transition-fast);white-space:nowrap;border:1px solid transparent;opacity:0;transform:translateX(-8px)}
.nav-dropdown.open .nav-dropdown-item{display:inline-flex;align-items:center;opacity:1;transform:translateX(0);animation:slideRight .25s ease forwards}
@keyframes slideRight{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
.nav-dropdown-item:hover{color:#fff;background:rgba(77,166,255,.1)}
[data-theme="light"] .nav-dropdown-item:hover{background:rgba(250,113,46,.1);color:var(--c-primary-dark)}
.nav-dropdown-item.active{color:#8ec5ff;background:rgba(77,166,255,.12);font-weight:600;border-color:rgba(77,166,255,.25)}
[data-theme="light"] .nav-dropdown-item.active{color:var(--c-primary-dark);background:rgba(250,113,46,.1);border-color:rgba(250,113,46,.3)}
.nav-right{display:flex;align-items:center;gap:0;flex-shrink:0;min-width:200px;justify-content:flex-end}
.volume-wrap{display:flex;align-items:center;overflow:hidden;width:0;transition:width .4s cubic-bezier(.4,0,.2,1),margin .4s;margin-right:0}
.volume-wrap.show{width:90px;margin-right:6px}
.volume-slider{-webkit-appearance:none;width:80px;height:4px;border-radius:1px;background:rgba(128,128,128,.25);outline:none}
.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--c-primary);box-shadow:0 0 6px rgba(77,166,255,.5)}
.ctrl-btn{width:48px;height:48px;border-radius:50%;background:transparent;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s,background .3s}
.ctrl-btn:hover{transform:scale(1.1);background:rgba(128,128,128,.1)}
.ctrl-icon{font-size:18px;color:var(--text-sub);display:inline-block;line-height:1;transition:color .4s}
.ctrl-btn:hover .ctrl-icon{color:var(--text-main)}
.ctrl-btn.playing .ctrl-icon{animation:spin 4s linear infinite;color:var(--c-primary)}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.music-btn-icon{width:36px;height:36px;object-fit:contain;filter:none;opacity:.7;transition:filter .35s,opacity .3s,transform .3s}
.ctrl-btn:hover .music-btn-icon{opacity:1}
.ctrl-btn.playing .music-btn-icon{animation:spin 4s linear infinite;opacity:1}
[data-theme="light"] .music-btn-icon{filter:invert(1);opacity:.75}
header.nav-transparent .music-btn-icon{filter:none;opacity:.8}
.user-btn-icon{width:36px;height:36px;object-fit:contain;filter:none;opacity:.7;transition:filter .35s,opacity .3s}
[data-theme="light"] .user-btn-icon{filter:invert(1);opacity:.75}
header.nav-transparent .user-btn-icon{filter:none;opacity:.8}
.user-display{display:none;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;background:rgba(77,166,255,.1);border:1px solid rgba(77,166,255,.25);transition:all .2s;margin-left:6px}
[data-theme="light"] .user-display{background:rgba(250,113,46,.08);border-color:rgba(250,113,46,.25)}
.user-display:hover{background:rgba(77,166,255,.18);border-color:rgba(77,166,255,.4)}
.user-display-icon{width:28px;height:28px;flex-shrink:0;object-fit:contain;filter:none}
[data-theme="light"] .user-display-icon{filter:invert(1)}
.user-display-name{font-size:13px;font-weight:600;color:var(--c-primary-light);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-theme="light"] .user-display-name{color:var(--c-primary)}
.user-dropdown-panel{position:fixed;top:58px;right:24px;z-index:60;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:18px 20px 14px;min-width:220px;box-shadow:0 12px 36px rgba(0,0,0,.45);opacity:0;transform:translateY(-10px) scale(.97);pointer-events:none;transition:opacity .25s,transform .25s}
.user-dropdown-panel.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.user-dropdown-username{font-size:15px;font-weight:600;margin-bottom:6px}
.user-dropdown-row{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid rgba(128,128,128,.1)}
.user-dropdown-row:last-of-type{margin-bottom:14px}
.user-dropdown-label{color:var(--text-sub);font-size:11px;letter-spacing:.06em}
.user-dropdown-value{color:var(--c-primary-light);font-weight:600;font-family:'Chakra Petch',monospace;font-size:13px}
[data-theme="light"] .user-dropdown-value{color:var(--c-primary)}
.user-dropdown-btn{width:100%;padding:8px 0;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-main);font-size:13px;transition:all .2s;margin-top:6px}
.user-dropdown-btn:hover{border-color:var(--c-primary);color:var(--c-primary);background:rgba(77,166,255,.06)}