.stage-info-head-actions{display:flex;align-items:center;gap:8px}
.stage-info-toggle{display:none;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:3px;background:#111923;color:var(--accent);font-weight:900;cursor:pointer}
@media (max-width: 820px) {
:root{--mobile-gap:8px}
html,body{width:100%;min-width:0;min-height:100%;overflow-x:hidden}
body{overflow-y:auto;-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
button,input,select,label{touch-action:manipulation}
button,.btn,.file-btn,input,select{min-height:44px}
.app-shell{
width:100%;
height:auto;
min-height:100dvh;
display:block;
}
.topbar{
position:sticky;
top:0;
z-index:60;
width:100%;
min-height:0;
display:grid;
grid-template-columns:minmax(0,1fr);
gap:8px;
padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));
border-bottom:1px solid var(--line);
}
.brand-block{min-width:0;gap:9px}
.brand-mark{width:32px;height:32px;border-radius:3px;flex:0 0 auto}
.brand-block>div:last-child{min-width:0}
.brand-block strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-block span{display:none}
.top-actions{
width:100%;
min-width:0;
display:grid;
grid-auto-flow:column;
grid-auto-columns:max-content;
justify-content:start;
gap:6px;
overflow-x:auto;
overflow-y:hidden;
padding-bottom:2px;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.top-actions::-webkit-scrollbar{display:none}
.top-actions .btn,.top-actions button,.top-actions .file-btn{min-height:40px;padding:0 11px;white-space:nowrap;font-size:11px}
.top-actions .btn,.top-actions button,.top-actions .file-btn{display:inline-flex!important;align-items:center;justify-content:center}
#undoBtn,#redoBtn{width:40px;padding:0;font-size:18px}
.workspace{
width:100%;
min-width:0;
min-height:0;
display:flex;
flex-direction:column;
}
.stage{
order:1;
width:100%;
height:clamp(430px,58dvh,620px);
min-height:430px;
overflow:hidden;
border-bottom:1px solid var(--line);
}
#viewer,#viewer canvas{touch-action:none}
.left-panel{
order:2;
width:100%;
min-width:0;
height:auto;
min-height:0;
display:block;
border:0;
border-top:1px solid var(--line);
}
.panel-scroll{min-height:0;overflow:visible;padding:12px max(12px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.main-tabs{
width:100%;
min-width:0;
display:flex;
gap:6px;
padding:8px 10px;
overflow-x:auto;
overflow-y:hidden;
background:var(--panel);
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.main-tabs::-webkit-scrollbar{display:none}
.main-tab{flex:0 0 auto;min-width:86px;min-height:42px;padding:0 12px;font-size:11px}
.stage-topbar{
left:8px;
right:8px;
top:8px;
display:grid;
grid-template-columns:minmax(0,1fr);
gap:6px;
}
.segmented{
width:100%;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:4px;
padding:4px;
}
.segmented button{min-width:0;min-height:38px;padding:0 5px;font-size:10px}
.stage-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.stage-actions button{min-width:0;min-height:38px;padding:0 7px;font-size:10px}
.stage-bottom{display:none}
.stage-info-panel{
position:absolute;
z-index:18;
top:auto;
left:8px;
right:8px;
bottom:8px;
width:auto;
max-width:none;
height:auto;
max-height:48px;
display:grid;
grid-template-rows:47px minmax(0,1fr);
border-radius:4px;
overflow:hidden;
transition:max-height .2s ease,background .2s ease;
}
.stage-info-panel.mobile-open{max-height:calc(100% - 112px);background:rgba(13,18,25,.97)}
.stage-info-head{height:47px;min-height:47px;padding:0 10px}
.stage-info-head-actions{gap:7px}
.stage-info-toggle{display:grid;place-items:center;min-height:34px}
.stage-info-scroll{min-height:0;overflow-y:auto;padding:10px;-webkit-overflow-scrolling:touch}
.stage-info-panel .quick-actions{grid-template-columns:1fr 1fr;gap:6px}
.stage-info-panel .quick-actions button{min-height:42px;font-size:9px}
.logo-mouse-hint{
left:8px;
right:8px;
top:102px;
bottom:auto;
max-width:none;
padding:7px 8px;
font-size:9px;
}
.logo-mouse-hint:not(.active){display:flex}
.logo-mouse-hint strong{display:block}
.field-grid.two,.editor-grid,.export-grid{grid-template-columns:1fr 1fr}
.switch-grid{grid-template-columns:1fr 1fr}
.color-cards{grid-template-columns:1fr 1fr}
.color-cards-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.logo-presets{grid-template-columns:1fr 1fr}
.layer-add-grid{grid-template-columns:1fr 1fr}
.view-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.catalog-category-grid{grid-template-columns:1fr 1fr}
.catalog-category-cover{height:auto;aspect-ratio:1.35* Five catalog categories on mobile */
@media(max-width:820px){
.catalog-gallery-tabs{display:flex!important;grid-template-columns:none!important;overflow-x:auto!important;gap:5px!important;scrollbar-width:none}
.catalog-gallery-tabs::-webkit-scrollbar{display:none}
.catalog-gallery-tabs button{flex:0 0 82px!important}
}
@media (max-width: 820px){
.stage-topbar{top:10px}
.stage-render-bar{bottom:58px}
}
@media(max-width:820px){.stage-render-bar.stage-light-only{grid-template-columns:1fr;right:auto;min-width:180px}.logo-add-only{width:100%}}