/* Loaded after page-specific styles, including inline styles. */
.mobileBar { display: none; }
.mobileMenu:not([open]) { display: none; }
.mobileMenu { color: var(--text-main); background: var(--bg-solid); border: 1px solid var(--card-border); }
.mobileMenu::backdrop { background: rgb(0 0 0 / 65%); backdrop-filter: blur(3px); }
.mobileMenuOpen { overflow: hidden; }
@media (max-width: 900px) {
    html { scroll-padding-top: 80px; }
    body { min-width: 0; }
    .mobileBar { position: sticky; top: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: var(--bg-solid); border-bottom: 1px solid var(--card-border); }
    .mobileBrand { font-size: 24px; font-weight: 800; }
    .mobileBrand span { color: var(--text-accent); }
    .mobileBar button, .mobileMenuClose { min-height: 44px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--card-border); background: var(--btn-bg); color: var(--text-main); font: inherit; }
    .mobileMenu { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(340px, calc(100vw - 32px)); max-width: none; height: 100dvh; max-height: 100dvh; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 0 20px 20px 0; }
    .mobileMenuClose { display: block; margin-left: auto; margin-bottom: 16px; }
    .mobileMenu .tasksSidebar { position: static !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: 0 !important; transform: none !important; overflow: visible !important; border: 0 !important; background: transparent !important; }
    .mobileMenu .tasksSidebar nav.listThings { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; width: 100% !important; margin: 12px 0 !important; overflow: visible !important; }
    .mobileMenu .tasksSidebar nav.listThings a, .mobileMenu .logoutLink { display: flex !important; align-items: center; gap: 12px; min-height: 48px; padding: 12px !important; font-size: 18px !important; white-space: normal !important; opacity: 1 !important; }
    .mobileMenu .tasksSidebar nav.listThings a span { display: inline-block !important; }
    .mobileMenu .sidebarBottom { margin: 16px 0 0 !important; width: 100%; }
    .tasksMain, .profileMain, .statisticsMain, .variantsMain { margin-left: 0 !important; width: 100% !important; max-width: 100%; padding: 24px 16px 40px !important; }
    .homeHeader { flex-wrap: wrap; }
    input:not([type=checkbox]):not([type=radio]), textarea, select { font-size: 18px !important; max-width: 100%; }
    button, input[type=submit], a.taskButton, a.profileSmallButton { min-height: 44px; touch-action: manipulation; }
    img, video { max-width: 100%; }
    .taskText, .taskContent, .ql-editor { overflow-wrap: anywhere; }
    .katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
    .adminTable { display: block; max-width: 100%; overflow-x: auto; }
    .modalContent, .modal-content, .profileModalCard, .sinusModal__card, .variantResultModal, .contactsModal { max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 32px) !important; overflow-y: auto; overscroll-behavior: contain; }
    .filtersGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .filterSubmitBlock .taskButton { width: 100% !important; }
    .authWrapper { padding: 28px 16px 36px; }
    .authPage .login { padding: 28px 22px; }
}
@media (max-width: 540px) {
    h1 { font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.2 !important; overflow-wrap: anywhere; }
    h2 { font-size: clamp(21px, 5.8vw, 28px); line-height: 1.3; }
    .homeMain, .faqMain, .legalPage, .paymentMain { width: 100%; max-width: 100%; padding-left: 16px !important; padding-right: 16px !important; }
    .filtersGrid, .statisticsOverview, .statisticsGrid, .statsGrid, .modalGrid, .variantModalGrid, .variantResultsGrid { grid-template-columns: minmax(0, 1fr) !important; }
    .tasksHeader, .profileHeader, .variantAdminActions, .adminTaskActions, .sinusModal__actions { flex-wrap: wrap; gap: 12px; }
    .taskCard, .statisticsCard, .paymentCard { padding: 18px 14px !important; min-width: 0; }
    .taskButton, .profileSmallButton, .authButton { font-size: 17px !important; white-space: normal; }
    .footerContainer { width: calc(100% - 32px); gap: 24px; }
    .footerNavGrid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .footerColumn a, .footerLinkBtn { min-height: 44px; display: flex; align-items: center; font-size: 16px; overflow-wrap: anywhere; }
    .richToolbar button { min-width: 40px; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (max-width: 900px) {
    .legalPage, .legalWrap, .legalContent, .legalCard { overflow-wrap: anywhere; }
    .aboutMePage .heroMain, .aboutMePage .heroVisual, .aboutMePage .imageFrame,
    .aboutProjectPage .heroMain, .aboutProjectPage .heroVisual { min-width: 0; width: 100%; max-width: 100%; }
    .aboutMePage .heroVisual { padding: 0; }
    .aboutMePage .heroMascotGlow { width: min(280px, 80vw); height: min(280px, 80vw); }
}
@media (max-width: 900px) {
    body { font-family: 'Pixy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 18px; line-height: 1.5; }
    button, input, select, textarea { font-family: inherit !important; }
    .mobileBrand, .footerLogo { font-family: 'Pixy', sans-serif; }
    .authPage .login button[type=submit] { width: 100%; padding: 12px 16px; font-size: 18px; line-height: 1.4; white-space: normal; }
    .checkboxLabel { align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.5; }
    .checkboxInput { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
    .registerHint { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 900px) {
    body:has(> .paymentPage) { display: block; padding: 0; }
    .paymentPage { width: calc(100% - 32px); margin: 24px auto; }
}
@media (max-width: 900px) {
    .mobileMenu .sidebarBottom { display: flex !important; flex-direction: column; }
    .aboutMePage .heroMain { grid-template-columns: minmax(0, 1fr); }
    .aboutMePage .heroCopy { min-width: 0; }
    .aboutMePage .heroActions { flex-wrap: wrap; }
    .aboutMePage .heroActions a { white-space: normal; }
    :focus-visible { outline: 2px solid var(--text-accent); outline-offset: 3px; }
}

/* Keep native buttons and links identical, including Safari text autosizing. */
@media (max-width: 900px) {
    .homeFooter {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    .homeFooter .footerColumn a,
    .homeFooter .footerColumn .footerLinkBtn {
        font-family: inherit;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: normal;
        min-height: 44px;
    }
    .homeFooter .footerColumnTitle { font-size: 14px; line-height: 1.5; }
    .homeFooter .footerColumn:last-child { grid-column: 1 / -1; }
}

/* Compact, centered content images on every screen size. */
.taskImage,
.taskText img,
.solutionText img,
.richEditable img.editorImage {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 420px !important;
    object-fit: contain;
    margin: 16px auto !important;
    border-radius: 8px;
}