<style id="qrth-modern-ui-v7">

:root {
    --qrth-v7-blue: #0a84ff;
    --qrth-v7-blue-soft: #5ac8fa;
    --qrth-v7-purple: #8b5cf6;
    --qrth-v7-pink: #ec4899;
    --qrth-v7-green: #34c759;

    --qrth-v7-bg: #f5f7fb;
    --qrth-v7-surface: rgba(255,255,255,.72);
    --qrth-v7-surface-strong: rgba(255,255,255,.9);

    --qrth-v7-text: #111827;
    --qrth-v7-muted: #64748b;

    --qrth-v7-border: rgba(15,23,42,.08);

    --qrth-v7-radius: 28px;
    --qrth-v7-radius-small: 18px;

    --qrth-v7-shadow:
        0 24px 70px rgba(15,23,42,.08);

    --qrth-v7-shadow-soft:
        0 10px 30px rgba(15,23,42,.06);
}

/* ----------------------------------------------------------
   BASE
---------------------------------------------------------- */

html.qrth-v7-active,
body.qrth-v7-active {
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(90,200,250,.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(139,92,246,.12),
            transparent 30%
        ),
        var(--qrth-v7-bg) !important;
}

body.qrth-v7-active {
    color: var(--qrth-v7-text) !important;
    overflow-x: hidden;
}

/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.qrth-v7-active header,
.qrth-v7-active .qrth-navbar,
.qrth-v7-active .navbar {
    background:
        rgba(255,255,255,.72) !important;

    backdrop-filter:
        blur(24px)
        saturate(180%) !important;

    -webkit-backdrop-filter:
        blur(24px)
        saturate(180%) !important;

    border-bottom:
        1px solid rgba(255,255,255,.8) !important;

    box-shadow:
        0 8px 30px rgba(15,23,42,.04) !important;
}

.qrth-v7-active header img,
.qrth-v7-active .qrth-navbar-logo img {
    max-height: 42px !important;
    width: auto !important;
}

/* ----------------------------------------------------------
   LANGUAGE SELECTOR
---------------------------------------------------------- */

.qrth-v7-active .qrth-lang-toggle,
.qrth-v7-active .qrth-lang-switcher {
    border-radius: 999px !important;

    background:
        rgba(255,255,255,.76) !important;

    border:
        1px solid rgba(255,255,255,.9) !important;

    box-shadow:
        0 8px 24px rgba(15,23,42,.06) !important;

    backdrop-filter:
        blur(20px)
        saturate(180%) !important;

    -webkit-backdrop-filter:
        blur(20px)
        saturate(180%) !important;
}

/* Remove old globe */

.qrth-v7-active .fa-globe,
.qrth-v7-active .fa-solid.fa-globe,
.qrth-v7-active .fa-regular.fa-globe,
.qrth-v7-active [class*="globe"] {
    display: none !important;
}

/* ----------------------------------------------------------
   MAIN PAGE
---------------------------------------------------------- */

.qrth-v7-active main {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding:
        42px 24px 80px !important;
}

/* ----------------------------------------------------------
   HERO
---------------------------------------------------------- */

.qrth-v7-hero {
    max-width: 900px;
    margin:
        10px auto 34px;

    text-align: center;
}

.qrth-v7-hero h1 {
    margin: 0 0 12px;

    font-size:
        clamp(32px, 4vw, 58px);

    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -.045em;

    color:
        var(--qrth-v7-text);
}

.qrth-v7-hero h1 span {
    background:
        linear-gradient(
            90deg,
            var(--qrth-v7-blue),
            var(--qrth-v7-purple),
            var(--qrth-v7-pink)
        );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qrth-v7-hero p {
    max-width: 680px;
    margin: 0 auto;

    font-size: 17px;
    line-height: 1.7;

    color:
        var(--qrth-v7-muted);
}

/* ----------------------------------------------------------
   GENERATOR
---------------------------------------------------------- */

.qrth-v7-active
[data-trigger="qrth-public-generate"] {

    position: relative;

    background:
        rgba(255,255,255,.64) !important;

    border:
        1px solid rgba(255,255,255,.9) !important;

    border-radius:
        var(--qrth-v7-radius) !important;

    box-shadow:
        var(--qrth-v7-shadow) !important;

    backdrop-filter:
        blur(28px)
        saturate(180%) !important;

    -webkit-backdrop-filter:
        blur(28px)
        saturate(180%) !important;

    overflow: visible !important;

    padding:
        28px !important;
}

/* ----------------------------------------------------------
   TYPE AREA
---------------------------------------------------------- */

.qrth-v7-active .qrth-type-section {

    margin-bottom:
        28px !important;

    padding:
        22px !important;

    border-radius:
        var(--qrth-v7-radius-small) !important;

    background:
        rgba(255,255,255,.72) !important;

    border:
        1px solid var(--qrth-v7-border) !important;

    box-shadow:
        var(--qrth-v7-shadow-soft) !important;

    backdrop-filter:
        blur(20px) !important;

    -webkit-backdrop-filter:
        blur(20px) !important;
}

.qrth-v7-active .qrth-type-heading {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        20px !important;

    margin-bottom:
        18px !important;
}

.qrth-v7-active .qrth-type-heading h5 {
    margin:
        3px 0 0 !important;

    font-size:
        20px !important;

    font-weight:
        750 !important;
}

.qrth-v7-active .qrth-type-kicker {
    font-size:
        11px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .12em !important;

    color:
        var(--qrth-v7-blue) !important;
}

.qrth-v7-active .qrth-type-count {
    padding:
        7px 12px !important;

    border-radius:
        999px !important;

    background:
        rgba(10,132,255,.08) !important;

    color:
        var(--qrth-v7-blue) !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;
}

/* ----------------------------------------------------------
   TYPE CARDS
---------------------------------------------------------- */

.qrth-v7-active .qrth-type-grid {

    display:
        grid !important;

    grid-template-columns:
        repeat(auto-fit,minmax(130px,1fr)) !important;

    gap:
        10px !important;
}

.qrth-v7-active .qrth-type-card {

    min-height:
        92px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        9px !important;

    padding:
        12px !important;

    border-radius:
        17px !important;

    border:
        1px solid rgba(15,23,42,.07) !important;

    background:
        rgba(255,255,255,.72) !important;

    color:
        var(--qrth-v7-text) !important;

    text-decoration:
        none !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease,
        background .2s ease !important;
}

.qrth-v7-active .qrth-type-card:hover {

    transform:
        translateY(-2px);

    background:
        rgba(255,255,255,.96) !important;

    border-color:
        rgba(10,132,255,.28) !important;

    box-shadow:
        0 12px 28px rgba(15,23,42,.08) !important;
}

.qrth-v7-active .qrth-type-card.qrth-type-active {

    background:
        linear-gradient(
            145deg,
            rgba(10,132,255,.13),
            rgba(90,200,250,.08)
        ) !important;

    border-color:
        rgba(10,132,255,.32) !important;

    box-shadow:
        0 10px 25px rgba(10,132,255,.08) !important;
}

.qrth-v7-active .qrth-type-icon {

    width:
        42px !important;

    height:
        42px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border-radius:
        14px !important;

    background:
        rgba(10,132,255,.09) !important;

    color:
        var(--qrth-v7-blue) !important;
}

/* ----------------------------------------------------------
   FORM CONTROLS
---------------------------------------------------------- */

.qrth-v7-active
[data-trigger="qrth-public-generate"]
.form-control,

.qrth-v7-active
[data-trigger="qrth-public-generate"]
.form-select {

    min-height:
        50px !important;

    border-radius:
        15px !important;

    border:
        1px solid rgba(15,23,42,.1) !important;

    background:
        rgba(255,255,255,.78) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8) !important;

    color:
        var(--qrth-v7-text) !important;
}

.qrth-v7-active
[data-trigger="qrth-public-generate"]
.form-control:focus,

.qrth-v7-active
[data-trigger="qrth-public-generate"]
.form-select:focus {

    border-color:
        rgba(10,132,255,.45) !important;

    box-shadow:
        0 0 0 4px rgba(10,132,255,.1) !important;
}

/* ----------------------------------------------------------
   BUTTONS
---------------------------------------------------------- */

.qrth-v7-active
[data-trigger="qrth-public-generate"]
button,

.qrth-v7-active
[data-trigger="qrth-public-generate"]
.btn {

    border-radius:
        14px !important;

    font-weight:
        700 !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}

.qrth-v7-active
[data-trigger="qrth-public-generate"]
.qrth-v4-generate {

    min-height:
        56px !important;

    border:
        0 !important;

    border-radius:
        17px !important;

    background:
        linear-gradient(
            135deg,
            var(--qrth-v7-blue),
            var(--qrth-v7-purple)
        ) !important;

    box-shadow:
        0 14px 32px rgba(10,132,255,.22) !important;

    color:
        #fff !important;
}

.qrth-v7-active
[data-trigger="qrth-public-generate"]
.qrth-v4-generate:hover {

    transform:
        translateY(-2px) !important;

    box-shadow:
        0 18px 38px rgba(10,132,255,.3) !important;
}

/* ----------------------------------------------------------
   PREVIEW
---------------------------------------------------------- */

.qrth-v7-active
[data-trigger="qrth-public-generate"]
.qrth-v4-preview-card {

    border-radius:
        22px !important;

    border:
        1px solid rgba(15,23,42,.07) !important;

    background:
        rgba(255,255,255,.78) !important;

    box-shadow:
        var(--qrth-v7-shadow-soft) !important;

    backdrop-filter:
        blur(22px) !important;

    -webkit-backdrop-filter:
        blur(22px) !important;
}

.qrth-v7-active
[data-trigger="qrth-public-generate"]
#return-ajax {

    border-radius:
        20px !important;
}

/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 991px) {

    .qrth-v7-active main {
        padding:
            28px 16px 60px !important;
    }

    .qrth-v7-active
    [data-trigger="qrth-public-generate"] {

        padding:
            18px !important;
    }

    .qrth-v7-active .qrth-type-grid {

        grid-template-columns:
            repeat(3,1fr) !important;
    }

}

@media (max-width: 575px) {

    .qrth-v7-active main {
        padding:
            20px 12px 50px !important;
    }

    .qrth-v7-hero h1 {
        font-size:
            34px;
    }

    .qrth-v7-hero p {
        font-size:
            15px;
    }

    .qrth-v7-active .qrth-type-section {
        padding:
            15px !important;
    }

    .qrth-v7-active .qrth-type-grid {

        grid-template-columns:
            repeat(2,1fr) !important;

        gap:
            8px !important;
    }

    .qrth-v7-active .qrth-type-card {
        min-height:
            82px !important;
    }

}

/* ----------------------------------------------------------
   V7 HEADER LABEL
---------------------------------------------------------- */

.qrth-v7-badge {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        7px 12px;

    margin-bottom:
        15px;

    border-radius:
        999px;

    background:
        rgba(10,132,255,.08);

    color:
        var(--qrth-v7-blue);

    font-size:
        12px;

    font-weight:
        750;
}

</style>

<script>
(function () {

    function qrthV7Init() {

        document.documentElement.classList.add(
            'qrth-v7-active'
        );

        if (document.body) {
            document.body.classList.add(
                'qrth-v7-active'
            );
        }

        /*
         * Keep V6 active for compatibility with the
         * existing generator JavaScript while V7
         * replaces the visual layer.
         */

        document.documentElement.classList.remove(
            'qrth-v6-active'
        );

        if (document.body) {
            document.body.classList.remove(
                'qrth-v6-active'
            );
        }

        /*
         * Remove old visual globe.
         */

        document
            .querySelectorAll(
                '.fa-globe,' +
                '.fa-solid.fa-globe,' +
                '.fa-regular.fa-globe,' +
                '[class*="globe"]'
            )
            .forEach(function (el) {

                /*
                 * Only hide visual icon elements.
                 * Do not remove the complete language
                 * selector.
                 */

                if (
                    el.tagName === 'I' ||
                    el.tagName === 'SPAN' ||
                    el.tagName === 'SVG'
                ) {
                    el.style.display = 'none';
                }

            });

        /*
         * Mark QR generator.
         */

        document
            .querySelectorAll(
                '[data-trigger="qrth-public-generate"]'
            )
            .forEach(function (el) {

                el.setAttribute(
                    'data-qrth-v7',
                    'true'
                );

            });

        /*
         * Prevent horizontal overflow.
         */

        document.documentElement.style.overflowX =
            'hidden';

        if (document.body) {
            document.body.style.overflowX =
                'hidden';
        }

    }

    if (
        document.readyState === 'loading'
    ) {

        document.addEventListener(
            'DOMContentLoaded',
            qrthV7Init,
            { once: true }
        );

    } else {

        qrthV7Init();

    }

})();
</script>
<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<sitemap>
		<loc>https://qr-th.com/sitemap/site.xml</loc>
	</sitemap>
	<sitemap>
		<loc>https://qr-th.com/sitemap/links.xml</loc>
	</sitemap>
	<sitemap>
		<loc>https://qr-th.com/sitemap/biopages.xml</loc>
	</sitemap>
</sitemapindex>