/* Main-page utility layout. Existing typography sizes remain the baseline. */
body.main-page { background: var(--bg); }
.main-page .hero { padding: 32px 20px 28px; }
.main-page .hero-copy { margin-top: 16px; }
.main-page .eyebrow { letter-spacing: .8px; }
.main-page .compressor-card { padding: 0; border-radius: 12px; background: var(--surface); border-color: var(--border); box-shadow: none; overflow: hidden; }
.main-page .tool-switch { gap: 0; padding: 0; margin: 0; border-radius: 0; background: var(--surface); border-bottom: 1px solid var(--border); }
.main-page .tool-tab { border: 0; border-bottom: 3px solid transparent; border-radius: 0; box-shadow: none; }
.main-page .tool-tab.active { border-bottom-color: var(--green-dark); background: var(--surface-2); }
.main-page .tool-tab[data-mode="convert"].active { border-bottom-color: var(--purple-dark); }
.main-page .tool-tab-icon { background: transparent; border-radius: 0; }
.main-page .tool-tab small { font-size: 13px; color: var(--text-muted); }
.main-page .drop-zone { width: calc(100% - 32px); margin: 16px; min-height: 240px; padding: 24px; border-radius: 8px; background: var(--surface); border-color: var(--border-strong); }
.main-page .upload-icon { width: 40px; height: 40px; margin-bottom: 12px; border-radius: 0; background: transparent; }
.main-page .drop-subtitle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 16px; padding: 10px 20px; border-radius: 8px; background: var(--green-dark); color: #fff; }
.main-page.converter-theme .drop-subtitle { background: var(--purple-dark); color: #fff; }
.main-page .drop-zone:hover .drop-subtitle { background: #0d6038; }
.main-page.converter-theme .drop-zone:hover .drop-subtitle { background: #50339f; }
.main-page .file-types { margin-top: 14px; font-size: 13px; color: var(--text-muted); }
.main-page .primary-button { border-radius: 8px; box-shadow: none; background: var(--green-dark); color: #fff; }
.main-page.converter-theme .primary-button { background: var(--purple-dark); }
.main-page .primary-button:hover { filter: brightness(.9); }
.main-page .settings-bar { border-radius: 8px; }
.main-page .setting-help, .main-page .file-detail { font-size: 13px; color: var(--text-muted); }
.main-page .file-item { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 14px 0; }
.main-page .remove-file { width: 44px; height: 44px; }
.main-page .format-option { min-height: 44px; }
.main-page .features { margin-top: 28px; margin-bottom: 40px; }
.main-page .feature-icon { border-radius: 0; background: transparent; }
.main-page .guide-section { padding-top: 44px; padding-bottom: 44px; }
.main-page .content-intro { padding-top: 44px; padding-bottom: 44px; }
.main-page .steps li, .main-page .format-grid article { border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 22px 12px 12px 0; background: transparent; box-shadow: none; }
.main-page .steps li > span, .main-page .format-grid strong { margin-bottom: 16px; }
.main-page :is(button, a, select, input):focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.main-page .drop-zone:focus-visible { outline-offset: -4px; }
.main-page button { transition: background-color .16s, border-color .16s, color .16s; }
.main-page button:active:not(:disabled) { filter: brightness(.94); }
.main-page .compact-nav-link { display: none; }
.main-page :is(.menu-toggle,.theme-toggle) { width: 44px; height: 44px; border-radius: 8px; }
.main-page .language-control { min-height: 44px; border-radius: 8px; }
[data-theme="dark"] .main-page .drop-zone { background: var(--surface-2); }
[data-theme="dark"] .main-page .tool-tab.active { border-bottom-color: var(--accent-green); }
[data-theme="dark"] .main-page .tool-tab[data-mode="convert"].active { border-bottom-color: var(--converter-accent, #b49aff); }
[data-theme="dark"] .main-page .tool-tab small { color: var(--text-secondary); }
html[data-theme="dark"] body.main-page .drop-zone .drop-subtitle,
html[data-theme="dark"] body.main-page .primary-button { background: #117746; color: #fff; }
html[data-theme="dark"] body.main-page.converter-theme .drop-zone .drop-subtitle,
html[data-theme="dark"] body.main-page.converter-theme .primary-button { background: #5f3fbd; color: #fff; }
@media (max-width: 960px) {
  .main-page .site-header { display: flex; min-height: 76px; padding: 12px 0; gap: 8px; }
  .main-page .site-header > .privacy-badge { display: none; }
  .main-page .header-nav { display: flex; order: 0; width: auto; margin-left: auto; padding: 0; gap: 8px; overflow: visible; }
  .main-page .header-nav > a { display: none; }
  .main-page .site-menu { margin-left: 0; }
  .main-page .compact-nav-link { display: flex; min-height: 44px; }
  .main-page .language-control { margin: 0; }
}
@media (max-width: 700px) {
  .main-page .hero { padding: 28px 0 24px; }
  .main-page .drop-zone { min-height: 220px; margin: 12px; width: calc(100% - 24px); padding: 20px 12px; }
  .main-page .tool-tab { padding: 12px 6px; }
  .main-page .features { gap: 18px; }
  .main-page .action-row { flex-direction: column-reverse; align-items: stretch; }
  .main-page .action-row > button { width: 100%; min-height: 48px; }
}
@media (max-width: 360px) {
  .main-page .site-header, .main-page .header-nav { gap: 4px; }
  .main-page .language-control { padding: 0 4px; }
  .main-page .language-control svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .main-page button { transition: none; }
}