/* All return actions use one large, top-centered treatment. */
#courseBack,
:is(#viewer,#courseViewer,#groupDialog,#collectionDialog,#mediumDialog,#aboutDialog) .dialog-return-bar > .close,
#portfolioMain .sphere-return {
 display:inline-flex;align-items:center;justify-content:center;
 width:auto;height:auto;min-width:144px;min-height:56px;margin:0;
 padding:12px 26px;border:2px solid #fff;border-radius:32px;
 background:#90502e;color:#fff;
 font:700 18px/1.4 "Microsoft YaHei",system-ui,sans-serif;
 white-space:nowrap;max-width:calc(100vw - 24px);
 box-shadow:0 4px 18px #24150855;cursor:pointer;pointer-events:auto;
}
#courseBack,:is(#viewer,#courseViewer,#groupDialog,#collectionDialog,#mediumDialog,#aboutDialog) .dialog-return-bar > .close {
 position:fixed;top:calc(12px + env(safe-area-inset-top,0px));
 bottom:auto;left:50%;right:auto;transform:translateX(-50%);z-index:1000;
}
#courseBack:hover,:is(#viewer,#courseViewer,#groupDialog,#collectionDialog,#mediumDialog,#aboutDialog) .dialog-return-bar > .close:hover,
#portfolioMain .sphere-return:hover{background:#713c22;color:#fff;border-color:#fff}
#courseBack:focus-visible,:is(#viewer,#courseViewer,#groupDialog,#collectionDialog,#mediumDialog,#aboutDialog) .dialog-return-bar > .close:focus-visible,
#portfolioMain .sphere-return:focus-visible{outline:3px solid #244f92;outline-offset:3px}
/* Prevent dialog entrance transforms from trapping fixed return controls. */
dialog[open]{animation:return-dialog-in .18s ease-out;transform:none}
@keyframes return-dialog-in{from{opacity:0}to{opacity:1}}
#mediumDialog .medium-content,#collectionDialog .collection-content,
#groupDialog .group-header,#aboutDialog .about-content,
#courseViewer .course-view-head,#courseMain .view-head{padding-top:84px}
#viewer .art-stage{padding-top:84px}
#courseScroll{padding-bottom:24px}
.course-view-controls{padding-bottom:24px}
#groupGallery,.collection-content,.medium-content,.about-content{padding-bottom:32px}
/* Dimension reset remains centered over the sphere's upper edge. */
#portfolioMain .sphere-return {
 align-self:start;justify-self:center;margin:var(--sphere-return-top,12px) 0 0;
 z-index:5;
}
#portfolioMain .sphere-return[hidden]{display:none}
#portfolioMain .sphere-return:not([hidden])+#stage{margin-left:0}
@media(max-width:760px){
 #courseBack,:is(#viewer,#courseViewer,#groupDialog,#collectionDialog,#mediumDialog,#aboutDialog) .dialog-return-bar > .close,#portfolioMain .sphere-return{
  min-width:132px;min-height:52px;font-size:17px;padding:11px 22px;
 }
 #courseBack,:is(#viewer,#courseViewer,#groupDialog,#collectionDialog,#mediumDialog,#aboutDialog) .dialog-return-bar > .close{top:calc(8px + env(safe-area-inset-top,0px))}
}

/* Course images: the return row belongs directly to the image, inside its dialog. */
#courseViewer .course-view-head{padding:18px 24px 10px}
#courseViewer .dialog-return-bar{
 position:sticky;top:0;z-index:1001;display:flex;align-items:center;justify-content:center;
 height:auto;min-height:80px;padding:10px 12px 14px;background:#252a30;
}
#courseViewer .dialog-return-bar > #courseClose{
 position:static;top:auto;bottom:auto;left:auto;right:auto;transform:none;margin:0;
}
#courseViewer #courseFull{height:auto;max-height:70dvh;width:auto;max-width:100%;margin:0 auto;object-fit:contain}
@media(max-width:760px){
 #courseViewer .dialog-return-bar{min-height:74px;padding:8px 12px 14px}
 #courseViewer #courseFull{max-height:65dvh}
}