/* ui-pro.css — web20 professional design layer
   Design language: low-saturation deep blue-grey studio (Qishui-style cards,
   Tencent Musician-style clear hierarchy), dense but breathable.
   Loaded last so it refines components without moving layout skeletons.
   Theme-aware: follows body[data-theme] (blue/purple/mint) and data-mode (dark/light). */
:root{
  --ui-bg:#0e1116;
  --ui-card:#161b24;
  --ui-card-2:#1a2029;
  --ui-card-3:#10141b;
  --ui-line:#232a36;
  --ui-line-soft:#1d232e;
  --ui-accent:#7bd6fa;
  --ui-accent-ink:#0a2938;
  --ui-accent-2:#c0f57a;
  --ui-text:#e9edf5;
  --ui-muted:#8b95a5;
  --ui-faint:#5c6674;
  --ui-radius:14px;
  --ui-radius-sm:10px;
  --ui-radius-lg:18px;
  --ui-shadow:0 10px 34px rgba(0,0,0,.28);
  --ui-shadow-sm:0 4px 16px rgba(0,0,0,.05);
}
/* Theme variants: bind accent tokens to the existing studio theme system. */
body[data-theme=purple]{--ui-accent:#b6a0ff;--ui-accent-ink:#150f26;--ui-accent-2:#e2d6ff}
body[data-theme=mint]{--ui-accent:#91e5bf;--ui-accent-ink:#06231a;--ui-accent-2:#b8f0d4}
body[data-theme=amber]{--ui-accent:#ffc46b;--ui-accent-ink:#2a1a04;--ui-accent-2:#ffe2b0}
body[data-theme=teal]{--ui-accent:#7de2d4;--ui-accent-ink:#04201c;--ui-accent-2:#b8f4ea}
html[data-mode=light]{
  --ui-bg:#f6f4fa;--ui-card:#ffffff;--ui-card-2:#f1edf7;--ui-card-3:#faf8fd;
  --ui-line:#dcd5e6;--ui-line-soft:#e6e0ee;--ui-text:#272031;--ui-muted:#696177;--ui-faint:#8d84a0;
  --ui-accent:#6e3fb0;--ui-accent-ink:#ffffff;--ui-accent-2:#5b8a3f;
  --ui-shadow:0 10px 30px rgba(54,32,80,.08);--ui-shadow-sm:0 4px 14px rgba(54,32,80,.06)}
body{letter-spacing:.01em;-webkit-font-smoothing:antialiased}

/* ============ Navigation: icon + label, clear active state ============ */
.studio-v3 aside nav{display:grid;gap:4px;margin-top:6px}
.studio-v3 aside nav button,.studio-v3 aside nav a.account-link{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:var(--ui-radius-sm);
  font-size:14px;font-weight:500;color:var(--ui-muted);background:transparent;border:0;text-align:left;
  transition:background .16s ease,color .16s ease,transform .12s ease}
.studio-v3 aside nav button::before{
  content:'';display:inline-grid;place-items:center;width:18px;height:18px;flex:none;
  font-size:15px;line-height:1;color:var(--ui-faint)}
.studio-v3 aside nav button[data-page="lyrics"]::before{content:'✎'}
.studio-v3 aside nav button[data-page="cover"]::before{content:'◈'}
.studio-v3 aside nav button[data-page="music"]::before{content:'♫'}
.studio-v3 aside nav button[data-page="history"]::before{content:'↻'}
.studio-v3 aside nav button[data-page="config"]::before{content:'⚙'}
.studio-v3 aside nav button[data-page="preferences"]::before{content:'◍'}
.studio-v3 aside nav button[data-page="guide"]::before{content:'◌'}
.studio-v3 aside nav a.account-link::before{content:'◉'}
.studio-v3 aside nav button:hover,.studio-v3 aside nav a.account-link:hover{background:color-mix(in srgb,var(--ui-accent) 8%,transparent);color:var(--ui-text);transform:translateX(1px)}
.studio-v3 aside nav button.active{
  background:linear-gradient(90deg,color-mix(in srgb,var(--ui-accent) 16%,transparent),color-mix(in srgb,var(--ui-accent) 4%,transparent));
  color:var(--ui-accent);font-weight:600}
.studio-v3 aside nav button.active::before{color:var(--ui-accent)}
.studio-v3 aside nav button.active::after{
  content:'';position:absolute;left:0;top:22%;bottom:22%;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--ui-accent),var(--ui-accent-2))}
.studio-v3 aside nav hr{background:var(--ui-line-soft);border:0;height:1px;margin:10px 4px}
.studio-v3 .sidebar-note{background:var(--ui-card-3);border:1px solid var(--ui-line-soft);border-radius:var(--ui-radius-sm)}
.studio-v3 .sidebar-note span{color:var(--ui-accent)}

/* ============ Top toolbar: quiet container, clear primary ============ */
.studio-v3 .toolbar{
  background:var(--ui-card);border:1px solid var(--ui-line-soft);
  border-radius:var(--ui-radius);padding:10px 12px;box-shadow:var(--ui-shadow-sm)}
.studio-v3 .toolbar>input{background:transparent;border:0;padding:9px 12px}
.studio-v3 .toolbar>input:focus{outline:none}
.studio-v3 button,.studio-v3 .file{border-radius:var(--ui-radius-sm);transition:filter .14s ease,background .14s ease,transform .08s ease}
.studio-v3 button:hover,.studio-v3 .file:hover{filter:brightness(1.14)}
.studio-v3 button:active,.studio-v3 .file:active{transform:translateY(.5px)}
.studio-v3 button.primary{
  background:linear-gradient(135deg,var(--ui-accent),color-mix(in srgb,var(--ui-accent) 72%,#000));
  color:var(--ui-accent-ink);font-weight:700;border:0;box-shadow:0 6px 18px color-mix(in srgb,var(--ui-accent) 22%,transparent)}
.studio-v3 button.primary:hover{filter:brightness(1.06)}
.studio-v3 .toolbar button:not(.primary),.studio-v3 .toolbar .file{background:transparent;border-color:transparent;color:var(--ui-muted)}
.studio-v3 .toolbar button:not(.primary):hover,.studio-v3 .toolbar .file:hover{background:color-mix(in srgb,var(--ui-accent) 10%,transparent);filter:none}

/* ============ Cards: consistent radius, spacing rhythm ============ */
.studio-v3 .card{
  border-radius:var(--ui-radius-lg);border:1px solid var(--ui-line-soft);
  background:linear-gradient(160deg,var(--ui-card),var(--ui-card-3));
  box-shadow:var(--ui-shadow-sm)}
.studio-v3 h1{font-weight:650;letter-spacing:-.6px}
.studio-v3 h2{font-weight:600;letter-spacing:.1px}
.studio-v3 h2 span{
  display:inline-flex;align-items:center;float:none;margin:0 0 0 10px;padding:3px 9px;
  border-radius:999px;background:color-mix(in srgb,var(--ui-accent) 12%,transparent);color:var(--ui-accent);
  font-size:10px;letter-spacing:1.5px;font-weight:600;vertical-align:middle}
.studio-v3 .headline h1{font-size:30px}
.studio-v3 label{color:var(--ui-muted);letter-spacing:.02em}
.studio-v3 :is(input,textarea,select):focus{outline:2px solid color-mix(in srgb,var(--ui-accent) 55%,transparent);outline-offset:1px;border-color:transparent}
.studio-v3 .step-label{color:var(--ui-accent);font-weight:600}

/* ============ Suno-style generation studio ============ */
.studio-v3 .music-grid .card:first-child{
  background:
    radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--ui-accent) 9%,transparent),transparent 55%),
    linear-gradient(160deg,var(--ui-card),var(--ui-card-3))}
.studio-v3 .music-grid .card:first-child textarea[data-field=musicStyle]{
  min-height:96px;font-size:14px;line-height:1.7;border-radius:var(--ui-radius)}
.studio-v3 .music-grid .card:first-child #musicGenerate{
  min-height:52px;font-size:15px;border-radius:var(--ui-radius);
  box-shadow:0 10px 26px color-mix(in srgb,var(--ui-accent) 28%,transparent)}
.studio-v3 .style-grid{gap:8px}
.studio-v3 .style-grid button{
  border:1px solid var(--ui-line);background:var(--ui-card-3);color:var(--ui-muted);
  border-radius:999px;padding:7px 13px;font-size:12px;transition:all .14s ease}
.studio-v3 .style-grid button:hover{border-color:color-mix(in srgb,var(--ui-accent) 45%,transparent);color:var(--ui-accent)}
.studio-v3 .style-grid button.selected{
  background:color-mix(in srgb,var(--ui-accent) 16%,transparent);border-color:var(--ui-accent);color:var(--ui-accent);font-weight:600}
.studio-v3 .music-grid .own-work-card{
  border-radius:var(--ui-radius);transition:border-color .15s ease,background .15s ease}
.studio-v3 .music-grid .own-work-card:hover{border-color:color-mix(in srgb,var(--ui-accent) 30%,transparent)}
.studio-v3 .music-grid .own-work-card.selected-track{background:color-mix(in srgb,var(--ui-accent) 10%,transparent);border-color:color-mix(in srgb,var(--ui-accent) 35%,transparent)}

/* ============ Listening / player refinement ============ */
.studio-v3 .premium-player{
  background:linear-gradient(120deg,var(--ui-card-2),var(--ui-card-3) 70%);border-color:var(--ui-line);
  box-shadow:var(--ui-shadow)}
.studio-v3 .transport #togglePlay{
  background:linear-gradient(135deg,var(--ui-accent),color-mix(in srgb,var(--ui-accent) 75%,#000));
  color:var(--ui-accent-ink);box-shadow:0 4px 18px color-mix(in srgb,var(--ui-accent) 26%,transparent)}
.studio-v3 .lyric-scroll button.current{color:var(--ui-accent)}
.studio-v3 .disc{border-color:#0a1721}
#status{border-radius:var(--ui-radius-sm)}

/* ============ Track rows: cover thumbnails ============ */
.studio-v3 .track{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;padding:12px 4px}
.studio-v3 .track>.track-head{grid-column:1/-1;display:flex;align-items:center;gap:12px;min-width:0}
.studio-v3 .track .track-art{width:46px;height:46px;border-radius:10px;background:linear-gradient(140deg,#2c3a52,#1a2434);color:var(--ui-accent);font-size:20px}
.studio-v3 .track .track-head strong{font-size:14px;color:var(--ui-text)}
.studio-v3 .track>.hint{grid-column:2}
.studio-v3 .track>.row{grid-column:1/-1}
.studio-v3 .track.selected{border-left:3px solid var(--ui-accent);background:linear-gradient(90deg,color-mix(in srgb,var(--ui-accent) 7%,transparent),transparent);border-radius:8px;padding-left:9px}
.studio-v3 .tracks{margin-top:20px;display:grid;gap:2px}

/* ============ Workspace top row ============ */
.workspace-top{margin-bottom:22px;letter-spacing:1.6px}
.workspace-top a{border-radius:999px;border-color:var(--ui-line);background:var(--ui-card);padding:8px 15px}
.studio-v3 .flow{padding-left:4px}

/* ============ Chat app style: IM bubbles (enhances chat-responsive.css) ============ */
.chat-main{max-width:1200px}
.chat-layout{border-radius:var(--ui-radius-lg);overflow:hidden;border-color:var(--ui-line-soft)}
.chat-sidebar,.chat-room{border-color:var(--ui-line-soft)}
.chat-sidebar{border-right:1px solid var(--ui-line-soft)}
#messages{display:flex;flex-direction:column;gap:2px;padding:16px 12px;background:color-mix(in srgb,var(--ui-card-3) 55%,transparent)}
.chat-room .message>p{
  border-radius:4px 14px 14px 14px;background:var(--ui-card-2);
  border:1px solid var(--ui-line-soft);padding:10px 14px;box-shadow:var(--ui-shadow-sm)}
.chat-room .message.mine>p{
  border-radius:14px 4px 14px 14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 22%,transparent),color-mix(in srgb,var(--ui-accent) 7%,transparent));
  border-color:color-mix(in srgb,var(--ui-accent) 26%,transparent)}
.chat-system-message{margin:10px auto;padding:6px 14px;border-radius:999px;background:transparent;border:0;font-size:11px;max-width:80%}
.chat-compose{
  position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--ui-card) 30%);padding:12px 2px 4px}
.chat-compose textarea{border-radius:var(--ui-radius);background:var(--ui-card-3);border-color:var(--ui-line)}
.chat-compose .primary{
  background:linear-gradient(135deg,var(--ui-accent),color-mix(in srgb,var(--ui-accent) 75%,#000));
  color:var(--ui-accent-ink);font-weight:700;border:0;border-radius:var(--ui-radius-sm);
  box-shadow:0 4px 14px color-mix(in srgb,var(--ui-accent) 22%,transparent)}
.conversation-item.active{background:color-mix(in srgb,var(--ui-accent) 12%,transparent)!important;color:var(--ui-accent)!important}
@keyframes ui-msg-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:760px){.message{max-width:94%}}

/* ============ Desktop / PC shell (Windows client + web desktop) ============ */
@media(min-width:761px){
  body.app-shell aside{background:linear-gradient(180deg,var(--ui-card),var(--ui-card-3));gap:14px;padding:18px 12px}
  body.app-shell aside nav{display:grid;gap:3px}
  body.app-shell aside nav button{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;color:var(--ui-muted);font-size:13px}
  body.app-shell aside nav button::before{content:'';display:inline-grid;place-items:center;width:16px;height:16px;font-size:13px;color:var(--ui-faint)}
  body.app-shell aside nav button[data-route="music"]::before{content:'✦'}
  body.app-shell aside nav button[data-route="library"]::before{content:'♫'}
  body.app-shell aside nav button[data-route="history"]::before{content:'↻'}
  body.app-shell aside nav button[data-route="lyrics"]::before{content:'✎'}
  body.app-shell aside nav button[data-route="cover"]::before{content:'◈'}
  body.app-shell aside nav button[data-route="account"]::before{content:'◉'}
  body.app-shell aside nav button[data-route="rewards"]::before{content:'☆'}
  body.app-shell aside nav button[data-route="distribution"]::before{content:'⇪'}
  body.app-shell aside nav button[data-route="mv"]::before{content:'▷'}
  body.app-shell aside nav button[data-route="space"]::before{content:'☺'}
  body.app-shell aside nav button[data-route="recharge"]::before{content:'¥'}
  body.app-shell aside nav button[data-route="chat"]::before{content:'☏'}
  body.app-shell aside nav button[data-route="preferences"]::before{content:'◍'}
  body.app-shell aside nav button[data-route="guide"]::before{content:'◌'}
  body.app-shell aside nav button:hover{background:color-mix(in srgb,var(--ui-accent-2) 8%,transparent);color:var(--ui-text)}
  body.app-shell aside nav button[aria-current=page]{
    background:linear-gradient(90deg,color-mix(in srgb,var(--ui-accent-2) 14%,transparent),color-mix(in srgb,var(--ui-accent-2) 3%,transparent));
    color:var(--ui-accent-2);border:1px solid color-mix(in srgb,var(--ui-accent-2) 18%,transparent)}
  body.app-shell aside nav button[aria-current=page]::before{color:var(--ui-accent-2)}
  body.app-shell footer{background:linear-gradient(110deg,var(--ui-card-2),var(--ui-card-3));border-top-color:var(--ui-line-soft)}
  body.app-shell footer #toggle{background:linear-gradient(135deg,var(--ui-accent),color-mix(in srgb,var(--ui-accent) 75%,#000));color:var(--ui-accent-ink);box-shadow:0 4px 16px color-mix(in srgb,var(--ui-accent) 24%,transparent)}
  body.app-shell header{background:var(--ui-card-3);border-bottom:1px solid var(--ui-line-soft)}
  /* ===== 左侧导航立体按钮（覆盖默认平面样式） ===== */
  body.app-shell aside nav{gap:8px}
  body.app-shell aside nav button{position:relative;overflow:hidden;border-radius:16px;padding:11px 14px;background:linear-gradient(180deg,#2b323e 0%,#232935 55%,#1b2029 100%);border:1px solid #414a59;border-top-color:#556074;box-shadow:0 1px 0 #0a0c10 inset,0 2px 6px #0000004d,0 1px 0 #ffffff12;color:#c5cddb;font-weight:600;letter-spacing:.03em;transition:transform .22s cubic-bezier(.34,1.56,.64,1),filter .22s ease,box-shadow .28s ease,border-color .28s ease}
  body.app-shell aside nav button::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 34%,#ffffff2e 50%,transparent 66%);transform:translateX(-130%);transition:transform .6s cubic-bezier(.4,0,.2,1)}
  body.app-shell aside nav button:not([aria-current=page]):hover{filter:brightness(1.14);transform:translateY(-2px);border-color:#58647f;border-top-color:#6e7d9c;box-shadow:0 1px 0 #0a0c10 inset,0 7px 14px #00000066,0 2px 0 #ffffff14}
  body.app-shell aside nav button:not([aria-current=page]):hover::after{transform:translateX(130%)}
  body.app-shell aside nav button:active{transform:translateY(1px) scale(.985);filter:brightness(.92);box-shadow:0 0 0 1px #3a4350 inset,0 1px 3px #0006}
  @keyframes uiNavGlow{0%,100%{opacity:.45}50%{opacity:1}}
  body.app-shell aside nav button[aria-current=page]{background:linear-gradient(180deg,#42562e 0%,#324227 60%,#293521 100%);border-color:#627a3c;border-top-color:#78954a;color:#e0f9b4;text-shadow:0 1px 0 #0000004d;box-shadow:inset 3px 0 0 #b8ee71,0 1px 0 #0c0f0a inset,0 4px 10px #00000059,0 1px 0 #ffffff1a}
  body.app-shell aside nav button[aria-current=page]::after{background:radial-gradient(120% 90% at 50% 0%,#ffffff22,transparent 60%);transform:none;animation:uiNavGlow 2.6s ease-in-out infinite}
  body.app-shell aside nav button[aria-current=page]::before{color:#d6f5a2}
}

/* ============ Mobile shell (Android client + iPhone PWA) ============ */
@media(max-width:760px){
  body.app-shell header{background:var(--ui-card-3)}
  body.app-shell .mobile-nav{background:var(--ui-card);border-top:1px solid var(--ui-line-soft)}
  body.app-shell .mobile-nav button{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border-radius:12px;min-height:52px;font-size:11px;color:var(--ui-muted)}
  body.app-shell .mobile-nav button::before{content:'';width:22px;height:22px;display:grid;place-items:center;font-size:19px;line-height:1}
  body.app-shell .mobile-nav button[data-route="music"]::before{content:'✦'}
  body.app-shell .mobile-nav button[data-route="library"]::before{content:'♫'}
  body.app-shell .mobile-nav button[data-route="chat"]::before{content:'☏'}
  body.app-shell .mobile-nav button[data-route="space"]::before{content:'◉'}
  body.app-shell .mobile-nav #moreNav::before{content:'☷'}
  body.app-shell .mobile-nav button[aria-current=page]{
    color:var(--ui-accent-2);background:linear-gradient(180deg,color-mix(in srgb,var(--ui-accent-2) 13%,transparent),color-mix(in srgb,var(--ui-accent-2) 4%,transparent))}
  body.app-shell .mobile-nav button[aria-current=page]::before{color:var(--ui-accent-2)}
  body.app-shell footer{background:var(--ui-card-2);border-top-color:var(--ui-line-soft)}
  body.app-shell footer #toggle{background:var(--ui-accent);color:var(--ui-accent-ink);border-radius:50%;width:40px;height:40px}
}

/* ============ Standalone PWA (added to home screen) ============ */
@media(display-mode:standalone){
  body.app-shell header{height:calc(52px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
  body.app-shell footer{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  body.app-shell .mobile-nav{padding-bottom:env(safe-area-inset-bottom)}
}

/* ============ Embedded iframe pages inside shell ============ */
html[data-web-embedded] .studio-v3 aside nav button{font-size:13px;padding:9px 11px}
html[data-web-embedded] .studio-v3 .card{border-radius:16px}
html[data-web-embedded] .studio-v3 .workspace-top a{background:transparent}

/* ============ Preferences: theme picker ============ */
.studio-v3 #preferences .card label{display:flex;align-items:center;gap:10px}
.studio-v3 #preferences .card select{width:auto;min-width:160px}
#themeSwatches{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 18px}
#themeSwatches button{
  width:38px;height:38px;border-radius:50%;border:2px solid var(--ui-line);background:var(--sw);
  cursor:pointer;padding:0;position:relative;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
#themeSwatches button:hover{transform:scale(1.12);border-color:#fff}
#themeSwatches button.active{box-shadow:0 0 0 3px var(--ui-card),0 0 0 5px var(--sw);border-color:#fff;transform:scale(1.08)}

/* ============ Reduced motion ============ */
@media(prefers-reduced-motion:reduce){
  .studio-v3 aside nav button,.studio-v3 button,.studio-v3 .file,.message{transition:none;animation:none}
}

/* ============ Chat fullscreen (hide shell chrome) ============ */
body.app-shell.chat-fullscreen footer{display:none!important}
body.app-shell.chat-fullscreen .mobile-nav{display:none!important}
body.app-shell.chat-fullscreen header{display:none!important}
body.app-shell.chat-fullscreen #surfaces{padding:0!important}
body.app-shell.chat-fullscreen .assistant-launch{display:none!important}
@media(max-width:760px){
  body.app-shell.chat-fullscreen #surfaces{bottom:0!important;height:100dvh!important}
}

/* ============ AI assistant robot branding ============ */
.assistant-panel{background:linear-gradient(170deg,#1d2431,#161b25)!important}

/* ============ Mobile creation center: full redesign ============ */
@media(max-width:760px){
  html[data-web-embedded] .studio-v3 main{padding:10px 12px 24px!important}
  /* headline: compact hero, project switch as full-width bar */
  html[data-web-embedded] .studio-v3 .headline{margin:2px 0 12px;display:block}
  html[data-web-embedded] .studio-v3 .headline h1{font-size:25px;letter-spacing:-.4px;margin:0 0 2px}
  html[data-web-embedded] .studio-v3 .headline p{font-size:12px;margin:0 0 10px;color:var(--ui-muted)}
  html[data-web-embedded] .project-switch{
    display:flex;align-items:center;gap:8px;width:100%;margin:0 0 6px;
    padding:6px 4px;border-radius:12px;background:var(--ui-card-3);border:1px solid var(--ui-line-soft)}
  html[data-web-embedded] .project-switch select{
    flex:1;width:0;margin:0;padding:9px 10px 9px 32px;min-height:38px;font-size:13px;
    background:var(--ui-card-3);border:0;border-radius:10px;font-weight:600;color:var(--ui-text)}
  html[data-web-embedded] .project-switch svg{left:12px;width:14px;height:14px;color:var(--ui-accent)}
  /* toolbar: sticky compact strip */
  html[data-web-embedded] .studio-v3 .toolbar{
    position:sticky;top:0;z-index:30;display:flex;flex-wrap:nowrap;gap:6px;
    padding:8px;border-radius:14px;background:color-mix(in srgb,var(--ui-card) 94%,transparent);
    backdrop-filter:blur(14px);border:1px solid var(--ui-line-soft);margin-bottom:12px}
  html[data-web-embedded] .studio-v3 .toolbar>input{
    flex:1;min-width:0;padding:9px 6px;font-size:14px;background:transparent;border:0;display:none}
  html[data-web-embedded] .studio-v3 .toolbar #pipeline{
    font-size:13px;padding:9px 12px;min-height:40px;border-radius:11px;flex:1;
    box-shadow:0 6px 18px color-mix(in srgb,var(--ui-accent) 22%,transparent)}
  html[data-web-embedded] .studio-v3 .toolbar>button:not(.primary),html[data-web-embedded] .studio-v3 .toolbar>.file{
    font-size:0;padding:9px 11px;min-height:40px;border-radius:11px;border-color:var(--ui-line-soft);background:var(--ui-card-2)}
  html[data-web-embedded] .studio-v3 .toolbar>button:not(.primary)::after,html[data-web-embedded] .studio-v3 .toolbar>.file::after{
    font-size:13px;line-height:1}
  html[data-web-embedded] .studio-v3 .toolbar button#new::after{content:'新建'}
  html[data-web-embedded] .studio-v3 .toolbar .file::after{content:'导入'}
  html[data-web-embedded] .studio-v3 .toolbar button#save::after{content:'保存'}
  html[data-web-embedded] .studio-v3 .toolbar button#export::after{content:'导出'}
  html[data-web-embedded] .studio-v3 .flow{display:none}
  /* generation card: Suno-like, input-first */
  html[data-web-embedded] .studio-v3 .music-grid .card:first-child{
    padding:18px 14px;border-radius:18px;
    background:
      radial-gradient(130% 70% at 100% 0%,color-mix(in srgb,var(--ui-accent) 14%,transparent),transparent 55%),
      linear-gradient(165deg,var(--ui-card),var(--ui-card-3))}
  html[data-web-embedded] .studio-v3 .music-grid .card:first-child>h2{font-size:17px;margin-bottom:14px}
  html[data-web-embedded] .studio-v3 .music-grid .card:first-child label{font-size:12px;margin-bottom:12px}
  html[data-web-embedded] .studio-v3 .music-grid .card:first-child :is(input,select,textarea){
    font-size:15px;padding:11px 12px;min-height:44px;border-radius:13px;margin-top:5px}
  html[data-web-embedded] .studio-v3 .music-grid .card:first-child textarea[data-field=musicStyle]{
    min-height:88px;font-size:14px}
  html[data-web-embedded] .studio-v3 .music-grid .card:first-child #musicGenerate{
    min-height:52px;font-size:15px;font-weight:800;border-radius:14px;margin-top:6px}
  /* listening card */
  html[data-web-embedded] .studio-v3 .card.listening{padding:16px 12px;border-radius:18px}
  html[data-web-embedded] .studio-v3 .card.listening .listening-inner{grid-template-columns:1fr;gap:10px;min-height:0}
  html[data-web-embedded] .studio-v3 .disc{width:128px;margin:14px auto}
  html[data-web-embedded] .studio-v3 .lyric-scroll{height:170px;font-size:14px;border-radius:12px;background:var(--ui-card-3);padding:8px 10px}
  /* lyrics & cover pages */
  html[data-web-embedded] .studio-v3 .lyrics-layout .card,html[data-web-embedded] .studio-v3 #cover .card{
    padding:16px 12px;border-radius:18px}
  html[data-web-embedded] .studio-v3 .lyrics-editor{min-height:240px;font-size:15px}
  html[data-web-embedded] .studio-v3 .step-label{margin-bottom:10px}
  html[data-web-embedded] .studio-v3 .hint{font-size:11px;line-height:1.6;color:var(--ui-faint)}
  html[data-web-embedded] .studio-v3 .row{gap:8px}
  html[data-web-embedded] .studio-v3 .row>label{min-width:0;flex:1}
  html[data-web-embedded] .studio-v3 .row>label>select{width:100%}
  /* status pill */
  html[data-web-embedded] #status{
    font-size:11px;line-height:1.5;padding:7px 12px;margin:0 0 10px;border-radius:999px;
    border-left:0;background:var(--ui-card-3);border:1px solid var(--ui-line-soft);color:var(--ui-muted)}
  /* player */
  html[data-web-embedded] .studio-v3 .player{padding:14px;border-radius:18px}
  html[data-web-embedded] .studio-v3 .player .row{flex-wrap:nowrap;overflow-x:auto}
  html[data-web-embedded] .studio-v3 .player .row>div:first-child{min-width:0;flex:1}
  /* project actions menu: compact */
  html[data-web-embedded] .studio-v3 .project-actions-menu{padding:10px 12px;border-radius:14px;font-size:11px}
}

/* ============ Mobile chat home: cleaner density ============ */
@media(max-width:760px){
  html[data-web-embedded] .chat-room .message>p{font-size:14px;padding:10px 13px}
  html[data-web-embedded] .chat-room #roomCounts{font-size:11px;margin:0 0 6px}
  html[data-web-embedded] .chat-room #roomHint{font-size:11px;color:var(--ui-muted);margin:0 0 6px;line-height:1.6}
  html[data-web-embedded] #memberDetails>summary{font-size:11px;padding:4px 0}
  html[data-web-embedded] .conversation-item{min-height:64px;padding:12px 10px}
  html[data-web-embedded] .conversation-avatar{width:38px;height:38px;font-size:16px}
  html[data-web-embedded] .chat-room #composer{position:sticky;bottom:0;background:var(--ui-card);padding:8px 6px 2px;border-radius:14px 14px 0 0}
  /* shell chrome: hide secondary identity row in chat view, trim header */
  body.app-shell[data-current-view=chat] header{height:calc(44px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
  body.app-shell[data-current-view=chat] #profileShortcut{display:none!important}
  body.app-shell[data-current-view=chat] #shellTitle{font-size:14px}
}

/* ============ Global: reduce clutter density ============ */
.studio-v3 .hint{color:var(--ui-faint)}
.studio-v3 .headline p{color:var(--ui-muted)}
html[data-web-embedded] .studio-v3 .headline p{font-size:12px}

/* ============ Project actions menu (compact, near status) ============ */
.studio-v3 .project-actions-menu{
  position:relative;display:inline-block;margin:2px 0 14px;border-radius:12px;
  background:var(--ui-card-3);border:1px solid var(--ui-line-soft)}
.studio-v3 .project-actions-menu>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:8px 14px;font-size:12px;font-weight:600;color:var(--ui-muted);border-radius:12px}
.studio-v3 .project-actions-menu>summary::-webkit-details-marker{display:none}
.studio-v3 .project-actions-menu>summary:hover{color:var(--ui-text)}
.studio-v3 .project-actions-menu[open]>summary{border-bottom:1px solid var(--ui-line-soft);border-radius:12px 12px 0 0;color:var(--ui-text)}
.studio-v3 .project-actions-menu>summary::after{content:'▾';margin-left:2px;font-size:10px;color:var(--ui-faint)}
.studio-v3 .project-actions-menu[open]>summary::after{content:'▴'}
.studio-v3 .project-actions-menu[open]{position:relative}
.studio-v3 .project-actions-menu[open] .project-actions-items{
  position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:230px;box-sizing:border-box;
  background:var(--ui-card-3);border:1px solid var(--ui-line-soft);border-radius:12px;
  box-shadow:0 12px 30px #0006;padding:6px 0}
.studio-v3 .project-actions-menu .project-actions-items>*{
  display:block;width:100%;margin:0;padding:10px 14px;font-size:12px;text-align:left;
  background:transparent;border:0;color:var(--ui-muted);cursor:pointer;text-decoration:none;white-space:normal}
.studio-v3 .project-actions-menu .project-actions-items>*:hover{background:color-mix(in srgb,var(--ui-accent-2) 8%,transparent);color:var(--ui-text)}
.studio-v3 .project-actions-menu .project-actions-items>*:last-child{border-radius:0 0 12px 12px}
.studio-v3 .project-actions-menu .project-actions-items .project-picker-label{
  display:flex;align-items:center;gap:10px;color:var(--ui-muted);font-size:12px;margin:0;padding:10px 14px}
.studio-v3 .project-actions-menu .project-actions-items .project-picker-label select{
  flex:1;width:0;min-width:0;margin:0;padding:7px 10px;font-size:12px;min-height:34px;border-radius:9px;
  background:var(--ui-card-3);border:1px solid var(--ui-line);color:var(--ui-text)}
html[data-web-embedded] .studio-v3 .project-actions-menu{font-size:12px}
@media(max-width:760px){
  html[data-web-embedded] .studio-v3 .project-actions-menu{margin:0 0 10px;width:100%}
  html[data-web-embedded] .studio-v3 .project-actions-menu>summary{width:100%;justify-content:space-between}
}

/* ============ Grey buffered seek bar (all players, all ends) ============ */
.seek-wrap{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0;height:100%}
.seek-wrap>input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:100%;margin:0;padding:0;background:transparent!important;border:0;outline-offset:2px;z-index:3;min-height:0;position:relative}
.seek-wrap>input[type=range]::-webkit-slider-runnable-track{background:transparent}
.seek-wrap>input[type=range]::-moz-range-track{background:transparent}
.seek-wrap>input[type=range]::-moz-range-progress{background:transparent}
.seek-wrap>input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 2px #00000045,0 1px 5px #000a;cursor:pointer;margin-top:0}
.seek-wrap>input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 2px #00000045,0 1px 5px #000a;cursor:pointer}
.seek-wrap>input[type=range]:disabled::-webkit-slider-thumb,.seek-wrap>input[type=range]:disabled::-moz-range-thumb{opacity:.45}
.seek-wrap i{position:absolute;left:0;top:50%;transform:translateY(-50%);height:4px;border-radius:2px;pointer-events:none;z-index:1}
.seek-wrap .seek-buffer-load{background:#3f4550;width:0}
.seek-wrap .seek-buffer-play{background:color-mix(in srgb,var(--ui-accent,#b8ef73) 88%,#fff);box-shadow:0 0 8px color-mix(in srgb,var(--ui-accent,#b8ef73) 45%,transparent);width:0}
html[data-mode=light] .seek-wrap .seek-buffer-load{background:#cfd3da}
html[data-mode=light] .seek-wrap .seek-buffer-play{box-shadow:none}
/* Shell footer seek is a full-width thin bar: keep wrap full-bleed */
footer .seek-wrap{flex:1 1 auto;min-width:0;position:relative}
footer #seek,.app-shell footer #seek{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;background:transparent!important;opacity:1!important}
.app-shell footer .seek-wrap{height:100%;min-height:0}
.shared-timeline .seek-wrap{flex:1 1 auto;min-width:0;width:auto}
.player-timeline .seek-wrap{flex:1 1 auto;min-width:0;width:auto}
.player-timeline .seek-wrap>input,.shared-timeline .seek-wrap>input{width:100%;height:100%}
.chat-song-timeline .seek-wrap{flex:1 1 auto;min-width:0;width:auto}
.chat-song-timeline .seek-wrap>input{width:100%;height:100%}
@media(max-width:760px){
  .seek-wrap i{height:3px}
  .seek-wrap>input[type=range]::-webkit-slider-thumb{width:9px;height:9px}
  .seek-wrap>input[type=range]::-moz-range-thumb{width:9px;height:9px}
  footer .seek-wrap{margin:0;padding:0}
}



/* 批量选择 */
.own-work-card{position:relative}
.batch-check{position:absolute;top:12px;left:12px;width:18px;height:18px;accent-color:#8a6cd1;z-index:3;cursor:pointer;transform:scale(1.15)}
.batch-actions{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;background:#171a26;border:1px solid #262b3d;border-radius:12px;flex-wrap:wrap}
.batch-actions span{margin-right:auto;color:#9aa3b5;font-size:13px}
.batch-actions button{background:#262b3d;border:1px solid #343b52;color:#e8ecf5;padding:6px 14px;border-radius:10px;cursor:pointer;font-size:13px}
.batch-actions button:disabled{opacity:.4;cursor:not-allowed}
.batch-actions button:hover:not(:disabled){background:#343b52}
#batchDeleteOwn{color:#ff7a7a}

.generation-track{position:relative}.gen-delete{position:absolute;top:10px;right:10px;background:#2a1d24;border:1px solid #5a3340;color:#ff8f8f;padding:4px 10px;border-radius:8px;font-size:11px;cursor:pointer}.gen-delete:hover{background:#3a2430}

.cover-track-picker{background:#1a1e2d;border:1px solid #2c3247;border-radius:14px;padding:18px;color:#e8ecf5;min-width:340px;max-width:460px}.cover-track-picker::backdrop{background:rgba(8,10,16,.6)}.cover-track-picker strong{font-size:15px;display:block;margin-bottom:12px}.cover-track-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;max-height:320px;overflow-y:auto}.cover-track-list button{background:#262b3d;border:1px solid #343b52;color:#e8ecf5;padding:10px 14px;border-radius:10px;cursor:pointer;text-align:left;font-size:13px}.cover-track-list button:hover{background:#343b52;border-color:#8a6cd1}.cover-track-picker>button{background:#262b3d;border:1px solid #343b52;color:#e8ecf5;padding:8px 16px;border-radius:10px;cursor:pointer}

/* 去装饰横幅 */ .studio-v3 .headline{display:none} .studio-v3 #status:empty{display:none}

/* 顶部反馈弹窗 */ .studio-v3 #status{position:fixed;top:26px;left:50%;transform:translateX(-50%);z-index:9999;max-width:min(680px,92vw);padding:10px 18px;border-radius:12px;font-size:14px;font-weight:600;line-height:1.5;box-shadow:0 10px 30px rgba(0,0,0,.55);transition:opacity .35s,transform .35s;pointer-events:none;visibility:visible;opacity:1;background:none;border:none}.studio-v3 #status.toast-ok{background:#149144;border:1px solid #8cecb0;color:#f0fdf4;animation:toastPop .3s ease}.studio-v3 #status.toast-err{background:#c52222;border:1px solid #fecaca;color:#fff5f5;animation:toastPop .3s ease}.studio-v3 #status.toast-hide{opacity:0;transform:translate(-50%,-16px);visibility:hidden}.studio-v3 #status.toast-ok::before{content:'✓ ';font-weight:800}.studio-v3 #status.toast-err::before{content:'✕ ';font-weight:800}@keyframes toastPop{0%{opacity:0;transform:translate(-50%,-14px) scale(.92)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}

/* 创作中心三等分布局+拖拽调宽 */ html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid,.studio-v3 .music-grid{grid-template-columns:var(--mc1,1fr) var(--mc2,1fr) var(--mc3,1fr)!important;position:relative;align-items:stretch!important}.studio-v3 .music-grid>.card,.studio-v3 .music-grid>.personal-works{min-width:0;height:auto}.col-resize-handle{position:absolute;top:0;bottom:0;width:12px;margin-left:-6px;cursor:col-resize;z-index:5;background:transparent;touch-action:none}.col-resize-handle::after{content:'';position:absolute;left:4px;top:10%;bottom:10%;width:4px;border-radius:2px;background:#ffffff18;transition:background .2s,width .2s}.col-resize-handle:hover::after,.col-resize-handle:active::after{background:rgba(138,108,209,.55);width:6px}.music-grid .col-resize-handle::after{display:none}@media(max-width:1250px){.col-resize-handle{display:none}}
/* 创作中心三列等高铺满整区 */ html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid{min-height:calc(100dvh - 40px)!important}.studio-v3 .music-grid>.mini-player{align-self:stretch!important}.studio-v3 .music-grid>.mini-player>.mini-record{margin-top:auto;margin-bottom:8px}.studio-v3 .music-grid>.mini-player .mini-lyrics{height:auto;max-height:none;overflow:visible}
/* 创作中心内容区铺满全宽 */ html[data-web-embedded] .studio-v3 main{max-width:none!important;width:auto!important}
/* 正在聆听列内容垂直居中铺满 */ html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid>.mini-player{display:flex!important;flex-direction:column;justify-content:center}.music-grid>.mini-player .mini-lyrics{width:100%}
/* 我的作品列表铺满整列+移除收起按钮 */ html[data-web-embedded] .studio-v3 #ownWorks{max-height:none!important;min-height:0!important;overflow:visible!important}.personal-works-close,.personal-works-toggle{display:none!important}
/* 底部播放条仅播放时显示 */ footer[hidden]{display:none!important}footer.hide-when-idle[hidden]{display:none!important}

/* 乐studio 品牌与正在聆听 */
.app-shell .brand{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}
.app-shell .brand img{width:44px;height:44px;border-radius:12px;box-shadow:0 2px 10px #0006}
.app-shell .brand span{font-size:20px;font-weight:800;letter-spacing:.05em;color:#c0f57a}
@media(max-width:760px){.app-shell .brand img{width:34px;height:34px;border-radius:9px}.app-shell .brand span{display:none}}
.mini-artist:empty,.listening #trackArtist:empty{display:none}

.studio-v3 .brand img,.account-rail .brand img{width:46px;height:46px;border-radius:12px;box-shadow:0 2px 10px #0006}
@media(max-width:760px){.studio-v3 .brand img{width:40px;height:40px}.account-rail .brand img{width:38px;height:38px}}

/* 正在聆听：未播放时内容垂直居中、歌词区隐藏；播放后恢复正常 */
html[data-web-embedded] .studio-v3 .card.listening .listening-inner:has(#trackArtist:empty){display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:430px;padding:6px 0}
html[data-web-embedded] .studio-v3 .card.listening .listening-inner:has(#trackArtist:empty) #lyricScroll{display:none}
html[data-web-embedded] .studio-v3 .card.listening .listening-inner:has(#trackArtist:empty) .disc{margin:10px auto}

/* 正在聆听 mini-player：未播放时内容靠上、歌词占位 */
html[data-web-embedded] .studio-v3 .music-grid>.mini-player:has(.mini-artist:empty){justify-content:flex-start!important;padding-top:28px}
html[data-web-embedded] .studio-v3 .music-grid>.mini-player:has(.mini-artist:empty)>.mini-record{margin-top:0!important;margin-bottom:10px}
html[data-web-embedded] .studio-v3 .music-grid>.mini-player:has(.mini-artist:empty) .mini-title{margin-bottom:2px}
html[data-web-embedded] .studio-v3 .music-grid>.mini-player:has(.mini-artist:empty) .mini-lyrics-wrap{display:none!important}
html[data-web-embedded] .studio-v3 .music-grid>.mini-player:has(.mini-artist:empty) .mini-style{display:none!important}

/* 正在聆听：转盘固定不被顶动、歌词区占剩余空间滚动、底部风格提示词+一键复制 */
html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid>.mini-player{justify-content:flex-start!important;overflow:hidden}
.studio-v3 .music-grid>.mini-player>.mini-record{margin-top:0!important;margin-bottom:8px}
.studio-v3 .music-grid>.mini-player .mini-heading,.studio-v3 .music-grid>.mini-player .mini-record,.studio-v3 .music-grid>.mini-player .mini-title,.studio-v3 .music-grid>.mini-player .mini-artist{flex-shrink:0}
.studio-v3 .music-grid>.mini-player .mini-lyrics-wrap{display:flex;flex-direction:column;gap:6px;min-height:0;flex:1 1 auto}
.studio-v3 .music-grid>.mini-player .mini-lyrics-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#7e8aa0;flex-shrink:0}
.studio-v3 .music-grid>.mini-player .mini-lyrics{height:auto!important;max-height:none!important;overflow-y:auto!important;flex:1 1 auto;min-height:0;scrollbar-width:thin}
.studio-v3 .music-grid>.mini-player .mini-style{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding:10px 12px;border:1px solid #ffffff12;border-radius:12px;background:#151a23;flex-shrink:0}
.studio-v3 .music-grid>.mini-player .mini-style-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#7e8aa0}
.studio-v3 .music-grid>.mini-player .mini-copy{flex:none;padding:4px 12px;border:1px solid #b8ee7130;border-radius:8px;background:#b8ee7114;color:#c0f57a;font-size:11px;cursor:pointer;font-family:inherit}
.studio-v3 .music-grid>.mini-player .mini-copy:active{background:#b8ee7126}
.studio-v3 .music-grid>.mini-player .mini-style-text{margin:0;font-size:12px;line-height:1.6;color:#c6cede;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Logo 竖排：正方形"乐"在上，"studio"在下 */
.app-shell .brand,.studio-v3 .brand,.account-rail .brand{flex-direction:column;gap:4px}
.app-shell .brand span{font-size:15px;letter-spacing:.14em;line-height:1.05}
.studio-v3 .brand span,.account-rail .brand span{font-size:15px}
.studio-v3 .brand small,.account-rail .brand small{margin-top:1px;letter-spacing:.12em}

/* 创作中心三列统一固定一屏高度、宽度自适应：中间两列内容超长在列内滚动，正在聆听保持原有结构 */
html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid{height:calc(100dvh - 40px)!important;max-height:calc(100dvh - 40px)!important;min-height:0!important;overflow:hidden;grid-template-rows:100%!important}
html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid>.card,html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid>.personal-works{height:100%!important;min-height:0!important;overflow-y:auto!important}
html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid>.mini-player{height:100%!important;max-height:100%!important;min-height:0!important}

/* 创作中心随分辨率整体适配：小屏（笔记本/低视口）关键元素自动缩小，保持一屏铺满不溢出 */
@media(min-width:761px) and (max-height:900px){
 html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid{gap:12px!important}
 html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid>.card,html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid>.personal-works{padding:12px 16px!important}
 html[data-web-embedded] .studio-v3 .music-grid>.mini-player .mini-record{width:min(70%,clamp(130px,24vh,200px))!important;margin:12px auto 8px!important}
 html[data-web-embedded] .studio-v3 .music-grid>.mini-player .mini-title{font-size:clamp(14px,2.4vh,18px)!important}
 html[data-web-embedded] .studio-v3 .music-grid>.mini-player .mini-artist{font-size:clamp(11px,1.8vh,13px)!important}
 html[data-web-embedded] .studio-v3 .music-grid>.mini-player .mini-lyrics{height:auto!important;flex:1!important;min-height:0!important;padding:18px 5px!important}
 html[data-web-embedded] .studio-v3 .music-grid>.mini-player .mini-style-text{font-size:clamp(11px,1.6vh,13px)!important}
 html[data-web-embedded] .studio-v3 .music-grid .own-work-card{padding:9px 5px!important}
 html[data-web-embedded] .studio-v3 .music-grid .own-work-card .album-cover{width:48px!important;height:48px!important}
 html[data-web-embedded] .studio-v3 .music-grid>.mini-player .mini-lyrics button,html[data-web-embedded] .studio-v3 .music-grid>.mini-player .mini-lyrics p{font-size:13px!important;padding:7px 0!important}
}
@media(min-width:761px) and (max-height:700px){
 html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid>.card,html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid>.personal-works{padding:10px 12px!important}
 html[data-web-embedded] .studio-v3 .music-grid>.mini-player .mini-record{width:min(60%,clamp(110px,20vh,150px))!important;margin:8px auto 6px!important}
 html[data-web-embedded] .studio-v3 .music-grid>.mini-player .mini-title{font-size:clamp(13px,2vh,15px)!important}
}

/* 正在聆听随选中状态显示：未选中整列隐藏、作品列表延伸铺满；选中弹出并直接显示歌词/提示词/封面 */
html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid>.mini-player[data-state=""]{display:none!important}
html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid:has(> .mini-player[data-state=""]){grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr)!important}
html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid:has(> .mini-player[data-state]:not([data-state=""])){grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr) minmax(250px,.6fr)!important}
/* 底部播放条：创作中心常驻固定底部，不隐藏 */
/* 底部播放条：由外壳层 footer 常驻显示，内嵌页不再叠加播放条 */
/* 左侧导航文字居中 */
.app-shell aside nav button{text-align:center!important}
.app-shell aside>a:last-child{text-align:center!important}
/* 生成失败提示：显示数秒让用户看到退还积分，随后自动淡出消失（删除按钮保留） */
.generation-track.is-failed p{animation:lemu-fail-fade 5.5s ease forwards}
@keyframes lemu-fail-fade{0%,80%{opacity:1}100%{opacity:0;visibility:hidden}}
/* 创作面板与作品列表隐藏滚动条（容器内仍可滚动），避免右侧出现竖线 */
html[data-web-embedded] .studio-v3 .music-grid>.card,html[data-web-embedded] .studio-v3 .music-grid>.personal-works{scrollbar-width:none}
html[data-web-embedded] .studio-v3 .music-grid>.card::-webkit-scrollbar,html[data-web-embedded] .studio-v3 .music-grid>.personal-works::-webkit-scrollbar{display:none}
/* 风格大类下拉 */
.style-cat-select{width:100%;background:#20242f;color:#e8e9f3;border:1px solid #3a3f52;border-radius:10px;padding:9px 12px;font-size:13px;margin-bottom:10px;outline:none;cursor:pointer}
/* 自定义风格标签：标签+删除按钮一体 */
.custom-style-wrap{display:inline-flex;align-items:stretch;gap:0}
.custom-style-wrap .custom-style{border-radius:10px 0 0 10px}
.custom-style-del{min-width:0!important;padding:10px 9px!important;border-left:1px solid #3a3f52;border-radius:0 10px 10px 0;background:#20242f;color:#9aa3b5;font-size:13px;line-height:1;cursor:pointer}
.custom-style-del:hover{color:#ff6b6b;border-color:#5a2c2c}

/* 正在聆听：固定一屏高度、滚动时位置固定、宽度自适应 */
html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid>.mini-player{position:sticky!important;top:6px;height:100%!important;max-height:100%!important;align-self:auto!important;min-height:0!important}
html[data-web-embedded] .studio-v3:not(.desktop-library) .music-grid>.mini-player>.mini-heading{flex-shrink:0}

/* 展开播放页：固定一屏高度、内容居中、不翻页滚动 */
html.playback-open{overflow:hidden!important}
#playbackPage{inset:0!important;height:100dvh}
#playbackPage .playback-content{height:100%!important;max-height:100%!important;display:flex;align-items:center;justify-content:center;padding:12px 40px;overflow:hidden}
#playbackPage .playback-detail{width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
#playbackPage .listening-inner{flex:1;max-height:100%;min-width:0}
#playbackPage .lyric-scroll{height:auto!important;max-height:calc(100dvh - 240px);flex-shrink:1}

/* 风格大类+自定义双下拉（web51） */
.style-cat-row{display:flex;gap:8px;margin-bottom:10px;align-items:center;flex-wrap:wrap}
.style-cat-row select{flex:1 1 0;min-width:0;background:#20242f;color:#e8e9f3;border:1px solid #3a3f52;border-radius:10px;padding:9px 12px;font-size:13px;outline:none;cursor:pointer}
.custom-style-del-btn{flex-shrink:0;background:transparent;color:#ff6b6b;border:1px solid #ff6b6b55;border-radius:10px;padding:9px 12px;font-size:13px;cursor:pointer;white-space:nowrap}
.custom-style-del-btn:hover{background:#ff6b6b22}
.custom-style-del-btn[hidden]{display:none}
/* 歌词滚轮聚焦：当前句放大居中、上下缩小（web52） */
.studio-v3 .music-grid>.mini-player .mini-lyrics p,.studio-v3 .music-grid>.mini-player .mini-lyrics button{font-size:12px!important;opacity:.45;line-height:1.55;transition:font-size .4s ease,opacity .4s ease}
.studio-v3 .music-grid>.mini-player .mini-lyrics button.current{font-size:19px!important;opacity:1;line-height:1.65;font-weight:600}
/* 创作中心公告固定条：去除批量选择后置入标题区固定（web53） */
.studio-v3 .personal-works .works-announcement{display:block;margin:0 0 14px;padding:10px 14px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.04);color:#aeb9cc;font-size:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;flex-shrink:0}
.studio-v3 .personal-works .works-announcement[hidden]{display:none}
html[data-web-embedded] .site-announcement{display:none!important}
/* 创作中心：风格标签折叠（web54） */
.studio-v3 .style-grid{max-height:116px;overflow:hidden;transition:max-height .3s ease;position:relative}
.studio-v3 .style-grid.collapsed::after{content:'';position:absolute;left:0;right:0;bottom:0;height:28px;background:linear-gradient(180deg,transparent,#151a24);pointer-events:none}
.studio-v3 .style-grid:not(.collapsed){max-height:900px}
.style-expand{display:inline-block;margin-top:2px;padding:6px 14px;border:1px solid #3a3f52;border-radius:10px;background:#20242f;color:#aeb9cc;font-size:12px;cursor:pointer;transition:background .2s}
.style-expand:hover{background:#2a3040;color:#e8e9f3}
.style-expand[hidden]{display:none}
/* 移动端手机比例（web58）：手机 UI 收细收紧凑，覆盖网页比例，仅 max-width:760px 生效 */
@media (max-width:760px){
  .studio-v3 body,body{font-size:14px;letter-spacing:.1px}
  .studio-v3 button,.studio-v3 .file{min-height:34px;padding:7px 14px;border-radius:9px;font-size:13px}
  .studio-v3 input,.studio-v3 textarea,.studio-v3 select{font-size:13px;padding:8px 10px;border-radius:9px}
  .studio-v3 .card{border-radius:14px;padding:12px}
  .studio-v3 .card h2{font-size:15px}
  .studio-v3 h3,.studio-v3 h4{font-size:13.5px}
  .studio-v3 .toolbar{gap:6px}
  .studio-v3 .toolbar>input{min-height:32px;font-size:13px}
  .studio-v3 .music-grid{gap:10px}
  .studio-v3 .style-grid button{min-height:32px;padding:6px 10px;font-size:12.5px;border-radius:9px}
  .studio-v3 .music-grid .card:first-child textarea[data-field=musicStyle]{min-height:64px;font-size:13px}
  .studio-v3 .track>.row{padding:8px 10px}
  .studio-v3 .meta,.studio-v3 .meta small{font-size:11px}
  .studio-v3 aside nav button{min-height:34px;padding:6px 10px}
  .studio-v3 .panel{padding:10px 12px;border-radius:12px}
  .studio-v3 .grid{gap:10px}
}
@media (max-width:760px){
  .studio-v3 h1{font-size:18px;line-height:1.3;margin:2px 0 4px}
  .studio-v3 h1+p{font-size:12.5px;color:#9aa7b8;margin:0 0 10px}
  .studio-v3 .music-grid{grid-template-columns:1fr;gap:10px}
  .studio-v3 .card{padding:12px;border-radius:14px}
  .studio-v3 .card h2{font-size:14px;margin:0 0 8px}
  .studio-v3 .card h2 span{font-size:11px;color:#7f8ca0}
  .studio-v3 .row{flex-wrap:wrap;gap:8px}
  .studio-v3 label{font-size:12.5px;gap:4px}
  .studio-v3 input,.studio-v3 select,.studio-v3 textarea{font-size:13px;padding:8px 10px;border-radius:9px;min-height:34px}
  .studio-v3 textarea[data-field="lyrics"]{min-height:96px}
  .studio-v3 textarea[data-field="musicStyle"]{min-height:56px}
  .studio-v3 button.primary.wide{min-height:38px;font-size:13.5px;border-radius:10px;margin-top:8px}
  .studio-v3 .hint{font-size:11px}
  .studio-v3 .listening .row.offset button{min-height:28px;padding:4px 8px;font-size:11px}
  .studio-v3 .tracks .track{padding:8px 10px}
  .studio-v3 .toolbar button,.studio-v3 .toolbar .file{min-height:32px;padding:6px 10px;font-size:12px}
}
/* 白天模式：工作台 body 背景（覆盖 web-embedded.css 后加载的深色） */
html[data-mode=light] body{background:#eef7f1!important;color:#24352d!important}
/* 外壳（shell）白天模式：左导航 + 底部播放条 */
html[data-mode=light] aside{background:#fff!important}
html[data-mode=light] nav button{background:#fff!important;border-color:#d8e8df!important;border-top-color:#d8e8df!important;box-shadow:none!important;color:#3a4455!important}
html[data-mode=light] nav button[aria-current=page]{background:#e3f5ea!important;border-color:#cde6d6!important;border-top-color:#d2e8da!important;color:#1f8a5c!important;text-shadow:none!important;box-shadow:none!important}
html[data-mode=light] nav button[aria-current=page]::before{background:linear-gradient(180deg,#8fe0b8,#2fae78);box-shadow:0 0 8px #2fae7866}
html[data-mode=light] aside>a:last-child{background:#eaf6ee!important;border-color:#d8e8df!important;border-top-color:#d8e8df!important;box-shadow:none!important;color:#1f8a5c!important}
html[data-mode=light] footer{background:#fff!important;border-top:1px solid #d8e8df!important}
html[data-mode=light] iframe{background:#eef7f1!important}
html[data-mode=light] header{color:#5f7468!important}
html[data-mode=light] a{color:#1f8a5c!important}
html[data-mode=light] button{color:#3a4455!important}
html[data-mode=light] button:hover{background:#e6f5ec!important}
html[data-mode=light] .brand{color:#1f9d6b!important}
html[data-mode=light] .transport #toggle{color:#1f9d6b!important}
html[data-mode=light] .metadata small{color:#5f7468!important}
html[data-mode=light] #art{background:#e6f5ec!important;color:#1f8a5c!important}
html[data-mode=light] .mobile-nav{background:#fff!important;border-top-color:#d8e8df!important}
html[data-mode=light] .mobile-nav button{background:#fff!important;border-color:#d8e8df!important;color:#3a4455!important}
html[data-mode=light] .mobile-nav button[aria-current=page]{background:#e3f5ea!important;color:#1f8a5c!important}
/* 白天模式补丁：聊天面板 / 外壳头像 */
html[data-mode=light] .chat-sidebar,html[data-mode=light] .chat-room{background:#fff!important;border-color:#d8e8df!important}
html[data-mode=light] .message{background:#e6f5ec!important}
html[data-mode=light] .message.mine{background:#e9dcf7!important}
html[data-mode=light] #profileShortcut{background:#fff!important;border-color:#d8e8df!important;color:#1f8a5c!important}
html[data-mode=light] .header-avatar{background:#e3f5ea!important;color:#1f8a5c!important}
html[data-mode=light] .header-identity small{color:#5f7468!important}
html[data-mode=light] .song-social button,html[data-mode=light] .song-social a,html[data-mode=light] .social-actions button,html[data-mode=light] .social-actions a{background:#e6f5ec!important;color:#1f8a5c!important;border-color:#d8e8df!important}
/* 白天模式补丁：发行卡片 / 通用深色面板 */
html[data-mode=light] .platforms article,html[data-mode=light] article.workflow,html[data-mode=light] article.completion,html[data-mode=light] form{background:#fff!important;border-color:#d8e8df!important}
html[data-mode=light] .task{background:#fff!important;border-color:#d8e8df!important}
html[data-mode=light] .cover-history,html[data-mode=light] .cover-job{background:#fff!important;border-color:#d8e8df!important}
html[data-mode=light] .cover-job img{border-color:#d8e8df!important}

/* ===== 全局设置新增项：界面密度 / 圆角 / 强调色 / 歌词开关 ===== */
:root{--radius:16px}
html .card,html article.card,html .panel,html .sidebar{border-radius:var(--radius,16px)!important}
body[data-density=compact] .card,body[data-density=compact] article.card,body[data-density=compact] .panel,body[data-density=compact] .sidebar{padding:10px 12px!important}
body[data-density=compact] .row,body[data-density=compact] main>section{gap:8px!important}
body[data-density=compact] .track,body[data-density=compact] .space-item,body[data-density=compact] .entry{padding:8px 10px!important}
html[data-accent=green] :is(button.primary,.primary,#togglePlay){background:#1f9d6b!important;border-color:#1f9d6b!important}
html[data-accent=purple] :is(button.primary,.primary,#togglePlay){background:#7a5cc0!important;border-color:#7a5cc0!important}
html[data-accent=pink] :is(button.primary,.primary,#togglePlay){background:#e06a9e!important;border-color:#e06a9e!important}
html[data-accent=blue] :is(button.primary,.primary,#togglePlay){background:#3f8fd4!important;border-color:#3f8fd4!important}
html[data-accent=amber] :is(button.primary,.primary,#togglePlay){background:#d08a2e!important;border-color:#d08a2e!important}
html[data-accent=green] :is(.selected-track,nav .active,.track.selected){background:#1f9d6b18!important;color:#1f9d6b!important}
html[data-accent=purple] :is(.selected-track,nav .active,.track.selected){background:#7a5cc018!important;color:#7a5cc0!important}
html[data-accent=pink] :is(.selected-track,nav .active,.track.selected){background:#e06a9e18!important;color:#e06a9e!important}
html[data-accent=blue] :is(.selected-track,nav .active,.track.selected){background:#3f8fd418!important;color:#3f8fd4!important}
html[data-accent=amber] :is(.selected-track,nav .active,.track.selected){background:#d08a2e18!important;color:#d08a2e!important}
body[data-show-lyrics=off] .lyrics-wrap,body[data-show-lyrics=off] #lyricsPanel,body[data-show-lyrics=off] .lyric-scroll,body[data-show-lyrics=off] .lyric-panel{display:none!important}

/* ===== 使用指南 ===== */
#guide{max-width:none}
#guide .card.narrow{max-width:none;width:100%;padding:22px}
.guide-hero{margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--line,#2a2f3c)}
.guide-hero h2{margin:0 0 6px;font-size:22px;letter-spacing:.5px}
.guide-hero p{margin:0;color:var(--muted,#a8b4c6);font-size:13px}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.guide-card{background:var(--card,#191e27);border:1px solid var(--line,#2a2f3c);border-radius:var(--radius,16px);padding:14px 16px;box-shadow:0 4px 14px #00000014}
.guide-card h3{margin:0 0 8px;font-size:15px;color:var(--accent,#cbf49b)}
.guide-card p{margin:0 0 6px;font-size:13px;color:var(--muted,#a8b4c6)}
.guide-card ol,.guide-card ul{margin:0;padding-left:20px;font-size:13px;line-height:1.75;color:var(--text,#e9edf5)}
.guide-card li+li{margin-top:3px}
.guide-tip{margin:16px 0 0;padding:12px 14px;background:var(--card,#191e27);border:1px dashed var(--line,#2a2f3c);border-radius:12px;font-size:13px;color:var(--muted,#a8b4c6);line-height:1.7}

.guide-faq{margin-top:16px;background:var(--card,#191e27);border:1px solid var(--line,#2a2f3c);border-radius:var(--radius,16px);padding:14px 16px}
.guide-faq h3{margin:0 0 6px;font-size:15px;color:var(--accent,#cbf49b)}
.guide-faq details{margin-top:8px;border:1px solid var(--line,#2a2f3c);border-radius:10px;padding:8px 12px;background:var(--card2,#141820)}
.guide-faq summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text,#e9edf5)}
.guide-faq details p{margin:8px 0 0;font-size:13px;color:var(--muted,#a8b4c6);line-height:1.7}