/* Shared PC/mobile layout. Keep one content tree and the same tool logic. */
html{scroll-padding-top:16px}
body[data-page] *,body[data-page] *::before,body[data-page] *::after{box-sizing:border-box}
body[data-page] main,body[data-page] section,body[data-page] form{min-width:0}
body[data-page] dialog{max-width:calc(100vw - 24px);max-height:90dvh;overflow:auto}
body[data-page] input[type=file]{max-width:100%}
body[data-page] button,body[data-page] a,body[data-page] select{touch-action:manipulation}
body[data-page] .ocr-actions{flex-wrap:wrap}
body[data-page] .ocr-settings>*{min-width:0;max-width:100%}
body[data-page] nav[aria-label="Alat dokumen OfficeToPDF"]{flex-shrink:0;line-height:1.8;padding:8px 12px;overflow-wrap:anywhere}
@media(max-width:767px){
 body[data-page] header,body[data-page] header>div{flex-wrap:wrap}
 body[data-page] input[type=text],body[data-page] input[type=number],body[data-page] input[type=search],body[data-page] textarea,body[data-page] select{font-size:16px}
 body[data-page] .ocr-settings{display:grid;grid-template-columns:1fr;gap:12px}
 body[data-page] .ocr-actions{display:flex;gap:10px}
 body[data-page] .ocr-actions>*{max-width:100%;overflow-wrap:anywhere}
 body[data-page] .scan-navigation{gap:12px;flex-wrap:wrap}
 body[data-page] .scan-controls,body[data-page] .source-actions{flex-wrap:wrap}
 body[data-page] .scan-controls>*{min-width:0;max-width:100%}
 body[data-page="home"] .top-tools{flex-wrap:wrap}
 body[data-page="home"] .rd-nav{flex-wrap:wrap;gap:12px 18px}
 body[data-page="home"] .settings>*{min-width:0;max-width:100%}
 body[data-page="home"] .rd-review-card{overflow-wrap:anywhere}
 body[data-page="design"] #home .hn{height:auto;min-height:76px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
 body[data-page="design"] #home .hn .openyoudesign-language{max-width:100%}
 body[data-page="design"] #home .hn select{max-width:100%;font-size:13px}
 body[data-page="design"] #home .hn button{min-height:36px}
 body[data-page="design"] #contextbar{flex-wrap:wrap;gap:8px;padding:8px}
 body[data-page="design"] #contextbar>div{flex-wrap:wrap;min-width:0}
 body[data-page="design"] #contextbar #size{font-size:12px;max-width:150px}
 body[data-page="design"] #top{min-height:58px;height:auto;flex-wrap:wrap;padding:8px;overflow:visible}
 body[data-page="design"] #top select{font-size:13px;max-width:135px}
 body[data-page="design"] #workspaceFooter{height:auto;min-height:44px;flex-wrap:wrap;padding:5px 8px}
 body[data-page="design"] #workspaceFooter button{min-height:34px;min-width:34px}
 body[data-page="design"] nav[aria-label="Alat dokumen OfficeToPDF"]{font-size:11px}
}
@media(max-width:380px){
 body[data-page="home"] .rd-popular-grid,body[data-page="home"] .tool-grid{grid-template-columns:1fr}
 body[data-page="home"] .settings{grid-template-columns:1fr}
 body[data-page="design"] #home #tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
 body[data-page="design"] #home #hgrid{grid-template-columns:1fr}
 body[data-page="design"] #home .hero h1{font-size:24px}
}
@media(pointer:coarse){
 body[data-page]:not([data-page="design"]) button,body[data-page]:not([data-page="design"]) select,body[data-page] .file-button{min-height:44px}
 body[data-page="design"] #tools button,body[data-page="design"] #library button,body[data-page="design"] #side button{min-height:40px}
 body[data-page="design"] #top button{min-height:36px;min-width:36px}
}