/* Mobile layout — load last in to override per-page inline padding */ @media (max-width: 768px) { .tool-header { padding-top: 1.125rem; padding-bottom: 1.125rem; padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } .page-shell > main, main:not(.hub) { padding-top: 1.125rem; padding-bottom: 2rem; padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } .page-shell > .ad-slot, body > .ad-slot, .ad-slot { margin-left: max(1rem, env(safe-area-inset-left, 0px)); margin-right: max(1rem, env(safe-area-inset-right, 0px)); margin-top: 0.75rem; margin-bottom: 0.75rem; } body > nav { padding-top: 1rem; padding-bottom: 1rem; padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } main.hub { padding-top: 1.25rem; padding-bottom: 2.5rem; padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } .card, .panel, .schema-panel { padding: 1rem; } .tool-header-inner { gap: 0.65rem; } .tool-header-inner .brand-img { width: 34px; height: 34px; } .tool-header p { font-size: 0.88rem; line-height: 1.45; } .hub-intro { margin-bottom: 1.25rem; } .hub-intro p { font-size: 0.94rem; } .tools-grid { grid-template-columns: 1fr; gap: 0.75rem; } .tool-card { padding: 1.1rem 1rem; } .tag-bar { margin-bottom: 1rem; } .grid2, .grid, .grid3, .grid4, .row, .offer-grid, .grid-cities, .stats { grid-template-columns: 1fr; } .toolbar, .actions-row { gap: 0.5rem; } .toolbar button, .actions-row button, button.primary, button.secondary { min-height: 44px; } .result, .result-block { font-size: 1.15rem; } .pane, .pane .text-input, .pane .diff-pane { min-height: min(40vh, 420px); } .split-pane textarea, .split-pane .preview-wrap { min-height: 220px; } .split { min-height: auto; gap: 0.75rem; } .qw-file-slot.qw-file-slot--toolbar { flex: 1 1 100%; width: 100%; } .qw-file-slot { padding: 12px; } .seo-breadcrumbs, .seo-depth-inner, .seo-below-fold, footer.site-footer { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } .seo-depth-inner { padding-bottom: 2rem; } footer.site-footer { padding-top: 2rem; padding-bottom: 1.5rem; } .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 0.85rem; } } @media (max-width: 480px) { .tool-header h1, .hub-intro h1 { font-size: clamp(1.22rem, 5.2vw, 1.6rem); } .logo { font-size: 1rem; letter-spacing: 0.08em; } .logo-img { width: 30px; height: 30px; } .nav-links { font-size: 0.85rem; gap: 0.85rem; } .site-footer-grid { grid-template-columns: 1fr; gap: 1.1rem; } .site-footer-grid h3:not(:first-child) { margin-top: 0; } .seo-faq-list details { padding: 0.6rem 0.85rem; } .seo-faq-list summary { font-size: 0.86rem; } }