:root{--bg-main:#0b0714;--bg-surface:#120c22;--bg-panel:#171027;--bg-card:#1b1230;--bg-card-hover:#24173d;--text-primary:#f7f0ff;--text-secondary:#d9c9f2;--text-tertiary:var(--text-secondary);--text-muted:var(--text-secondary);--text-disabled:var(--text-secondary);--purple-primary:#9b5cff;--purple-hover:#b278ff;--purple-soft:#9b5cff24;--purple-border:#9b5cff38;--purple-border-soft:#9b5cff1f;--green-bg:#123b2a;--green-text:#8ef0b1;--orange-bg:#442912;--orange-text:#ffbf7a;--blue-bg:#162b4d;--blue-text:#a9c9ff;--bg:var(--bg-main);--surface:var(--bg-surface);--surface2:var(--bg-panel);--surface3:var(--bg-card);--border:#9b5cff1f;--border2:#9b5cff38;--text:var(--text-primary);--text-dim:var(--text-disabled);--accent:var(--purple-primary);--accent2:#e07bbd;--ruby-color:#a88ee0;--tag-n5:#5a9b6e;--tag-n4:#5b7fc4;--tag-n3:#9f6ec4;--tag-n2:#c46e8a;--tag-n1:#c49b6e;--background:var(--bg);--foreground:var(--text);--foreground-muted:var(--text-muted);--primary:var(--accent);--primary-hover:var(--purple-hover);--error:#e07bbd;--font-family-base:var(--font-be-vietnam-pro), var(--font-noto-sans-tc), "Noto Sans TC", sans-serif;--radius-sm:8px;--radius-md:8px;--page-pad-desktop:18px;--page-pad-mobile:16px;--page-shell-radius:20px;--panel-radius:16px;--section-gap:16px;--title-xl:28px;--title-lg:18px;--text-base:14px;--text-sm:12px}html,body{min-height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-family-base);min-height:100vh;margin:0;padding:0;font-weight:300;overflow:hidden auto}.site-root{flex-direction:column;min-height:100vh;padding-bottom:0;display:flex}.site-main{flex-direction:column;flex:1 0 auto;display:flex}body:after{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle,#783cc80f 0%,#0000 70%);border-radius:50%;width:700px;height:700px;position:fixed;top:-200px;left:-200px}*{box-sizing:border-box}.page-scroll-shell{height:100%;padding:var(--page-pad-desktop);overflow-y:auto}.page-frame{border:1px solid var(--purple-border-soft);border-radius:var(--page-shell-radius);background:#0b0714f0;min-height:100%;overflow:hidden}.panel-card{border:1px solid var(--purple-border-soft);border-radius:var(--panel-radius);background:linear-gradient(#ffffff09,#ffffff05)}.admin-song-list-item{text-align:left;appearance:none;width:100%;color:var(--text-primary);font-family:var(--font-family-base);cursor:pointer;background:0 0;border:0;border-bottom:1px solid #9b5cff1f;padding:16px 18px;transition:background-color .16s,color .16s;display:block}.admin-song-list-item:hover,.admin-song-list-item.is-active{color:var(--text-primary);background:#9b5cff14}.admin-song-list-item:focus-visible{outline-offset:-2px;outline:2px solid #c4a8f5d1}.admin-song-list-item:last-child{border-bottom:0}.section-label{color:var(--text-muted);font-size:var(--text-sm);letter-spacing:.12em;text-transform:uppercase}@media (max-width:720px){.page-scroll-shell{padding:var(--page-pad-mobile)}.footer-grid{grid-template-columns:1fr!important}.site-root{padding-bottom:0}body:has(.mobile-bottom-nav) .site-root{padding-bottom:88px}}.song-loading-page{background:radial-gradient(circle at 18% 0%, #9b5cff1f, transparent 34%), var(--bg);min-height:100vh;color:var(--text)}.song-loading-header{border-bottom:1px solid var(--border);height:56px}.song-loading-shell{gap:16px;width:min(1600px,100%);margin:0 auto;padding:16px 18px 28px;display:grid}.song-loading-hero,.song-loading-card{border:1px solid var(--border);background:var(--surface);border-radius:24px;gap:18px;padding:18px;display:grid}.song-loading-hero{gap:10px}.song-loading-row{grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);gap:12px;padding:14px 0;display:grid}@media (max-width:720px){.song-loading-page{min-height:100svh}.song-loading-header{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0b0714b8;height:64px}.song-loading-shell{gap:14px;width:100%;padding:18px 14px 32px}.song-loading-hero,.song-loading-card{background:#1b1230b8;border-radius:20px;padding:16px}.song-loading-card>div:first-child{height:184px!important}.song-loading-row{grid-template-columns:1fr;gap:8px;padding:14px 0}}.input{background:var(--surface2);width:100%;min-height:44px;color:var(--text);font-family:var(--font-family-base);border:1px solid #9b5cff2e;border-radius:12px;outline:none;padding:10px 12px;font-size:13px;transition:border-color .2s,box-shadow .2s,background-color .2s}.input::placeholder{color:var(--text-muted);opacity:1}.input:focus{background:#ffffff0b;border-color:#b278ff73;box-shadow:0 0 0 3px #9b5cff24}.input:is(select){appearance:none;cursor:pointer;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background-image:linear-gradient(45deg,#0000 50%,#eadfffd9 50%),linear-gradient(135deg,#eadfffd9 50%,#0000 50%);background-position:calc(100% - 18px) calc(50% - 2px),calc(100% - 12px) calc(50% - 2px);background-repeat:no-repeat;background-size:6px 6px,6px 6px;padding-right:36px}.input:is(select) option,.input:is(select) optgroup{color:var(--text-primary);background:#241b39}.input--dense{background:#ffffff0a;border-radius:10px;min-height:40px;padding:9px 11px}.input--compact{font-size:13px}.form-field{gap:7px;display:grid}.form-label{color:var(--text-muted);font-size:12px;line-height:1.45}.form-label--strong{color:var(--text-secondary);font-size:13px;font-weight:600}.btn{color:#fff;min-height:44px;font-family:var(--font-family-base);letter-spacing:.12em;cursor:pointer;background:linear-gradient(135deg,#8f52ff 0%,#c044e8 100%);border:1px solid #e6d2ff4d;border-radius:12px;padding:10px 14px;font-size:13px;font-weight:500;transition:all .2s;box-shadow:0 8px 20px #8f52ff38}.btn:hover:not(:disabled){background:linear-gradient(135deg,#9b5cff 0%,#c084ff 100%);transform:translateY(-1px);box-shadow:0 10px 24px #8f52ff4d}.btn:disabled{background:var(--surface2);color:var(--text-dim);box-shadow:none;cursor:not-allowed}.btn-secondary{border:1px solid var(--purple-border-soft);color:var(--text-secondary);box-shadow:none;background:#ffffff09}.btn-secondary:hover:not(:disabled){border-color:var(--purple-border);box-shadow:none;background-color:#9b5cff12}.site-button{letter-spacing:.04em;cursor:pointer;border-radius:12px;justify-content:center;align-items:center;min-height:44px;padding:0 18px;font-family:inherit;font-size:13px;font-weight:600;text-decoration:none;transition:transform .16s,box-shadow .16s,border-color .16s,background-color .16s,color .16s;display:inline-flex}.site-button:focus-visible,.site-text-link:focus-visible,.workspace-action-button:focus-visible,.workspace-card-link:focus-visible{outline-offset:2px;outline:2px solid #c4a8f5d1}.site-button:hover{transform:translateY(-1px)}.site-button-primary{color:#fff;background:linear-gradient(135deg,#8f52ff,#c044e8);border:1px solid #e6d2ff4d;box-shadow:0 8px 24px #8f52ff38}.site-button-primary:hover{box-shadow:0 12px 30px #8f52ff52}.site-button-secondary{color:var(--text-secondary);border:1px solid var(--purple-border-soft);background:#ffffff05;box-shadow:inset 0 0 0 1px #ffffff03}.site-button-secondary:hover{border-color:var(--purple-border);background:#9b5cff12}.site-button-ghost{color:var(--text-muted);box-shadow:none;background:0 0;border:1px solid #0000}.site-button-ghost:hover{color:var(--text);background:#ffffff0a}.site-card{transition:transform .16s,box-shadow .16s,border-color .16s,background-color .16s}.site-card-interactive:hover{transform:translateY(-2px);background:#181426d1!important;border-color:#c4a8f542!important;box-shadow:0 18px 36px #0003!important}.site-text-link{color:var(--text-secondary);letter-spacing:.08em;font-size:12px;text-decoration:none;transition:color .16s,opacity .16s}.site-text-link:hover{color:var(--text)}.workspace-inline-action{border:1px solid var(--purple-border-soft);min-height:40px;color:var(--text-secondary);letter-spacing:.04em;cursor:pointer;background:#ffffff09;border-radius:999px;justify-content:center;align-items:center;padding:0 14px;font-family:inherit;font-size:12px;font-weight:600;transition:border-color .16s,background-color .16s,color .16s,transform .16s;display:inline-flex}.workspace-inline-action:hover{color:var(--text-primary);border-color:var(--purple-border);background:#9b5cff12;transform:translateY(-1px)}.workspace-inline-action:focus-visible{outline-offset:2px;outline:2px solid #c4a8f5d1}.mobile-bottom-nav{display:none}@media (max-width:760px){.mobile-bottom-nav{left:12px;right:12px;bottom:max(10px, env(safe-area-inset-bottom));z-index:160;display:block;position:fixed}.mobile-bottom-nav__inner{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#16141fe6;border:1px solid #ffffff14;border-radius:18px;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px;display:grid;box-shadow:0 16px 30px #00000042}.mobile-bottom-nav__item{min-height:48px;color:var(--text-muted);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:11px;text-decoration:none;transition:background-color .18s,color .18s,transform .18s;display:inline-flex}.mobile-bottom-nav__item:hover,.mobile-bottom-nav__item:focus-visible{color:var(--text);background:#ffffff0d;outline:none}.mobile-bottom-nav__item.is-active{color:#fff;background:#7c4ef029}.mobile-bottom-nav__icon{font-size:14px;line-height:1}}.workspace-action-button{text-align:left;border:1px solid var(--purple-border-soft);width:100%;color:var(--text);cursor:pointer;background:#ffffff06;border-radius:14px;padding:12px 12px 10px;transition:transform .16s,border-color .16s,background-color .16s}.workspace-action-button:hover{border-color:var(--purple-border);background:#9b5cff12;transform:translateY(-1px)}.sidebar{border-right:1px solid var(--purple-border-soft);background:linear-gradient(#120c22 0%,#0b0714 100%)}.sidebar-search-input{color:var(--text-primary);background:#ffffff09;border:1px solid #9b5cff2e;border-radius:12px}.sidebar-search-input::placeholder{color:var(--text-muted);opacity:1}.sidebar-card,.sidebar-nav-item,.artist-card,.song-mini-card{border:1px solid var(--purple-border-soft);background:#ffffff06;border-radius:14px;transition:background-color .18s,border-color .18s,box-shadow .18s,transform .18s}.sidebar-card:hover,.sidebar-nav-item:hover,.artist-card:hover,.song-mini-card:hover{border-color:var(--purple-border);background:#9b5cff12}.sidebar-nav-item.active,.artist-card.active,.song-mini-card.active{background:linear-gradient(135deg,#9b5cff3d,#9b5cff1f);border-color:#b278ff66;box-shadow:inset 0 1px #ffffff08}.sidebar-title,.song-title{color:var(--text-primary)}.sidebar-desc,.song-artist{color:var(--text-secondary)}.sidebar-helper,.song-meta{color:var(--text-tertiary)}.main-card,.artist-grid-card,.summary-card{border:1px solid var(--purple-border-soft);background:linear-gradient(#ffffff09,#ffffff05);border-radius:18px}.main-card:hover,.artist-grid-card:hover{border-color:var(--purple-border);background:#9b5cff0f}.youtube-player-wrap{aspect-ratio:16/9;border:1px solid var(--purple-border-soft);background:#000;border-radius:18px;width:100%;overflow:hidden}.youtube-player-wrap iframe{border:0;width:100%;height:100%;display:block}.vocab-panel{border:1px solid var(--purple-border-soft);background:#ffffff06;border-radius:18px;padding:16px}.vocab-card{background:#ffffff09;border:1px solid #9b5cff1f;border-radius:14px;padding:14px}.vocab-word{color:var(--text-primary);font-size:16px;font-weight:700}.vocab-reading,.vocab-meaning{color:var(--text-secondary);font-size:13px;line-height:1.5}.footer{border-top:1px solid var(--purple-border-soft);color:var(--text-tertiary);background:#0b0714}.footer-title{color:var(--text-primary)}.footer-link{color:var(--text-secondary)}.footer-link:hover{color:var(--purple-hover)}.workspace-card-link{color:inherit;flex-direction:column;gap:12px;text-decoration:none;display:flex}.animate-fade-in{animation:.3s forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{opacity:1}50%{opacity:.6}to{opacity:1}}@keyframes routeSpinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes routeSkeleton{0%{background-position:200% 0}to{background-position:-200% 0}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}ruby{ruby-position:over;-webkit-ruby-position:over;display:inline-ruby;vertical-align:baseline}rt{font-size:var(--lyric-ruby-font-size,10px);color:#c4a8f5;letter-spacing:.08em;padding-bottom:var(--lyric-ruby-padding-bottom,.2em);font-family:Noto Sans TC,sans-serif;font-weight:500;line-height:1}.word-token{cursor:pointer;vertical-align:bottom;border-radius:3px;padding:0 3px 2px;transition:background .12s;display:inline-block;position:relative}.word-token:hover{background:#c4a8f538}.word-token.selected{background:#c4a8f52e}.word-token.hl-n5{border-bottom:2px solid #5a9b6ed9}.word-token.hl-n4{border-bottom:2px solid #5b7fc4d9}.word-token.hl-n3{border-bottom:2px solid #9f6ec4d9}.word-token.hl-n2{border-bottom:2px solid #c46e8ad9}.word-token.hl-n1{border-bottom:2px solid #c49b6ed9}[data-clerk-component=UserProfile]{font-family:Noto Sans TC,sans-serif;color:var(--text)!important}[data-clerk-component=UserProfile] h1,[data-clerk-component=UserProfile] h2,[data-clerk-component=UserProfile] h3,[data-clerk-component=UserProfile] h4,[data-clerk-component=UserProfile] h5,[data-clerk-component=UserProfile] h6{color:var(--text)!important}[data-clerk-component=UserProfile] div,[data-clerk-component=UserProfile] span,[data-clerk-component=UserProfile] p,[data-clerk-component=UserProfile] small,[data-clerk-component=UserProfile] label,[data-clerk-component=UserProfile] li,[data-clerk-component=UserProfile] [role=listitem],[data-clerk-component=UserProfile] [data-localization-key]{color:var(--text-secondary)!important;-webkit-text-fill-color:var(--text-secondary)!important;opacity:1!important}[data-clerk-component=UserProfile] [data-color=inherit],[data-clerk-component=UserProfile] [data-variant=body][data-color=inherit],[data-clerk-component=UserProfile] [data-variant=subtitle][data-color=inherit],[data-variant=body][data-color=inherit],[data-variant=subtitle][data-color=inherit],[class*=cl-internal-][data-color=inherit],[data-localization-key="userProfile.navbar.title"]{color:var(--text)!important;-webkit-text-fill-color:var(--text)!important;opacity:1!important}[data-localization-key="userProfile.navbar.description"],[data-variant=body][data-color=secondary]{color:var(--text-secondary)!important;-webkit-text-fill-color:var(--text-secondary)!important;opacity:1!important}.cl-navbarButtonIcon,[class*=cl-navbarButtonIcon],[class*=cl-navbarButtonIcon__]{color:var(--text-secondary)!important;fill:currentColor!important;opacity:1!important}[data-clerk-component=UserProfile] p,[data-clerk-component=UserProfile] [aria-current=page],[data-clerk-component=UserProfile] [aria-selected=true],[data-clerk-component=UserProfile] [data-selected=true],[data-clerk-component=UserProfile] button,[data-clerk-component=UserProfile] [role=button],[data-clerk-component=UserProfile] button *,[data-clerk-component=UserProfile] [role=button] *{color:var(--text)!important;-webkit-text-fill-color:var(--text)!important}[data-clerk-component=UserProfile] a,[data-clerk-component=UserProfile] a *{color:var(--accent)!important;-webkit-text-fill-color:var(--accent)!important}[data-clerk-component=UserProfile] input,[data-clerk-component=UserProfile] textarea,[data-clerk-component=UserProfile] select{color:var(--text)!important;background:#ffffff14!important;border-color:#9b5cff2e!important}[data-clerk-component=UserProfile] svg{color:var(--text-secondary)!important;fill:currentColor!important;opacity:1!important}