/* Responsive foundation shared by the homepage, tools, and account pages. */
body[data-page]:not([data-page="/"]) .site-mobile-menu {
    display: none;
}

@media (max-width: 820px) {
    body[data-page] :is(.site-mobile-menu > summary, .mobile-menu > summary)::before {
        content: "" !important;
        display: block !important;
        width: 21px !important;
        height: 16px !important;
        background-image:
            linear-gradient(#202821, #202821),
            linear-gradient(#202821, #202821),
            linear-gradient(#202821, #202821) !important;
        background-position: left top, left center, left bottom !important;
        background-repeat: no-repeat !important;
        background-size: 21px 2px !important;
    }

    body[data-page] :is(.site-mobile-menu > summary, .mobile-menu > summary) :is(.site-mobile-menu__icon, .mobile-menu-icon) {
        display: none !important;
    }

    html[data-mobile-theme="dark"] body[data-page] :is(.site-mobile-menu > summary, .mobile-menu > summary) {
        border-color: #36575c !important;
        background-color: #1a2631 !important;
        color: #f4fbfc !important;
    }

    html[data-mobile-theme="dark"] body[data-page] :is(.site-mobile-menu > summary, .mobile-menu > summary)::before {
        background-image:
            linear-gradient(#f4fbfc, #f4fbfc),
            linear-gradient(#f4fbfc, #f4fbfc),
            linear-gradient(#f4fbfc, #f4fbfc) !important;
    }
}

@media (max-width: 820px) {
    :root {
        --extratools-content-gutter: 16px;
        --tool-content-gutter: 16px;
        --tool-frame-gutter: 16px;
        --tool-card-padding: 16px;
    }

    body[data-page]:not([data-page="/"]) > .site-mobile-menu {
        position: fixed !important;
        z-index: 2147483000 !important;
        inset: auto max(12px, env(safe-area-inset-right, 0px)) auto auto !important;
        top: max(10px, env(safe-area-inset-top, 0px)) !important;
        right: max(12px, env(safe-area-inset-right, 0px)) !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        width: 48px !important;
        max-width: calc(100vw - 24px) !important;
        margin: 0 !important;
        transform: none !important;
        color: var(--ink);
    }

    body[data-page]:not([data-page="/"]) > .site-mobile-menu > summary {
        position: relative;
        z-index: 2;
        display: grid;
        box-sizing: border-box;
        width: 48px !important;
        min-width: 48px;
        height: 48px;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--paper);
        color: var(--ink);
        cursor: pointer;
        list-style: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .site-mobile-menu > summary::-webkit-details-marker { display: none; }
    .site-mobile-menu > summary:focus-visible,
    .site-mobile-menu__panel :focus-visible {
        outline: 3px solid rgb(var(--green-rgb) / 45%);
        outline-offset: 3px;
    }

    .site-mobile-menu__icon {
        display: grid;
        width: 21px;
        gap: 5px;
    }

    .site-mobile-menu__icon i {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }

    .site-mobile-menu__backdrop { display: none; }
    .site-mobile-menu[open] .site-mobile-menu__backdrop {
        position: fixed;
        z-index: 0;
        inset: 0;
        display: block;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        padding: 0;
        border: 0;
        background: rgb(5 12 16 / 58%);
        cursor: default;
    }

    body[data-page]:not([data-page="/"]) > .site-mobile-menu .site-mobile-menu__panel {
        position: absolute;
        z-index: 1;
        inset-block-start: 56px;
        inset-inline-end: 0;
        display: grid;
        box-sizing: border-box;
        width: min(360px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: min(78vh, 680px);
        max-height: min(78svh, 680px);
        gap: 14px;
        overflow: auto;
        overscroll-behavior: contain;
        padding: 16px;
        padding-block-end: max(16px, env(safe-area-inset-bottom));
        border: 1px solid var(--line);
        border-radius: 17px;
        background: var(--paper);
        color: var(--ink);
        box-shadow: 0 18px 48px rgb(0 0 0 / 35%);
    }

    .site-mobile-menu__home,
    .site-mobile-menu__links a,
    .site-mobile-menu__account a,
    .site-mobile-menu__account button,
    .site-mobile-menu__languages a {
        display: flex;
        min-height: 44px;
        align-items: center;
        padding: 9px 10px;
        border: 1px solid transparent;
        border-radius: 9px;
        color: var(--ink);
        font: inherit;
        font-size: 14px;
        font-weight: 650;
        line-height: 1.35;
        text-decoration: none;
        touch-action: manipulation;
    }

    .site-mobile-menu__home,
    .site-mobile-menu__languages a {
        justify-content: center;
        border-color: var(--line);
        background: var(--canvas);
    }

    .site-mobile-menu__group {
        display: grid;
        gap: 7px;
    }

    .site-mobile-menu__group + .site-mobile-menu__group {
        padding-block-start: 12px;
        border-block-start: 1px solid var(--line);
    }

    .site-mobile-menu__group h2 {
        margin: 0 0 2px;
        color: var(--green);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .site-mobile-menu__links,
    .site-mobile-menu__account,
    .site-mobile-menu__account .account-nav {
        display: grid;
        gap: 4px;
    }

    .site-mobile-menu__account .account-nav__logout { margin: 0; }
    .site-mobile-menu__account .account-nav__button {
        width: 100%;
        background: transparent;
        cursor: pointer;
        text-align: start;
    }

    .site-mobile-menu__languages {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .site-mobile-menu__languages a[aria-current="page"] {
        border-color: var(--green);
        background: var(--green-dark);
        color: #fff;
    }

    .site-mobile-menu__theme {
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 10px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--canvas);
        color: var(--ink);
        cursor: pointer;
        font: inherit;
        font-size: 14px;
        font-weight: 650;
        text-align: start;
        touch-action: manipulation;
    }

    .site-mobile-menu__home:hover,
    .site-mobile-menu__links a:hover,
    .site-mobile-menu__account a:hover,
    .site-mobile-menu__account button:hover,
    .site-mobile-menu__languages a:hover {
        border-color: var(--green-border);
        background-color: var(--green-pale);
    }

    body[data-page]:not([data-page="/"]) :is(.tool-breadcrumbs, .checker-breadcrumbs) {
        color: var(--muted) !important;
    }

    body[data-page]:not([data-page="/"]) :is(.tool-breadcrumbs, .checker-breadcrumbs) ol {
        gap: 5px !important;
    }

    body[data-page]:not([data-page="/"]) :is(.tool-breadcrumbs, .checker-breadcrumbs) ol a {
        display: inline !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--green) !important;
        font-size: inherit !important;
        font-weight: 650 !important;
        line-height: inherit !important;
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
        text-underline-offset: .15em;
    }

    body[data-page]:not([data-page="/"]) :is(.tool-breadcrumbs, .checker-breadcrumbs) ol > li[aria-current="page"] {
        color: var(--muted) !important;
        font-weight: 500 !important;
    }

    body[data-page]:not([data-page="/"]) :is(.tool-breadcrumbs, .checker-breadcrumbs) ol > li + li::before {
        color: var(--muted) !important;
        content: "/" !important;
    }

    body[data-page] {
        min-width: 320px;
        overflow-x: clip;
        font-size: 16px;
    }

    body[data-page] :is(.shell, .app-shell, .page-shell, .tool-shell, .graph-shell, .math-shell) {
        width: calc(100% - 32px);
        max-width: none;
        min-width: 0;
        margin-inline: auto;
    }

    body[data-page] :is(main, .app-shell, .page-shell, .tool-shell, .workspace, .tool-card, .editor-card, .tool-workspace, .seo-workbench) {
        min-width: 0;
    }

    body[data-page] :is(.tool-card, .editor-card, .upload-panel, .page-faq) {
        padding: var(--tool-card-padding, 16px);
        border-radius: 14px;
    }

    body[data-page] :is(.tool-control-layout, .tool-control-layout__breadcrumb, .tool-control-layout__actions) {
        min-width: 0;
    }

    body[data-page] .tool-control-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        align-items: start;
        row-gap: 10px;
        min-height: 0;
        margin-block: 14px;
    }

    body[data-page] .tool-control-layout {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body[data-page] .tool-control-layout__breadcrumb,
    body[data-page] .tool-control-layout__actions,
    body[data-page] .tool-control-layout > .site-preferences--toolbar {
        grid-column: 1;
    }

    body[data-page] .tool-control-layout__breadcrumb { grid-row: 1; }
    body[data-page] .tool-control-layout__actions { grid-row: 2; }

    body[data-page] .tool-control-layout > .site-preferences--toolbar {
        grid-row: 3;
        justify-self: start;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    body[data-page] .tool-control-layout .tool-breadcrumbs ol {
        flex-wrap: wrap;
        gap: 6px;
    }

    body[data-page] .tool-control-layout .tool-breadcrumbs ol li + li::before {
        margin-inline-end: 0;
    }

    body[data-page] :is(.hero, .intro, .math-hero, .graph-intro-section) {
        padding-block-start: 28px;
    }

    body[data-page] .tool-brand-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        row-gap: 8px;
    }

    body[data-page] .tool-brand-header .brand {
        max-width: calc(100% - 60px);
        overflow-wrap: anywhere;
    }

    body[data-page] .tool-brand-header .tool-brand-tagline {
        width: 100%;
        max-width: 100%;
        margin-block-start: 0;
        overflow-wrap: anywhere;
    }

    body[data-page] .tool-brand-header ~ main :is(.hero, .intro, .math-hero, .graph-intro-section) {
        padding-block-start: 40px;
    }

    body[data-page] .hero h1,
    body[data-page] .intro h1 {
        font-size: clamp(1.8rem, 7vw, 2.5rem);
        line-height: 1.12;
        letter-spacing: -.045em;
        overflow-wrap: anywhere;
    }

    body[data-page] :is(.hero-copy, .hero-seo-copy, .intro-copy, .intro-seo-copy) {
        font-size: 1rem;
        line-height: 1.6;
        overflow-wrap: anywhere;
    }

    body[data-page] :is(.field-grid, .settings-grid, .settings-row, .conversion-grid, .control-grid, .tool-grid, .fields-grid, .generator-settings, .format-grid, .advanced-grid, .feature-grid, .generator-grid) {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-page] :is(.field, .field-wide, .level-control, .target-control, .regex-engine-note, .regex-field-hint) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body[data-page] :is(.output-actions, .export-actions, .primary-actions, .file-actions, .editor-actions, .hero-actions) {
        min-width: 0;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
    }

    body[data-page] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea) {
        max-width: 100%;
        font-size: 16px;
    }

    body[data-page] :is(.tool-tabs, .mode-tabs, .tool-nav, .tab-list) {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    body[data-page] :is(.table-scroll, .table-wrap, .wide-table, .sql-preview, .code-preview, .preview-scroll, .canvas-scroll) {
        max-width: 100%;
        overflow: auto;
        overscroll-behavior: contain;
    }

    body[data-page] :is(.utility-dialog, dialog, [role="dialog"]) {
        box-sizing: border-box;
        width: min(100% - 24px, 42rem);
        max-width: calc(100% - 24px);
        max-height: 90vh;
        max-height: 90svh;
        padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
        overflow: auto;
    }

    body[data-page] :is(.summary-heading, .editor-footer) {
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    body[data-page] :is(.summary-heading > *, .live-label, .count-meta) {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    body[data-page] .page-faq { padding: 18px 14px; }
    body[data-page] .page-faq__item summary { padding: 13px; }
    body[data-page] .page-faq__item p { padding: 0 13px 14px; }

    body[data-page] .site-preferences--toolbar {
        align-items: center;
    }

    body[data-page] :is(.site-preferences--toolbar, .site-preferences--content) {
        display: none !important;
    }

    body[data-page] .site-preferences--toolbar .site-theme-dots { display: none; }

    body[data-page] .site-preferences--toolbar .site-theme-toggle {
        display: inline-flex;
    }

    body[data-page="/"] > main > .site-preferences { display: none; }

    body[data-page] :is(.utility-button, .primary-button, .secondary-action, .small-action, .tool-tab, .menu-button, .account-nav__link, .language-switch__link, .dialog-close) {
        min-height: 44px;
    }

    body[data-page] :is(button, a, input[type="checkbox"], input[type="radio"]) {
        -webkit-tap-highlight-color: transparent;
    }

    body[data-page] :focus-visible {
        outline: 3px solid rgb(var(--green-rgb, 54 114 81) / 42%);
        outline-offset: 3px;
    }

    body[data-page] :is(button, .tool-tab, .account-nav__link, .language-switch__link, .mobile-menu-links a, .mobile-menu-account a, .mobile-menu-languages a) {
        touch-action: manipulation;
    }

    body[data-page] .site-preferences .site-theme-dots { display: none; }

    body[data-page] .site-preferences .site-theme-toggle { display: inline-flex; }
}

@media (max-width: 420px) {
    body[data-page] :is(.shell, .app-shell, .page-shell, .tool-shell, .graph-shell, .math-shell) {
        width: calc(100% - 24px);
    }

    body[data-page] :is(.tool-card, .editor-card, .upload-panel) {
        padding: 14px;
    }
}

@media (any-pointer: coarse) {
    body[data-page] :is(button, .tool-tab, .account-nav__link, .language-switch__link, .site-theme-toggle, .mobile-theme-button, .mobile-menu-links a, .mobile-menu-account a, .mobile-menu-languages a) {
        min-height: 44px;
    }

    body[data-page] :is(input[type="checkbox"], input[type="radio"]) {
        inline-size: 20px;
        block-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page] *,
    body[data-page] *::before,
    body[data-page] *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 820px) {
    html[data-mobile-theme="light"] body[data-page] {
        color-scheme: light;
        --canvas: #f3f5f0;
        --paper: #fff;
        --ink: #202821;
        --muted: #717a71;
        --line: #e3e8e0;
        --green-rgb: 54 114 81;
        --green: #367251;
        --green-dark: #254c37;
        --green-hover: #2c6145;
        --green-deep: #183d29;
        --green-mid: #326344;
        --green-soft: #f1f6ef;
        --green-pale: #eaf2e9;
        --green-pale-hover: #dcebdd;
        --green-border: #a9c6ad;
        --green-border-strong: #9cbea1;
        --green-border-soft: #c1d0c4;
        --green-bright: #72a77a;
        --error: #a54838;
        background-color: var(--canvas);
        color: var(--ink);
    }

    html[data-mobile-theme="light"] body[data-page] * {
        --canvas: #f3f5f0 !important;
        --paper: #fff !important;
        --ink: #202821 !important;
        --muted: #717a71 !important;
        --line: #e3e8e0 !important;
        --surface: #fff !important;
        --surface-raised: #fff !important;
        --page: #f3f5f0 !important;
        --text: #202821 !important;
        --accent: #367251 !important;
        --accent-dark: #254c37 !important;
        --accent-soft: #f1f6ef !important;
        --accent-border: #a9c6ad !important;
        --area-surface: #fff !important;
        --area-ink: #202821 !important;
        --area-muted: #717a71 !important;
        --area-border: #e3e8e0 !important;
        --area-soft: #f1f6ef !important;
        --editor-paper: #fff !important;
        --editor-ink: #202821 !important;
        --editor-muted: #717a71 !important;
        --editor-line: #e3e8e0 !important;
        --editor-border: #e3e8e0 !important;
        --editor-soft: #f1f6ef !important;
        --expr-surface: #fff !important;
        --expr-ink: #202821 !important;
        --expr-muted: #717a71 !important;
        --expr-border: #e3e8e0 !important;
        --expr-soft: #f1f6ef !important;
        --graph-surface: #fff !important;
        --graph-ink: #202821 !important;
        --graph-muted: #717a71 !important;
        --graph-line: #e3e8e0 !important;
        --graph-soft: #f1f6ef !important;
        --math-surface: #fff !important;
        --math-ink: #202821 !important;
        --math-muted: #717a71 !important;
        --math-border: #e3e8e0 !important;
        --math-soft: #f1f6ef !important;
        --shadow: 0 8px 24px rgb(20 40 25 / 8%) !important;
        --green-rgb: 54 114 81 !important;
        --green: #367251 !important;
        --green-dark: #254c37 !important;
        --green-hover: #2c6145 !important;
        --green-deep: #183d29 !important;
        --green-mid: #326344 !important;
        --green-soft: #f1f6ef !important;
        --green-pale: #eaf2e9 !important;
        --green-pale-hover: #dcebdd !important;
        --green-border: #a9c6ad !important;
        --green-border-strong: #9cbea1 !important;
        --green-border-soft: #c1d0c4 !important;
        --green-bright: #367251 !important;
        --error: #a54838 !important;
    }

    html[data-mobile-theme="dark"] body[data-page] {
        color-scheme: dark;
        --canvas: #101820;
        --paper: #1a2631;
        --ink: #edf4f6;
        --muted: #a8b8ba;
        --line: #2f4149;
        --green-rgb: 91 208 181;
        --green: #5bd0b5;
        --green-dark: #183c42;
        --green-hover: #46bba1;
        --green-deep: #102b31;
        --green-mid: #2a8779;
        --green-soft: #1c3539;
        --green-pale: #1c3539;
        --green-pale-hover: #24434a;
        --green-border: #36575c;
        --green-border-strong: #477a78;
        --green-border-soft: #34545a;
        --green-bright: #72d9bd;
        --error: #ff7776;
        background-color: var(--canvas);
        color: var(--ink);
    }

    html[data-mobile-theme="dark"] body[data-page] * {
        --canvas: #101820 !important;
        --paper: #1a2631 !important;
        --ink: #edf4f6 !important;
        --muted: #a8b8ba !important;
        --line: #2f4149 !important;
        --surface: #1a2631 !important;
        --surface-raised: #22313d !important;
        --page: #101820 !important;
        --text: #edf4f6 !important;
        --accent: #5bd0b5 !important;
        --accent-dark: #183c42 !important;
        --accent-soft: #1c3539 !important;
        --accent-border: #36575c !important;
        --area-surface: #1a2631 !important;
        --area-ink: #edf4f6 !important;
        --area-muted: #a8b8ba !important;
        --area-border: #2f4149 !important;
        --area-soft: #1c3539 !important;
        --editor-paper: #1a2631 !important;
        --editor-ink: #edf4f6 !important;
        --editor-muted: #a8b8ba !important;
        --editor-line: #2f4149 !important;
        --editor-border: #2f4149 !important;
        --editor-soft: #1c3539 !important;
        --expr-surface: #1a2631 !important;
        --expr-ink: #edf4f6 !important;
        --expr-muted: #a8b8ba !important;
        --expr-border: #2f4149 !important;
        --expr-soft: #1c3539 !important;
        --graph-surface: #1a2631 !important;
        --graph-ink: #edf4f6 !important;
        --graph-muted: #a8b8ba !important;
        --graph-line: #2f4149 !important;
        --graph-soft: #1c3539 !important;
        --math-surface: #1a2631 !important;
        --math-ink: #edf4f6 !important;
        --math-muted: #a8b8ba !important;
        --math-border: #2f4149 !important;
        --math-soft: #1c3539 !important;
        --shadow: 0 12px 30px rgb(0 0 0 / 24%) !important;
        --green-rgb: 91 208 181 !important;
        --green: #5bd0b5 !important;
        --green-dark: #183c42 !important;
        --green-hover: #46bba1 !important;
        --green-deep: #102b31 !important;
        --green-mid: #2a8779 !important;
        --green-soft: #1c3539 !important;
        --green-pale: #1c3539 !important;
        --green-pale-hover: #24434a !important;
        --green-border: #36575c !important;
        --green-border-strong: #477a78 !important;
        --green-border-soft: #34545a !important;
        --green-bright: #72d9bd !important;
        --error: #ff7776 !important;
    }

    html[data-mobile-theme="dark"] body[data-page] :is(
        .tool-card, .editor-card, .upload-panel, .settings-panel, .editor-panel,
        .export-panel, .sql-panel, .page-faq, .page-faq__item, .operation-group,
        .tab-panel, .tool-workspace, .workspace, .summary-item, .result-panel,
        .advanced-panel, .operation-section, .table-panel, .tool-panel, .settings-card, .workspace-panel,
        .preview-panel, .result-card, .utility-dialog, dialog, [role="dialog"],
        .table-scroll, .data-table, .data-table th, .data-table td,
        .data-table caption, .tool-tabs, .mode-tabs, .tool-tab[aria-selected="true"],
        .advanced-settings
    ) {
        border-color: var(--line) !important;
        background-color: var(--paper) !important;
        color: var(--ink) !important;
        box-shadow: none !important;
    }

    html[data-mobile-theme="dark"] body[data-page] .tool-control-layout {
        background: transparent !important;
        border-color: transparent !important;
    }

    html[data-mobile-theme="dark"] body[data-page] :is(.page-faq, .faq-card) {
        border-color: var(--line) !important;
        background-color: #1a2631 !important;
        color: #edf4f6 !important;
    }

    html[data-mobile-theme="dark"] body[data-page] .page-faq .page-faq__item,
    html[data-mobile-theme="dark"] body[data-page] .faq-card details {
        border-color: #3a4b56 !important;
        background-color: #22313d !important;
        color: #edf4f6 !important;
    }

    html[data-mobile-theme="dark"] body[data-page] .page-faq .page-faq__item > summary,
    html[data-mobile-theme="dark"] body[data-page] .faq-card details > summary {
        color: #f4f8fa !important;
        font-weight: 650 !important;
    }

    html[data-mobile-theme="dark"] body[data-page] .page-faq .page-faq__item > p,
    html[data-mobile-theme="dark"] body[data-page] .faq-card details > p {
        color: #c4d0d4 !important;
    }

    html[data-mobile-theme="dark"] body[data-page] :is(.tool-breadcrumbs, .checker-breadcrumbs) ol a {
        color: #77dfc6 !important;
        text-decoration-color: rgb(119 223 198 / 55%);
    }

    html[data-mobile-theme="dark"] body[data-page] :is(.tool-breadcrumbs, .checker-breadcrumbs) ol > li[aria-current="page"],
    html[data-mobile-theme="dark"] body[data-page] :is(.tool-breadcrumbs, .checker-breadcrumbs) ol > li + li::before {
        color: #c1ced2 !important;
    }

    html[data-mobile-theme="dark"] body[data-page] :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
        textarea, select, .tool-tabs, .mode-tabs, .tool-nav
    ) {
        border-color: var(--line) !important;
        background-color: #15212b !important;
        color: var(--ink) !important;
        color-scheme: dark;
    }

    html[data-mobile-theme="dark"] body[data-page] :is(pre, .code-preview, .sql-preview) {
        border-color: var(--line);
        background-color: #15212b;
        color: var(--ink);
    }

    html[data-mobile-theme="dark"] body[data-page="/utility-tools/time/"] :is(.clock-display, .clock-value-group, .clock-detail) {
        border-color: #354752 !important;
        background-color: #1a2631 !important;
        color: #edf4f6 !important;
        box-shadow: none !important;
    }

    html[data-mobile-theme="dark"] body[data-page="/utility-tools/time/"] .topbar {
        border-color: #354752 !important;
    }

    html[data-mobile-theme="dark"] body[data-page="/utility-tools/time/"] .tool-brand-tagline {
        border-color: #40515b !important;
        background-color: #1a2631 !important;
        color: #c1ced2 !important;
    }

    html[data-mobile-theme="dark"] body[data-page="/utility-tools/time/"] :is(.hero-copy, .hero-seo-copy, .field-meta, .action-status, .seo-details, .seo-details p, .seo-details li, .seo-details h2, .seo-details h3, .seo-details a, .footer) {
        color: #c1ced2 !important;
    }

    html[data-mobile-theme="dark"] body[data-page="/utility-tools/time/"] :is(.eyebrow, .section-label) {
        color: #72d9bd !important;
    }

    html[data-mobile-theme="dark"] body[data-page="/utility-tools/time/"] :is(.clock-heading h3, .clock-date, .clock-time, .clock-detail strong, .clock-detail code) {
        color: #f0f6f7 !important;
    }

    html[data-mobile-theme="dark"] body[data-page="/utility-tools/time/"] :is(.clock-label, .clock-detail > span, .clock-note, .live-label) {
        color: #c1ced2 !important;
    }

    html[data-mobile-theme="dark"] body[data-page="/utility-tools/time/"] :is(.field, .field input, .field select, .field select:disabled, .field input:disabled) {
        border-color: #40515b !important;
        background-color: #15212b !important;
        color: #edf4f6 !important;
    }

    html[data-mobile-theme="dark"] body[data-page="/utility-tools/time/"] .utility-dialog :is(p, li) {
        color: #c4d0d4 !important;
    }

    html[data-mobile-theme="dark"] body[data-page="/utility-tools/time/"] .utility-dialog .dialog-close {
        border-color: #40515b !important;
        background-color: #22313d !important;
        color: #f0f6f7 !important;
    }

    html[data-mobile-theme="dark"] body[data-page] :is(
        .field, .field label, .section-heading, .tool-card h2, .tool-card h3,
        .page-faq__item summary, .page-faq__item p, .tool-breadcrumbs,
        .tool-breadcrumbs a, .card-index, .card-meta, .panel-note
    ) {
        color: var(--ink);
    }

    html[data-mobile-theme="dark"] body[data-page] :is(.tool-breadcrumbs ol li + li::before, .muted, .field-help, .field-meta, .count-meta, .mode-note) {
        color: var(--muted);
    }

    html[data-mobile-theme="dark"] body[data-page] button:not(.site-theme-dot):not(.color-swatch):not(.palette-swatch):not(.primary-button):not(.utility-button--primary):not(.primary-action):not(.math-button--calculate):not(.button-primary):not(.btn-primary) {
        color: var(--ink) !important;
    }

    html[data-mobile-theme="dark"] body[data-page] :is(.primary-button, .secondary-action, .utility-button--primary, .account-nav__link--primary) {
        border-color: #5bd0b5;
        background-color: #147461 !important;
        color: #fff !important;
    }

    html[data-mobile-theme="dark"] body[data-page] :is(.secondary-action, .utility-button--secondary, .small-action) {
        border-color: #36575c;
        background-color: #1a2631;
        color: #b6e9dc;
    }

    html[data-mobile-theme="dark"] body[data-page] [data-mobile-dark-surface="true"] {
        border-color: #354752 !important;
        background-color: #1a2631 !important;
        color: #edf4f6 !important;
        box-shadow: none !important;
    }

    html[data-mobile-theme="dark"] body[data-page] [data-mobile-dark-text="true"] {
        color: #edf4f6 !important;
    }

    .site-theme-toggle,
    .mobile-theme-button {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        min-height: 44px;
        padding: 8px 10px;
        border: 1px solid var(--green-border, #a9c6ad);
        border-radius: 10px;
        background: var(--paper, #fff);
        color: var(--ink, #202821);
        cursor: pointer;
        font: inherit;
        font-size: 14px;
        font-weight: 650;
        text-align: start;
    }

    .mobile-theme-switch {
        display: inline-flex;
        inline-size: 46px;
        block-size: 27px;
        flex: 0 0 46px;
        align-items: center;
        padding: 3px;
        border: 1px solid var(--line, #e3e8e0);
        border-radius: 999px;
        background: #dfe7dc;
        transition: background-color .16s ease;
    }

    .mobile-theme-switch > span {
        inline-size: 19px;
        block-size: 19px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgb(0 0 0 / 18%);
        transition: transform .16s ease;
    }

    html[data-mobile-theme="dark"] .mobile-theme-switch {
        border-color: #477a78;
        background: #1c6f68;
    }

    html[data-mobile-theme="dark"] .mobile-theme-switch > span {
        transform: translateX(19px);
    }
}


/* Responsive rules moved from shared desktop stylesheets. */
@media (max-width: 640px) {
    .page-faq { padding: 18px 14px; }
    .page-faq__item summary { padding: 13px; }
    .page-faq__item p { padding: 0 13px 14px; }
}

@media (max-width: 700px) {
    body[data-page]:not([data-page="/"]) {
            --tool-frame-gutter: 24px;
            --tool-card-padding: 16px;
        }

    body[data-page]:not([data-page="/"]) .page-faq {
            padding: 18px 14px;
        }

    body[data-page]:not([data-page="/"]) .page-faq__item summary {
            padding: 13px;
        }

    body[data-page]:not([data-page="/"]) .page-faq__item p {
            padding: 0 13px 14px;
        }

    body[data-page]:not([data-page="/"]) :where(*) {
            min-width: 0;
            max-width: 100%;
        }

    body[data-page]:not([data-page="/"]) .tool-control-layout {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto auto auto;
            align-items: start;
            row-gap: 12px;
            min-height: 0;
            margin-block: 14px;
        }

    body[data-page]:not([data-page="/"]) .tool-control-layout__breadcrumb,
        body[data-page]:not([data-page="/"]) .tool-control-layout__actions,
        body[data-page]:not([data-page="/"]) .tool-control-layout > .site-preferences--toolbar {
            grid-column: 1;
        }

    body[data-page]:not([data-page="/"]) .tool-control-layout__breadcrumb { grid-row: 1; }

    body[data-page]:not([data-page="/"]) .tool-control-layout__actions { grid-row: 2; }

    body[data-page]:not([data-page="/"]) .tool-control-layout > .site-preferences--toolbar {
            grid-row: 3;
            justify-self: start;
        }

    body[data-page]:not([data-page="/"]) .tool-control-layout .tool-breadcrumbs ol {
            gap: 6px;
        }

    body[data-page]:not([data-page="/"]) .tool-control-layout .tool-breadcrumbs ol li + li::before {
            margin-inline-end: 0;
        }

    body[data-page]:not([data-page="/"]) :is(.hero, .intro, .math-hero, .graph-intro-section) {
            padding-block-start: 36px;
        }

    body[data-page]:not([data-page="/"]) .tool-card h2 {
            font-size: 19px;
        }

    body[data-page]:not([data-page="/"]) .summary-heading {
            flex-wrap: wrap;
            align-items: flex-start;
        }

    body[data-page]:not([data-page="/"]) .summary-heading > *,
        body[data-page]:not([data-page="/"]) .live-label {
            min-width: 0;
            white-space: normal;
        }

    body[data-page]:not([data-page="/"]) :is(.field-grid, .settings-grid, .settings-row, .conversion-grid, .control-grid, .tool-grid, .fields-grid, .generator-settings, .format-grid, .advanced-grid) {
            grid-template-columns: minmax(0, 1fr);
        }

    body[data-page]:not([data-page="/"]) :is(.feature-grid, .generator-grid) {
            grid-template-columns: minmax(0, 1fr);
        }

    body[data-page]:not([data-page="/"]) .summary-grid--five {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

    body[data-page]:not([data-page="/"]) :is(.field, .field-wide, .level-control, .target-control, .regex-engine-note, .regex-field-hint) {
            width: 100%;
            max-width: 100%;
        }

    body[data-page]:not([data-page="/"]) :is(.tool-card, .upload-panel, .seo-workbench, .tool-workspace, .workspace, .editor-card) :is(.output-actions, .export-actions) {
            min-width: 0;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

    body[data-page]:not([data-page="/"]) .editor-footer {
            align-items: flex-start;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

    body[data-page="/text-tools/find-replace/"] .shared-settings,
        body[data-page="/text-tools/line-breaks/"] .shared-settings {
            grid-template-columns: minmax(0, 1fr);
        }

    body[data-page]:not([data-page="/"]) .count-meta {
            max-width: 100%;
            overflow-wrap: anywhere;
        }

    body[data-page^="/seo/"] :is(.audit-workspace, .cluster-workspace) {
            grid-template-columns: minmax(0, 1fr);
        }

    body[data-page^="/seo/"] :is(.audit-results, .cluster-results, .audit-panel, .cluster-panel) {
            width: 100%;
            max-width: 100%;
        }

    body[data-page^="/seo/"] .seo-guidance-grid {
            grid-template-columns: minmax(0, 1fr);
        }

    body[data-page="/entertainment/nes/"],
        body[data-page="/entertainment/nes/player.php"],
        body[data-page="/entertainment/sega/"],
        body[data-page="/entertainment/sega/player.php"],
        body[data-page="/graphic-tools/exif-editor/"] {
            --tool-upload-indent: 0px;
        }

    body[data-page="/graphic-tools/exif-editor/"] .upload-panel,
        body[data-page="/entertainment/nes/"] .upload-panel,
        body[data-page="/entertainment/nes/player.php"] .upload-panel,
        body[data-page="/entertainment/sega/"] .upload-panel,
        body[data-page="/entertainment/sega/player.php"] .upload-panel {
            grid-template-columns: minmax(0, 1fr);
        }

    body[data-page="/entertainment/nes/"] .builtin-field,
        body[data-page="/entertainment/nes/player.php"] .builtin-field,
        body[data-page="/entertainment/sega/"] .builtin-field,
        body[data-page="/entertainment/sega/player.php"] .builtin-field {
            grid-column: 1;
            width: 100%;
            margin-inline: 0;
        }
}

@media (max-width: 420px) {
    body[data-page]:not([data-page="/"]) .tool-control-layout .tool-breadcrumbs ol {
            gap: 6px;
        }
}