/* ==========================================================
   PREMIUM QR CODES
   Unified Studio Design System
   QR Studio + Barcode Studio
   ========================================================== */

:root {
    --pqr-primary: #6366f1;
    --pqr-primary-dark: #4f46e5;
    --pqr-primary-soft: #eef2ff;

    --pqr-cyan: #0ea5e9;
    --pqr-success: #10b981;

    --pqr-text: #172033;
    --pqr-text-soft: #475569;
    --pqr-muted: #64748b;

    --pqr-border: #e2e8f0;
    --pqr-border-soft: rgba(203, 213, 225, .72);

    --pqr-surface: rgba(255, 255, 255, .88);
    --pqr-surface-solid: #ffffff;
    --pqr-surface-soft: #f8fafc;

    --pqr-page: #f8faff;

    --pqr-shadow-sm:
        0 4px 18px rgba(15, 23, 42, .05);

    --pqr-shadow:
        0 18px 45px rgba(15, 23, 42, .08);

    --pqr-shadow-lg:
        0 24px 70px rgba(30, 41, 59, .10);

    --pqr-radius-sm: 10px;
    --pqr-radius: 16px;
    --pqr-radius-lg: 22px;
}


/* ==========================================================
   BASE
   ========================================================== */

html {
    scroll-behavior: smooth;
}

body.pqr-studio-page {
    min-height: 100vh;
    margin: 0;
    padding: 0 !important;
    overflow-x: hidden;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color: var(--pqr-text);

    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(99, 102, 241, .12),
            transparent 30rem
        ),
        radial-gradient(
            circle at 92% 15%,
            rgba(14, 165, 233, .10),
            transparent 28rem
        ),
        linear-gradient(
            180deg,
            #f9faff 0%,
            #f6f8fd 50%,
            #ffffff 100%
        );
}

body.pqr-studio-page::before,
body.pqr-studio-page::after {
    display: none !important;
}

body.pqr-studio-page .container {
    width: 100%;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   GLOBAL HEADER
   ========================================================== */

.pqr-site-header {
    position: relative;
    z-index: 50;

    width: 100%;

    background:
        rgba(255, 255, 255, .84);

    border-bottom:
        1px solid rgba(226, 232, 240, .9);

    box-shadow:
        0 3px 20px rgba(15, 23, 42, .035);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.pqr-header-inner {
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
}

.pqr-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    color: var(--pqr-text) !important;

    font-weight: 800;
    font-size: 19px;
    line-height: 1;

    letter-spacing: -.025em;

    text-decoration: none !important;
}

.pqr-brand-mark {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--pqr-primary),
            var(--pqr-primary-dark)
        );

    box-shadow:
        0 9px 24px rgba(99, 102, 241, .28);
}

.pqr-header-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;
}

.pqr-nav-link {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 8px 13px;

    border: 1px solid transparent;
    border-radius: 10px;

    color: var(--pqr-text-soft) !important;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.pqr-nav-link:hover {
    color: var(--pqr-primary-dark) !important;

    border-color: #dbe3f0;

    background: #ffffff;

    transform: translateY(-1px);
}

.pqr-nav-link.active {
    color: var(--pqr-primary-dark) !important;

    background: var(--pqr-primary-soft);

    border-color: #c7d2fe;
}

.pqr-nav-primary {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--pqr-primary),
            var(--pqr-primary-dark)
        );

    box-shadow:
        0 7px 18px rgba(99, 102, 241, .22);
}

.pqr-nav-primary:hover {
    color: #ffffff !important;

    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            #595ce6,
            #4338ca
        );
}


/* ==========================================================
   HERO
   ========================================================== */

.pqr-studio-main {
    padding-top: 34px;
    padding-bottom: 54px;
}

.pqr-studio-hero {
    max-width: 850px;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;

    text-align: center;
}

.pqr-studio-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 10px;

    padding: 6px 11px;

    border: 1px solid #dbe3f0;
    border-radius: 999px;

    color: var(--pqr-primary-dark);

    background: rgba(255, 255, 255, .74);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.pqr-studio-hero h1 {
    margin: 0 0 10px;

    color: var(--pqr-text) !important;

    font-size:
        clamp(27px, 4vw, 39px) !important;

    line-height: 1.12;

    font-weight: 800 !important;

    letter-spacing: -.035em;
}

.pqr-studio-hero p {
    max-width: 780px;

    margin: 0 auto;

    color: var(--pqr-muted) !important;

    font-size: 15px !important;
    line-height: 1.7;
}


/* ==========================================================
   GENERATOR TYPE NAVIGATION
   ========================================================== */

.pqr-type-navigation {
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 8px;

    margin: 0 auto 26px;
}

body.pqr-studio-page .cat-btn,
body.pqr-studio-page .pqr-type-navigation > a {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    margin: 0;

    padding: 8px 13px;

    border:
        1px solid rgba(203, 213, 225, .82);

    border-radius: 11px;

    color: var(--pqr-text-soft);

    background: rgba(255, 255, 255, .83);

    box-shadow:
        0 3px 10px rgba(15, 23, 42, .025);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    font-size: 12px;
    font-weight: 700;

    line-height: 1;

    text-decoration: none !important;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

body.pqr-studio-page .cat-btn:hover,
body.pqr-studio-page .pqr-type-navigation > a:hover {
    color: var(--pqr-primary-dark);

    background: #ffffff;

    border-color: #aebdf7;

    box-shadow:
        0 7px 18px rgba(99, 102, 241, .09);

    transform: translateY(-1px);
}

body.pqr-studio-page .cat-btn.active,
body.pqr-studio-page .pqr-type-navigation > a.btn-primary {
    color: #ffffff;

    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--pqr-primary),
            var(--pqr-primary-dark)
        );

    box-shadow:
        0 8px 22px rgba(99, 102, 241, .24);
}


/* ==========================================================
   CARDS
   ========================================================== */

body.pqr-studio-page .card-custom,
body.pqr-studio-page .studio-card {
    width: 100%;

    padding: 24px !important;

    border:
        1px solid rgba(226, 232, 240, .94) !important;

    border-radius:
        var(--pqr-radius-lg) !important;

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

    box-shadow:
        var(--pqr-shadow) !important;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.pqr-studio-page .studio-card h4,
body.pqr-studio-page .studio-card h5 {
    letter-spacing: -.02em;
}


/* ==========================================================
   INPUTS
   ========================================================== */

body.pqr-studio-page .form-control,
body.pqr-studio-page .form-select {
    min-height: 44px;

    padding:
        10px 13px;

    border:
        1px solid #d8e0eb;

    border-radius:
        10px;

    color:
        var(--pqr-text);

    background:
        rgba(255, 255, 255, .93);

    font-size:
        14px;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .02);

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

body.pqr-studio-page textarea.form-control {
    min-height: 90px;
}

body.pqr-studio-page .form-control:focus,
body.pqr-studio-page .form-select:focus {
    border-color:
        #818cf8;

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px rgba(99, 102, 241, .11);

    outline:
        none;
}

body.pqr-studio-page .input-label,
body.pqr-studio-page .form-label {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #475569 !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .01em;
}


/* ==========================================================
   QR OPTION PILLS
   ========================================================== */

body.pqr-studio-page .option-pill {
    min-height:
        37px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        7px;

    padding:
        8px;

    border:
        1px solid #dce3ed;

    border-radius:
        9px;

    color:
        #475569;

    background:
        #ffffff;

    font-size:
        11px;

    font-weight:
        700;

    transition:
        .17s ease;
}

body.pqr-studio-page .option-pill:hover {
    color:
        var(--pqr-primary-dark);

    border-color:
        #a5b4fc;

    background:
        #f8faff;
}

body.pqr-studio-page .option-pill.active {
    color:
        var(--pqr-primary-dark);

    border-color:
        #818cf8;

    background:
        var(--pqr-primary-soft);

    box-shadow:
        inset 0 0 0 1px rgba(99, 102, 241, .08);
}


/* ==========================================================
   PREVIEW
   ========================================================== */

.pqr-preview-surface,
body.pqr-studio-page .preview-box {
    width:
        100%;

    min-height:
        300px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    overflow:
        auto;

    border:
        1px dashed #bec9d8 !important;

    border-radius:
        15px !important;

    background:
        linear-gradient(
            145deg,
            #f8fafc,
            #ffffff
        ) !important;
}

body.pqr-studio-page #qr_img {
    max-width:
        100%;

    max-height:
        260px !important;

    filter:
        drop-shadow(
            0 8px 18px rgba(15, 23, 42, .06)
        );
}

body.pqr-studio-page #barcodeCanvas,
body.pqr-studio-page #bwipCanvas {
    max-width:
        100%;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

body.pqr-studio-page .btn-primary-custom,
.pqr-primary-action {
    min-height:
        45px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    width:
        100%;

    padding:
        10px 16px;

    border:
        0 !important;

    border-radius:
        10px !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--pqr-primary),
            var(--pqr-primary-dark)
        ) !important;

    box-shadow:
        0 10px 24px rgba(99, 102, 241, .22);

    font-size:
        13px;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

body.pqr-studio-page .btn-primary-custom:hover,
.pqr-primary-action:hover {
    color:
        #ffffff !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 14px 28px rgba(99, 102, 241, .28);
}


/* ==========================================================
   BARCODE MODE TABS
   ========================================================== */

body.pqr-studio-page .nav-pills {
    justify-content:
        center;
}

body.pqr-studio-page .nav-pills .nav-link {
    min-height:
        42px;

    padding:
        9px 15px;

    border:
        1px solid #dbe3ec;

    border-radius:
        11px;

    color:
        var(--pqr-text-soft);

    background:
        rgba(255,255,255,.8);

    font-size:
        13px;

    font-weight:
        700;
}

body.pqr-studio-page .nav-pills .nav-link.active {
    color:
        #ffffff;

    border-color:
        transparent;

    background:
        linear-gradient(
            135deg,
            var(--pqr-primary),
            var(--pqr-primary-dark)
        );

    box-shadow:
        0 8px 20px rgba(99,102,241,.20);
}


/* ==========================================================
   SHARED FOOTER
   ========================================================== */

.pqr-footer {
    margin-top:
        50px;

    padding:
        54px 0 24px;

    color:
        #94a3b8;

    background:
        #0f172a;

    border-top:
        1px solid #1e293b;
}

.pqr-footer-grid {
    display:
        grid;

    grid-template-columns:
        1.5fr 1fr 1fr 1fr;

    gap:
        44px;

    padding-bottom:
        38px;
}

.pqr-footer-brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        14px;

    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        800;
}

.pqr-footer-brand-icon {
    width:
        34px;

    height:
        34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #6366f1,
            #4f46e5
        );
}

.pqr-footer-description {
    max-width:
        390px;

    margin:
        0;

    color:
        #94a3b8;

    font-size:
        13px;

    line-height:
        1.75;
}

.pqr-footer-title {
    margin:
        2px 0 14px;

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}

.pqr-footer-links {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}

.pqr-footer-links li + li {
    margin-top:
        9px;
}

.pqr-footer-links a {
    color:
        #94a3b8;

    font-size:
        13px;

    text-decoration:
        none;

    transition:
        color .17s ease;
}

.pqr-footer-links a:hover {
    color:
        #c7d2fe;
}

.pqr-footer-bottom {
    min-height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding-top:
        20px;

    border-top:
        1px solid #273449;

    color:
        #7f8da4;

    font-size:
        12px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 991px) {

    body.pqr-studio-page {
        padding:
            0 !important;
    }

    body.pqr-studio-page .container {
        max-width:
            100%;

        padding-left:
            16px !important;

        padding-right:
            16px !important;
    }

    .pqr-header-inner {
        min-height:
            auto;

        padding-top:
            13px;

        padding-bottom:
            13px;

        flex-wrap:
            wrap;
    }

    .pqr-header-nav {
        width:
            100%;

        justify-content:
            flex-start;

        overflow-x:
            auto;

        padding-bottom:
            2px;
    }

    .pqr-studio-main {
        padding-top:
            26px;

        padding-bottom:
            36px;
    }

    body.pqr-studio-page .card-custom,
    body.pqr-studio-page .studio-card {
        padding:
            18px !important;

        border-radius:
            17px !important;
    }

    .pqr-footer-grid {
        grid-template-columns:
            1fr 1fr;

        gap:
            32px;
    }
}


@media (max-width: 575px) {

    .pqr-brand {
        font-size:
            17px;
    }

    .pqr-brand-mark {
        width:
            34px;

        height:
            34px;
    }

    .pqr-nav-link {
        flex:
            0 0 auto;
    }

    .pqr-studio-hero h1 {
        font-size:
            28px !important;
    }

    .pqr-studio-hero p {
        font-size:
            14px !important;
    }

    .pqr-type-navigation {
        justify-content:
            flex-start;

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        padding-bottom:
            8px;
    }

    body.pqr-studio-page .cat-btn,
    body.pqr-studio-page .pqr-type-navigation > a {
        flex:
            0 0 auto;

        white-space:
            nowrap;
    }

    .pqr-preview-surface,
    body.pqr-studio-page .preview-box {
        min-height:
            240px;
    }

    .pqr-footer-grid {
        grid-template-columns:
            1fr;
    }

    .pqr-footer-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;
    }
}


/* ==========================================================
   PREMIUM QR CODES — THEME V4.1
   Unified refinement layer
   ========================================================== */


/* ----------------------------------------------------------
   Page atmosphere
   ---------------------------------------------------------- */

body.pqr-studio-page {
    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(99, 102, 241, .075),
            transparent 28%
        ),
        radial-gradient(
            circle at 94% 16%,
            rgba(14, 165, 233, .055),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #fbfcff 0%,
            #f8faff 44%,
            #ffffff 100%
        );
}


/* ----------------------------------------------------------
   Header
   ---------------------------------------------------------- */

.pqr-site-header {
    position: sticky;
    top: 0;
}

.pqr-header-inner {
    min-height: 76px;
}

.pqr-brand {
    gap: 12px;
}

.pqr-brand-mark {
    width: 40px;
    height: 40px;

    border-radius: 13px;
}

.pqr-header-nav {
    gap: 6px;
}

.pqr-nav-link {
    min-height: 40px;

    padding:
        8px 14px;

    border-radius:
        11px;
}


/* ----------------------------------------------------------
   Studio page hierarchy
   ---------------------------------------------------------- */

.pqr-studio-main {
    padding-top:
        42px;

    padding-bottom:
        58px;
}

.pqr-studio-hero {
    margin-bottom:
        28px;
}

.pqr-studio-eyebrow {
    margin-bottom:
        12px;

    padding:
        7px 12px;
}

.pqr-studio-hero h1 {
    margin-bottom:
        12px !important;
}

.pqr-studio-hero p {
    max-width:
        760px;

    line-height:
        1.75;
}


/* ----------------------------------------------------------
   Type switcher
   ---------------------------------------------------------- */

.pqr-type-navigation {
    max-width:
        1120px;

    gap:
        8px;

    margin-bottom:
        30px;
}

body.pqr-studio-page .cat-btn,
body.pqr-studio-page .pqr-type-navigation > a {
    min-height:
        41px;

    padding:
        9px 14px;

    border-radius:
        12px;

    font-size:
        12px;
}

body.pqr-studio-page .cat-btn.active,
body.pqr-studio-page .pqr-type-navigation > a.btn-primary {
    transform:
        translateY(-1px);
}


/* ----------------------------------------------------------
   Main generator columns
   ---------------------------------------------------------- */

body.pqr-studio-page main .row {
    align-items:
        stretch;
}

body.pqr-studio-page main .col-lg-7,
body.pqr-studio-page main .col-lg-5 {
    display:
        flex;

    flex-direction:
        column;
}

body.pqr-studio-page .card-custom,
body.pqr-studio-page .studio-card {
    border-color:
        rgba(218, 226, 238, .95) !important;

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

    box-shadow:
        0 18px 50px rgba(15, 23, 42, .07) !important;
}


/* QR left and preview cards */

body.pqr-studio-page .col-lg-7 > .card-custom,
body.pqr-studio-page .col-lg-5 > .card-custom {
    width:
        100%;
}


/* ----------------------------------------------------------
   Section headings inside tools
   ---------------------------------------------------------- */

body.pqr-studio-page .studio-card h4,
body.pqr-studio-page .card-custom h5 {
    color:
        var(--pqr-text) !important;
}

body.pqr-studio-page hr {
    opacity:
        1;

    border-color:
        #e7ecf3 !important;
}


/* ----------------------------------------------------------
   Forms
   ---------------------------------------------------------- */

body.pqr-studio-page .form-control,
body.pqr-studio-page .form-select {
    min-height:
        46px;

    border-radius:
        11px;

    border-color:
        #d9e1ec;

    background:
        #ffffff;
}

body.pqr-studio-page textarea.form-control {
    min-height:
        96px;
}

body.pqr-studio-page .form-check-input {
    border-color:
        #cbd5e1;
}

body.pqr-studio-page .form-check-input:checked {
    border-color:
        var(--pqr-primary);

    background-color:
        var(--pqr-primary);
}


/* ----------------------------------------------------------
   QR customization controls
   ---------------------------------------------------------- */

body.pqr-studio-page .option-pill {
    min-height:
        40px;

    border-radius:
        10px;

    background:
        #fbfcfe;
}

body.pqr-studio-page .option-pill:hover {
    background:
        #ffffff;
}

body.pqr-studio-page .option-pill.active {
    background:
        #eef2ff;
}


/* Premium style controls */

body.pqr-studio-page .exclusive-pill {
    min-height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;
}


/* ----------------------------------------------------------
   Preview cards
   ---------------------------------------------------------- */

.pqr-preview-surface,
body.pqr-studio-page .preview-box {
    min-height:
        330px;

    border:
        1px dashed #b9c5d5 !important;

    border-radius:
        17px !important;

    background:
        linear-gradient(
            145deg,
            #f8fafc 0%,
            #ffffff 62%
        ) !important;
}

body.pqr-studio-page #qr_img {
    max-height:
        285px !important;
}

body.pqr-studio-page #barcodeCanvas,
body.pqr-studio-page #bwipCanvas {
    max-height:
        260px;
}


/* ----------------------------------------------------------
   QR export formats
   ---------------------------------------------------------- */

body.pqr-studio-page #btn_svg,
body.pqr-studio-page #btn_png,
body.pqr-studio-page #btn_jpg,
body.pqr-studio-page #btn_webp {
    min-height:
        40px;

    border-radius:
        9px;

    font-size:
        12px;
}


/* ----------------------------------------------------------
   Primary actions
   ---------------------------------------------------------- */

body.pqr-studio-page .btn-primary-custom,
.pqr-primary-action {
    min-height:
        48px;

    border-radius:
        11px !important;

    box-shadow:
        0 11px 26px rgba(99, 102, 241, .20);
}


/* ----------------------------------------------------------
   Barcode mode tabs
   ---------------------------------------------------------- */

body.pqr-studio-page .nav-pills {
    gap:
        8px !important;

    margin-bottom:
        26px !important;
}

body.pqr-studio-page .nav-pills .nav-link {
    min-height:
        44px;

    padding:
        10px 16px;

    border-radius:
        11px;
}


/* ----------------------------------------------------------
   Barcode color controls
   ---------------------------------------------------------- */

body.pqr-studio-page .color-picker-wrapper {
    gap:
        10px;
}

body.pqr-studio-page .color-picker-wrapper input[type="color"] {
    width:
        46px;

    height:
        46px;

    padding:
        3px;

    border:
        1px solid #d9e1ec;

    border-radius:
        11px;

    background:
        #ffffff;
}


/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */

.pqr-footer {
    margin-top:
        64px;

    padding-top:
        62px;

    background:
        linear-gradient(
            180deg,
            #111b2e 0%,
            #0b1220 100%
        );
}

.pqr-footer-grid {
    max-width:
        1160px;
}

.pqr-footer-links a {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        25px;
}


/* ----------------------------------------------------------
   Mobile / tablet
   ---------------------------------------------------------- */

@media (max-width: 991px) {

    .pqr-site-header {
        position:
            relative;
    }

    .pqr-header-inner {
        min-height:
            auto;
    }

    .pqr-studio-main {
        padding-top:
            30px;
    }

    body.pqr-studio-page main .col-lg-7,
    body.pqr-studio-page main .col-lg-5 {
        display:
            block;
    }

    .pqr-preview-surface,
    body.pqr-studio-page .preview-box {
        min-height:
            285px;
    }

}


@media (max-width: 575px) {

    body.pqr-studio-page .container {
        padding-left:
            14px !important;

        padding-right:
            14px !important;
    }

    .pqr-header-inner {
        gap:
            12px;
    }

    .pqr-header-nav {
        gap:
            6px;

        margin-left:
            -2px;

        margin-right:
            -2px;

        scrollbar-width:
            none;
    }

    .pqr-header-nav::-webkit-scrollbar {
        display:
            none;
    }

    .pqr-nav-link {
        min-height:
            38px;

        padding:
            7px 11px;

        font-size:
            12px;
    }

    .pqr-studio-main {
        padding-top:
            24px;

        padding-bottom:
            30px;
    }

    .pqr-studio-hero {
        margin-bottom:
            22px;
    }

    .pqr-studio-hero h1 {
        font-size:
            27px !important;

        line-height:
            1.15;
    }

    .pqr-type-navigation {
        position:
            relative;

        width:
            calc(100% + 28px);

        margin-left:
            -14px;

        margin-right:
            -14px;

        padding-left:
            14px;

        padding-right:
            14px;

        padding-bottom:
            10px;

        scroll-padding-left:
            14px;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width:
            none;
    }

    .pqr-type-navigation::-webkit-scrollbar {
        display:
            none;
    }

    body.pqr-studio-page .cat-btn,
    body.pqr-studio-page .pqr-type-navigation > a {
        min-height:
            39px;

        padding:
            8px 12px;
    }

    body.pqr-studio-page .card-custom,
    body.pqr-studio-page .studio-card {
        padding:
            16px !important;

        border-radius:
            16px !important;
    }

    .pqr-preview-surface,
    body.pqr-studio-page .preview-box {
        min-height:
            235px;

        padding:
            16px;
    }

    body.pqr-studio-page #qr_img {
        max-height:
            215px !important;
    }

    body.pqr-studio-page .nav-pills {
        display:
            grid;

        grid-template-columns:
            1fr;

        width:
            100%;
    }

    body.pqr-studio-page .nav-pills .nav-item,
    body.pqr-studio-page .nav-pills .nav-link {
        width:
            100%;
    }

    .pqr-footer {
        margin-top:
            46px;

        padding-top:
            44px;
    }

}


/* ==========================================================
   PREMIUM QR STUDIO — LEGACY INLINE COMPATIBILITY LAYER
   Migrated from v2/index.php during Theme V4.2
   ========================================================== */

* { box-sizing: border-box; }
        body { 
            background: radial-gradient(circle at 10% 20%, rgb(233, 215, 255) 0%, rgb(240, 244, 255) 40%, rgb(224, 242, 254) 100%);
            min-height: 100vh;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
            color: #1e293b; 
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        body::before {
            content: '';
            position: absolute;
            top: -100px;
            left: -100px;
            width: 500px;
            height: 500px;
            background: rgba(99, 102, 241, 0.25);
            border-radius: 50%;
            filter: blur(80px);
            z-index: -1;
        }
        body::after {
            content: '';
            position: absolute;
            bottom: 10%;
            right: -100px;
            width: 500px;
            height: 500px;
            background: rgba(14, 165, 233, 0.25);
            border-radius: 50%;
            filter: blur(80px);
            z-index: -1;
        }

        .container {
            width: 100%;
            max-width: 1250px;
            padding-right: 12px;
            padding-left: 12px;
            margin: 0 auto;
        }
        .row { margin-right: -6px; margin-left: -6px; }
        .col-lg-7, .col-lg-5 { padding-right: 6px; padding-left: 6px; }

        .cat-btn { 
            background: rgba(255, 255, 255, 0.65); 
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: #475569; 
            border: 1px solid rgba(255, 255, 255, 0.9); 
            border-radius: 12px; 
            padding: 8px 12px; 
            margin: 3px; 
            font-weight: 600; 
            font-size: 13px; 
            transition: all 0.25s ease; 
            cursor: pointer; 
            display: inline-flex; 
            align-items: center; 
            box-shadow: 0 4px 12px rgba(0,0,0,0.03);
        }
        .cat-btn:hover { background: rgba(255, 255, 255, 0.85); border-color: #cbd5e1; }
        .cat-btn.active { 
            background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); 
            color: #ffffff; 
            border-color: transparent; 
            box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35); 
        }
        .cat-btn i { margin-right: 6px; font-size: 13px; }
        
        .card-custom { 
            background: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.9);
            border-radius: 20px; 
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08); 
            width: 100%;
        }
        .form-control { 
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(8px);
            border-radius: 10px; 
            border: 1px solid rgba(203, 213, 225, 0.8); 
            padding: 10px 14px; 
            font-size: 14px; 
            width: 100%;
        }
        .form-control:focus { background: rgba(255, 255, 255, 0.95); border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); }
        .input-label { font-weight: 600; color: #334155; font-size: 13px; margin-bottom: 6px; display: block; }
        .panel { display: none; }
        .active-panel { display: block; }
        .option-pill { 
            border: 2px solid rgba(226, 232, 240, 0.8); 
            border-radius: 10px; 
            padding: 8px 8px; 
            font-size: 11px; 
            font-weight: 600; 
            background: rgba(255, 255, 255, 0.6); 
            backdrop-filter: blur(8px);
            cursor: pointer; 
            text-align: center; 
            transition: all 0.2s; 
            margin-bottom: 6px; 
        }
        .option-pill:hover, .option-pill.active { border-color: #6366f1; color: #6366f1; background: rgba(239, 246, 255, 0.85); }

        /* Exclusive styling button themes */
        .exclusive-pill {
            border: 2px solid transparent;
            border-radius: 10px;
            padding: 9px 12px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s;
            margin-bottom: 6px;
            color: #fff;
            display: inline-block;
        }
        .exc-ai { background: linear-gradient(135deg, #f87171 0%, #fb923c 100%); }
        .exc-neon { background: #1e293b; color: #38bdf8; border: 1px solid #38bdf8; }
        .exc-iso { background: #6366f1; }
        .exc-metal { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
        .exc-halftone { background: #64748b; }
        .exclusive-pill.active { box-shadow: 0 0 12px rgba(99, 102, 241, 0.5); transform: scale(1.02); }

        @media (max-width: 991px) {
            html, body { width: 100%; max-width: 100vw; overflow-x: hidden; padding: 4px !important; margin: 0 !important; }
            .container { padding: 0 4px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; }
            .row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
            .col-lg-7, .col-lg-5 { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; }
            .card-custom { padding: 12px !important; border-radius: 14px; margin-bottom: 12px; width: 100% !important; }
            .d-flex.flex-wrap.justify-content-center { justify-content: center !important; flex-wrap: wrap !important; overflow-x: visible !important; width: 100%; }
            .cat-btn { flex: 0 1 auto; white-space: normal !important; font-size: 12px; padding: 6px 10px; margin: 2px; }
            .sticky-top { position: relative !important; top: 0 !important; }
        }


/* ==========================================================
   PREMIUM QR CODES — THEME V4.3
   VISUAL NORMALIZATION / AUTHORITATIVE CASCADE
   ----------------------------------------------------------
   This layer intentionally lives after all legacy /
   compatibility rules.

   It normalizes:
   - page width
   - header
   - hero
   - generator navigation
   - cards
   - forms
   - option controls
   - previews
   - primary actions
   - barcode tabs
   - footer
   - responsive behavior
   ========================================================== */


/* ==========================================================
   1. PAGE SYSTEM
   ========================================================== */

body.pqr-studio-page {
    margin: 0 !important;
    padding: 0 !important;

    min-height: 100vh;

    color: var(--pqr-text);

    background:
        linear-gradient(
            180deg,
            #f8faff 0%,
            #f8fafc 46%,
            #ffffff 100%
        ) !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif !important;

    overflow-x: hidden;
}

body.pqr-studio-page::before,
body.pqr-studio-page::after {
    display: none !important;
}

body.pqr-studio-page .container {
    width: 100%;

    max-width: 1220px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 20px;
    padding-right: 20px;
}


/* ==========================================================
   2. GLOBAL HEADER
   ========================================================== */

body.pqr-studio-page .pqr-site-header {
    position: relative;
    z-index: 50;

    width: 100%;

    border-bottom:
        1px solid rgba(226, 232, 240, .92);

    background:
        rgba(255, 255, 255, .92);

    box-shadow:
        0 4px 24px rgba(15, 23, 42, .035);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.pqr-studio-page .pqr-header-inner {
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
}

body.pqr-studio-page .pqr-brand {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    flex: 0 0 auto;

    color: var(--pqr-text) !important;

    font-size: 19px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -.025em;

    text-decoration: none !important;
}

body.pqr-studio-page .pqr-brand-mark {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--pqr-primary),
            var(--pqr-primary-dark)
        );

    box-shadow:
        0 9px 22px rgba(99, 102, 241, .24);
}

body.pqr-studio-page .pqr-header-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;
}

body.pqr-studio-page .pqr-nav-link {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 8px 13px;

    border:
        1px solid transparent;

    border-radius: 10px;

    color:
        var(--pqr-text-soft) !important;

    background:
        transparent;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    text-decoration: none !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

body.pqr-studio-page .pqr-nav-link:hover {
    color:
        var(--pqr-primary-dark) !important;

    background:
        #ffffff;

    border-color:
        #dbe3ef;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, .04);

    transform:
        translateY(-1px);
}

body.pqr-studio-page .pqr-nav-link.active {
    color:
        var(--pqr-primary-dark) !important;

    background:
        var(--pqr-primary-soft);

    border-color:
        #c7d2fe;
}

body.pqr-studio-page .pqr-nav-primary {
    color:
        #ffffff !important;

    border-color:
        transparent !important;

    background:
        linear-gradient(
            135deg,
            var(--pqr-primary),
            var(--pqr-primary-dark)
        ) !important;

    box-shadow:
        0 7px 18px rgba(99, 102, 241, .20);
}

body.pqr-studio-page .pqr-nav-primary:hover {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #595ce6,
            #4338ca
        ) !important;

    box-shadow:
        0 10px 22px rgba(99, 102, 241, .26);
}


/* ==========================================================
   3. STUDIO MAIN / HERO
   ========================================================== */

body.pqr-studio-page .pqr-studio-main {
    padding-top: 36px;
    padding-bottom: 58px;
}

body.pqr-studio-page .pqr-studio-hero {
    width: 100%;
    max-width: 850px;

    margin:
        0 auto 27px;

    text-align:
        center;
}

body.pqr-studio-page .pqr-studio-eyebrow {
    min-height: 29px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-bottom: 11px;

    padding: 6px 11px;

    border:
        1px solid #dbe3ef;

    border-radius:
        999px;

    color:
        var(--pqr-primary-dark);

    background:
        rgba(255, 255, 255, .84);

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    box-shadow:
        0 3px 12px rgba(15, 23, 42, .025);
}

body.pqr-studio-page .pqr-studio-hero h1 {
    margin:
        0 0 11px !important;

    color:
        var(--pqr-text) !important;

    font-size:
        clamp(29px, 4vw, 40px) !important;

    font-weight:
        800 !important;

    line-height:
        1.12;

    letter-spacing:
        -.04em;
}

body.pqr-studio-page .pqr-studio-hero p {
    max-width:
        780px;

    margin:
        0 auto !important;

    color:
        var(--pqr-muted) !important;

    font-size:
        15px !important;

    line-height:
        1.72;
}


/* ==========================================================
   4. GENERATOR TYPE NAVIGATION
   ========================================================== */

body.pqr-studio-page .pqr-type-navigation {
    width:
        100%;

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        8px;

    margin:
        0 auto 28px;

    padding:
        0;
}

body.pqr-studio-page .cat-btn,
body.pqr-studio-page .pqr-type-navigation > a {
    min-height:
        39px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    margin:
        0 !important;

    padding:
        8px 13px !important;

    border:
        1px solid #d8e0ea !important;

    border-radius:
        11px !important;

    color:
        var(--pqr-text-soft) !important;

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

    box-shadow:
        0 3px 10px rgba(15, 23, 42, .025);

    font-size:
        12px !important;

    font-weight:
        700 !important;

    line-height:
        1;

    white-space:
        nowrap;

    text-decoration:
        none !important;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

body.pqr-studio-page .cat-btn:hover,
body.pqr-studio-page .pqr-type-navigation > a:hover {
    color:
        var(--pqr-primary-dark) !important;

    border-color:
        #aebdf7 !important;

    background:
        #ffffff !important;

    box-shadow:
        0 7px 18px rgba(99, 102, 241, .08);

    transform:
        translateY(-1px);
}

body.pqr-studio-page .cat-btn.active,
body.pqr-studio-page .pqr-type-navigation > a.btn-primary {
    color:
        #ffffff !important;

    border-color:
        transparent !important;

    background:
        linear-gradient(
            135deg,
            var(--pqr-primary),
            var(--pqr-primary-dark)
        ) !important;

    box-shadow:
        0 8px 20px rgba(99, 102, 241, .22);
}


/* ==========================================================
   5. BOOTSTRAP GRID NORMALIZATION
   ========================================================== */

body.pqr-studio-page .row {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
}

body.pqr-studio-page .col-lg-7,
body.pqr-studio-page .col-lg-5 {
    min-width: 0;
}


/* ==========================================================
   6. MAIN STUDIO CARDS
   ========================================================== */

body.pqr-studio-page .card-custom,
body.pqr-studio-page .studio-card {
    width:
        100%;

    padding:
        24px !important;

    border:
        1px solid rgba(226, 232, 240, .96) !important;

    border-radius:
        20px !important;

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

    box-shadow:
        0 16px 42px rgba(15, 23, 42, .065) !important;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

body.pqr-studio-page .studio-card h4,
body.pqr-studio-page .studio-card h5,
body.pqr-studio-page .card-custom h4,
body.pqr-studio-page .card-custom h5 {
    color:
        var(--pqr-text) !important;

    letter-spacing:
        -.02em;
}


/* ==========================================================
   7. FORM NORMALIZATION
   ========================================================== */

body.pqr-studio-page .form-control,
body.pqr-studio-page .form-select {
    width:
        100%;

    min-height:
        44px;

    padding:
        10px 13px;

    border:
        1px solid #d8e0ea !important;

    border-radius:
        10px !important;

    color:
        var(--pqr-text);

    background:
        #ffffff !important;

    font-size:
        14px;

    line-height:
        1.4;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .02);

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

body.pqr-studio-page textarea.form-control {
    min-height:
        92px;

    resize:
        vertical;
}

body.pqr-studio-page .form-control:focus,
body.pqr-studio-page .form-select:focus {
    border-color:
        #818cf8 !important;

    background:
        #ffffff !important;

    box-shadow:
        0 0 0 4px rgba(99, 102, 241, .10) !important;

    outline:
        none;
}

body.pqr-studio-page .input-label,
body.pqr-studio-page .form-label {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #475569 !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    line-height:
        1.4;

    letter-spacing:
        .01em;
}

body.pqr-studio-page .form-check-label {
    color:
        #64748b;
}


/* ==========================================================
   8. QR PANEL STATE
   ========================================================== */

body.pqr-studio-page .panel {
    display:
        none;
}

body.pqr-studio-page .panel.active-panel {
    display:
        block;
}


/* ==========================================================
   9. QR OPTION PILLS
   ========================================================== */

body.pqr-studio-page .option-pill {
    width:
        100%;

    min-height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        7px;

    padding:
        8px;

    border:
        1px solid #dbe2ec !important;

    border-radius:
        9px !important;

    color:
        #475569 !important;

    background:
        #ffffff !important;

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1.25;

    text-align:
        center;

    cursor:
        pointer;

    transition:
        color .17s ease,
        border-color .17s ease,
        background .17s ease,
        box-shadow .17s ease,
        transform .17s ease;
}

body.pqr-studio-page .option-pill:hover {
    color:
        var(--pqr-primary-dark) !important;

    border-color:
        #a5b4fc !important;

    background:
        #f8faff !important;
}

body.pqr-studio-page .option-pill.active {
    color:
        var(--pqr-primary-dark) !important;

    border-color:
        #818cf8 !important;

    background:
        var(--pqr-primary-soft) !important;

    box-shadow:
        inset 0 0 0 1px rgba(99, 102, 241, .06);
}


/* ==========================================================
   10. PREMIUM STYLE PILLS
   ========================================================== */

body.pqr-studio-page .exclusive-pill {
    width:
        100%;

    min-height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    margin-bottom:
        7px;

    padding:
        8px 9px;

    border-radius:
        9px;

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1.2;

    cursor:
        pointer;

    text-align:
        center;

    transition:
        transform .17s ease,
        box-shadow .17s ease,
        opacity .17s ease;
}

body.pqr-studio-page .exclusive-pill:hover {
    transform:
        translateY(-1px);
}

body.pqr-studio-page .exclusive-pill.active {
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px rgba(99, 102, 241, .34);

    transform:
        translateY(-1px);
}

body.pqr-studio-page .exc-ai {
    background:
        linear-gradient(
            135deg,
            #f87171,
            #fb923c
        );

    color:
        #ffffff;
}

body.pqr-studio-page .exc-neon {
    border:
        1px solid #38bdf8;

    color:
        #38bdf8;

    background:
        #1e293b;
}

body.pqr-studio-page .exc-iso {
    color:
        #ffffff;

    background:
        #6366f1;
}

body.pqr-studio-page .exc-metal {
    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #1d4ed8
        );
}

body.pqr-studio-page .exc-halftone {
    color:
        #ffffff;

    background:
        #64748b;
}


/* ==========================================================
   11. COLOR CONTROLS
   ========================================================== */

body.pqr-studio-page .color-picker-wrapper {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}

body.pqr-studio-page
.color-picker-wrapper
input[type="color"] {
    width:
        44px;

    min-width:
        44px;

    height:
        44px;

    padding:
        3px;

    border:
        1px solid #d8e0ea;

    border-radius:
        10px;

    background:
        #ffffff;

    cursor:
        pointer;
}

body.pqr-studio-page input[type="color"].form-control {
    height:
        44px;

    min-height:
        44px;

    padding:
        4px !important;
}


/* ==========================================================
   12. PREVIEW SURFACES
   ========================================================== */

body.pqr-studio-page .pqr-preview-surface,
body.pqr-studio-page .preview-box {
    width:
        100%;

    min-height:
        300px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    overflow:
        auto;

    border:
        1px dashed #bcc8d7 !important;

    border-radius:
        15px !important;

    background:
        linear-gradient(
            145deg,
            #f8fafc,
            #ffffff
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

body.pqr-studio-page #qr_img {
    display:
        block;

    max-width:
        100%;

    max-height:
        260px !important;

    margin:
        0 auto;

    filter:
        drop-shadow(
            0 8px 18px rgba(15, 23, 42, .055)
        );
}

body.pqr-studio-page #barcodeCanvas,
body.pqr-studio-page #bwipCanvas {
    max-width:
        100%;

    height:
        auto;
}


/* ==========================================================
   13. PRIMARY ACTION BUTTONS
   ========================================================== */

body.pqr-studio-page .btn-primary-custom,
body.pqr-studio-page .pqr-primary-action {
    min-height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    width:
        100%;

    padding:
        10px 16px;

    border:
        0 !important;

    border-radius:
        10px !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--pqr-primary),
            var(--pqr-primary-dark)
        ) !important;

    box-shadow:
        0 10px 23px rgba(99, 102, 241, .21);

    font-size:
        13px;

    font-weight:
        800;

    text-decoration:
        none !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

body.pqr-studio-page .btn-primary-custom:hover,
body.pqr-studio-page .pqr-primary-action:hover {
    color:
        #ffffff !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 14px 29px rgba(99, 102, 241, .27);

    filter:
        saturate(1.05);
}


/* ==========================================================
   14. EXPORT FORMAT BUTTONS
   ========================================================== */

body.pqr-studio-page
.btn-outline-primary.btn-sm {
    border-color:
        #c7d2fe;

    color:
        var(--pqr-primary-dark);

    border-radius:
        9px;
}

body.pqr-studio-page
.btn-outline-primary.btn-sm:hover,
body.pqr-studio-page
.btn-outline-primary.btn-sm.active,
body.pqr-studio-page
.btn-primary.btn-sm {
    border-color:
        var(--pqr-primary);

    color:
        #ffffff;

    background:
        var(--pqr-primary);
}


/* ==========================================================
   15. BARCODE MODE TABS
   ========================================================== */

body.pqr-studio-page .nav-pills {
    display:
        flex;

    justify-content:
        center;

    gap:
        8px;

    margin-bottom:
        24px !important;
}

body.pqr-studio-page .nav-pills .nav-link {
    min-height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        9px 15px;

    border:
        1px solid #dbe3ec;

    border-radius:
        10px;

    color:
        var(--pqr-text-soft);

    background:
        #ffffff;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.2;

    transition:
        .18s ease;
}

body.pqr-studio-page
.nav-pills
.nav-link:hover {
    color:
        var(--pqr-primary-dark);

    border-color:
        #aebdf7;

    background:
        #f8faff;
}

body.pqr-studio-page
.nav-pills
.nav-link.active {
    color:
        #ffffff;

    border-color:
        transparent;

    background:
        linear-gradient(
            135deg,
            var(--pqr-primary),
            var(--pqr-primary-dark)
        );

    box-shadow:
        0 8px 20px rgba(99, 102, 241, .20);
}


/* ==========================================================
   16. FOOTER NORMALIZATION
   ========================================================== */

body.pqr-studio-page .pqr-footer {
    margin-top:
        54px;

    padding:
        54px 0 24px;

    color:
        #94a3b8;

    background:
        #0f172a;

    border-top:
        1px solid #1e293b;
}

body.pqr-studio-page .pqr-footer-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:
        42px;

    padding-bottom:
        38px;
}

body.pqr-studio-page .pqr-footer-brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        14px;

    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        800;
}

body.pqr-studio-page .pqr-footer-description {
    max-width:
        390px;

    margin:
        0;

    color:
        #94a3b8;

    font-size:
        13px;

    line-height:
        1.75;
}

body.pqr-studio-page .pqr-footer-title {
    margin:
        2px 0 14px;

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}

body.pqr-studio-page .pqr-footer-links {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}

body.pqr-studio-page .pqr-footer-links li + li {
    margin-top:
        9px;
}

body.pqr-studio-page .pqr-footer-links a {
    color:
        #94a3b8;

    font-size:
        13px;

    text-decoration:
        none;

    transition:
        color .17s ease;
}

body.pqr-studio-page .pqr-footer-links a:hover {
    color:
        #c7d2fe;
}

body.pqr-studio-page .pqr-footer-bottom {
    min-height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding-top:
        20px;

    border-top:
        1px solid #273449;

    color:
        #7f8da4;

    font-size:
        12px;
}


/* ==========================================================
   17. TABLET
   ========================================================== */

@media (max-width: 991px) {

    body.pqr-studio-page .container {
        max-width:
            100%;

        padding-left:
            16px !important;

        padding-right:
            16px !important;
    }

    body.pqr-studio-page .pqr-header-inner {
        min-height:
            auto;

        padding-top:
            13px;

        padding-bottom:
            13px;

        flex-wrap:
            wrap;
    }

    body.pqr-studio-page .pqr-header-nav {
        width:
            100%;

        justify-content:
            flex-start;

        overflow-x:
            auto;

        scrollbar-width:
            thin;

        padding-bottom:
            2px;
    }

    body.pqr-studio-page .pqr-studio-main {
        padding-top:
            27px;

        padding-bottom:
            40px;
    }

    body.pqr-studio-page .card-custom,
    body.pqr-studio-page .studio-card {
        padding:
            20px !important;

        border-radius:
            17px !important;
    }

    body.pqr-studio-page .pqr-footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            32px;
    }
}


/* ==========================================================
   18. MOBILE
   ========================================================== */

@media (max-width: 575px) {

    body.pqr-studio-page .container {
        padding-left:
            13px !important;

        padding-right:
            13px !important;
    }

    body.pqr-studio-page .pqr-brand {
        font-size:
            17px;
    }

    body.pqr-studio-page .pqr-brand-mark {
        width:
            34px;

        height:
            34px;

        border-radius:
            10px;
    }

    body.pqr-studio-page .pqr-header-nav {
        gap:
            6px;
    }

    body.pqr-studio-page .pqr-nav-link {
        min-height:
            37px;

        flex:
            0 0 auto;

        padding:
            7px 11px;

        font-size:
            12px;
    }

    body.pqr-studio-page .pqr-studio-hero {
        margin-bottom:
            22px;
    }

    body.pqr-studio-page .pqr-studio-hero h1 {
        font-size:
            28px !important;
    }

    body.pqr-studio-page .pqr-studio-hero p {
        font-size:
            14px !important;

        line-height:
            1.65;
    }

    body.pqr-studio-page .pqr-type-navigation {
        justify-content:
            flex-start;

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        overscroll-behavior-inline:
            contain;

        scrollbar-width:
            thin;

        padding-bottom:
            8px;

        margin-bottom:
            22px;
    }

    body.pqr-studio-page .cat-btn,
    body.pqr-studio-page
    .pqr-type-navigation > a {
        flex:
            0 0 auto;
    }

    body.pqr-studio-page .card-custom,
    body.pqr-studio-page .studio-card {
        padding:
            16px !important;

        border-radius:
            15px !important;
    }

    body.pqr-studio-page .pqr-preview-surface,
    body.pqr-studio-page .preview-box {
        min-height:
            235px;

        padding:
            16px;
    }

    body.pqr-studio-page #qr_img {
        max-height:
            220px !important;
    }

    body.pqr-studio-page .nav-pills {
        justify-content:
            flex-start;

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        padding-bottom:
            5px;
    }

    body.pqr-studio-page .nav-pills .nav-item,
    body.pqr-studio-page .nav-pills .nav-link {
        flex:
            0 0 auto;
    }

    body.pqr-studio-page .pqr-footer {
        margin-top:
            38px;

        padding-top:
            42px;
    }

    body.pqr-studio-page .pqr-footer-grid {
        grid-template-columns:
            1fr;

        gap:
            28px;

        padding-bottom:
            30px;
    }

    body.pqr-studio-page .pqr-footer-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            7px;
    }
}


/* ==========================================================
   END THEME V4.3
   ========================================================== */


/* ==========================================================
   PREMIUM QR DESIGNER — V4.4
   ========================================================== */

body.pqr-studio-page .pqr-designer-section {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e6ebf2;
}

body.pqr-studio-page .pqr-designer-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

body.pqr-studio-page .pqr-designer-kicker {
    display: block;
    margin-bottom: 3px;

    color: #94a3b8;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .09em;
    text-transform: uppercase;
}

body.pqr-studio-page .pqr-designer-section h6 {
    margin: 0;

    color: var(--pqr-text);

    font-size: 14px;
    font-weight: 800;
}

body.pqr-studio-page .pqr-designer-value {
    color: #94a3b8;

    font-size: 12px;
    font-weight: 800;
}

body.pqr-studio-page .pqr-segmented-control {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 5px;

    padding: 4px;

    border: 1px solid #e2e8f0;
    border-radius: 11px;

    background: #f8fafc;
}

body.pqr-studio-page .pqr-segment {
    min-height: 36px;

    border: 0;
    border-radius: 8px;

    color: #64748b;
    background: transparent;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    transition: .16s ease;
}

body.pqr-studio-page .pqr-segment:hover {
    color: var(--pqr-primary-dark);
}

body.pqr-studio-page .pqr-segment.active {
    color: var(--pqr-primary-dark);

    background: #ffffff;

    box-shadow:
        0 2px 8px rgba(15, 23, 42, .07);
}

body.pqr-studio-page .pqr-gradient-controls[hidden] {
    display: none !important;
}

body.pqr-studio-page .pqr-gradient-presets {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 14px;
}

body.pqr-studio-page .pqr-gradient-swatch {
    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    padding: 0;

    border:
        3px solid #ffffff;

    border-radius:
        50%;

    box-shadow:
        0 0 0 1px #dbe3ec;

    cursor: pointer;

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

body.pqr-studio-page .pqr-gradient-swatch:hover {
    transform:
        translateY(-1px)
        scale(1.04);

    box-shadow:
        0 0 0 2px #a5b4fc;
}

body.pqr-studio-page .pqr-gradient-blue {
    background:
        linear-gradient(
            135deg,
            #0ea5e9,
            #6366f1
        );
}

body.pqr-studio-page .pqr-gradient-purple {
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #ec4899
        );
}

body.pqr-studio-page .pqr-gradient-fire {
    background:
        linear-gradient(
            135deg,
            #f97316,
            #ef4444
        );
}

body.pqr-studio-page .pqr-gradient-green {
    background:
        linear-gradient(
            135deg,
            #059669,
            #06b6d4
        );
}

body.pqr-studio-page .pqr-size-selector {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px;
}

body.pqr-studio-page .pqr-size-option {
    min-height: 43px;

    border:
        1px solid #dce3ed;

    border-radius:
        10px;

    color:
        #64748b;

    background:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        .17s ease;
}

body.pqr-studio-page .pqr-size-option:hover {
    color:
        var(--pqr-primary-dark);

    border-color:
        #a5b4fc;
}

body.pqr-studio-page .pqr-size-option.active {
    color:
        #ffffff;

    border-color:
        #111827;

    background:
        #111827;

    box-shadow:
        0 7px 15px rgba(15, 23, 42, .14);
}


@media (max-width: 575px) {

    body.pqr-studio-page .pqr-gradient-swatch {
        width:
            34px;

        height:
            34px;
    }

    body.pqr-studio-page .pqr-size-option {
        min-height:
            40px;
    }
}


/* ==========================================================
   END PREMIUM QR DESIGNER V4.4
   ========================================================== */


/* ==========================================================
   PREMIUM QR DESIGNER — V4.4B
   LOGO + SOCIAL ICON DESIGNER
   ========================================================== */

body.pqr-studio-page .pqr-logo-remove {
    padding: 6px 10px;

    border: 1px solid #fecaca;
    border-radius: 8px;

    color: #b91c1c;
    background: #fff;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

body.pqr-studio-page .pqr-logo-remove:hover {
    background: #fef2f2;
}


body.pqr-studio-page .pqr-logo-upload {
    min-height: 78px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 13px 15px;

    border: 1px dashed #cbd5e1;
    border-radius: 12px;

    color: #475569;
    background: #f8fafc;

    cursor: pointer;

    transition:
        border-color .17s ease,
        background .17s ease,
        transform .17s ease;
}

body.pqr-studio-page .pqr-logo-upload:hover {
    border-color: #818cf8;
    background: #f5f7ff;

    transform: translateY(-1px);
}

body.pqr-studio-page .pqr-logo-upload-icon {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 11px;

    color: var(--pqr-primary-dark);
    background: #eef2ff;

    font-size: 17px;
}

body.pqr-studio-page .pqr-logo-upload strong,
body.pqr-studio-page .pqr-logo-upload small {
    display: block;
}

body.pqr-studio-page .pqr-logo-upload strong {
    margin-bottom: 3px;

    color: #334155;

    font-size: 12px;
    font-weight: 800;
}

body.pqr-studio-page .pqr-logo-upload small {
    color: #94a3b8;

    font-size: 10px;
    font-weight: 600;
}


body.pqr-studio-page .pqr-logo-selection {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-top: 11px;
    padding: 10px 12px;

    border: 1px solid #e2e8f0;
    border-radius: 11px;

    background: #fff;
}

body.pqr-studio-page .pqr-logo-selection[hidden] {
    display: none !important;
}

body.pqr-studio-page .pqr-logo-selection strong,
body.pqr-studio-page .pqr-logo-selection small {
    display: block;
}

body.pqr-studio-page .pqr-logo-selection strong {
    max-width: 250px;

    overflow: hidden;

    color: #334155;

    font-size: 11px;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}

body.pqr-studio-page .pqr-logo-selection small {
    margin-top: 2px;

    color: #94a3b8;

    font-size: 10px;
}


body.pqr-studio-page .pqr-logo-mini-preview {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    overflow: hidden;

    border: 1px solid #e2e8f0;
    border-radius: 9px;

    background: #fff;
}

body.pqr-studio-page .pqr-logo-mini-preview img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}


body.pqr-studio-page .pqr-social-icon-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 8px;
}

body.pqr-studio-page .pqr-social-icon {
    min-height: 58px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    padding: 8px 5px;

    border: 1px solid #dce3ed;
    border-radius: 10px;

    color: #64748b;
    background: #fff;

    cursor: pointer;

    transition:
        color .17s ease,
        border-color .17s ease,
        background .17s ease,
        transform .17s ease;
}

body.pqr-studio-page .pqr-social-icon i {
    font-size: 16px;
}

body.pqr-studio-page .pqr-social-icon span {
    font-size: 9px;
    font-weight: 800;
}

body.pqr-studio-page .pqr-social-icon:hover {
    color: var(--pqr-primary-dark);

    border-color: #a5b4fc;
    background: #f8faff;

    transform: translateY(-1px);
}

body.pqr-studio-page .pqr-social-icon.active {
    color: var(--pqr-primary-dark);

    border-color: #818cf8;
    background: #eef2ff;

    box-shadow:
        inset 0 0 0 1px
        rgba(99, 102, 241, .07);
}


body.pqr-studio-page .pqr-logo-controls[hidden] {
    display: none !important;
}


body.pqr-studio-page .pqr-logo-shape-control {
    grid-template-columns:
        repeat(3, 1fr);
}


body.pqr-studio-page .pqr-logo-plate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 11px 12px;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    background: #f8fafc;
}

body.pqr-studio-page .pqr-logo-plate-row small {
    display: block;

    max-width: 270px;

    color: #94a3b8;

    font-size: 10px;
    line-height: 1.45;
}


body.pqr-studio-page .pqr-switch {
    position: relative;

    width: 42px;
    height: 24px;

    flex: 0 0 auto;
}

body.pqr-studio-page .pqr-switch input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}

body.pqr-studio-page .pqr-switch span {
    position: absolute;
    inset: 0;

    border-radius: 999px;

    background: #cbd5e1;

    cursor: pointer;

    transition: .18s ease;
}

body.pqr-studio-page .pqr-switch span::after {
    content: '';

    position: absolute;

    top: 3px;
    left: 3px;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 2px 5px
        rgba(15, 23, 42, .18);

    transition: .18s ease;
}

body.pqr-studio-page
.pqr-switch
input:checked + span {
    background:
        var(--pqr-primary);
}

body.pqr-studio-page
.pqr-switch
input:checked + span::after {
    transform:
        translateX(18px);
}


@media (max-width: 575px) {

    body.pqr-studio-page .pqr-social-icon-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


/* ==========================================================
   END PREMIUM QR DESIGNER V4.4B
   ========================================================== */


/* ==========================================================
   PREMIUM QR CODES — V4.5C
   SOCIAL PROFILE BUILDER
   ========================================================== */

body.pqr-social-builder-page {
    background:
        linear-gradient(
            180deg,
            #f8faff 0%,
            #f8fafc 55%,
            #ffffff 100%
        ) !important;
}


body.pqr-social-builder-page
.pqr-social-builder-main {
    padding:
        52px 0 80px;
}


body.pqr-social-builder-page
.pqr-social-builder-container {
    max-width:
        1240px;
}


body.pqr-social-builder-page
.pqr-social-builder-hero {
    max-width:
        760px;

    margin:
        0 auto 38px;

    text-align:
        center;
}


body.pqr-social-builder-page
.pqr-social-builder-eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        12px;

    padding:
        7px 12px;

    border:
        1px solid #dbe3ff;

    border-radius:
        999px;

    color:
        var(--pqr-primary-dark);

    background:
        #f4f6ff;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .04em;

    text-transform:
        uppercase;
}


body.pqr-social-builder-page
.pqr-social-builder-hero h1 {
    margin:
        0 0 13px;

    color:
        #0f172a;

    font-size:
        clamp(
            30px,
            5vw,
            46px
        );

    font-weight:
        850;

    letter-spacing:
        -.035em;
}


body.pqr-social-builder-page
.pqr-social-builder-hero p {
    max-width:
        690px;

    margin:
        0 auto;

    color:
        #64748b;

    font-size:
        16px;

    line-height:
        1.7;
}


body.pqr-social-builder-page
.pqr-builder-card {
    padding:
        28px;

    border:
        1px solid #e2e8f0;

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        0 20px 50px
        rgba(
            15,
            23,
            42,
            .07
        );
}


body.pqr-social-builder-page
.pqr-builder-section {
    padding-bottom:
        28px;

    margin-bottom:
        28px;

    border-bottom:
        1px solid #e8edf4;
}


body.pqr-social-builder-page
.pqr-builder-section-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        19px;
}


body.pqr-social-builder-page
.pqr-builder-section-head h2 {
    margin:
        0;

    color:
        #0f172a;

    font-size:
        17px;

    font-weight:
        800;
}


body.pqr-social-builder-page
.pqr-builder-section-head > i {
    color:
        #a5b4fc;

    font-size:
        19px;
}


body.pqr-social-builder-page
.pqr-builder-help {
    display:
        block;

    margin-top:
        6px;

    color:
        #94a3b8;

    font-size:
        11px;
}


body.pqr-social-builder-page
.pqr-builder-count {
    padding:
        4px 9px;

    border-radius:
        999px;

    color:
        #6366f1;

    background:
        #eef2ff;

    font-size:
        10px;

    font-weight:
        800;
}


body.pqr-social-builder-page
.pqr-builder-links {
    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


body.pqr-social-builder-page
.pqr-social-link-row {
    display:
        grid;

    grid-template-columns:
        42px minmax(0, 1fr) 38px;

    align-items:
        start;

    gap:
        11px;

    padding:
        13px;

    border:
        1px solid #e2e8f0;

    border-radius:
        14px;

    background:
        #fbfcfe;
}


body.pqr-social-builder-page
.pqr-social-link-icon {
    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #e2e8f0;

    border-radius:
        12px;

    color:
        #4f46e5;

    background:
        #ffffff;

    font-size:
        17px;
}


body.pqr-social-builder-page
.pqr-social-link-remove {
    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        3px;

    border:
        1px solid #fecaca;

    border-radius:
        10px;

    color:
        #dc2626;

    background:
        #fffafa;

    cursor:
        pointer;
}


body.pqr-social-builder-page
.pqr-builder-add-link {
    width:
        100%;

    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        13px;

    border:
        1px dashed #a5b4fc;

    border-radius:
        12px;

    color:
        #4f46e5;

    background:
        #f8faff;

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;
}


body.pqr-social-builder-page
.pqr-theme-presets {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        15px;
}


body.pqr-social-builder-page
.pqr-theme-preset {
    padding:
        8px 13px;

    border:
        1px solid #dfe5ed;

    border-radius:
        999px;

    color:
        #475569;

    background:
        #ffffff;

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;
}


body.pqr-social-builder-page
.pqr-builder-create {
    min-height:
        52px;

    font-size:
        14px;
}


body.pqr-social-builder-page
.pqr-builder-create:disabled {
    opacity:
        .68;

    cursor:
        wait;
}


body.pqr-social-builder-page
.pqr-builder-account-note {
    margin:
        12px 0 0;

    color:
        #94a3b8;

    font-size:
        11px;

    text-align:
        center;
}


body.pqr-social-builder-page
.pqr-builder-preview-sticky {
    position:
        sticky;

    top:
        92px;
}


body.pqr-social-builder-page
.pqr-builder-preview-label {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        10px;

    color:
        #64748b;

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;
}


body.pqr-social-builder-page
.pqr-live-badge {
    padding:
        3px 7px;

    border-radius:
        999px;

    color:
        #059669;

    background:
        #ecfdf5;

    font-size:
        9px;
}


body.pqr-social-builder-page
.pqr-social-live-preview {
    --preview-bg:
        #f8fafc;

    --preview-accent:
        #6366f1;

    --preview-button:
        #ffffff;

    min-height:
        610px;

    padding:
        36px 25px;

    overflow:
        hidden;

    border:
        8px solid #111827;

    border-radius:
        38px;

    background:
        var(--preview-bg);

    box-shadow:
        0 30px 70px
        rgba(
            15,
            23,
            42,
            .16
        );

    text-align:
        center;

    transition:
        background .18s ease;
}


body.pqr-social-builder-page
.pqr-live-avatar {
    width:
        92px;

    height:
        92px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 16px;

    border:
        4px solid rgba(
            255,
            255,
            255,
            .85
        );

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        var(--preview-accent);

    box-shadow:
        0 10px 28px
        rgba(
            15,
            23,
            42,
            .15
        );

    font-size:
        26px;

    font-weight:
        850;
}


body.pqr-social-builder-page
.pqr-social-live-preview h3 {
    margin:
        0;

    color:
        #0f172a;

    font-size:
        23px;

    font-weight:
        850;

    letter-spacing:
        -.02em;
}


body.pqr-social-builder-page
.pqr-live-username {
    margin:
        4px 0 12px;

    color:
        var(--preview-accent);

    font-size:
        13px;

    font-weight:
        750;
}


body.pqr-social-builder-page
.pqr-live-bio {
    max-width:
        330px;

    margin:
        0 auto 24px;

    color:
        #64748b;

    font-size:
        13px;

    line-height:
        1.6;
}


body.pqr-social-builder-page
.pqr-live-links {
    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


body.pqr-social-builder-page
.pqr-live-link {
    min-height:
        52px;

    display:
        grid;

    grid-template-columns:
        34px 1fr 20px;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px 12px;

    border:
        1px solid rgba(
            148,
            163,
            184,
            .18
        );

    border-radius:
        14px;

    color:
        #0f172a;

    background:
        var(--preview-button);

    box-shadow:
        0 5px 16px
        rgba(
            15,
            23,
            42,
            .055
        );

    text-align:
        left;
}


body.pqr-social-builder-page
.pqr-live-link > span {
    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    color:
        #ffffff;

    background:
        var(--preview-accent);
}


body.pqr-social-builder-page
.pqr-live-link strong {
    overflow:
        hidden;

    font-size:
        12px;

    font-weight:
        800;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


body.pqr-social-builder-page
.pqr-live-link > i {
    color:
        #94a3b8;

    font-size:
        10px;
}


body.pqr-social-builder-page
.pqr-live-empty {
    padding:
        24px;

    border:
        1px dashed rgba(
            148,
            163,
            184,
            .5
        );

    border-radius:
        13px;

    color:
        #94a3b8;

    font-size:
        12px;
}


body.pqr-social-builder-page
.pqr-builder-alert {
    max-width:
        820px;

    margin:
        0 auto 24px;

    padding:
        13px 16px;

    border-radius:
        12px;

    font-size:
        13px;

    font-weight:
        700;
}


body.pqr-social-builder-page
.pqr-builder-alert.is-error {
    border:
        1px solid #fecaca;

    color:
        #b91c1c;

    background:
        #fff7f7;
}


body.pqr-social-builder-page
.pqr-builder-alert.is-success {
    border:
        1px solid #bbf7d0;

    color:
        #047857;

    background:
        #f0fdf4;
}


body.pqr-social-builder-page
.pqr-builder-result {
    margin-top:
        20px;

    padding:
        25px;

    border:
        1px solid #dbe4ec;

    border-radius:
        20px;

    background:
        #ffffff;

    box-shadow:
        0 16px 40px
        rgba(
            15,
            23,
            42,
            .08
        );

    text-align:
        center;
}


body.pqr-social-builder-page
.pqr-builder-success-icon {
    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 11px;

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        #10b981;
}


body.pqr-social-builder-page
.pqr-builder-result h3 {
    margin:
        0 0 7px;

    color:
        #0f172a;

    font-size:
        18px;

    font-weight:
        850;
}


body.pqr-social-builder-page
.pqr-builder-result > p {
    margin:
        0 0 17px;

    color:
        #64748b;

    font-size:
        12px;

    line-height:
        1.55;
}


body.pqr-social-builder-page
.pqr-result-qr {
    width:
        210px;

    height:
        210px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 18px;

    padding:
        10px;

    border:
        1px solid #e2e8f0;

    border-radius:
        18px;

    background:
        #ffffff;
}


body.pqr-social-builder-page
.pqr-result-qr img {
    max-width:
        100%;

    max-height:
        100%;
}


body.pqr-social-builder-page
.pqr-copy-field {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr) 44px;

    gap:
        7px;

    margin-bottom:
        13px;
}


body.pqr-social-builder-page
.pqr-result-actions {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        9px;
}


body.pqr-social-builder-page
.pqr-result-actions .btn {
    min-height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border-radius:
        10px;

    font-size:
        12px;

    font-weight:
        800;
}


@media (max-width: 991px) {

    body.pqr-social-builder-page
    .pqr-builder-preview-sticky {
        position:
            static;
    }

    body.pqr-social-builder-page
    .pqr-social-live-preview {
        min-height:
            520px;
    }
}


@media (max-width: 575px) {

    body.pqr-social-builder-page
    .pqr-social-builder-main {
        padding:
            34px 0 55px;
    }

    body.pqr-social-builder-page
    .pqr-builder-card {
        padding:
            18px;
    }

    body.pqr-social-builder-page
    .pqr-social-link-row {
        grid-template-columns:
            36px minmax(0, 1fr) 34px;

        gap:
            8px;

        padding:
            10px;
    }

    body.pqr-social-builder-page
    .pqr-social-link-icon {
        width:
            36px;

        height:
            36px;
    }

    body.pqr-social-builder-page
    .pqr-result-actions {
        grid-template-columns:
            1fr;
    }

    body.pqr-social-builder-page
    .pqr-social-live-preview {
        min-height:
            500px;

        padding:
            30px 18px;

        border-width:
            6px;

        border-radius:
            30px;
    }
}


/* ==========================================================
   END V4.5C SOCIAL PROFILE BUILDER
   ========================================================== */


/* ==========================================================
   PREMIUM QR SOCIAL DASHBOARD — V4.5D-B
   ========================================================== */

body.pqr-dashboard-page {
    min-height: 100vh;
    background: #f8fafc;
    color: #0f172a;
}

body.pqr-dashboard-page .pqr-dashboard-main {
    padding: 42px 0 64px;
}

body.pqr-dashboard-page .pqr-dashboard-hero,
body.pqr-dashboard-page .pqr-analytics-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 30px;
}

body.pqr-dashboard-page .pqr-dashboard-kicker {
    display: block;
    margin-bottom: 7px;
    color: #6366f1;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

body.pqr-dashboard-page .pqr-dashboard-hero h1,
body.pqr-dashboard-page .pqr-analytics-hero h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 900;
    letter-spacing: -.035em;
}

body.pqr-dashboard-page .pqr-dashboard-hero p {
    max-width: 690px;
    margin: 11px 0 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

body.pqr-dashboard-page .pqr-dashboard-user {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
}

body.pqr-dashboard-page .pqr-dashboard-create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

body.pqr-dashboard-page .pqr-dashboard-stats {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

body.pqr-dashboard-page .pqr-dashboard-stat {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 112px;
    padding: 20px;
    border: 1px solid #e6ebf2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, .045);
}

body.pqr-dashboard-page .pqr-dashboard-stat-icon {
    width: 46px;
    height: 46px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #4f46e5;
    background: #eef2ff;
    font-size: 18px;
}

body.pqr-dashboard-page .pqr-dashboard-stat span {
    display: block;
    margin-bottom: 3px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

body.pqr-dashboard-page .pqr-dashboard-stat strong {
    color: #0f172a;
    font-size: 27px;
    font-weight: 900;
    letter-spacing: -.03em;
}

body.pqr-dashboard-page .pqr-dashboard-section {
    padding: 26px;
    border: 1px solid #e6ebf2;
    border-radius: 22px;
    background: #ffffff;
    box-shadow:
        0 16px 38px rgba(15, 23, 42, .05);
}

body.pqr-dashboard-page .pqr-dashboard-section-head,
body.pqr-dashboard-page .pqr-analytics-card-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

body.pqr-dashboard-page .pqr-dashboard-section h2,
body.pqr-dashboard-page .pqr-analytics-card h2 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
}

body.pqr-dashboard-page .pqr-dashboard-section-count {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
}

body.pqr-dashboard-page .pqr-profile-card-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px;
}

body.pqr-dashboard-page .pqr-profile-card {
    padding: 22px;
    overflow: hidden;
    border: 1px solid #e4e9f1;
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 10px 24px rgba(15, 23, 42, .04);
}

body.pqr-dashboard-page .pqr-profile-card-head {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

body.pqr-dashboard-page .pqr-profile-avatar {
    width: 54px;
    height: 54px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 17px;
    color: #4f46e5;
    background: #eef2ff;
    font-size: 20px;
}

body.pqr-dashboard-page .pqr-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.pqr-dashboard-page .pqr-profile-identity {
    min-width: 0;
    flex: 1;
}

body.pqr-dashboard-page .pqr-profile-name-row {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

body.pqr-dashboard-page .pqr-profile-name-row h3 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
}

body.pqr-dashboard-page .pqr-profile-status {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}

body.pqr-dashboard-page .pqr-status-active {
    color: #047857;
    background: #ecfdf5;
}

body.pqr-dashboard-page .pqr-status-paused {
    color: #b45309;
    background: #fffbeb;
}

body.pqr-dashboard-page .pqr-status-archived {
    color: #64748b;
    background: #f1f5f9;
}

body.pqr-dashboard-page .pqr-profile-username {
    display: block;
    margin-top: 3px;
    color: #6366f1;
    font-size: 12px;
    font-weight: 800;
}

body.pqr-dashboard-page .pqr-profile-bio {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}

body.pqr-dashboard-page .pqr-profile-metrics {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 20px;
}

body.pqr-dashboard-page .pqr-profile-metrics > div {
    padding: 11px 8px;
    text-align: center;
    border-radius: 12px;
    background: #f8fafc;
}

body.pqr-dashboard-page .pqr-profile-metrics span {
    display: block;
    color: #94a3b8;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

body.pqr-dashboard-page .pqr-profile-metrics strong {
    display: block;
    margin-top: 2px;
    color: #0f172a;
    font-size: 17px;
    font-weight: 900;
}

body.pqr-dashboard-page .pqr-profile-addresses {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

body.pqr-dashboard-page .pqr-profile-addresses > div {
    display: grid;
    grid-template-columns:
        78px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
}

body.pqr-dashboard-page .pqr-profile-addresses span {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
}

body.pqr-dashboard-page .pqr-profile-addresses code {
    min-width: 0;
    overflow: hidden;
    padding: 7px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    background: #f8fafc;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.pqr-dashboard-page .pqr-copy-button {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    background: #ffffff;
    cursor: pointer;
}

body.pqr-dashboard-page .pqr-profile-actions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 18px;
}

body.pqr-dashboard-page .pqr-profile-action {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    color: #475569;
    background: #ffffff;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
}

body.pqr-dashboard-page .pqr-profile-action-primary {
    color: #ffffff;
    border-color: #111827;
    background: #111827;
}

body.pqr-dashboard-page .pqr-profile-created {
    margin-top: 13px;
    color: #b0bac7;
    font-size: 10px;
}

body.pqr-dashboard-page .pqr-dashboard-empty {
    padding: 58px 20px;
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    background: #f8fafc;
}

body.pqr-dashboard-page .pqr-dashboard-empty-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border-radius: 17px;
    color: #4f46e5;
    background: #eef2ff;
    font-size: 21px;
}

body.pqr-dashboard-page .pqr-dashboard-empty h3 {
    margin: 0;
    color: #0f172a;
    font-size: 19px;
    font-weight: 900;
}

body.pqr-dashboard-page .pqr-dashboard-empty p {
    max-width: 560px;
    margin: 10px auto 20px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}

body.pqr-dashboard-page .pqr-analytics-username {
    margin: 5px 0 0;
    color: #6366f1;
    font-size: 13px;
    font-weight: 800;
}

body.pqr-dashboard-page .pqr-analytics-route-info {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr);
    gap: 6px 9px;
    min-width: 260px;
}

body.pqr-dashboard-page .pqr-analytics-route-info span {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
}

body.pqr-dashboard-page .pqr-analytics-route-info code {
    color: #475569;
    font-size: 11px;
}

body.pqr-dashboard-page .pqr-analytics-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px;
}

body.pqr-dashboard-page .pqr-analytics-card {
    padding: 23px;
    border: 1px solid #e6ebf2;
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, .045);
}

body.pqr-dashboard-page .pqr-analytics-card-wide {
    grid-column: 1 / -1;
}

body.pqr-dashboard-page .pqr-analytics-timeline {
    height: 220px;
    display: grid;
    grid-template-columns:
        repeat(14, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    padding-top: 15px;
}

body.pqr-dashboard-page .pqr-analytics-day {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
}

body.pqr-dashboard-page .pqr-analytics-bars {
    height: 175px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
}

body.pqr-dashboard-page .pqr-analytics-bar {
    width: min(13px, 42%);
    min-height: 3px;
    border-radius: 6px 6px 2px 2px;
}

body.pqr-dashboard-page .pqr-analytics-bar-scan {
    background: #6366f1;
}

body.pqr-dashboard-page .pqr-analytics-bar-click {
    background: #10b981;
}

body.pqr-dashboard-page .pqr-analytics-day > span {
    overflow: hidden;
    color: #94a3b8;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.pqr-dashboard-page .pqr-analytics-legend {
    display: flex;
    gap: 18px;
    margin-top: 17px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

body.pqr-dashboard-page .pqr-legend-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-right: 5px;
    border-radius: 50%;
}

body.pqr-dashboard-page .pqr-legend-scan {
    background: #6366f1;
}

body.pqr-dashboard-page .pqr-legend-click {
    background: #10b981;
}

body.pqr-dashboard-page .pqr-breakdown-list {
    display: grid;
    gap: 4px;
}

body.pqr-dashboard-page .pqr-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 0;
    border-bottom: 1px solid #f0f3f7;
}

body.pqr-dashboard-page .pqr-breakdown-row:last-child {
    border-bottom: 0;
}

body.pqr-dashboard-page .pqr-breakdown-row strong {
    display: block;
    color: #334155;
    font-size: 12px;
}

body.pqr-dashboard-page .pqr-breakdown-row span {
    color: #94a3b8;
    font-size: 10px;
}

body.pqr-dashboard-page .pqr-breakdown-row b {
    color: #0f172a;
    font-size: 13px;
}

body.pqr-dashboard-page .pqr-top-links,
body.pqr-dashboard-page .pqr-activity-list {
    display: grid;
    gap: 2px;
}

body.pqr-dashboard-page .pqr-top-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid #eef2f6;
}

body.pqr-dashboard-page .pqr-top-link-main {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

body.pqr-dashboard-page .pqr-top-link-icon,
body.pqr-dashboard-page .pqr-activity-icon {
    width: 38px;
    height: 38px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #4f46e5;
    background: #eef2ff;
}

body.pqr-dashboard-page .pqr-top-link-main strong {
    display: block;
    color: #334155;
    font-size: 12px;
}

body.pqr-dashboard-page .pqr-top-link-main span {
    color: #94a3b8;
    font-size: 10px;
    text-transform: capitalize;
}

body.pqr-dashboard-page .pqr-top-link-metrics {
    display: flex;
    gap: 22px;
}

body.pqr-dashboard-page .pqr-top-link-metrics span {
    color: #94a3b8;
    font-size: 10px;
    text-align: right;
}

body.pqr-dashboard-page .pqr-top-link-metrics b {
    display: block;
    color: #0f172a;
    font-size: 15px;
}

body.pqr-dashboard-page .pqr-activity-row {
    display: grid;
    grid-template-columns:
        38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #eef2f6;
}

body.pqr-dashboard-page .pqr-activity-main strong {
    display: block;
    color: #334155;
    font-size: 12px;
}

body.pqr-dashboard-page .pqr-activity-main span {
    display: block;
    margin-top: 2px;
    color: #6366f1;
    font-size: 10px;
    font-weight: 800;
}

body.pqr-dashboard-page .pqr-activity-main small {
    display: block;
    margin-top: 3px;
    color: #94a3b8;
    font-size: 9px;
}

body.pqr-dashboard-page .pqr-activity-row time {
    color: #94a3b8;
    font-size: 9px;
    white-space: nowrap;
}

body.pqr-dashboard-page .pqr-analytics-muted {
    margin: 0;
    padding: 20px 0;
    color: #94a3b8;
    font-size: 12px;
}


@media (max-width: 991px) {

    body.pqr-dashboard-page .pqr-dashboard-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    body.pqr-dashboard-page .pqr-profile-card-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 767px) {

    body.pqr-dashboard-page .pqr-dashboard-main {
        padding-top: 28px;
    }

    body.pqr-dashboard-page .pqr-dashboard-hero,
    body.pqr-dashboard-page .pqr-analytics-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    body.pqr-dashboard-page .pqr-dashboard-actions,
    body.pqr-dashboard-page .pqr-dashboard-create {
        width: 100%;
    }

    body.pqr-dashboard-page .pqr-analytics-grid {
        grid-template-columns:
            1fr;
    }

    body.pqr-dashboard-page .pqr-analytics-card-wide {
        grid-column: auto;
    }

    body.pqr-dashboard-page .pqr-analytics-timeline {
        gap: 4px;
    }

}


@media (max-width: 575px) {

    body.pqr-dashboard-page .pqr-dashboard-stats {
        grid-template-columns:
            1fr 1fr;
        gap: 9px;
    }

    body.pqr-dashboard-page .pqr-dashboard-stat {
        min-height: 95px;
        padding: 14px;
        gap: 10px;
    }

    body.pqr-dashboard-page .pqr-dashboard-stat-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        font-size: 15px;
    }

    body.pqr-dashboard-page .pqr-dashboard-stat strong {
        font-size: 21px;
    }

    body.pqr-dashboard-page .pqr-dashboard-section,
    body.pqr-dashboard-page .pqr-analytics-card {
        padding: 17px;
        border-radius: 16px;
    }

    body.pqr-dashboard-page .pqr-profile-card {
        padding: 17px;
    }

    body.pqr-dashboard-page .pqr-profile-metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    body.pqr-dashboard-page .pqr-profile-addresses > div {
        grid-template-columns:
            64px minmax(0, 1fr) 30px;
    }

    body.pqr-dashboard-page .pqr-profile-actions {
        grid-template-columns:
            1fr;
    }

    body.pqr-dashboard-page .pqr-analytics-route-info {
        width: 100%;
        min-width: 0;
    }

    body.pqr-dashboard-page .pqr-analytics-day > span {
        font-size: 7px;
    }

    body.pqr-dashboard-page .pqr-top-link-row {
        align-items: flex-start;
        flex-direction: column;
    }

    body.pqr-dashboard-page .pqr-top-link-metrics {
        width: 100%;
        justify-content: space-between;
    }

    body.pqr-dashboard-page .pqr-activity-row {
        grid-template-columns:
            38px minmax(0, 1fr);
    }

    body.pqr-dashboard-page .pqr-activity-row time {
        grid-column: 2;
    }
}


/* ==========================================================
   END PREMIUM QR SOCIAL DASHBOARD — V4.5D-B
   ========================================================== */