/* 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,.2);
}
/* 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:var(--ui-card-3);border:1px solid var(--ui-line-soft);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)}
}

/* ============ 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>*:not(summary){
  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>*:not(summary):hover{background:color-mix(in srgb,var(--ui-accent-2) 8%,transparent);color:var(--ui-text)}
.studio-v3 .project-actions-menu>*:not(summary):last-child{border-radius:0 0 12px 12px}
.studio-v3 .project-actions-menu .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-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}
}