:root {
    --bg: #f7f9fc;
    --surface: #ffffff;
    --surface-2: #f0f5ff;
    --text: #172033;
    --muted: #68758d;
    --line: #dfe6f2;
    --primary: #246bfd;
    --primary-2: #00a7ff;
    --accent: #19c37d;
    --danger: #e84949;
    --shadow: 0 16px 45px rgba(33, 54, 92, .09);
    --radius: 18px;
}

html[data-theme="dark"] {
    --bg: #080d18;
    --surface: #101827;
    --surface-2: #162139;
    --text: #edf4ff;
    --muted: #9eacc4;
    --line: #24334f;
    --primary: #5b8cff;
    --primary-2: #28bcff;
    --accent: #35d994;
    --shadow: 0 20px 55px rgba(0, 0, 0, .3);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 15% -10%, rgba(36,107,253,.10), transparent 32rem),
        radial-gradient(circle at 90% 0%, rgba(0,167,255,.08), transparent 30rem),
        var(--bg);
    color: var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a {
    color: inherit;
}

.container {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(18px);
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    border-bottom: 1px solid var(--line);
}

.nav {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 1.23rem;
    font-weight: 800;
}

.brand-mark {
    width: 34px;
    height: 34px;
    position: relative;
    border: 7px solid var(--primary);
    border-right-color: transparent;
    border-radius: 4px;
}

.brand-mark::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    right: -9px;
    bottom: -9px;
    background: var(--primary-2);
}

.nav-links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-links a {
    text-decoration: none;
    color: var(--muted);
    font-weight: 650;
}

.nav-links a:hover {
    color: var(--text);
}

.theme-toggle {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    border-radius: 12px;
    min-width: 42px;
    height: 42px;
    cursor: pointer;
}

.hero {
    padding: 84px 0 55px;
    text-align: center;
}

.eyebrow {
    display: inline-flex;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: .82rem;
    color: var(--muted);
    font-weight: 700;
}

h1 {
    font-size: clamp(2.5rem, 7vw, 5.2rem);
    line-height: .98;
    letter-spacing: -.055em;
    max-width: 900px;
    margin: 22px auto 20px;
}

.gradient-text {
    background: linear-gradient(120deg, var(--primary), var(--primary-2), var(--accent));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.hero p {
    max-width: 760px;
    margin: auto;
    color: var(--muted);
    line-height: 1.75;
    font-size: 1.08rem;
}

.actions {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    padding: 0 19px;
    border-radius: 13px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid var(--line);
    background: var(--surface);
}

.btn-primary {
    border: 0;
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 10px 30px rgba(36,107,253,.25);
}

.section {
    padding: 48px 0;
}

.section-title {
    margin-bottom: 24px;
}

.section-title h2 {
    margin: 0 0 8px;
    font-size: clamp(1.65rem, 4vw, 2.5rem);
    letter-spacing: -.03em;
}

.section-title p {
    margin: 0;
    color: var(--muted);
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow);
}

.card h3 {
    margin: 14px 0 8px;
}

.card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    font-size: 1.35rem;
}

.editor-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
    gap: 22px;
    align-items: start;
}

.editor-panel,
.preview-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
}

.editor-panel {
    padding: 24px;
}

.preview-panel {
    padding: 24px;
    position: sticky;
    top: 96px;
    text-align: center;
}

.steps {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.step {
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .84rem;
    font-weight: 750;
}

.step.active {
    background: var(--primary);
    color: white;
}

.tool-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.tool-type {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 15px;
    background: var(--bg);
}

.tool-type strong {
    display: block;
    margin-bottom: 4px;
}

.tool-type small {
    color: var(--muted);
}

.qr-placeholder {
    width: min(300px, 100%);
    aspect-ratio: 1;
    margin: 18px auto;
    border-radius: 18px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--line);
    background:
        linear-gradient(45deg, var(--surface-2) 25%, transparent 25%),
        linear-gradient(-45deg, var(--surface-2) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--surface-2) 75%),
        linear-gradient(-45deg, transparent 75%, var(--surface-2) 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

.notice {
    border-left: 4px solid var(--primary);
    padding: 14px 16px;
    background: var(--surface-2);
    border-radius: 10px;
    color: var(--muted);
}

.content {
    max-width: 820px;
    margin: 0 auto;
}

.content h1 {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    margin-top: 55px;
}

.content p,
.content li {
    color: var(--muted);
    line-height: 1.8;
}

footer {
    margin-top: 70px;
    padding: 30px 0 46px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.footer-row {
    display: flex;
    gap: 18px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-links {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--muted);
    text-decoration: none;
}

@media (max-width: 860px) {
    .grid {
        grid-template-columns: 1fr 1fr;
    }

    .editor-shell {
        grid-template-columns: 1fr;
    }

    .preview-panel {
        position: static;
    }

    .tool-types {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .container {
        width: min(100% - 22px, 1180px);
    }

    .nav {
        min-height: 64px;
    }

    .nav-links a:not(.keep-mobile) {
        display: none;
    }

    .hero {
        padding-top: 58px;
    }

    .grid,
    .tool-types {
        grid-template-columns: 1fr;
    }

    .editor-panel,
    .preview-panel {
        padding: 17px;
    }
}

/* =====================================================
   PHASE 2 — REAL QR STUDIO
   ===================================================== */

.qr-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr);
    gap: 24px;
    align-items: start;
}

.qr-builder {
    display: grid;
    gap: 18px;
}

.qr-box {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 20px;
}

.qr-box h2,
.qr-box h3 {
    margin-top: 0;
}

.qr-type-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.qr-type-button {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg);
    color: var(--text);
    padding: 13px 11px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: .16s ease;
}

.qr-type-button:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.qr-type-button.active {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
    background: var(--surface-2);
}

.qr-type-button strong {
    display: block;
    font-size: .95rem;
}

.qr-type-button small {
    display: block;
    color: var(--muted);
    margin-top: 3px;
}

.qr-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.qr-field {
    display: grid;
    gap: 7px;
}

.qr-field.full {
    grid-column: 1 / -1;
}

.qr-field label {
    font-size: .84rem;
    font-weight: 760;
}

.qr-field input,
.qr-field textarea,
.qr-field select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    padding: 10px 12px;
    outline: none;
}

.qr-field textarea {
    min-height: 92px;
    resize: vertical;
}

.qr-field input:focus,
.qr-field textarea:focus,
.qr-field select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.qr-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: .9rem;
}

.qr-style-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.qr-color-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.qr-color-control {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 8px;
    align-items: center;
}

.qr-color-control input[type="color"] {
    padding: 2px;
    width: 52px;
    height: 44px;
}

.qr-preview-card {
    position: sticky;
    top: 94px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow);
    border-radius: 22px;
    padding: 20px;
}

.qr-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.qr-preview-header h2 {
    margin: 0;
    font-size: 1.05rem;
}

#qr-preview {
    width: min(100%, 360px);
    margin: 20px auto;
    display: grid;
    place-items: center;
    background: white;
    border-radius: 18px;
    padding: 14px;
    overflow: hidden;
}

#qr-preview canvas,
#qr-preview svg {
    display: block;
    width: 100% !important;
    height: auto !important;
}

.qr-status {
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .84rem;
    font-weight: 720;
    background: rgba(25,195,125,.1);
    color: var(--accent);
}

.qr-status[data-level="warn"] {
    background: rgba(239,164,24,.13);
    color: #b97900;
}

.qr-status[data-level="bad"] {
    background: rgba(232,73,73,.12);
    color: var(--danger);
}

.qr-downloads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 14px;
}

.qr-downloads button,
.qr-secondary-actions button {
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--text);
    border-radius: 11px;
    min-height: 42px;
    font: inherit;
    font-weight: 730;
    cursor: pointer;
}

.qr-downloads button:first-child {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff;
    border: 0;
}

.qr-secondary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 9px;
}

.qr-payload {
    margin-top: 14px;
    padding: 12px;
    border-radius: 11px;
    background: var(--bg);
    border: 1px solid var(--line);
}

.qr-payload strong {
    display: block;
    margin-bottom: 6px;
    font-size: .8rem;
}

.qr-payload code {
    display: block;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: .76rem;
    white-space: pre-wrap;
}

.qr-mini-note {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5;
}

.qr-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.qr-section-heading h2 {
    margin: 0;
    font-size: 1.05rem;
}

.qr-range-line {
    display: grid;
    grid-template-columns: 1fr 90px;
    gap: 10px;
    align-items: center;
}

@media (max-width: 930px) {
    .qr-workspace {
        grid-template-columns: 1fr;
    }

    .qr-preview-card {
        position: static;
    }
}

@media (max-width: 720px) {
    .qr-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .qr-style-grid,
    .qr-form-grid,
    .qr-color-row {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   PHASE 3A — MASTER QR TYPE ARCHITECTURE
   ===================================================== */

.qr-mode-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 24px 0 13px;
    padding: 14px 16px;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--accent) 11%, var(--surface)),
            var(--surface)
        );
    border: 1px solid var(--line);
}

.qr-mode-heading:first-of-type {
    margin-top: 0;
}

.qr-mode-heading > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.qr-mode-heading strong {
    font-size: 1rem;
}

.qr-mode-heading small {
    color: var(--muted);
    max-width: 460px;
    line-height: 1.5;
}

.qr-mode-heading-static {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, #f5b82e 11%, var(--surface)),
            var(--surface)
        );
}

.qr-mode-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: .69rem;
    font-weight: 820;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.qr-mode-badge-dynamic {
    color: #087756;
    background: #c9f6e7;
}

.qr-mode-badge-static {
    color: #7a5700;
    background: #ffecad;
}

.qr-type-grid-large {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qr-type-button {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    min-height: 88px;
    align-items: center;
    overflow: hidden;
}

.qr-type-button.is-building {
    opacity: .88;
}

.qr-type-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: 1.25rem;
}

.qr-type-copy {
    min-width: 0;
}

.qr-type-copy strong,
.qr-type-copy small {
    display: block;
}

.qr-type-copy small {
    line-height: 1.35;
}

.qr-type-status {
    position: absolute;
    right: 7px;
    top: 7px;
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    border-radius: 999px;
    padding: 2px 6px;
    font-size: .58rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.qr-type-status-live {
    background: rgba(25,195,125,.13);
    color: var(--accent);
}

.qr-type-status-building {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--primary);
}

.qr-upcoming-panel {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 18px;
    align-items: start;
    padding: 20px;
    border: 1px dashed var(--line);
    border-radius: 16px;
    background: var(--bg);
}

.qr-upcoming-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--primary) 13%, var(--surface)),
            color-mix(in srgb, var(--accent) 11%, var(--surface))
        );
    font-size: 2rem;
}

.qr-upcoming-panel h3 {
    margin: 12px 0 7px;
}

.qr-upcoming-panel p {
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

.qr-upcoming-roadmap {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.qr-upcoming-roadmap span {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: .72rem;
    font-weight: 700;
}

@media (max-width: 900px) {
    .qr-type-grid-large {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .qr-mode-heading {
        display: grid;
    }

    .qr-type-grid-large {
        grid-template-columns: 1fr;
    }

    .qr-upcoming-panel {
        grid-template-columns: 1fr;
    }

    .qr-upcoming-icon {
        width: 58px;
        height: 58px;
    }
}

/* =====================================================
   PHASE 3B-1 — TYPE-SPECIFIC PREVIEWS
   ===================================================== */

.qr-preview-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 16px 0 10px;
    padding: 5px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--line);
}

.qr-preview-tab {
    border: 0;
    min-height: 36px;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .8rem;
    font-weight: 760;
    cursor: pointer;
}

.qr-preview-tab.active {
    color: #fff;
    background: var(--primary);
}

.qr-content-preview {
    margin: 14px auto 18px;
}

.qr-content-preview[hidden],
.qr-raw-preview[hidden] {
    display: none !important;
}

.fq-phone {
    width: min(100%, 292px);
    min-height: 485px;
    margin: 0 auto;
    overflow: hidden;
    border: 8px solid #111827;
    border-radius: 38px;
    background: #fff;
    color: #172033;
    box-shadow: 0 18px 40px rgba(0,0,0,.16);
}

.fq-phone-top {
    height: 28px;
    display: grid;
    place-items: center;
    background: #fff;
}

.fq-phone-top span {
    display: block;
    width: 74px;
    height: 18px;
    border-radius: 999px;
    background: #05080c;
}

.fq-phone-body {
    min-height: 435px;
    overflow: hidden;
    background: #f8fafc;
}

.fq-generic-preview,
.fq-wifi-preview,
.fq-call-preview,
.fq-contact-preview,
.fq-location-preview,
.fq-event-preview,
.fq-text-preview {
    min-height: 435px;
    padding: 28px 20px;
}

.fq-generic-preview,
.fq-wifi-preview,
.fq-call-preview,
.fq-contact-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.fq-preview-icon {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 22px;
    background: #eaf2ff;
    font-size: 2rem;
}

.fq-generic-preview span,
.fq-wifi-preview span,
.fq-call-preview span {
    margin-top: 8px;
    color: #65728a;
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.fq-wifi-preview strong,
.fq-call-preview strong {
    margin-top: 6px;
    font-size: 1.2rem;
}

.fq-wifi-preview small {
    margin-top: 4px;
    color: #65728a;
}

.fq-wifi-preview button,
.fq-call-preview button,
.fq-location-preview button,
.fq-event-preview button {
    margin-top: 18px;
    min-height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 11px;
    background: #246bfd;
    color: #fff;
    font-weight: 750;
}

.fq-wa-preview {
    min-height: 435px;
    background: #efeae2;
}

.fq-wa-header {
    min-height: 58px;
    padding: 10px 14px;
    background: #08776a;
    color: #fff;
}

.fq-wa-header strong,
.fq-wa-header span {
    display: block;
}

.fq-wa-header span {
    margin-top: 3px;
    opacity: .8;
    font-size: .73rem;
}

.fq-wa-wallpaper {
    min-height: 377px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 18px 12px;
    background:
        radial-gradient(circle at 10px 10px, rgba(0,0,0,.025) 2px, transparent 3px),
        #efeae2;
    background-size: 24px 24px;
}

.fq-wa-message {
    max-width: 78%;
    padding: 9px 11px;
    border-radius: 12px 12px 3px 12px;
    background: #d9fdd3;
    font-size: .8rem;
    line-height: 1.4;
    text-align: left;
}

.fq-contact-avatar {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dce8ff;
    color: #246bfd;
    font-weight: 900;
    font-size: 1.4rem;
}

.fq-contact-preview h3 {
    margin: 14px 0 3px;
}

.fq-contact-preview p {
    margin: 0 0 22px;
    color: #65728a;
}

.fq-contact-row {
    width: 100%;
    padding: 11px 0;
    text-align: left;
    border-top: 1px solid #e6ebf3;
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.fq-mail-preview {
    min-height: 435px;
    padding: 20px 16px;
    background: #fff;
}

.fq-mail-preview > strong {
    display: block;
    margin-bottom: 20px;
    font-size: 1rem;
}

.fq-mail-preview > div {
    padding: 10px 0;
    border-bottom: 1px solid #e4e8ef;
    font-size: .8rem;
}

.fq-mail-preview div span {
    color: #718096;
}

.fq-mail-preview p {
    margin-top: 22px;
    line-height: 1.6;
    font-size: .82rem;
}

.fq-sms-preview {
    min-height: 435px;
    padding: 28px 14px;
    background: #f7f8fa;
}

.fq-sms-person {
    margin-bottom: 28px;
    text-align: center;
    font-size: .78rem;
    color: #596579;
}

.fq-sms-bubble {
    margin-left: auto;
    max-width: 80%;
    padding: 10px 13px;
    border-radius: 18px 18px 4px 18px;
    background: #246bfd;
    color: #fff;
    font-size: .8rem;
    line-height: 1.4;
}

.fq-text-preview span {
    color: #667085;
    font-size: .75rem;
    font-weight: 750;
}

.fq-text-preview p {
    margin-top: 20px;
    color: #273248;
    line-height: 1.7;
    white-space: pre-wrap;
}

.fq-map-placeholder {
    height: 190px;
    display: grid;
    place-items: center;
    margin: -28px -20px 22px;
    background:
        linear-gradient(135deg, #e5efff, #d8f4e9);
}

.fq-map-placeholder span {
    font-size: 2.3rem;
}

.fq-location-preview h3,
.fq-event-preview h3 {
    margin: 0 0 7px;
}

.fq-location-preview p,
.fq-event-preview p,
.fq-event-preview small {
    color: #667085;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.fq-event-label {
    display: inline-flex;
    padding: 4px 8px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: #e8f0ff;
    color: #246bfd;
    font-size: .67rem;
    font-weight: 850;
}

.fq-browser-preview {
    min-height: 435px;
    background: #fff;
}

.fq-browser-address {
    margin: 8px 10px 0;
    padding: 8px 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 999px;
    background: #f0f3f7;
    color: #697386;
    font-size: .68rem;
}

.fq-browser-page {
    min-height: 390px;
    padding: 26px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.fq-browser-page span {
    max-width: 100%;
    margin-top: 8px;
    color: #667085;
    font-size: .76rem;
    overflow-wrap: anywhere;
}

@media (max-width: 620px) {
    .fq-phone {
        width: min(100%, 270px);
    }
}

/* =====================================================
   PHASE 3B-2 — COMPLEX DYNAMIC BUILDERS
   ===================================================== */

.qr-type-status-builder {
    background: rgba(25, 195, 125, .13);
    color: #088c5c;
}

.qr-dynamic-notice {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid
        color-mix(in srgb, var(--primary) 28%, var(--line));
    border-radius: 12px;
    background:
        color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.qr-dynamic-notice strong,
.qr-dynamic-notice span {
    display: block;
}

.qr-dynamic-notice strong {
    font-size: .82rem;
}

.qr-dynamic-notice span {
    margin-top: 4px;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.45;
}

.qr-downloads button:disabled,
.qr-preview-tab:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.fq-business-page,
.fq-social-page,
.fq-links-page,
.fq-menu-page,
.fq-dynamic-event-page,
.fq-feedback-page {
    min-height: 435px;
    padding: 20px 16px 28px;
    background: #fff;
    color: #172033;
}

.fq-business-cover {
    height: 105px;
    margin: -20px -16px 0;
    background:
        linear-gradient(
            135deg,
            #246bfd,
            #37c7f2
        );
}

.fq-business-logo {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    margin: -37px auto 10px;
    border: 5px solid #fff;
    border-radius: 20px;
    background: #f1f5ff;
    color: #246bfd;
    font-size: 1.6rem;
    font-weight: 900;
}

.fq-business-page h3,
.fq-social-page h3,
.fq-links-page h3,
.fq-menu-page h3,
.fq-dynamic-event-page h3,
.fq-feedback-page h3 {
    margin: 7px 0;
    text-align: center;
}

.fq-business-page > strong {
    display: block;
    text-align: center;
    color: #53627a;
    font-size: .78rem;
}

.fq-business-page > p,
.fq-social-page > p,
.fq-links-page > p,
.fq-menu-page > p,
.fq-dynamic-event-page > p,
.fq-feedback-page > p {
    color: #667085;
    font-size: .77rem;
    line-height: 1.55;
    text-align: center;
}

.fq-business-page > button,
.fq-dynamic-event-page > button,
.fq-feedback-page > button {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 11px;
    background: #246bfd;
    color: #fff;
    font-weight: 800;
}

.fq-page-list {
    margin-top: 18px;
    border-top: 1px solid #e6eaf0;
}

.fq-page-list > div {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid #e6eaf0;
    font-size: .74rem;
}

.fq-page-list b {
    font-weight: 650;
    overflow-wrap: anywhere;
}

.fq-social-avatar,
.fq-feedback-logo,
.fq-link-avatar {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    margin: 10px auto;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #e8f0ff,
            #e3fff3
        );
    color: #246bfd;
    font-weight: 900;
    font-size: 1.5rem;
}

.fq-social-links {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.fq-social-button,
.fq-link-button {
    padding: 11px 13px;
    border: 1px solid #e2e7ef;
    border-radius: 12px;
    background: #f9fafc;
}

.fq-social-button strong,
.fq-social-button span,
.fq-link-button strong,
.fq-link-button small {
    display: block;
}

.fq-social-button strong,
.fq-link-button strong {
    font-size: .78rem;
}

.fq-social-button span,
.fq-link-button small {
    margin-top: 2px;
    color: #667085;
    font-size: .68rem;
    overflow-wrap: anywhere;
}

.fq-link-button {
    margin-top: 9px;
    text-align: center;
}

.fq-menu-cover {
    height: 100px;
    display: grid;
    place-items: center;
    margin: -20px -16px 16px;
    background:
        linear-gradient(
            135deg,
            #ffebe1,
            #fff7d6
        );
    font-size: 2.4rem;
}

.fq-menu-page > small {
    display: block;
    text-align: center;
    color: #7b8495;
}

.fq-menu-section {
    margin-top: 20px;
}

.fq-menu-section > b {
    display: block;
    margin-bottom: 8px;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fq-menu-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e7ebf1;
    font-size: .76rem;
}

.fq-menu-item span {
    font-weight: 800;
}

.fq-event-hero {
    height: 105px;
    display: grid;
    place-items: center;
    margin: -20px -16px 18px;
    background:
        linear-gradient(
            135deg,
            #322f74,
            #7357d7
        );
    color: #fff;
}

.fq-event-hero span {
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.fq-dynamic-event-page > strong {
    display: block;
    text-align: center;
    color: #53627a;
    font-size: .76rem;
}

.fq-feedback-page {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fq-feedback-page > strong {
    margin-top: 8px;
    text-align: center;
}

.fq-stars {
    display: flex;
    gap: 5px;
    margin: 18px 0;
    font-size: 1.65rem;
    color: #f3b51b;
}

.fq-feedback-page > button {
    width: 100%;
}

.fq-feedback-page .fq-secondary-button {
    margin-top: 8px;
    border: 1px solid #dfe5ee;
    background: #fff;
    color: #344054;
}

@media (max-width: 620px) {
    .qr-type-status-builder {
        font-size: .54rem;
    }
}

/* =====================================================
   PHASE 3B-3 — REMAINING DYNAMIC BUILDERS
   ===================================================== */

.fq-digital-card,
.fq-app-page,
.fq-media-page,
.fq-audio-page,
.fq-document-page,
.fq-gallery-page,
.fq-landing-page,
.fq-review-page,
.fq-coupon-page,
.fq-product-page,
.fq-booking-page {
    min-height: 435px;
    padding: 22px 17px 28px;
    background: #fff;
    color: #172033;
}

.fq-digital-card h3,
.fq-app-page h3,
.fq-media-page h3,
.fq-audio-page h3,
.fq-document-page h3,
.fq-gallery-page h3,
.fq-landing-page h3,
.fq-review-page h3,
.fq-product-page h3,
.fq-booking-page h3 {
    margin: 8px 0;
    text-align: center;
}

.fq-digital-card > p,
.fq-app-page > p,
.fq-media-page > p,
.fq-audio-page > p,
.fq-document-page > p,
.fq-gallery-page > p,
.fq-landing-page > p,
.fq-review-page > p,
.fq-product-page > p,
.fq-booking-page > p {
    color: #667085;
    font-size: .78rem;
    line-height: 1.55;
    text-align: center;
}

.fq-digital-card > button,
.fq-media-page > button,
.fq-document-page > button,
.fq-landing-page > button,
.fq-review-page > button,
.fq-coupon-page > button,
.fq-product-page > button,
.fq-booking-page > button {
    width: 100%;
    min-height: 42px;
    margin-top: 14px;
    border: 0;
    border-radius: 11px;
    background: #246bfd;
    color: #fff;
    font-weight: 800;
}

.fq-preview-note {
    display: block;
    max-width: 220px;
    margin-top: 12px;
    color: #768399;
    font-size: .68rem;
    line-height: 1.4;
}

.fq-card-cover {
    height: 92px;
    margin: -22px -17px 0;
    background: linear-gradient(135deg, #523bda, #20badb);
}

.fq-card-avatar {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    margin: -39px auto 10px;
    border: 5px solid #fff;
    border-radius: 50%;
    background: #eef3ff;
    color: #3658c9;
    font-size: 1.35rem;
    font-weight: 900;
}

.fq-digital-card > strong,
.fq-digital-card > p {
    display: block;
    text-align: center;
}

.fq-digital-card > strong {
    font-size: .76rem;
}

.fq-app-icon {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    margin: 25px auto 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, #6757f6, #33c8eb);
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
}

.fq-store-button {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    padding: 11px 13px;
    border-radius: 11px;
    background: #111827;
    color: #fff;
}

.fq-store-button strong {
    font-size: .73rem;
}

.fq-video-cover,
.fq-youtube-cover {
    height: 172px;
    display: grid;
    place-items: center;
    margin: -22px -17px 20px;
    background: linear-gradient(135deg, #172033, #4d5d77);
}

.fq-youtube-cover {
    background: linear-gradient(135deg, #b31321, #ff3044);
}

.fq-video-cover span,
.fq-youtube-cover span {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #172033;
    font-size: 1.4rem;
}

.fq-youtube-button {
    background: #e62117 !important;
}

.fq-album-art {
    width: 166px;
    height: 166px;
    display: grid;
    place-items: center;
    margin: 8px auto 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, #653ee9, #e14c9d);
    color: #fff;
    font-size: 3.4rem;
}

.fq-audio-page > strong {
    display: block;
    text-align: center;
    color: #68758a;
    font-size: .74rem;
}

.fq-audio-wave {
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 18px;
}

.fq-audio-wave span {
    width: 4px;
    border-radius: 999px;
    background: #6559e8;
}

.fq-audio-wave span:nth-child(1) { height: 10px; }
.fq-audio-wave span:nth-child(2) { height: 22px; }
.fq-audio-wave span:nth-child(3) { height: 31px; }
.fq-audio-wave span:nth-child(4) { height: 18px; }
.fq-audio-wave span:nth-child(5) { height: 37px; }
.fq-audio-wave span:nth-child(6) { height: 23px; }
.fq-audio-wave span:nth-child(7) { height: 30px; }
.fq-audio-wave span:nth-child(8) { height: 16px; }
.fq-audio-wave span:nth-child(9) { height: 9px; }

.fq-play-button {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin: 4px auto 0;
    border-radius: 50%;
    background: #6559e8;
    color: #fff;
}

.fq-document-icon,
.fq-file-icon {
    width: 105px;
    height: 130px;
    display: grid;
    place-items: center;
    margin: 22px auto 18px;
    border: 1px solid #ffd4d8;
    border-radius: 11px;
    background: #fff0f0;
    color: #de3947;
    font-size: 1.25rem;
    font-weight: 900;
}

.fq-file-icon {
    height: 105px;
    border-color: #d8e4ff;
    border-radius: 24px;
    background: #eef4ff;
    color: #246bfd;
    font-size: 2rem;
}

.fq-file-meta {
    text-align: center;
    color: #768399;
    font-size: .72rem;
}

.fq-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    margin-top: 18px;
}

.fq-gallery-grid div {
    min-height: 96px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #eaf2ff, #eefbe6);
    font-size: 1.65rem;
}

.fq-landing-hero {
    height: 145px;
    display: grid;
    place-items: center;
    margin: -22px -17px 22px;
    background: linear-gradient(135deg, #5e46dd, #2bc4d9);
    color: #fff;
}

.fq-landing-hero span {
    font-size: 3rem;
}

.fq-landing-page > strong {
    display: block;
    text-align: center;
    color: #59657a;
    font-size: .78rem;
}

.fq-review-page {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fq-review-page > strong {
    text-align: center;
}

.fq-coupon-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg, #fff, #fff9e9);
}

.fq-offer-label {
    margin-top: 20px;
    color: #657086;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.fq-coupon-page h2 {
    margin: 14px 0 6px;
    font-size: 2rem;
}

.fq-coupon-page p {
    color: #68758a;
    font-size: .78rem;
}

.fq-coupon-code {
    width: 100%;
    margin: 18px 0 9px;
    padding: 14px;
    border: 2px dashed #e1b534;
    border-radius: 12px;
    background: #fff;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.fq-coupon-page small {
    color: #7b8392;
}

.fq-product-image {
    height: 160px;
    display: grid;
    place-items: center;
    margin: -22px -17px 18px;
    background: linear-gradient(135deg, #f0f4fa, #e9f7f1);
    font-size: 3rem;
}

.fq-product-price {
    display: block;
    text-align: center;
    color: #246bfd;
    font-size: 1.15rem;
}

.fq-product-page > small {
    display: block;
    margin-top: 3px;
    text-align: center;
    color: #7a8597;
}

.fq-calendar-icon {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    margin: 14px auto;
    border-radius: 22px;
    background: #edf3ff;
    font-size: 2rem;
}

.fq-booking-page > strong {
    display: block;
    text-align: center;
}

.fq-booking-meta {
    display: flex;
    justify-content: center;
    gap: 13px;
    margin: 12px 0;
    color: #667085;
    font-size: .72rem;
}

.fq-slot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 18px 0 4px;
}

.fq-slot-grid span {
    padding: 9px;
    border: 1px solid #dbe4f2;
    border-radius: 9px;
    text-align: center;
    font-size: .72rem;
}

/* =====================================================
   PHASE 3C-1 — VISUAL QR DESIGN STUDIO
   ===================================================== */

.qr-visual-studio {
    margin: 0 0 22px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--primary) 4%,
                var(--surface)
            ),
            var(--surface)
        );
}

.qr-visual-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.qr-studio-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--primary);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .09em;
}

.qr-visual-intro h3 {
    margin: 0;
}

.qr-visual-intro p {
    max-width: 620px;
    margin: 5px 0 0;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.5;
}

.qr-random-design-button,
.qr-color-actions button,
.qr-gradient-angle-row button,
#qr-design-reset {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .74rem;
    font-weight: 760;
    cursor: pointer;
}

.qr-random-design-button {
    min-height: 40px;
    padding: 0 15px;
    white-space: nowrap;
}

.qr-random-design-button:hover,
.qr-color-actions button:hover,
.qr-gradient-angle-row button:hover,
#qr-design-reset:hover {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 55%,
            var(--line)
        );
}

.qr-visual-block {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.qr-visual-block-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 11px;
}

.qr-visual-block-heading strong,
.qr-visual-block-heading small {
    display: block;
}

.qr-visual-block-heading strong {
    font-size: .84rem;
}

.qr-visual-block-heading small {
    margin-top: 3px;
    color: var(--muted);
    font-size: .7rem;
}

.qr-visual-split {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.qr-preset-grid {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 9px;
}

.qr-complete-preset {
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.qr-complete-preset:hover {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 50%,
            var(--line)
        );
    transform: translateY(-1px);
}

.qr-complete-preview {
    display: grid;
    place-items: center;
    min-height: 76px;
    margin-bottom: 7px;
    border-radius: 9px;
    background: var(--bg);
}

.qr-complete-preset strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .68rem;
}

.qr-style-card-grid {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.qr-style-card-grid-small {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.qr-style-card {
    min-width: 0;
    padding: 8px 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.qr-style-card:hover {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 55%,
            var(--line)
        );
}

.qr-style-card.active {
    border-color: var(--primary);
    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--primary) 14%,
            transparent
        );
}

.qr-style-card > span:last-child {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .64rem;
    font-weight: 760;
}

.qr-style-mini {
    width: 61px;
    height: 61px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    margin: auto;
    padding: 6px;
    border-radius: 8px;
    background: #fff;
}

.qr-style-mini i {
    display: block;
    background: #172033;
}

.qr-style-mini i[data-soft="1"] {
    opacity: .28;
}

.qr-mini-style-square {
    border-radius: 0;
}

.qr-mini-style-dots,
.qr-mini-style-dot {
    border-radius: 50%;
}

.qr-mini-style-rounded {
    border-radius: 3px;
}

.qr-mini-style-extra-rounded {
    border-radius: 6px;
}

.qr-mini-style-classy {
    border-radius: 6px 1px 6px 1px;
}

.qr-mini-style-classy-rounded {
    border-radius: 7px 2px 7px 2px;
}

.qr-eye-mini {
    width: 61px;
    height: 61px;
    display: grid;
    place-items: center;
    margin: auto;
    border-radius: 8px;
    background: #fff;
}

.qr-eye-mini-frame {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 7px solid #172033;
}

.qr-eye-mini-frame.qr-mini-style-dot {
    border-radius: 50%;
}

.qr-eye-mini-frame.qr-mini-style-extra-rounded {
    border-radius: 11px;
}

.qr-eye-mini-dot {
    width: 13px;
    height: 13px;
    background: #172033;
}

.qr-eye-mini-dot.qr-mini-style-dot {
    border-radius: 50%;
}

.qr-palette-grid {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.qr-palette-card {
    padding: 9px 7px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.qr-palette-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 7px;
}

.qr-palette-dots i {
    width: 17px;
    height: 17px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 50%;
}

.qr-palette-card strong {
    font-size: .64rem;
}

.qr-color-actions {
    display: flex;
    gap: 6px;
}

.qr-color-actions button {
    padding: 7px 9px;
}

.qr-gradient-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.qr-gradient-card {
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.qr-gradient-swatch {
    display: block;
    height: 34px;
    margin-bottom: 6px;
    border-radius: 7px;
}

.qr-gradient-card strong {
    font-size: .66rem;
}

.qr-gradient-angle-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.qr-gradient-angle-row > span {
    margin-right: 4px;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 750;
}

.qr-gradient-angle-row button {
    width: 34px;
    height: 32px;
}

.qr-visual-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.qr-transparent-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .76rem;
    font-weight: 700;
}

#qr-design-reset {
    min-height: 36px;
    padding: 0 12px;
}

/* Bigger raw QR preview */
#qr-preview {
    width: min(100%, 430px);
    margin-inline: auto;
}

#qr-preview canvas,
#qr-preview svg {
    display: block;
    width: min(100%, 390px) !important;
    height: auto !important;
    margin-inline: auto;
}

/* Keep legacy precision controls.
   They remain functional beneath the new visual layer. */

@media (max-width: 1100px) {
    .qr-preset-grid,
    .qr-style-card-grid,
    .qr-palette-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .qr-gradient-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .qr-visual-intro {
        display: grid;
    }

    .qr-visual-split {
        grid-template-columns: 1fr;
    }

    .qr-preset-grid,
    .qr-style-card-grid,
    .qr-style-card-grid-small,
    .qr-palette-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .qr-visual-block-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .qr-visual-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .qr-random-design-button {
        width: 100%;
    }
}

/* =====================================================
   PHASE 3C-2 — LOGO + FRAME + TEMPLATE SYSTEM
   ===================================================== */

.qr-logo-library {
    display: grid;
    grid-template-columns:
        repeat(8, minmax(0, 1fr));
    gap: 8px;
}

.qr-logo-choice {
    min-width: 0;
    padding: 8px 5px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.qr-logo-choice:hover,
.qr-logo-choice.active {
    border-color: var(--primary);
}

.qr-logo-choice.active {
    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--primary) 13%,
            transparent
        );
}

.qr-logo-choice-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin: auto;
    border-radius: 11px;
    font-size: .67rem;
    font-weight: 900;
}

.qr-logo-choice strong {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .62rem;
}

.qr-logo-treatment-panel {
    display: grid;
    grid-template-columns:
        1.2fr 1fr 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg);
}

.qr-logo-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qr-logo-actions button,
.qr-frame-suggest-button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .72rem;
    font-weight: 760;
    cursor: pointer;
}

.qr-logo-actions button:hover,
.qr-frame-suggest-button:hover {
    border-color: var(--primary);
}

.qr-frame-categories {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 2px 0 10px;
    scrollbar-width: thin;
}

.qr-frame-category {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: .68rem;
    font-weight: 760;
    cursor: pointer;
}

.qr-frame-category.active {
    border-color: var(--primary);
    background:
        color-mix(
            in srgb,
            var(--primary) 10%,
            var(--surface)
        );
    color: var(--primary);
}

.qr-frame-library {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 9px;
}

.qr-frame-card {
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.qr-frame-card:hover,
.qr-frame-card.active {
    border-color: var(--primary);
}

.qr-frame-card.active {
    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--primary) 12%,
            transparent
        );
}

.qr-frame-card strong {
    display: block;
    margin-top: 6px;
    font-size: .64rem;
}

.qr-frame-mini {
    height: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    border: 3px solid #246bfd;
    border-radius: 10px;
    background: #fff;
}

.qr-frame-mini i {
    width: 46px;
    height: 46px;
    display: block;
    background:
        repeating-linear-gradient(
            45deg,
            #111827 0 4px,
            #ffffff 4px 8px
        );
}

.qr-frame-mini b {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
    font-size: .5rem;
}

.qr-frame-mini-none {
    border-style: dashed;
    border-color: #d0d5dd;
}

.qr-frame-mini-business,
.qr-frame-mini-website {
    border-color: #2563eb;
}

.qr-frame-mini-food,
.qr-frame-mini-food-dark {
    border-color: #ea580c;
}

.qr-frame-mini-social {
    border-color: #9333ea;
}

.qr-frame-mini-message {
    border-color: #16a34a;
}

.qr-frame-mini-review,
.qr-frame-mini-rating {
    border-color: #f59e0b;
}

.qr-frame-mini-wifi,
.qr-frame-mini-wifi-simple {
    border-color: #0284c7;
}

.qr-frame-mini-shopping {
    border-color: #db2777;
}

.qr-frame-mini-coupon {
    border-style: dashed;
    border-color: #f97316;
}

.qr-frame-mini-event,
.qr-frame-mini-rsvp {
    border-color: #4f46e5;
}

.qr-frame-mini-payment,
.qr-frame-mini-donation {
    border-color: #059669;
}

.qr-frame-mini-travel,
.qr-frame-mini-hotel {
    border-color: #0891b2;
}

.qr-frame-mini-real-estate {
    border-color: #2563eb;
}

.qr-frame-mini-health {
    border-color: #0d9488;
}

.qr-frame-mini-education {
    border-color: #7c3aed;
}

.qr-frame-settings {
    display: grid;
    grid-template-columns:
        2fr 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.qr-frame-export-note {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.45;
}

.qr-usecase-grid {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 9px;
}

.qr-usecase-card {
    min-width: 0;
    padding: 10px 7px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.qr-usecase-card:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.qr-usecase-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin: 0 auto 7px;
    border-radius: 14px;
    font-size: 1.4rem;
}

.qr-usecase-card strong,
.qr-usecase-card small {
    display: block;
}

.qr-usecase-card strong {
    font-size: .67rem;
}

.qr-usecase-card small {
    margin-top: 3px;
    color: var(--muted);
    font-size: .55rem;
}

/* -----------------------------------------------------
   ACTUAL QR FRAME PREVIEW
   ----------------------------------------------------- */

.qr-frame-preview-shell {
    --fq-frame-accent: #246bfd;
    --fq-frame-text: #111827;

    width: min(100%, 430px);
    margin: 14px auto 18px;
    padding: 18px;
    border-radius: 20px;
    background: #fff;
    color: var(--fq-frame-text);
    text-align: center;
}

.qr-frame-preview-shell[hidden] {
    display: none !important;
}

.qr-frame-preview-shell #qr-preview {
    margin: 0 auto;
}

.qr-frame-preview-caption {
    margin-top: 11px;
    color: var(--fq-frame-text);
    font-size: .86rem;
    font-weight: 900;
    letter-spacing: .055em;
}

.qr-frame-preview-caption[hidden] {
    display: none;
}

.qr-frame-preview-shell.fq-frame-none {
    padding: 0;
    background: transparent;
}

.qr-frame-preview-shell.fq-frame-classic {
    border: 5px solid
        var(--fq-frame-accent);
}

.qr-frame-preview-shell.fq-frame-bottom-pill {
    border: 3px solid
        var(--fq-frame-accent);
    border-radius: 24px;
}

.qr-frame-preview-shell.fq-frame-bottom-pill
.qr-frame-preview-caption {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--fq-frame-accent);
    color: #fff;
}

.qr-frame-preview-shell.fq-frame-business,
.qr-frame-preview-shell.fq-frame-website {
    border: 4px solid
        var(--fq-frame-accent);
    box-shadow:
        inset 0 8px 0
        var(--fq-frame-accent);
}

.qr-frame-preview-shell.fq-frame-food {
    border: 5px solid
        var(--fq-frame-accent);
    border-radius: 28px 8px 28px 8px;
}

.qr-frame-preview-shell.fq-frame-food-dark {
    border: 6px double
        var(--fq-frame-accent);
    border-radius: 14px;
}

.qr-frame-preview-shell.fq-frame-social {
    border: 4px solid transparent;
    background:
        linear-gradient(#fff,#fff)
        padding-box,
        linear-gradient(
            135deg,
            #7c3aed,
            #ec4899,
            #f59e0b
        )
        border-box;
}

.qr-frame-preview-shell.fq-frame-message {
    border: 5px solid
        var(--fq-frame-accent);
    border-radius: 24px;
}

.qr-frame-preview-shell.fq-frame-review,
.qr-frame-preview-shell.fq-frame-rating {
    border: 4px solid
        var(--fq-frame-accent);
    background:
        linear-gradient(
            180deg,
            #fff,
            #fffbeb
        );
}

.qr-frame-preview-shell.fq-frame-wifi,
.qr-frame-preview-shell.fq-frame-wifi-simple {
    border: 4px solid
        var(--fq-frame-accent);
    border-radius: 30px;
}

.qr-frame-preview-shell.fq-frame-shopping {
    border: 4px solid
        var(--fq-frame-accent);
    border-radius: 12px;
}

.qr-frame-preview-shell.fq-frame-coupon {
    border: 4px dashed
        var(--fq-frame-accent);
}

.qr-frame-preview-shell.fq-frame-event,
.qr-frame-preview-shell.fq-frame-rsvp {
    border: 5px solid
        var(--fq-frame-accent);
    border-radius: 8px 28px 8px 28px;
}

.qr-frame-preview-shell.fq-frame-payment,
.qr-frame-preview-shell.fq-frame-donation {
    border: 5px solid
        var(--fq-frame-accent);
    border-radius: 18px;
    box-shadow:
        0 8px 24px
        color-mix(
            in srgb,
            var(--fq-frame-accent) 18%,
            transparent
        );
}

.qr-frame-preview-shell.fq-frame-travel,
.qr-frame-preview-shell.fq-frame-hotel {
    border: 4px solid
        var(--fq-frame-accent);
    border-radius: 28px;
}

.qr-frame-preview-shell.fq-frame-real-estate {
    border: 5px solid
        var(--fq-frame-accent);
    clip-path:
        polygon(
            8% 0,
            92% 0,
            100% 8%,
            100% 100%,
            0 100%,
            0 8%
        );
}

.qr-frame-preview-shell.fq-frame-health {
    border: 4px solid
        var(--fq-frame-accent);
    border-radius: 32px;
}

.qr-frame-preview-shell.fq-frame-education {
    border: 5px double
        var(--fq-frame-accent);
}

/* Mobile */

@media (max-width: 1100px) {
    .qr-logo-library {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .qr-frame-library,
    .qr-usecase-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .qr-logo-treatment-panel {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .qr-logo-library,
    .qr-frame-library,
    .qr-usecase-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .qr-logo-treatment-panel,
    .qr-frame-settings {
        grid-template-columns: 1fr 1fr;
    }

    .qr-frame-settings .full {
        grid-column: 1 / -1;
    }

    .qr-frame-suggest-button {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .qr-logo-treatment-panel {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   PHASE 3C-3
   PRO EXPORT + PRINT + RELIABILITY + STICKY PREVIEW
   ===================================================== */

/* -----------------------------------------------------
   Editor layout correction
   ----------------------------------------------------- */

.qr-design-workbench {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(285px, 340px);
    align-items: start;
    gap: 18px;
    margin-top: 18px;
}

.qr-design-workbench
.qr-visual-studio {
    min-width: 0;
    margin-top: 0;
}

.qr-design-workbench
.qr-preview-card {
    position: sticky;
    top: 82px;
    z-index: 3;
    align-self: start;
    width: 100%;
    max-width: 340px;
    margin: 0;
}

.fq-preview-detached-parent {
    grid-template-columns:
        minmax(0, 1fr) !important;
}

/* -----------------------------------------------------
   Professional export
   ----------------------------------------------------- */

.qr-pro-export,
.qr-reliability-panel {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.qr-pro-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    margin-bottom: 11px;
}

.qr-pro-section-heading span {
    display: block;
    margin-bottom: 2px;
    color: var(--primary);
    font-size: .57rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.qr-pro-section-heading strong {
    display: block;
    font-size: .75rem;
}

.qr-pro-export-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.qr-pro-export
.qr-field label {
    font-size: .62rem;
}

.qr-pro-export select,
.qr-pro-export input {
    min-height: 35px;
    font-size: .68rem;
}

.qr-export-size-label {
    margin: 11px 0 6px;
    color: var(--muted);
    font-size: .62rem;
    font-weight: 750;
}

.qr-export-size-buttons {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    gap: 5px;
}

.qr-export-size-buttons button,
.qr-print-presets button,
.qr-pro-download-buttons button {
    min-height: 33px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .61rem;
    font-weight: 760;
    cursor: pointer;
}

.qr-export-size-buttons button:hover,
.qr-export-size-buttons button.active,
.qr-print-presets button:hover,
.qr-pro-download-buttons button:hover {
    border-color: var(--primary);
}

.qr-export-size-buttons button.active {
    background:
        color-mix(
            in srgb,
            var(--primary) 11%,
            var(--surface)
        );
    color: var(--primary);
}

.qr-custom-export-size {
    display: grid;
    grid-template-columns:
        1fr 92px;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.qr-custom-export-size label {
    color: var(--muted);
    font-size: .62rem;
}

.qr-print-presets {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);
    gap: 5px;
    margin-top: 9px;
}

.qr-pro-download-buttons {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin-top: 10px;
}

.qr-pro-download-buttons button {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.qr-pro-download-buttons button:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.qr-pro-export-help {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: .56rem;
    line-height: 1.45;
}

/* -----------------------------------------------------
   Reliability
   ----------------------------------------------------- */

.qr-reliability-grade {
    padding: 5px 8px;
    border-radius: 999px;
    background:
        color-mix(
            in srgb,
            var(--primary) 10%,
            var(--surface)
        );
    color: var(--primary);
    font-size: .57rem;
    font-weight: 900;
}

.qr-reliability-grade[data-grade="excellent"] {
    background:
        color-mix(
            in srgb,
            #10b981 13%,
            var(--surface)
        );
    color: #10b981;
}

.qr-reliability-grade[data-grade="good"] {
    background:
        color-mix(
            in srgb,
            #f59e0b 13%,
            var(--surface)
        );
    color: #d97706;
}

.qr-reliability-grade[data-grade="risky"] {
    background:
        color-mix(
            in srgb,
            #ef4444 12%,
            var(--surface)
        );
    color: #ef4444;
}

.qr-reliability-score-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qr-reliability-score {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background:
        color-mix(
            in srgb,
            var(--primary) 11%,
            var(--surface)
        );
    color: var(--primary);
    font-size: 1.15rem;
    font-weight: 900;
}

.qr-reliability-score-copy strong,
.qr-reliability-score-copy small {
    display: block;
}

.qr-reliability-score-copy strong {
    font-size: .67rem;
}

.qr-reliability-score-copy small {
    margin-top: 3px;
    color: var(--muted);
    font-size: .55rem;
    line-height: 1.4;
}

.qr-reliability-metrics {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}

.qr-reliability-metrics > div {
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
}

.qr-reliability-metrics span,
.qr-reliability-metrics strong {
    display: block;
}

.qr-reliability-metrics span {
    color: var(--muted);
    font-size: .53rem;
}

.qr-reliability-metrics strong {
    margin-top: 2px;
    font-size: .65rem;
}

.qr-reliability-bar {
    height: 7px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background:
        color-mix(
            in srgb,
            var(--line) 70%,
            transparent
        );
}

.qr-reliability-bar i {
    width: 0;
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #ef4444;
    transition: width .2s ease;
}

.qr-reliability-bar
i[data-grade="good"] {
    background: #f59e0b;
}

.qr-reliability-bar
i[data-grade="excellent"] {
    background: #10b981;
}

.qr-reliability-recommendation {
    margin-top: 9px;
    padding: 8px;
    border-radius: 8px;
    background: var(--bg);
    color: var(--muted);
    font-size: .56rem;
    line-height: 1.45;
}

.qr-reliability-ec {
    margin-top: 7px;
    color: var(--text);
    font-size: .57rem;
    font-weight: 750;
}

.qr-reliability-disclaimer {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: .52rem;
    line-height: 1.4;
}

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

@media (max-width: 980px) {
    .qr-design-workbench {
        grid-template-columns: 1fr;
    }

    .qr-design-workbench
    .qr-preview-card {
        position: static;
        order: 1;
        max-width: none;
    }

    .qr-design-workbench
    .qr-visual-studio {
        order: 2;
    }
}

@media (max-width: 520px) {
    .qr-pro-export-grid,
    .qr-reliability-metrics {
        grid-template-columns: 1fr;
    }

    .qr-pro-download-buttons {
        grid-template-columns:
            repeat(3, 1fr);
    }
}

/* =====================================================
   PHASE 3D-1 — DEDICATED QR TOOL PAGES
   ===================================================== */

.fq-dedicated-tool-page > .section-title {
    display: none;
}

.fq-tool-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 24px 0 12px;
    color: var(--muted);
    font-size: .72rem;
}

.fq-tool-breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
}

.fq-tool-breadcrumbs a:hover {
    color: var(--primary);
}

.fq-dedicated-tool-hero {
    max-width: 820px;
    margin: 0 0 22px;
}

.fq-dedicated-tool-hero h1 {
    margin: 7px 0 9px;
    font-size:
        clamp(
            2rem,
            5vw,
            3.5rem
        );
    line-height: 1.03;
}

.fq-dedicated-tool-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.fq-dedicated-tool-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 13px;
}

.fq-dedicated-tool-links a {
    color: var(--primary);
    font-size: .74rem;
    font-weight: 750;
    text-decoration: none;
}

/*
 * The shared QR engine stays intact in the DOM.
 * Only unrelated type cards are hidden.
 */

.fq-dedicated-tool-page
[data-qr-type][hidden] {
    display: none !important;
}

.fq-dedicated-tool-page
[data-qr-type]:not([hidden]) {
    max-width: 420px;
}

/* Tool directory */

.fq-tool-directory-intro {
    margin: 22px 0 30px;
}

.fq-flagship-tool-card {
    display: grid;
    grid-template-columns:
        48px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
}

.fq-flagship-tool-card h3,
.fq-flagship-tool-card p {
    margin-top: 0;
}

.fq-tool-directory-section {
    margin-top: 34px;
}

.fq-tool-directory-heading {
    margin-bottom: 13px;
}

.fq-tool-directory-heading h2 {
    margin: 0;
    font-size: 1.35rem;
}

.fq-tool-directory-grid {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}

.fq-directory-tool-card {
    min-height: 165px;
}

.fq-directory-tool-card p {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .fq-tool-directory-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 600px) {
    .fq-tool-directory-grid {
        grid-template-columns: 1fr;
    }

    .fq-dedicated-tool-hero h1 {
        font-size: 2rem;
    }
}

/* =====================================================
   PHASE 3D-1B — SIMPLE RESPONSIVE QR CREATOR LAYOUT
   KEEP ALL FEATURES
   ===================================================== */

/* Main creator layout */

.qr-workspace {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 370px) !important;
    align-items: start !important;
    gap: 24px !important;
}

.qr-builder {
    min-width: 0;
    width: 100%;
}

.qr-preview-card {
    position: sticky !important;
    top: 82px !important;
    z-index: 2;
    width: 100% !important;
    max-width: 370px !important;
    max-height:
        calc(100vh - 100px);
    overflow-y: auto;
    margin: 0 !important;
}

/*
 * Old workbench system is no longer used.
 */

.qr-design-workbench {
    display: contents !important;
}

/* All-in-one type chooser */

.qr-type-grid-large {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
    gap: 8px;
}

.qr-type-button {
    min-width: 0;
    min-height: 74px;
    padding: 10px !important;
}

.qr-type-button
.qr-type-copy small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.3;
}

/* Dedicated pages */

.fq-dedicated-tool-page
[data-qr-type-selector] {
    display: none !important;
}

.fq-dedicated-tool-page
.fq-dedicated-tool-hero {
    max-width: 760px;
    margin-bottom: 18px;
}

.fq-dedicated-tool-page
.fq-dedicated-tool-hero h1 {
    margin-bottom: 10px;
    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );
}

.fq-dedicated-tool-page
[data-qr-content-section] {
    margin-top: 0;
}

/* Modern customization accordions */

.fq-design-accordion {
    margin-top: 10px !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--line) !important;
    border-radius: 12px;
}

.fq-design-accordion
> .qr-visual-block-heading {
    min-height: 52px;
    margin: 0 !important;
    padding: 10px 12px;
    background:
        color-mix(
            in srgb,
            var(--surface) 94%,
            var(--primary)
        );
}

.fq-design-accordion
> :not(.qr-visual-block-heading) {
    margin-left: 12px;
    margin-right: 12px;
}

.fq-design-accordion
> :last-child {
    margin-bottom: 12px;
}

.fq-design-accordion.is-collapsed
> :not(.qr-visual-block-heading) {
    display: none !important;
}

.fq-design-toggle {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
}

/* Advanced controls */

.fq-legacy-advanced-wrap {
    margin-top: 14px;
}

.fq-advanced-toggle {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .76rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.fq-advanced-toggle:hover {
    border-color: var(--primary);
}

.fq-legacy-advanced-content {
    margin-top: 10px;
}

.fq-legacy-advanced-content[hidden] {
    display: none !important;
}

/* Keep visual editor compact */

.qr-visual-studio {
    padding: 14px !important;
}

.qr-visual-intro {
    margin-bottom: 8px !important;
}

/* Tablet */

@media (max-width: 980px) {
    .qr-workspace {
        grid-template-columns:
            1fr !important;
        gap: 16px !important;
    }

    .qr-builder {
        order: 1;
    }

    .qr-preview-card {
        position: static !important;
        top: auto !important;
        order: 2;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .qr-type-grid-large {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

/* Mobile */

@media (max-width: 700px) {
    .qr-workspace {
        display: flex !important;
        flex-direction: column;
        width: 100%;
    }

    .qr-builder,
    .qr-preview-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    .qr-type-grid-large {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .qr-mode-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .qr-visual-intro {
        display: block !important;
    }

    .qr-random-design-button {
        width: 100%;
        margin-top: 10px;
    }

    .fq-dedicated-tool-links {
        display: grid;
        gap: 7px;
    }
}

@media (max-width: 430px) {
    .qr-type-grid-large {
        grid-template-columns: 1fr;
    }

    .qr-box,
    .qr-visual-studio {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* =====================================================
   PHASE 3D-1C — FLAGSHIP TYPE CHOOSER
   QR CREATOR STYLE FLOW
   ===================================================== */

/*
 * /qr-code-generator/
 *
 * This page chooses the QR type.
 * The actual editing happens on the dedicated slug.
 *
 * Nothing is deleted: content/design/preview remain
 * available on every dedicated QR tool page.
 */

[data-qr-studio]:not([data-dedicated-qr-page])
.qr-workspace {
    display: block !important;
}

[data-qr-studio]:not([data-dedicated-qr-page])
.qr-builder {
    width: 100% !important;
    max-width: none !important;
}

[data-qr-studio]:not([data-dedicated-qr-page])
.qr-builder
> [data-qr-content-section],

[data-qr-studio]:not([data-dedicated-qr-page])
.qr-builder
> [data-qr-design-section],

[data-qr-studio]:not([data-dedicated-qr-page])
.qr-preview-card {
    display: none !important;
}

[data-qr-studio]:not([data-dedicated-qr-page])
[data-qr-type-selector] {
    width: 100%;
}

[data-qr-studio]:not([data-dedicated-qr-page])
.qr-type-button {
    cursor: pointer;
}

/*
 * Dedicated pages remain the full editor.
 */

[data-qr-studio][data-dedicated-qr-page="1"]
[data-qr-content-section],

[data-qr-studio][data-dedicated-qr-page="1"]
[data-qr-design-section],

[data-qr-studio][data-dedicated-qr-page="1"]
.qr-preview-card {
    display: block;
}

/* =====================================================
   PHASE 3E-1 — DYNAMIC PUBLISH UI
   PHASE 3E-2A — DYNAMIC CONTROL UI
   ===================================================== */

.fq-dynamic-publish {
    margin-top: 12px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background:
        color-mix(
            in srgb,
            var(--surface) 95%,
            var(--primary)
        );
}

.fq-dynamic-publish-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.fq-dynamic-publish-heading span {
    display: block;
    margin-bottom: 3px;
    color: var(--primary);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.fq-dynamic-publish-heading strong {
    display: block;
    font-size: .83rem;
}

.fq-dynamic-publish-copy {
    margin: 8px 0 10px;
    color: var(--muted);
    font-size: .69rem;
    line-height: 1.45;
}

.fq-dynamic-controls {
    margin-bottom: 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.fq-dynamic-controls > summary {
    padding: 10px 11px;
    cursor: pointer;
    font-size: .68rem;
    font-weight: 850;
    user-select: none;
}

.fq-dynamic-controls-grid {
    display: grid;
    gap: 10px;
    padding: 0 11px 12px;
}

.fq-dynamic-controls-grid label {
    display: grid;
    gap: 5px;
    color: var(--text);
    font-size: .64rem;
    font-weight: 780;
}

.fq-dynamic-controls-grid input[type="datetime-local"],
.fq-dynamic-controls-grid input[type="number"],
.fq-dynamic-controls-grid input[type="password"] {
    width: 100%;
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.fq-dynamic-controls-grid small {
    color: var(--muted);
    font-size: .57rem;
    font-weight: 500;
    line-height: 1.35;
}

.fq-control-toggle {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.fq-control-toggle input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.fq-dynamic-publish-button {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font: inherit;
    font-size: .72rem;
    font-weight: 850;
    cursor: pointer;
}

.fq-dynamic-publish-button:disabled {
    opacity: .6;
    cursor: wait;
}

.fq-dynamic-publish-result {
    margin-top: 11px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
}

.fq-dynamic-publish-result > span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: .61rem;
    font-weight: 800;
}

.fq-dynamic-publish-result > a {
    display: block;
    overflow-wrap: anywhere;
    color: var(--primary);
    font-size: .68rem;
    font-weight: 750;
    text-decoration: none;
}

.fq-dynamic-publish-actions {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 7px;
    margin-top: 9px;
}

.fq-dynamic-publish-actions button {
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .62rem;
    font-weight: 750;
    cursor: pointer;
}

.fq-dynamic-publish-status {
    min-height: 17px;
    margin-top: 8px;
    color: var(--muted);
    font-size: .64rem;
    line-height: 1.4;
}

.fq-dynamic-browser-note {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: .58rem;
    line-height: 1.4;
}

@media (max-width: 700px) {
    .fq-dynamic-publish-actions {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   PHASE 3E-2A — DYNAMIC PREVIEW FULL ACCESS
   Fix clipped Publish / access controls on desktop.
   Static QR pages keep their existing sticky preview.
   ===================================================== */

.fq-dynamic-studio .qr-preview-card {
    position: static !important;
    top: auto !important;
    align-self: start !important;

    /*
     * Dynamic pages now contain publishing,
     * scheduling and security controls in addition
     * to the preview. Never trap those controls in
     * a viewport-height internal scroller.
     */
    max-height: none !important;
    overflow: visible !important;
}

.fq-dynamic-studio
.fq-dynamic-publish {
    margin:
        12px 0 14px;
}

.fq-dynamic-studio
.qr-preview-tabs {
    margin-bottom: 0;
}

/*
 * Keep the QR renderer itself fluid.
 */

.fq-dynamic-studio
#qr-preview {
    max-width: 100%;
}

.fq-dynamic-studio
#qr-preview canvas,
.fq-dynamic-studio
#qr-preview svg {
    max-width: 100% !important;
    height: auto !important;
}

/*
 * Mobile/tablet already stack the editor; explicitly
 * preserve full-width behavior here too.
 */

@media (max-width: 980px) {
    .fq-dynamic-studio
    .qr-preview-card {
        width: 100% !important;
        max-width: none !important;
    }
}

/* =====================================================
   PHASE 3E-2B — MY DYNAMIC QRS
   ===================================================== */

.fq-manager-page {
    padding-top: 44px;
    padding-bottom: 80px;
}

.fq-manager-hero {
    max-width: 760px;
    margin-bottom: 28px;
}

.fq-manager-kicker {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--primary);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.fq-manager-hero h1 {
    margin: 0 0 12px;
    font-size:
        clamp(
            2rem,
            5vw,
            3.4rem
        );
    line-height: 1.05;
}

.fq-manager-hero p {
    color: var(--muted);
    line-height: 1.65;
}

.fq-manager-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.fq-manager-state,
.fq-manager-empty,
.fq-manager-note {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.fq-manager-empty {
    text-align: center;
}

.fq-manager-empty h2 {
    margin-top: 0;
}

.fq-manager-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 16px;
}

.fq-manager-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.fq-manager-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fq-manager-type {
    display: block;
    margin-bottom: 5px;
    color: var(--primary);
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.fq-manager-card h2 {
    margin: 0;
    font-size: 1.05rem;
}

.fq-manager-status {
    flex: 0 0 auto;
    padding: 6px 8px;
    border-radius: 999px;
    background:
        color-mix(
            in srgb,
            #19c37d 14%,
            var(--surface)
        );
    color: #14865a;
    font-size: .64rem;
    font-weight: 850;
}

.fq-manager-status.is-disabled,
.fq-manager-status.is-expired,
.fq-manager-status.is-scan_limit_reached {
    background:
        color-mix(
            in srgb,
            #ef4444 12%,
            var(--surface)
        );
    color: #b42318;
}

.fq-manager-status.is-scheduled {
    background:
        color-mix(
            in srgb,
            #f59e0b 15%,
            var(--surface)
        );
    color: #a15c00;
}

.fq-manager-url {
    display: block;
    margin-top: 14px;
    overflow-wrap: anywhere;
    color: var(--primary);
    font-size: .75rem;
    font-weight: 750;
    text-decoration: none;
}

.fq-manager-destination {
    display: grid;
    gap: 3px;
    margin-top: 13px;
}

.fq-manager-destination span,
.fq-manager-stats span {
    color: var(--muted);
    font-size: .63rem;
    font-weight: 750;
}

.fq-manager-destination strong {
    overflow-wrap: anywhere;
    font-size: .73rem;
}

.fq-manager-stats {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 8px;
    margin-top: 14px;
}

.fq-manager-stats > div {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
}

.fq-manager-stats strong {
    font-size: .78rem;
}

.fq-manager-meta {
    margin-top: 11px;
    color: var(--muted);
    font-size: .63rem;
}

.fq-manager-card-actions {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 7px;
    margin-top: 15px;
}

.fq-manager-card-actions button {
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .68rem;
    font-weight: 800;
    cursor: pointer;
}

.fq-manager-card-actions
button.primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.fq-manager-note {
    margin-top: 24px;
}

.fq-manager-note strong {
    display: block;
    margin-bottom: 5px;
}

.fq-manager-note p {
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.55;
}

@media (max-width: 850px) {
    .fq-manager-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .fq-manager-card-actions,
    .fq-manager-stats {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   PHASE 3E-2B — MANAGER HEADER CLEARANCE
   ===================================================== */

.fq-manager-page {
    padding-top: 92px;
}

@media (max-width: 700px) {
    .fq-manager-page {
        padding-top: 72px;
    }
}

/* =====================================================
   PHASE 3E-2C — ANALYTICS DASHBOARD
   ===================================================== */

.fq-manager-card-actions {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}

.fq-manager-card-actions
button.analytics {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 55%,
            var(--line)
        );
    color: var(--primary);
}

.fq-analytics-page {
    padding-top: 92px;
    padding-bottom: 80px;
}

.fq-analytics-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.fq-analytics-hero h1 {
    margin: 0 0 10px;
    font-size:
        clamp(
            2rem,
            5vw,
            3.25rem
        );
    line-height: 1.05;
}

.fq-analytics-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
    line-height: 1.55;
}

.fq-analytics-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.fq-analytics-error {
    padding: 20px;
    border: 1px solid
        color-mix(
            in srgb,
            #ef4444 40%,
            var(--line)
        );
    border-radius: 14px;
    background:
        color-mix(
            in srgb,
            #ef4444 7%,
            var(--surface)
        );
    color: #b42318;
    font-weight: 700;
}

.fq-analytics-summary {
    display: grid;
    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );
    gap: 12px;
    margin-bottom: 16px;
}

.fq-analytics-summary article {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.fq-analytics-summary span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 750;
}

.fq-analytics-summary strong {
    font-size: 1.65rem;
    line-height: 1;
}

.fq-analytics-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.fq-analytics-panel-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.fq-analytics-panel-heading span {
    display: block;
    margin-bottom: 4px;
    color: var(--primary);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .07em;
}

.fq-analytics-panel-heading h2 {
    margin: 0;
    font-size: 1.05rem;
}

.fq-analytics-panel-heading small {
    color: var(--muted);
    font-size: .64rem;
}

.fq-analytics-chart {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    min-height: 190px;
    padding: 18px 4px 0;
    overflow-x: auto;
    border-top: 1px solid var(--line);
}

.fq-chart-column {
    display: grid;
    align-content: end;
    justify-items: center;
    flex:
        1 0 22px;
    min-width: 22px;
    height: 170px;
}

.fq-chart-bar {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 14px;
    min-height: 2px;
    border-radius: 5px 5px 2px 2px;
    background: var(--primary);
}

.fq-chart-bar span {
    position: absolute;
    top: -17px;
    color: var(--text);
    font-size: .56rem;
    font-weight: 800;
}

.fq-chart-column small {
    min-height: 15px;
    margin-top: 5px;
    color: var(--muted);
    font-size: .5rem;
    white-space: nowrap;
}

.fq-analytics-breakdown-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 16px;
    margin: 16px 0;
}

.fq-breakdown-row {
    margin-top: 12px;
}

.fq-breakdown-row:first-child {
    margin-top: 0;
}

.fq-breakdown-row > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
    font-size: .7rem;
}

.fq-breakdown-row strong {
    font-size: .68rem;
}

.fq-breakdown-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background:
        color-mix(
            in srgb,
            var(--line) 75%,
            transparent
        );
}

.fq-breakdown-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.fq-analytics-empty {
    margin: 0;
    color: var(--muted);
    font-size: .75rem;
}

.fq-analytics-table-wrap {
    overflow-x: auto;
}

.fq-analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .71rem;
}

.fq-analytics-table th,
.fq-analytics-table td {
    padding: 10px 9px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}

.fq-analytics-table th {
    color: var(--muted);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fq-analytics-note {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.fq-analytics-note strong {
    display: block;
    margin-bottom: 7px;
}

.fq-analytics-note p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.55;
}

@media (max-width: 950px) {
    .fq-analytics-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .fq-analytics-breakdown-grid {
        grid-template-columns: 1fr;
    }

    .fq-analytics-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .fq-analytics-hero-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .fq-analytics-page {
        padding-top: 72px;
    }
}

@media (max-width: 520px) {
    .fq-analytics-summary {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   PHASE 3E-2D-A — GUIDED QR CREATOR
   ===================================================== */

.fq-creator-progress {
    position: sticky;
    top: 72px;
    z-index: 25;
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 8px;
    margin:
        0 0 18px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background:
        color-mix(
            in srgb,
            var(--surface) 94%,
            transparent
        );
    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, .06);
    backdrop-filter:
        blur(14px);
}

.fq-creator-step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    min-height: 46px;
    padding: 8px 12px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.fq-creator-step span {
    display: grid;
    place-items: center;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background:
        color-mix(
            in srgb,
            var(--line) 70%,
            var(--surface)
        );
    color: var(--muted);
    font-size: .67rem;
    font-weight: 900;
}

.fq-creator-step b {
    overflow: hidden;
    font-size: .72rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fq-creator-step.active {
    background:
        color-mix(
            in srgb,
            var(--primary) 9%,
            var(--surface)
        );
    color: var(--primary);
}

.fq-creator-step.active span {
    background: var(--primary);
    color: #fff;
}

.fq-creator-step.complete {
    color: #159561;
}

.fq-creator-step.complete span {
    background:
        color-mix(
            in srgb,
            #19c37d 18%,
            var(--surface)
        );
    color: #159561;
}

.fq-creator-step.disabled {
    pointer-events: none;
    opacity: .48;
}

.fq-step-hidden {
    display: none !important;
}

.fq-guide-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.fq-guide-back,
.fq-guide-next,
.fq-guide-finish {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 15px;
    border-radius: 10px;
    font: inherit;
    font-size: .7rem;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

.fq-guide-back {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
}

.fq-guide-next,
.fq-guide-finish {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
}

/* =====================================================
   PROFESSIONAL FRAME GALLERY
   Uses FreeQRMake's existing frame engine.
   ===================================================== */

.fq-frame-gallery-ready {
    overflow: visible !important;
}

.fq-frame-categories {
    display: flex;
    align-items: center;
    gap: 7px;
    margin:
        12px 0 14px;
    padding-bottom: 3px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.fq-frame-category {
    flex: 0 0 auto;
    min-height: 35px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .64rem;
    font-weight: 780;
    cursor: pointer;
}

.fq-frame-category.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.fq-frame-card-grid {
    display: grid !important;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                104px,
                1fr
            )
        );
    gap: 10px !important;
    max-height: none !important;
    overflow: visible !important;
}

.fq-frame-gallery-ready
button[data-fq-frame-card="1"] {
    position: relative;
    min-width: 0 !important;
    min-height: 112px;
    padding: 9px !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    transition:
        border-color .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}

.fq-frame-gallery-ready
button[data-fq-frame-card="1"]:hover {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 60%,
            var(--line)
        ) !important;
    transform:
        translateY(-1px);
}

.fq-frame-gallery-ready
button[data-fq-frame-card="1"].active,
.fq-frame-gallery-ready
button[data-fq-frame-card="1"].fq-selected-frame {
    border-color:
        var(--primary) !important;
    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--primary) 15%,
            transparent
        );
}

/*
 * Existing frame thumbnail artwork is preserved.
 * Make any inner preview fill the larger gallery card.
 */

.fq-frame-gallery-ready
button[data-fq-frame-card="1"]
svg,
.fq-frame-gallery-ready
button[data-fq-frame-card="1"]
img,
.fq-frame-gallery-ready
button[data-fq-frame-card="1"]
canvas {
    display: block;
    width: 100% !important;
    max-width: 82px !important;
    height: auto !important;
    max-height: 76px;
    margin:
        0 auto 6px;
    object-fit: contain;
}

/*
 * Make design studio itself less like one endless form.
 */

.fq-guide-dedicated
[data-qr-design-section] {
    scroll-margin-top: 145px;
}

.fq-guide-dedicated
[data-qr-content-section] {
    scroll-margin-top: 145px;
}

.fq-guide-dedicated
#qr-visual-design-studio {
    margin-top: 0;
}

@media (max-width: 900px) {
    .fq-creator-progress {
        top: 64px;
    }

    .fq-frame-card-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 620px) {
    .fq-creator-progress {
        position: static;
        grid-template-columns: 1fr;
    }

    .fq-creator-step {
        justify-content: flex-start;
    }

    .fq-guide-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .fq-guide-back,
    .fq-guide-next,
    .fq-guide-finish {
        width: 100%;
    }

    .fq-frame-card-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

/* =====================================================
   PHASE 3E-2D-A1 — FRAME GALLERY OPEN

   The previous design accordion system hid the body
   of the QR frame block. On Step 3, frames are a primary
   visual choice and remain expanded.
   ===================================================== */

.fq-guide-dedicated
.fq-frame-gallery-ready.fq-frame-gallery-open {
    overflow: visible !important;
    max-height: none !important;
}

.fq-guide-dedicated
.fq-frame-gallery-ready.fq-frame-gallery-open
> :not(.qr-visual-block-heading) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
}

.fq-guide-dedicated
.fq-frame-gallery-ready
.fq-frame-categories {
    display: flex !important;
}

.fq-guide-dedicated
.fq-frame-gallery-ready
.fq-frame-card-grid {
    display: grid !important;
}

.fq-guide-dedicated
.fq-frame-gallery-ready
button[data-fq-frame-card="1"] {
    display: block !important;
}

.fq-guide-dedicated
.fq-frame-gallery-ready
.qr-visual-block-heading {
    cursor: default !important;
}

/* =====================================================
   PHASE 3E-2D-A2 — CLEAN DESIGN STUDIO
   ===================================================== */

/*
 * READABILITY
 * Keep the editor comfortable at normal desktop zoom.
 */

.fq-dedicated-tool-page {
    font-size: 16px;
}

.fq-dedicated-tool-hero p,
.fq-dedicated-tool-links,
.qr-visual-intro p,
.qr-section-heading p {
    font-size: .98rem !important;
    line-height: 1.55 !important;
}

.fq-dedicated-tool-hero h1 {
    line-height: 1.08;
}

.qr-box h2 {
    font-size: 1.18rem !important;
    line-height: 1.3;
}

.qr-field label {
    font-size: .9rem !important;
    line-height: 1.4;
    font-weight: 750;
}

.qr-field input,
.qr-field textarea,
.qr-field select {
    font-size: 1rem !important;
    line-height: 1.45;
}

.qr-field input,
.qr-field select {
    min-height: 46px;
}

.qr-field textarea {
    min-height: 108px;
}

.qr-visual-intro h3 {
    font-size: 1.18rem !important;
    line-height: 1.3;
}

.qr-visual-block-heading strong {
    font-size: .94rem !important;
    line-height: 1.3;
}

.qr-visual-block-heading small {
    margin-top: 3px;
    font-size: .82rem !important;
    line-height: 1.45 !important;
}

.fq-creator-step b {
    font-size: .82rem !important;
}

.fq-creator-step span {
    font-size: .73rem !important;
}

.qr-type-copy strong {
    font-size: .91rem !important;
}

.qr-type-copy small {
    font-size: .79rem !important;
    line-height: 1.4 !important;
}

/*
 * FRAME SECTION
 *
 * No huge vertical wall.
 * One compact category row + horizontally scrolling
 * visual frames. The actual frame engine remains hidden
 * in Advanced settings.
 */

.fq-frame-gallery-simple {
    overflow: visible !important;
    max-height: none !important;
}

.fq-frame-gallery-simple
> .qr-visual-block-heading {
    cursor: default !important;
}

.fq-frame-simple-gallery {
    display: grid !important;
    gap: 14px;
    padding: 13px 12px 15px;
}

.fq-frame-categories {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 0 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.fq-frame-category {
    flex: 0 0 auto;
    min-height: 39px;
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .78rem !important;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}

.fq-frame-category:hover {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 55%,
            var(--line)
        );
}

.fq-frame-category.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.fq-frame-simple-strip {
    display: flex !important;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    padding: 3px 2px 10px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.fq-frame-proxy-card {
    display: grid !important;
    grid-template-rows:
        94px auto;
    align-items: center;
    flex: 0 0 116px;
    width: 116px;
    min-width: 116px;
    min-height: 132px;
    padding: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    scroll-snap-align: start;
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.fq-frame-proxy-card:hover {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 60%,
            var(--line)
        );
    transform: translateY(-1px);
}

.fq-frame-proxy-card.active {
    border-color: var(--primary);
    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--primary) 15%,
            transparent
        );
}

.fq-frame-proxy-thumb {
    display: grid;
    place-items: center;
    width: 100%;
    height: 94px;
    overflow: hidden;
    pointer-events: none;
}

.fq-frame-proxy-thumb
img,
.fq-frame-proxy-thumb
svg,
.fq-frame-proxy-thumb
canvas {
    display: block;
    width: auto !important;
    max-width: 86px !important;
    height: auto !important;
    max-height: 86px !important;
    object-fit: contain;
}

.fq-frame-proxy-thumb
button {
    pointer-events: none;
}

.fq-frame-proxy-card small {
    display: block;
    overflow: hidden;
    margin-top: 5px;
    color: var(--muted);
    font-size: .7rem !important;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Real frame buttons are still used by JS, but users
 * no longer need to see a duplicate giant frame list.
 */

.fq-frame-engine-source {
    display: none !important;
}

.fq-frame-advanced {
    margin:
        0 12px 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.fq-frame-advanced > summary {
    padding: 11px 13px;
    color: var(--text);
    font-size: .8rem;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
}

.fq-frame-advanced-body {
    padding:
        0 13px 13px;
}

/*
 * Old experimental grid must not control the new strip.
 */

.fq-frame-simple-gallery
.fq-frame-card-grid {
    display: block !important;
}

/*
 * A little more breathing space through Step 3.
 */

.fq-guide-dedicated
.qr-visual-studio {
    padding: 17px !important;
}

.fq-guide-dedicated
.fq-design-accordion {
    margin-top: 12px !important;
}

.fq-guide-dedicated
.qr-visual-block-heading {
    padding: 12px 14px !important;
}

/* Better reading on mobile too. */

@media (max-width: 700px) {
    .fq-dedicated-tool-page {
        font-size: 16px;
    }

    .fq-frame-proxy-card {
        flex-basis: 108px;
        width: 108px;
        min-width: 108px;
    }

    .qr-field label {
        font-size: .92rem !important;
    }

    .qr-visual-block-heading small {
        font-size: .84rem !important;
    }
}

/* =====================================================
   PHASE 3E-2D-A3 — FRAME ENGINE V2
   ===================================================== */

.fq-frame-v2 {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.fq-frame-v2-heading {
    padding: 15px 16px 10px;
}

.fq-frame-v2-heading span {
    display: block;
    margin-bottom: 3px;
    color: var(--primary);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .07em;
}

.fq-frame-v2-heading strong {
    display: block;
    font-size: 1rem;
    line-height: 1.35;
}

.fq-frame-v2-heading small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.45;
}

.fq-frame-v2-categories {
    display: flex;
    gap: 8px;
    padding: 8px 15px 11px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.fq-frame-v2-categories button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .78rem;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}

.fq-frame-v2-categories
button.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.fq-frame-v2-strip {
    display: flex;
    gap: 11px;
    width: 100%;
    padding: 5px 15px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.fq-frame-v2-card {
    display: grid;
    grid-template-rows:
        166px auto;
    align-items: center;
    flex: 0 0 142px;
    width: 142px;
    min-width: 142px;
    min-height: 202px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    scroll-snap-align: start;
    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.fq-frame-v2-card:hover {
    transform:
        translateY(-2px);
    border-color:
        color-mix(
            in srgb,
            var(--primary) 60%,
            var(--line)
        );
}

.fq-frame-v2-card.active {
    border-color:
        var(--primary);
    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--primary) 14%,
            transparent
        );
}

.fq-frame-v2-card img {
    display: block;
    width: 100%;
    height: 164px;
    object-fit: contain;
}

.fq-frame-v2-card strong {
    display: block;
    overflow: hidden;
    padding: 4px 3px;
    font-size: .74rem;
    line-height: 1.3;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fq-frame-v2-none {
    display: grid;
    place-items: center;
    width: 90px;
    height: 150px;
    margin: auto;
    border: 3px solid var(--line);
    border-radius: 18px;
    color: var(--muted);
    font-size: 2.2rem;
}

.fq-frame-v2-controls {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 10px;
    padding: 14px 15px;
    border-top:
        1px solid var(--line);
    background:
        color-mix(
            in srgb,
            var(--bg) 65%,
            var(--surface)
        );
}

.fq-frame-v2-controls label {
    display: grid;
    gap: 6px;
    font-size: .82rem;
    font-weight: 750;
}

.fq-frame-v2-controls input {
    width: 100%;
    min-height: 44px;
    border:
        1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.fq-frame-v2-controls
input[type="text"] {
    padding: 8px 11px;
}

.fq-frame-v2-controls
input[type="color"] {
    padding: 4px;
}

.fq-frame-v2-note {
    margin: 0;
    padding: 0 15px 14px;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.45;
}

/*
 * Old V1 frames are preserved in source/engine,
 * but V2 becomes the visible primary interface.
 */

.fq-frame-v2-legacy {
    display: none !important;
}

/*
 * V2 full composition preview.
 */

.fq-frame-v2-preview {
    width: min(
        100%,
        360px
    );
    margin: 18px auto;
    place-items: center;
}

.fq-frame-v2-preview:not([hidden]) {
    display: grid;
}

.fq-frame-v2-preview img {
    display: block;
    width: 100%;
    max-height: 560px;
    object-fit: contain;
}

.fq-frame-v2-active
#qr-preview {
    display: none !important;
}

.fq-frame-v2-active
.qr-preview-card {
    overflow: visible;
}

@media (max-width: 700px) {
    .fq-frame-v2-controls {
        grid-template-columns: 1fr;
    }

    .fq-frame-v2-card {
        flex-basis: 132px;
        width: 132px;
        min-width: 132px;
    }
}

/* =====================================================
   PHASE 3E-2D-A3.1 — FRAME WIDTH CONTAINMENT

   Frame V2 uses horizontally scrolling galleries.
   Never allow their intrinsic width to expand the
   entire QR editor or document.
   ===================================================== */

/*
 * Protect the overall dedicated QR editor.
 */

.fq-dedicated-tool-page,
.fq-dedicated-tool-page
[data-qr-studio],
.fq-dedicated-tool-page
.qr-workspace {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.fq-dedicated-tool-page
.qr-workspace {
    overflow: visible !important;
}

/*
 * Every child of the two-column grid must be allowed
 * to shrink. Without this, horizontal frame content
 * can become the grid item's intrinsic minimum width.
 */

.fq-dedicated-tool-page
.qr-workspace > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

.fq-dedicated-tool-page
.qr-builder,
.fq-dedicated-tool-page
[data-qr-design-section],
.fq-dedicated-tool-page
[data-qr-content-section],
.fq-dedicated-tool-page
.qr-visual-studio,
.fq-dedicated-tool-page
.qr-box {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/*
 * Frame V2 itself is a normal block exactly as wide
 * as the editor column.
 */

.fq-dedicated-tool-page
.fq-frame-v2 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box;
}

/*
 * Only these two inner rows may scroll horizontally.
 * They must never contribute their total child width
 * to the document width.
 */

.fq-dedicated-tool-page
.fq-frame-v2-categories,
.fq-dedicated-tool-page
.fq-frame-v2-strip {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    box-sizing: border-box;

    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/*
 * Cards stay fixed-size inside the scrolling strip.
 */

.fq-dedicated-tool-page
.fq-frame-v2-card {
    flex:
        0 0 142px !important;

    width:
        142px !important;

    min-width:
        142px !important;

    max-width:
        142px !important;

    box-sizing: border-box;
}

.fq-dedicated-tool-page
.fq-frame-v2-card img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 164px !important;
    max-height: 164px !important;

    object-fit: contain !important;
}

/*
 * Controls also need shrinkable grid children.
 */

.fq-dedicated-tool-page
.fq-frame-v2-controls {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.fq-dedicated-tool-page
.fq-frame-v2-controls > * {
    min-width: 0 !important;
}

.fq-dedicated-tool-page
.fq-frame-v2-controls input {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/*
 * Keep preview constrained to its proper right column.
 */

.fq-dedicated-tool-page
.qr-preview-card {
    min-width: 0 !important;
    box-sizing: border-box;
}

/*
 * Prevent accidental document-level horizontal scrolling.
 * Internal galleries still scroll because they explicitly
 * use overflow-x:auto.
 */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

/*
 * Desktop: reinforce the intended editor/preview layout.
 */

@media (min-width: 981px) {
    .fq-dedicated-tool-page
    .qr-workspace {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 370px)
            !important;

        gap: 24px !important;
        align-items: start !important;
    }

    .fq-dedicated-tool-page
    .qr-preview-card {
        width: 100% !important;
        max-width: 370px !important;
    }
}

/*
 * Tablet/mobile remain stacked.
 */

@media (max-width: 980px) {
    .fq-dedicated-tool-page
    .qr-workspace {
        grid-template-columns:
            minmax(0, 1fr)
            !important;
    }

    .fq-dedicated-tool-page
    .fq-frame-v2-card {
        flex-basis:
            132px !important;

        width:
            132px !important;

        min-width:
            132px !important;

        max-width:
            132px !important;
    }
}

/* =====================================================
   PHASE 3E-2D-A4 — FINAL EDITOR CLEANUP
   ===================================================== */

/*
 * One sticky system is enough.
 * Prevent header + guided bar + preview from creating
 * multiple competing floating layers.
 */

.fq-clean-qr-editor
.site-header {
    position: static !important;
    top: auto !important;
}

.fq-clean-qr-editor
.fq-creator-progress {
    position: static !important;
    top: auto !important;
    z-index: auto !important;

    width: 100%;
    margin:
        0 0 20px !important;
}

/*
 * Normal page width.
 */

.fq-clean-qr-editor
[data-qr-studio] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.fq-clean-qr-editor
.qr-workspace {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.fq-clean-qr-editor
.qr-builder {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/*
 * STEP 3 CARD
 */

.fq-clean-qr-editor
.fq-clean-design-section {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding: 20px !important;

    border: 1px solid var(--line) !important;
    border-radius: 18px !important;

    background:
        var(--surface) !important;

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

    box-sizing: border-box;
}

/*
 * Stop the old heading flex behavior that caused
 * "2. Customize" to float outside the card.
 */

.fq-clean-qr-editor
.fq-clean-design-heading {
    display: block !important;

    position: static !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 16px !important;
    padding: 0 0 14px !important;

    border-bottom:
        1px solid var(--line);

    transform: none !important;
}

.fq-clean-qr-editor
.fq-clean-design-heading h2 {
    position: static !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--text) !important;

    font-size:
        1.3rem !important;

    line-height:
        1.3 !important;

    transform: none !important;
}

/*
 * Primary visual design editor becomes the content of
 * the card, not another oversized nested outer card.
 */

.fq-clean-qr-editor
#qr-visual-design-studio {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    box-sizing: border-box;
}

/*
 * Keep each design group readable and compact.
 */

.fq-clean-qr-editor
#qr-visual-design-studio
.qr-visual-intro {
    margin:
        0 0 14px !important;

    padding:
        0 0 14px !important;

    border-bottom:
        1px solid var(--line);
}

.fq-clean-qr-editor
#qr-visual-design-studio
.qr-visual-block {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-top: 10px !important;

    box-sizing: border-box;
}

/*
 * Frame V2 stays contained and scrolls internally.
 */

.fq-clean-qr-editor
.fq-frame-v2 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-top: 12px !important;

    overflow: hidden !important;

    box-sizing: border-box;
}

.fq-clean-qr-editor
.fq-frame-v2-categories,
.fq-clean-qr-editor
.fq-frame-v2-strip {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/*
 * ADVANCED SETTINGS
 */

.fq-advanced-design-settings {
    width: 100%;
    min-width: 0;

    margin-top: 14px;

    overflow: hidden;

    border:
        1px solid var(--line);

    border-radius:
        13px;

    background:
        color-mix(
            in srgb,
            var(--bg) 45%,
            var(--surface)
        );

    box-sizing:
        border-box;
}

.fq-advanced-design-settings
> summary {
    display: flex;

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

    gap: 14px;

    padding: 14px 15px;

    list-style: none;

    cursor: pointer;
    user-select: none;
}

.fq-advanced-design-settings
> summary::-webkit-details-marker {
    display: none;
}

.fq-advanced-design-settings
> summary span {
    min-width: 0;
}

.fq-advanced-design-settings
> summary strong {
    display: block;

    color: var(--text);

    font-size:
        .95rem;

    line-height:
        1.3;
}

.fq-advanced-design-settings
> summary small {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size:
        .82rem;

    line-height:
        1.45;
}

.fq-advanced-design-settings
> summary b {
    display: grid;
    place-items: center;

    flex: 0 0 31px;

    width: 31px;
    height: 31px;

    border:
        1px solid var(--line);

    border-radius:
        9px;

    background:
        var(--surface);

    color:
        var(--primary);

    font-size:
        1.05rem;
}

.fq-advanced-design-body {
    display: block;

    width: 100%;
    min-width: 0;

    padding:
        4px 15px 16px;

    box-sizing:
        border-box;
}

.fq-advanced-design-body
> * {
    min-width: 0 !important;
    max-width: 100% !important;
}

/*
 * Navigation stays visually inside Step 3.
 */

.fq-clean-qr-editor
.fq-guide-actions-final {
    width: 100% !important;

    margin-top: 18px !important;
    padding-top: 16px !important;

    box-sizing: border-box;
}

/*
 * STEP 2
 */

.fq-clean-qr-editor
.fq-clean-content-section {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box;
}

/*
 * PREVIEW
 *
 * Keep it useful and sticky on desktop, but do not
 * constrain the whole document.
 */

@media (min-width: 981px) {

    .fq-clean-qr-editor
    .qr-workspace {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, 370px)
            !important;

        gap: 24px !important;

        align-items: start !important;
    }

    .fq-clean-qr-editor
    .fq-clean-preview {
        position: sticky !important;

        top: 20px !important;

        align-self: start !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 370px !important;

        margin: 0 !important;

        box-sizing: border-box;
    }
}

/*
 * Typography/readability.
 */

.fq-clean-qr-editor
.fq-dedicated-tool-hero p {
    font-size:
        1rem !important;

    line-height:
        1.6 !important;
}

.fq-clean-qr-editor
.qr-field label {
    font-size:
        .92rem !important;

    line-height:
        1.4 !important;
}

.fq-clean-qr-editor
.qr-field input,
.fq-clean-qr-editor
.qr-field textarea,
.fq-clean-qr-editor
.qr-field select {
    font-size:
        1rem !important;
}

.fq-clean-qr-editor
.qr-visual-block-heading strong {
    font-size:
        .96rem !important;
}

.fq-clean-qr-editor
.qr-visual-block-heading small {
    font-size:
        .84rem !important;

    line-height:
        1.45 !important;
}

/*
 * MOBILE / TABLET
 */

@media (max-width: 980px) {

    .fq-clean-qr-editor
    .qr-workspace {
        display: flex !important;

        flex-direction:
            column !important;

        gap: 16px !important;
    }

    .fq-clean-qr-editor
    .qr-builder,
    .fq-clean-qr-editor
    .fq-clean-preview {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .fq-clean-qr-editor
    .fq-clean-preview {
        position: static !important;

        top: auto !important;
    }
}

@media (max-width: 620px) {

    .fq-clean-qr-editor
    .fq-clean-design-section {
        padding: 15px !important;
    }

    .fq-clean-qr-editor
    .fq-creator-progress {
        margin-bottom:
            14px !important;
    }

    .fq-clean-qr-editor
    .fq-frame-v2-card {
        flex-basis:
            128px !important;

        width:
            128px !important;

        min-width:
            128px !important;

        max-width:
            128px !important;
    }

    .fq-clean-qr-editor
    .fq-frame-v2-controls {
        grid-template-columns:
            1fr !important;
    }
}

/* =====================================================
   PHASE 3E-2D-A5 — CONTAINED PREVIEW GRID

   Desktop:
   [ editor controls ][ sticky preview ]

   Mobile:
   [ editor controls ]
   [ preview         ]
   ===================================================== */

/*
 * Outer workspace no longer owns the two columns.
 * .qr-builder itself owns them.
 */

.fq-clean-qr-editor
.fq-workspace-contained {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow: visible !important;
}

/*
 * THE ACTUAL EDITOR CONTAINER
 */

.fq-clean-qr-editor
.fq-editor-with-preview {
    display: grid !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 370px)
        !important;

    column-gap: 24px !important;
    row-gap: 18px !important;

    align-items: start !important;

    box-sizing: border-box;
}

/*
 * All regular editor sections live in the left column.
 */

.fq-clean-qr-editor
.fq-editor-with-preview
> .qr-box,
.fq-clean-qr-editor
.fq-editor-with-preview
> [data-qr-content-section],
.fq-clean-qr-editor
.fq-editor-with-preview
> [data-qr-design-section] {
    grid-column: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box;
}

/*
 * Hidden steps must not consume a grid row.
 */

.fq-clean-qr-editor
.fq-editor-with-preview
.fq-step-hidden {
    display: none !important;
}

/*
 * PREVIEW RIGHT COLUMN
 */

.fq-clean-qr-editor
.fq-editor-with-preview
> .fq-preview-inside-editor {
    grid-column: 2 !important;
    grid-row: 1 / span 20 !important;

    position: sticky !important;

    top: 20px !important;

    align-self: start !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 370px !important;

    margin: 0 !important;

    box-sizing: border-box;

    z-index: 3;
}

/*
 * Do not let preview internals escape the card.
 */

.fq-clean-qr-editor
.fq-preview-inside-editor {
    overflow-x: hidden !important;
}

.fq-clean-qr-editor
.fq-preview-inside-editor
* {
    max-width: 100%;
    box-sizing: border-box;
}

.fq-clean-qr-editor
.fq-preview-inside-editor
#qr-preview {
    width: 100% !important;
    max-width: 340px !important;

    margin:
        16px auto !important;
}

.fq-clean-qr-editor
.fq-preview-inside-editor
#qr-preview canvas,
.fq-clean-qr-editor
.fq-preview-inside-editor
#qr-preview svg {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/*
 * Frame V2 preview uses the same right column.
 */

.fq-clean-qr-editor
.fq-preview-inside-editor
.fq-frame-v2-preview {
    width: 100% !important;
    max-width: 340px !important;

    margin:
        16px auto !important;
}

.fq-clean-qr-editor
.fq-preview-inside-editor
.fq-frame-v2-preview img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/*
 * Professional export / reliability controls should
 * stay within the right card rather than overflowing.
 */

.fq-clean-qr-editor
.fq-preview-inside-editor
.qr-pro-export,
.fq-clean-qr-editor
.fq-preview-inside-editor
.qr-reliability-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.fq-clean-qr-editor
.fq-preview-inside-editor
.qr-pro-export-grid,
.fq-clean-qr-editor
.fq-preview-inside-editor
.qr-reliability-metrics {
    min-width: 0 !important;
}

/*
 * The editor card and preview now line up at their tops.
 */

.fq-clean-qr-editor
.fq-editor-step-2
.fq-clean-content-section,
.fq-clean-qr-editor
.fq-editor-step-3
.fq-clean-design-section {
    grid-row: 1 !important;
}

/*
 * Tablet / mobile:
 * preview becomes a normal block beneath the editor.
 */

@media (max-width: 980px) {

    .fq-clean-qr-editor
    .fq-editor-with-preview {
        display: flex !important;

        flex-direction:
            column !important;

        gap: 16px !important;
    }

    .fq-clean-qr-editor
    .fq-editor-with-preview
    > .fq-preview-inside-editor {
        position: static !important;

        top: auto !important;

        order: 20 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
    }
}

/* =====================================================
   PHASE 3E-2D-B — REPEATER BUILDERS
   ===================================================== */

.fq-repeater-source-hidden {
    display: none !important;
}

.fq-repeater-builder {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background:
        color-mix(
            in srgb,
            var(--surface) 96%,
            var(--primary)
        );
    box-sizing: border-box;
}

.fq-repeater-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}

.fq-repeater-heading strong {
    display: block;
    font-size: .98rem;
}

.fq-repeater-heading small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.4;
}

.fq-repeater-heading > span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 800;
}

.fq-repeater-list {
    display: grid;
    gap: 10px;
}

.fq-repeater-row {
    display: grid;
    grid-template-columns:
        34px
        minmax(0, 1fr)
        auto;
    gap: 10px;
    align-items: start;
    width: 100%;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-sizing: border-box;
}

.fq-repeater-number {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 9px;
    background:
        color-mix(
            in srgb,
            var(--primary) 11%,
            var(--surface)
        );
    color: var(--primary);
    font-size: .78rem;
    font-weight: 900;
}

.fq-repeater-fields {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 9px;
    min-width: 0;
}

.fq-repeater-fields label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.fq-repeater-fields label span {
    color: var(--text);
    font-size: .78rem;
    font-weight: 800;
}

.fq-repeater-fields input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .9rem;
    box-sizing: border-box;
}

.fq-repeater-remove {
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .74rem;
    font-weight: 800;
    cursor: pointer;
}

.fq-repeater-remove:hover {
    border-color: #ef4444;
    color: #dc2626;
}

.fq-repeater-add {
    width: 100%;
    min-height: 44px;
    margin-top: 11px;
    border: 1px dashed
        color-mix(
            in srgb,
            var(--primary) 55%,
            var(--line)
        );
    border-radius: 11px;
    background:
        color-mix(
            in srgb,
            var(--primary) 6%,
            var(--surface)
        );
    color: var(--primary);
    font: inherit;
    font-size: .88rem;
    font-weight: 850;
    cursor: pointer;
}

.fq-repeater-add:hover {
    background:
        color-mix(
            in srgb,
            var(--primary) 10%,
            var(--surface)
        );
}

.fq-repeater-add:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.fq-extra-preview-links {
    display: grid;
    gap: 7px;
    margin-top: 10px;
}

.fq-gallery-preview-item {
    overflow: hidden;
    border-radius: 10px;
}

.fq-gallery-preview-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.fq-gallery-preview-item small {
    display: block;
    padding: 5px;
    font-size: .66rem;
}

@media (max-width: 700px) {
    .fq-repeater-row {
        grid-template-columns:
            30px
            minmax(0, 1fr);
    }

    .fq-repeater-remove {
        grid-column: 2;
        justify-self: start;
    }

    .fq-repeater-fields {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   PHASE 3E-2D-A7 — FINAL PREVIEW POLISH
   ===================================================== */

/*
 * Step 3 title consistency.
 */

.fq-clean-qr-editor
.fq-clean-design-heading h2 {
    font-size: 1.25rem !important;
}

/*
 * Once already published, the publishing panel should
 * behave like status/tools rather than dominate the
 * entire preview column.
 */

.fq-dynamic-publish-complete {
    padding: 11px !important;
}

.fq-dynamic-publish-complete
.fq-dynamic-publish-copy {
    display: none !important;
}

.fq-dynamic-publish-complete
.fq-dynamic-publish-heading {
    margin-bottom: 7px !important;
}

.fq-dynamic-publish-complete
.fq-dynamic-publish-heading strong {
    font-size: .84rem !important;
}

.fq-dynamic-publish-complete
.fq-dynamic-publish-heading span {
    font-size: .62rem !important;
}

.fq-dynamic-publish-complete
.fq-dynamic-controls {
    margin-bottom: 8px !important;
}

.fq-dynamic-publish-complete
[data-dynamic-publish] {
    min-height: 36px !important;
}

/*
 * Give the actual QR/frame preview visual priority.
 */

.fq-editor-step-3
.fq-preview-inside-editor
#qr-preview,
.fq-editor-step-3
.fq-preview-inside-editor
.fq-frame-v2-preview {
    margin-top: 12px !important;
}

/*
 * Tabs stay visible and obvious.
 */

.fq-editor-step-3
.qr-preview-tabs {
    position: relative;
    z-index: 4;
}

/* =====================================================
   PHASE 3F — BROWSER TEMP MEDIA
   ===================================================== */

.fq-temp-media-permanent-help {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.45;
}

.fq-temp-media-box {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin: 5px 0 12px;
    padding: 15px;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 25%,
            var(--line)
        );
    border-radius: 14px;
    background:
        color-mix(
            in srgb,
            var(--primary) 4%,
            var(--surface)
        );
    box-sizing: border-box;
}

.fq-temp-media-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.fq-temp-media-heading
> div > span {
    display: block;
    margin-bottom: 2px;
    color: var(--primary);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .07em;
}

.fq-temp-media-heading strong {
    display: block;
    font-size: .98rem;
}

.fq-temp-media-private {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: .7rem;
    font-weight: 850;
}

.fq-temp-media-notice {
    margin-bottom: 12px;
    padding: 11px 12px;
    border: 1px solid #bbf7d0;
    border-radius: 11px;
    background: #f0fdf4;
    color: #166534;
}

.fq-temp-media-notice strong {
    display: block;
    font-size: .84rem;
}

.fq-temp-media-notice p {
    margin: 4px 0 0;
    font-size: .78rem;
    line-height: 1.5;
}

.fq-temp-media-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 9px 12px;
    border:
        1px dashed
        color-mix(
            in srgb,
            var(--primary) 55%,
            var(--line)
        );
    border-radius: 11px;
    background: var(--surface);
    color: var(--primary);
    font-size: .86rem;
    font-weight: 850;
    cursor: pointer;
}

.fq-temp-media-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.fq-temp-media-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
}

.fq-temp-media-selected[hidden] {
    display: none !important;
}

.fq-temp-media-selected div {
    min-width: 0;
}

.fq-temp-media-selected strong {
    display: block;
    overflow: hidden;
    font-size: .84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fq-temp-media-selected small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .73rem;
    overflow-wrap: anywhere;
}

.fq-temp-media-selected button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: .74rem;
    font-weight: 800;
    cursor: pointer;
}

.fq-temp-media-preview {
    margin-top: 11px;
}

.fq-temp-media-preview[hidden] {
    display: none !important;
}

.fq-temp-media-preview video {
    display: block;
    width: 100%;
    max-height: 390px;
    border-radius: 12px;
    background: #000;
}

.fq-temp-media-preview audio {
    display: block;
    width: 100%;
}

.fq-temp-document-preview {
    display: grid;
    grid-template-columns:
        52px
        minmax(0, 1fr)
        auto;
    gap: 11px;
    align-items: center;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
}

.fq-temp-document-preview
> span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 52px;
    border-radius: 9px;
    background:
        color-mix(
            in srgb,
            var(--primary) 9%,
            var(--surface)
        );
    color: var(--primary);
    font-size: .72rem;
    font-weight: 900;
}

.fq-temp-document-preview strong {
    display: block;
    overflow: hidden;
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fq-temp-document-preview small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: .72rem;
}

.fq-temp-document-preview a {
    color: var(--primary);
    font-size: .75rem;
    font-weight: 850;
    text-decoration: none;
}

.fq-temp-media-publish-warning {
    margin-top: 11px;
    padding: 10px 11px;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.45;
}

.fq-temp-media-publish-warning[hidden] {
    display: none !important;
}

@media (max-width: 620px) {
    .fq-temp-media-heading {
        align-items: flex-start;
    }

    .fq-temp-document-preview {
        grid-template-columns:
            48px
            minmax(0, 1fr);
    }

    .fq-temp-document-preview a {
        grid-column: 2;
    }
}

/* =====================================================
   PHASE 3G — CODE READERS
   ===================================================== */

.fq-reader-page {
    padding-top: 30px;
}

.fq-reader-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 24px;
    color: var(--muted);
    font-size: .85rem;
}

.fq-reader-breadcrumb a {
    color: var(--primary);
    text-decoration: none;
}

.fq-reader-hero {
    max-width: 850px;
    margin-bottom: 24px;
}

.fq-reader-hero h1 {
    margin: 12px 0 10px;
    font-size: clamp(2.3rem, 6vw, 4.6rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.fq-reader-hero > p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.65;
}

.fq-reader-privacy {
    display: flex;
    gap: 10px;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid #bbf7d0;
    border-radius: 11px;
    background: #f0fdf4;
    color: #166534;
    font-size: .82rem;
}

.fq-reader-privacy strong {
    flex: 0 0 auto;
}

.fq-reader-workspace {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.fq-reader-card,
.fq-reader-result,
.fq-reader-content {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.fq-reader-card {
    min-width: 0;
    padding: 19px;
}

.fq-reader-card-heading {
    margin-bottom: 14px;
}

.fq-reader-card-heading > span,
.fq-reader-result-top > div > span {
    display: block;
    margin-bottom: 4px;
    color: var(--primary);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.fq-reader-card-heading h2,
.fq-reader-result-top h2 {
    margin: 0;
    font-size: 1.18rem;
}

.fq-reader-card-heading p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.5;
}

.fq-reader-drop {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 24px;
    border: 2px dashed
        color-mix(
            in srgb,
            var(--primary) 40%,
            var(--line)
        );
    border-radius: 14px;
    background:
        color-mix(
            in srgb,
            var(--primary) 4%,
            var(--surface)
        );
    text-align: center;
    cursor: pointer;
    transition:
        border-color .15s ease,
        background .15s ease;
}

.fq-reader-drop.is-dragging {
    border-color: var(--primary);
    background:
        color-mix(
            in srgb,
            var(--primary) 9%,
            var(--surface)
        );
}

.fq-reader-drop input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.fq-reader-upload-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: var(--primary);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
}

.fq-reader-drop strong {
    font-size: 1rem;
}

.fq-reader-drop small {
    margin-top: 5px;
    color: var(--muted);
    font-size: .78rem;
}

.fq-reader-image {
    display: block;
    width: 100%;
    max-height: 420px;
    margin-top: 14px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
}

.fq-reader-image[hidden] {
    display: none !important;
}

.fq-reader-camera-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.fq-reader-camera {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    border-radius: 14px;
    background: #050505;
}

.fq-reader-camera[hidden] {
    display: none !important;
}

.fq-reader-camera video {
    display: block;
    width: 100%;
    min-height: 260px;
    max-height: 430px;
    object-fit: cover;
}

.fq-reader-scan-guide {
    position: absolute;
    inset: 12%;
    pointer-events: none;
    border: 2px solid rgba(255,255,255,.8);
    border-radius: 18px;
}

.fq-reader-scan-guide span {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 2px;
    background: #22c55e;
    box-shadow:
        0 0 12px rgba(34,197,94,.9);
}

.fq-reader-status {
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--muted);
    font-size: .85rem;
}

.fq-reader-status[data-level="working"] {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.fq-reader-status[data-level="good"] {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.fq-reader-status[data-level="bad"] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.fq-reader-result {
    margin-top: 16px;
    padding: 20px;
}

.fq-reader-result[hidden] {
    display: none !important;
}

.fq-reader-result-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.fq-reader-result-meta {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.fq-reader-result-meta div {
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background:
        color-mix(
            in srgb,
            var(--bg) 55%,
            var(--surface)
        );
}

.fq-reader-result-meta span {
    display: block;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.fq-reader-result-meta strong {
    display: block;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.fq-reader-result-text {
    max-height: 330px;
    margin: 14px 0;
    padding: 15px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #0f172a;
    color: #e2e8f0;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
    font-size: .84rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.fq-reader-content {
    margin-top: 28px;
    padding: clamp(20px, 4vw, 38px);
}

.fq-reader-content h2 {
    margin: 30px 0 9px;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.fq-reader-content h2:first-child {
    margin-top: 0;
}

.fq-reader-content > p {
    max-width: 850px;
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.7;
}

.fq-reader-faq {
    display: grid;
    gap: 9px;
    margin-top: 13px;
}

.fq-reader-faq details {
    border: 1px solid var(--line);
    border-radius: 11px;
    background:
        color-mix(
            in srgb,
            var(--bg) 45%,
            var(--surface)
        );
}

.fq-reader-faq summary {
    padding: 13px 14px;
    font-weight: 800;
    cursor: pointer;
}

.fq-reader-faq p {
    margin: 0;
    padding: 0 14px 14px;
    color: var(--muted);
    line-height: 1.6;
}

.fq-reader-related {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.fq-reader-related > strong {
    display: block;
    margin-bottom: 9px;
}

.fq-reader-related > div {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.fq-reader-related a {
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--primary);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 800;
}

.fq-reader-home-tools {
    padding-top: 12px;
}

.fq-reader-home-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 760px) {
    .fq-reader-workspace,
    .fq-reader-home-grid {
        grid-template-columns: 1fr;
    }

    .fq-reader-privacy {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .fq-reader-result-meta {
        grid-template-columns: 1fr;
    }

    .fq-reader-card,
    .fq-reader-result {
        padding: 15px;
    }
}

/* =====================================================
   PHASE 3G-BG — BARCODE GENERATOR
   ===================================================== */

.fq-barcode-generator-page {
    padding-top: 30px;
}

.fq-barcode-generator-hero {
    max-width: 850px;
    margin-bottom: 25px;
}

.fq-barcode-generator-hero h1 {
    margin: 12px 0 10px;
    font-size: clamp(2.3rem, 6vw, 4.6rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.fq-barcode-generator-hero > p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.65;
}

.fq-barcode-generator-grid {
    display: grid;
    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);
    gap: 17px;
    align-items: start;
}

.fq-barcode-generator-panel,
.fq-barcode-preview-panel {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.fq-barcode-preview-panel {
    position: sticky;
    top: 92px;
}

.fq-barcode-form {
    display: grid;
    gap: 14px;
}

.fq-barcode-form label,
.fq-barcode-color-row label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.fq-barcode-form label > span,
.fq-barcode-color-row label > span {
    font-size: .84rem;
    font-weight: 800;
}

.fq-barcode-form label > small {
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.45;
}

.fq-barcode-form input[type="text"],
.fq-barcode-form input[type="number"],
.fq-barcode-form select {
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    box-sizing: border-box;
}

.fq-barcode-form-row {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0,1fr));
    gap: 10px;
}

.fq-barcode-color-row {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0,1fr));
    gap: 10px;
}

.fq-barcode-color-row input {
    width: 100%;
    min-height: 46px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.fq-barcode-checkbox {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px !important;
}

.fq-barcode-checkbox input {
    width: 17px;
    height: 17px;
}

.fq-barcode-preview {
    display: grid;
    place-items: center;
    min-height: 280px;
    padding: 24px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #ffffff;
}

.fq-barcode-preview svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.fq-barcode-value-box {
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background:
        color-mix(
            in srgb,
            var(--bg) 50%,
            var(--surface)
        );
}

.fq-barcode-value-box span {
    display: block;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.fq-barcode-value-box strong {
    display: block;
    margin-top: 3px;
    overflow-wrap: anywhere;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
}

.fq-barcode-actions {
    margin-top: 12px;
}

.fq-barcode-reader-link {
    display: block;
    margin-top: 14px;
    color: var(--primary);
    font-size: .84rem;
    font-weight: 850;
    text-decoration: none;
}

@media (max-width: 850px) {
    .fq-barcode-generator-grid {
        grid-template-columns: 1fr;
    }

    .fq-barcode-preview-panel {
        position: static;
    }
}

@media (max-width: 560px) {
    .fq-barcode-form-row,
    .fq-barcode-color-row {
        grid-template-columns: 1fr;
    }

    .fq-barcode-generator-panel,
    .fq-barcode-preview-panel {
        padding: 15px;
    }

    .fq-barcode-preview {
        min-height: 220px;
        padding: 14px;
    }
}

/* =====================================================
   PHASE 3H — DEDICATED INITIALIZATION FLASH GATE

   Dedicated routes briefly contain generic/default
   preview markup before qr-studio initializes the
   route-specific builder.

   Keep the editor content and preview visually hidden
   for that very short initialization window, then reveal
   after data-fq-ready="1" is set by qr-studio.js.
   ===================================================== */

[data-qr-studio][data-dedicated-qr-page="1"]:not([data-fq-ready="1"])
[data-qr-content-section],

[data-qr-studio][data-dedicated-qr-page="1"]:not([data-fq-ready="1"])
.qr-preview-card {
    visibility: hidden !important;
}

/*
 * Once initialized, force normal visibility.
 */

[data-qr-studio][data-dedicated-qr-page="1"][data-fq-ready="1"]
[data-qr-content-section],

[data-qr-studio][data-dedicated-qr-page="1"][data-fq-ready="1"]
.qr-preview-card {
    visibility: visible;
}


/* =====================================================
   PHASE 3H — PREMIUM STRUCTURED PREVIEW UI
   ===================================================== */

.fq-phase3h-preview {
    --fq-p3h-accent: #246bfd;
    --fq-p3h-soft: rgba(36, 107, 253, .10);

    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 18px 15px;

    color: var(--text);
}

.fq-phase3h-preview--bitcoin {
    --fq-p3h-accent: #f59e0b;
    --fq-p3h-soft: rgba(245, 158, 11, .12);
}

.fq-phase3h-preview--upi {
    --fq-p3h-accent: #6d5dfc;
    --fq-p3h-soft: rgba(109, 93, 252, .10);
}

.fq-phase3h-preview--sepa {
    --fq-p3h-accent: #0f9f8f;
    --fq-p3h-soft: rgba(15, 159, 143, .10);
}

.fq-phase3h-preview--totp {
    --fq-p3h-accent: #7c3aed;
    --fq-p3h-soft: rgba(124, 58, 237, .10);
}

.fq-phase3h-preview--mecard {
    --fq-p3h-accent: #246bfd;
    --fq-p3h-soft: rgba(36, 107, 253, .10);
}

.fq-p3h-top {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;

    padding-bottom: 15px;
    border-bottom: 1px solid var(--line);
}

.fq-p3h-icon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: var(--fq-p3h-soft);
    color: var(--fq-p3h-accent);

    font-size: 1.35rem;
    font-weight: 900;
}

.fq-p3h-kicker {
    display: block;

    margin-bottom: 3px;

    color: var(--muted);

    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.fq-p3h-title {
    display: block;

    min-width: 0;

    font-size: .92rem;
    line-height: 1.2;

    overflow-wrap: anywhere;
}

.fq-p3h-live {
    align-self: start;

    padding: 5px 7px;

    border-radius: 999px;

    background: var(--fq-p3h-soft);
    color: var(--fq-p3h-accent);

    font-size: .54rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.fq-p3h-amount {
    margin: 20px 0 18px;

    color: var(--text);

    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1.05;

    overflow-wrap: anywhere;
}

.fq-p3h-info {
    display: grid;
    gap: 8px;
}

.fq-p3h-row {
    display: grid;
    gap: 3px;

    padding: 10px 11px;

    border: 1px solid var(--line);
    border-radius: 11px;

    background:
        color-mix(
            in srgb,
            var(--surface) 94%,
            var(--fq-p3h-accent)
        );
}

.fq-p3h-row span,
.fq-p3h-contact-list span,
.fq-p3h-secret span {
    color: var(--muted);

    font-size: .62rem;
    font-weight: 800;
}

.fq-p3h-row b {
    font-size: .72rem;
    line-height: 1.35;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.fq-p3h-footer {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-top: 15px;

    color: var(--muted);

    font-size: .64rem;
    font-weight: 700;
}

.fq-p3h-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--fq-p3h-accent);
    box-shadow:
        0 0 0 4px var(--fq-p3h-soft);
}


/* TOTP */

.fq-p3h-account {
    margin: 18px 0 12px;

    font-size: .84rem;
    font-weight: 800;

    overflow-wrap: anywhere;
}

.fq-p3h-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fq-p3h-chips span {
    padding: 6px 8px;

    border: 1px solid var(--line);
    border-radius: 999px;

    background: var(--fq-p3h-soft);
    color: var(--text);

    font-size: .61rem;
    font-weight: 800;
}

.fq-p3h-secret {
    display: grid;
    gap: 7px;

    margin-top: 14px;
    padding: 12px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background:
        color-mix(
            in srgb,
            var(--surface) 93%,
            var(--fq-p3h-accent)
        );
}

.fq-p3h-secret div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.fq-p3h-secret b {
    font-size: .72rem;
    letter-spacing: .08em;
}

.fq-p3h-secret small {
    color: var(--muted);

    font-size: .61rem;
    line-height: 1.4;
}


/* MECARD */

.fq-p3h-contact-head {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 11px;
    align-items: center;

    padding-bottom: 15px;
    border-bottom: 1px solid var(--line);
}

.fq-p3h-avatar {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            var(--fq-p3h-accent),
            color-mix(
                in srgb,
                var(--fq-p3h-accent) 65%,
                #8b5cf6
            )
        );

    color: white;

    font-size: 1.3rem;
    font-weight: 900;
}

.fq-p3h-contact-head small {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: .66rem;
}

.fq-p3h-contact-list {
    display: grid;
    gap: 8px;

    margin-top: 14px;
}

.fq-p3h-contact-list > div {
    display: grid;
    gap: 3px;

    padding: 10px 11px;

    border: 1px solid var(--line);
    border-radius: 11px;
}

.fq-p3h-contact-list b {
    font-size: .72rem;
    line-height: 1.35;

    overflow-wrap: anywhere;
}

.fq-p3h-contact-button {
    margin-top: 14px;

    padding: 10px 12px;

    border-radius: 11px;

    background: var(--fq-p3h-accent);
    color: white;

    text-align: center;

    font-size: .7rem;
    font-weight: 900;
}


/*
 * Keep structured preview comfortably inside
 * the simulated phone screen.
 */

#qr-phone-preview-body
.fq-phase3h-preview {
    max-width: 100%;
}


/* =====================================================
   PHASE 3I — PROJECTS + FOLDERS UI
   ===================================================== */

.fq-library-layout {
    display: grid;
    grid-template-columns:
        minmax(210px, 250px)
        minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.fq-folder-panel {
    position: sticky;
    top: 92px;

    min-width: 0;

    padding: 16px;

    border: 1px solid var(--line);
    border-radius: 18px;

    background: var(--surface);
    box-shadow: var(--shadow);
}

.fq-folder-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.fq-folder-panel-head h2 {
    margin: 3px 0 0;

    font-size: .95rem;
}

.fq-folder-add {
    flex: 0 0 auto;

    min-height: 36px;
    padding: 7px 10px;

    border: 1px solid
        color-mix(
            in srgb,
            var(--primary) 35%,
            var(--line)
        );
    border-radius: 10px;

    background:
        color-mix(
            in srgb,
            var(--surface) 91%,
            var(--primary)
        );

    color: var(--primary);

    font-size: .72rem;
    font-weight: 900;

    cursor: pointer;
}

.fq-folder-help {
    margin: 12px 0 14px;

    color: var(--muted);

    font-size: .69rem;
    line-height: 1.45;
}

.fq-folder-list,
.fq-folder-system,
.fq-folder-custom {
    display: grid;
    gap: 7px;
}

.fq-folder-custom {
    margin-top: 11px;
    padding-top: 11px;

    border-top: 1px solid var(--line);
}

.fq-folder-filter {
    width: 100%;
    min-width: 0;

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

    padding: 9px 10px;

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

    background: transparent;
    color: var(--text);

    text-align: left;

    cursor: pointer;
}

.fq-folder-filter:hover {
    border-color: var(--line);
    background:
        color-mix(
            in srgb,
            var(--surface) 94%,
            var(--primary)
        );
}

.fq-folder-filter.active {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 34%,
            var(--line)
        );

    background:
        color-mix(
            in srgb,
            var(--surface) 88%,
            var(--primary)
        );

    color: var(--primary);
}

.fq-folder-filter span {
    min-width: 0;

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

    font-size: .77rem;
    font-weight: 800;
}

.fq-folder-filter b {
    min-width: 25px;
    padding: 3px 6px;

    border-radius: 999px;

    background: var(--bg);
    color: var(--muted);

    font-size: .63rem;
    text-align: center;
}

.fq-folder-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    gap: 4px;
    align-items: center;
}

.fq-folder-row-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.fq-folder-row-actions button {
    padding: 5px 6px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: var(--muted);

    font-size: .58rem;
    font-weight: 800;

    cursor: pointer;
}

.fq-folder-row-actions button:hover {
    background: var(--bg);
    color: var(--text);
}

.fq-folder-row-actions button.danger {
    font-size: .9rem;
}

.fq-folder-row-actions button.danger:hover {
    color: #dc2626;
}

.fq-folder-none {
    padding: 10px;

    color: var(--muted);

    font-size: .67rem;
    line-height: 1.4;
}

.fq-library-content {
    min-width: 0;
}

.fq-library-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 16px;
    padding: 14px 15px;

    border: 1px solid var(--line);
    border-radius: 16px;

    background: var(--surface);
}

.fq-library-search {
    width: min(100%, 430px);

    display: grid;
    gap: 6px;
}

.fq-library-search span {
    color: var(--muted);

    font-size: .67rem;
    font-weight: 800;
}

.fq-library-search input {
    width: 100%;
    min-height: 42px;

    padding: 9px 11px;

    border: 1px solid var(--line);
    border-radius: 10px;

    background: var(--bg);
    color: var(--text);

    font: inherit;
}

.fq-library-search input:focus {
    outline: 2px solid
        color-mix(
            in srgb,
            var(--primary) 28%,
            transparent
        );

    border-color: var(--primary);
}

.fq-library-summary {
    flex: 0 0 auto;

    padding: 7px 10px;

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--surface) 90%,
            var(--primary)
        );

    color: var(--primary);

    font-size: .69rem;
    font-weight: 900;
}

.fq-manager-filter-empty {
    margin-bottom: 16px;
    padding: 26px 20px;

    border: 1px dashed var(--line);
    border-radius: 16px;

    background: var(--surface);

    text-align: center;
}

.fq-manager-filter-empty[hidden] {
    display: none !important;
}

.fq-manager-filter-empty strong {
    display: block;

    margin-bottom: 5px;

    font-size: .9rem;
}

.fq-manager-filter-empty p {
    margin: 0;

    color: var(--muted);

    font-size: .73rem;
}

.fq-manager-folder-control {
    display: grid;
    gap: 6px;

    margin-top: 13px;
    padding-top: 12px;

    border-top: 1px solid var(--line);
}

.fq-manager-folder-control > span {
    color: var(--muted);

    font-size: .65rem;
    font-weight: 800;
}

.fq-manager-folder-control select {
    width: 100%;
    min-height: 38px;

    padding: 7px 10px;

    border: 1px solid var(--line);
    border-radius: 9px;

    background: var(--bg);
    color: var(--text);

    font: inherit;
    font-size: .72rem;
}

.fq-manager-folder-control select:focus {
    outline: 2px solid
        color-mix(
            in srgb,
            var(--primary) 25%,
            transparent
        );

    border-color: var(--primary);
}

@media (max-width: 900px) {
    .fq-library-layout {
        grid-template-columns: 1fr;
    }

    .fq-folder-panel {
        position: static;
    }

    .fq-folder-system {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .fq-folder-custom {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 620px) {
    .fq-library-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .fq-library-search {
        width: 100%;
    }

    .fq-library-summary {
        align-self: flex-start;
    }

    .fq-folder-custom {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   PHASE 3L — SHARE + INTEGRATIONS UI
   ===================================================== */

.fq-share-hub {
    margin-top: 12px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: var(--surface);

    overflow: hidden;
}

.fq-share-hub > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 13px 14px;

    cursor: pointer;
    list-style: none;
}

.fq-share-hub > summary::-webkit-details-marker {
    display: none;
}

.fq-share-hub > summary span {
    min-width: 0;

    display: grid;
    gap: 2px;
}

.fq-share-hub > summary strong {
    font-size: .8rem;
}

.fq-share-hub > summary small {
    color: var(--muted);

    font-size: .65rem;
    line-height: 1.35;
}

.fq-share-hub > summary > b {
    width: 26px;
    height: 26px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background:
        color-mix(
            in srgb,
            var(--surface) 89%,
            var(--primary)
        );

    color: var(--primary);

    font-size: 1rem;
}

.fq-share-body {
    display: grid;
    gap: 14px;

    padding: 0 14px 14px;
}

.fq-share-section {
    padding: 13px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background:
        color-mix(
            in srgb,
            var(--surface) 97%,
            var(--primary)
        );
}

.fq-share-section h3 {
    margin: 0;

    font-size: .78rem;
}

.fq-share-section > p {
    margin: 5px 0 11px;

    color: var(--muted);

    font-size: .65rem;
    line-height: 1.45;
}

.fq-share-buttons {
    display: grid;

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

    gap: 7px;
}

.fq-share-buttons button,
.fq-utm-actions button {
    min-height: 37px;

    padding: 7px 9px;

    border: 1px solid var(--line);
    border-radius: 9px;

    background: var(--surface);
    color: var(--text);

    font: inherit;
    font-size: .67rem;
    font-weight: 800;

    cursor: pointer;
}

.fq-share-buttons button:hover,
.fq-utm-actions button:hover {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 45%,
            var(--line)
        );
}

.fq-share-buttons button.primary,
.fq-utm-actions button.primary {
    border-color: var(--primary);

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

.fq-share-buttons button:disabled,
.fq-utm-actions button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.fq-utm-grid {
    display: grid;

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

    gap: 8px;
}

.fq-utm-field {
    min-width: 0;

    display: grid;
    gap: 5px;
}

.fq-utm-field span {
    color: var(--muted);

    font-size: .61rem;
    font-weight: 800;
}

.fq-utm-field input {
    width: 100%;
    min-width: 0;
    min-height: 37px;

    box-sizing: border-box;

    padding: 7px 9px;

    border: 1px solid var(--line);
    border-radius: 8px;

    background: var(--bg);
    color: var(--text);

    font: inherit;
    font-size: .68rem;
}

.fq-utm-field input:focus {
    outline: 2px solid
        color-mix(
            in srgb,
            var(--primary) 25%,
            transparent
        );

    border-color: var(--primary);
}

.fq-utm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 10px;
}

.fq-share-status {
    min-height: 16px;

    color: var(--muted);

    font-size: .64rem;
    font-weight: 700;
}

.fq-share-status[data-state="success"] {
    color: #15803d;
}

.fq-share-status[data-state="error"] {
    color: #dc2626;
}

@media (max-width: 540px) {
    .fq-share-buttons,
    .fq-utm-grid {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   PHASE 3P — KOFI SUPPORT UI
   ===================================================== */

.fq-kofi-support {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 80;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    max-width: calc(100vw - 28px);

    padding: 10px 13px;

    border: 1px solid var(--line);
    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--surface) 94%,
            var(--primary)
        );

    color: var(--text);

    box-shadow:
        0 12px 34px
        rgba(0, 0, 0, .16);

    text-decoration: none;

    backdrop-filter: blur(12px);

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

.fq-kofi-support:hover {
    transform: translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--primary) 48%,
            var(--line)
        );

    box-shadow:
        0 16px 38px
        rgba(0, 0, 0, .2);
}

.fq-kofi-icon {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--primary);
    color: #fff;

    font-size: .93rem;
}

.fq-kofi-copy {
    display: grid;
    gap: 1px;

    min-width: 0;
}

.fq-kofi-copy strong {
    font-size: .72rem;
    line-height: 1.15;
}

.fq-kofi-copy small {
    color: var(--muted);

    font-size: .58rem;
    line-height: 1.15;
}

@media (max-width: 520px) {
    .fq-kofi-support {
        right: 12px;
        bottom: 12px;

        padding: 8px 10px;
    }

    .fq-kofi-icon {
        width: 29px;
        height: 29px;
    }

    .fq-kofi-copy strong {
        font-size: .67rem;
    }

    .fq-kofi-copy small {
        font-size: .55rem;
    }
}



/* =====================================================
   FINAL LAUNCH — SEO SUPPORT
   ===================================================== */

.fq-seo-support {
    padding-top: 18px;
}

.fq-seo-answer,
.fq-seo-card,
.fq-seo-faq details {
    border: 1px solid var(--line, rgba(128,128,160,.25));
    border-radius: 16px;
    background: var(--surface, rgba(20,20,43,.55));
}

.fq-seo-answer {
    padding: clamp(20px, 4vw, 34px);
    margin-bottom: 18px;
}

.fq-seo-answer h2,
.fq-seo-card h2,
.fq-seo-faq h2,
.fq-seo-related h2 {
    margin-top: 0;
}

.fq-seo-answer p,
.fq-seo-card p,
.fq-seo-card li,
.fq-seo-faq p {
    font-size: 1rem;
    line-height: 1.7;
}

.fq-seo-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.fq-seo-card {
    padding: 20px;
}

.fq-seo-card ol {
    margin: 0;
    padding-left: 22px;
}

.fq-seo-card li + li {
    margin-top: 8px;
}

.fq-seo-tip {
    margin-bottom: 0;
}

.fq-seo-faq {
    margin-top: 28px;
}

.fq-seo-faq-grid {
    display: grid;
    gap: 10px;
}

.fq-seo-faq details {
    padding: 15px 17px;
}

.fq-seo-faq summary {
    cursor: pointer;
    font-weight: 800;
}

.fq-seo-faq details p {
    margin-bottom: 0;
}

.fq-seo-related {
    margin-top: 28px;
}

.fq-seo-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fq-seo-related-links a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 8px 13px;
    border: 1px solid var(--line, rgba(128,128,160,.25));
    border-radius: 999px;
    text-decoration: none;
}

:focus-visible {
    outline: 3px solid var(--primary, #6c63ff);
    outline-offset: 3px;
}

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

@media (max-width: 760px) {
    .fq-seo-grid {
        grid-template-columns: 1fr;
    }
}



/* =====================================================
   POST-LAUNCH — DYNAMIC PREVIEW POLISH
   Clean production UI + independently scrollable preview
   ===================================================== */

/*
 * Preview panel
 */

.qr-preview-card {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--line) 78%,
            var(--primary)
        );

    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--surface) 97%,
                var(--primary)
            ),
            var(--surface)
        );

    box-shadow:
        0 18px 55px
        rgba(15, 23, 42, .08);
}


/*
 * Desktop:
 * keep the preview beside the builder but let
 * the preview itself scroll instead of making
 * the entire page extremely tall.
 */

@media (min-width: 901px) {

    .qr-workspace {
        align-items: start;
    }

    .qr-preview-card {
        position: sticky !important;

        top: 88px !important;

        max-height:
            calc(100vh - 104px) !important;

        max-height:
            calc(100dvh - 104px) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain;

        scrollbar-gutter: stable;
        scrollbar-width: thin;

        scrollbar-color:
            color-mix(
                in srgb,
                var(--primary) 48%,
                transparent
            )
            transparent;
    }

    .qr-preview-card::-webkit-scrollbar {
        width: 7px;
    }

    .qr-preview-card::-webkit-scrollbar-track {
        background: transparent;
    }

    .qr-preview-card::-webkit-scrollbar-thumb {
        border-radius: 999px;

        background:
            color-mix(
                in srgb,
                var(--primary) 45%,
                transparent
            );
    }
}


/*
 * Mobile should behave as a normal page.
 */

@media (max-width: 900px) {

    .qr-preview-card {
        position: static !important;

        top: auto !important;

        max-height: none !important;

        overflow: visible !important;
    }
}


/*
 * Preview heading
 */

.qr-preview-header {
    margin-bottom: 10px;
}

.qr-preview-header h2 {
    font-size: 1rem;
    letter-spacing: -.02em;
}


/*
 * Preview tabs
 */

.qr-preview-tabs {
    gap: 4px;

    padding: 4px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--line) 86%,
            transparent
        );

    border-radius: 14px;

    background:
        color-mix(
            in srgb,
            var(--bg) 78%,
            var(--surface)
        );
}

.qr-preview-tab {
    min-height: 38px;

    border-radius: 10px !important;

    font-weight: 800;

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

.qr-preview-tab.active {
    box-shadow:
        0 7px 18px
        color-mix(
            in srgb,
            var(--primary) 22%,
            transparent
        );
}


/*
 * Content preview spacing
 */

.qr-content-preview {
    margin: 18px auto 20px;
    padding: 2px 3px 5px;
}


/*
 * Premium phone shell
 */

.fq-phone {
    width: min(100%, 318px) !important;

    height: min(610px, 68vh);

    min-height: 520px !important;

    display: flex;
    flex-direction: column;

    margin: 0 auto;

    overflow: hidden;

    border: 9px solid #111827 !important;

    border-radius: 44px !important;

    background: #ffffff;

    box-shadow:
        0 30px 70px rgba(15, 23, 42, .22),
        0 7px 22px rgba(15, 23, 42, .15),
        inset 0 0 0 1px rgba(255,255,255,.16);

    transform: translateZ(0);
}


/*
 * Phone top / dynamic island area
 */

.fq-phone-top {
    position: relative;

    flex: 0 0 31px;

    min-height: 31px;

    background: #111827;
}

.fq-phone-top span {
    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.06);
}


/*
 * The actual mobile page is now scrollable.
 */

.fq-phone-body {
    flex: 1 1 auto;

    min-height: 0;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain;

    scrollbar-width: none;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 44%,
            #f8fafc 100%
        );
}

.fq-phone-body::-webkit-scrollbar {
    display: none;
}


/*
 * Any page rendered inside the phone should
 * occupy the full phone screen.
 */

.fq-phone-body > div {
    min-height: 100%;
}


/*
 * Dynamic Event preview
 */

.fq-dynamic-event-page {
    position: relative;

    min-height: 100%;

    padding-bottom: 20px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 74%,
            #f8fafc 100%
        );

    color: #172033;
}


/*
 * Event hero becomes a real visual hero rather
 * than a plain purple rectangle.
 */

.fq-dynamic-event-page .fq-event-hero {
    position: relative;

    min-height: 164px;

    display: flex;
    align-items: flex-end;
    justify-content: flex-start;

    padding: 22px;

    overflow: hidden;

    border-radius:
        0 0 30px 30px;

    background:
        radial-gradient(
            circle at 82% 16%,
            rgba(255,255,255,.32),
            transparent 28%
        ),
        radial-gradient(
            circle at 18% 84%,
            rgba(59,130,246,.48),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #1d4ed8 0%,
            #6c63ff 48%,
            #7c3aed 100%
        );

    box-shadow:
        0 16px 32px
        rgba(79,70,229,.20);
}

.fq-dynamic-event-page .fq-event-hero::before {
    content: '';

    position: absolute;

    width: 150px;
    height: 150px;

    top: -74px;
    right: -54px;

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius: 50%;
}

.fq-dynamic-event-page .fq-event-hero::after {
    content: '';

    position: absolute;

    width: 95px;
    height: 95px;

    right: 25px;
    bottom: -57px;

    border:
        1px solid
        rgba(255,255,255,.20);

    border-radius: 50%;
}

.fq-dynamic-event-page .fq-event-hero span {
    position: relative;
    z-index: 2;

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

    min-height: 27px;

    padding: 5px 10px;

    border:
        1px solid
        rgba(255,255,255,.40);

    border-radius: 999px;

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

    color: #fff;

    font-size: .64rem;
    font-weight: 900;

    letter-spacing: .12em;

    backdrop-filter: blur(9px);
}


/*
 * Event title
 */

.fq-dynamic-event-page > h3 {
    margin:
        22px 20px 5px !important;

    color: #111827;

    font-size: 1.45rem !important;
    font-weight: 900;

    letter-spacing: -.035em;
    line-height: 1.12;
}


/*
 * Event date
 */

.fq-dynamic-event-page > strong {
    display: inline-flex;

    margin:
        4px 20px 14px;

    padding: 7px 10px;

    border-radius: 9px;

    background: #eef2ff;

    color: #4338ca;

    font-size: .72rem;

    line-height: 1.3;
}


/*
 * Event information cards
 */

.fq-dynamic-event-page .fq-page-list {
    display: grid;

    gap: 7px;

    margin:
        3px 16px 15px;

    padding: 8px;

    border:
        1px solid
        #e5e7eb;

    border-radius: 17px;

    background: #f8fafc;
}

.fq-dynamic-event-page .fq-page-list > div {
    display: grid;

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

    align-items: center;

    gap: 9px;

    min-height: 44px;

    padding: 6px 8px;

    border-radius: 11px;

    background: #ffffff;
}

.fq-dynamic-event-page .fq-page-list span {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #eef2ff;

    font-size: .84rem;
}

.fq-dynamic-event-page .fq-page-list b {
    color: #334155;

    font-size: .73rem;
    font-weight: 750;

    overflow-wrap: anywhere;
}


/*
 * Event description
 */

.fq-dynamic-event-page > p {
    margin:
        16px 20px !important;

    color: #64748b;

    font-size: .78rem;
    line-height: 1.65;
}


/*
 * Event CTA
 */

.fq-dynamic-event-page > button {
    width:
        calc(100% - 40px) !important;

    min-height: 46px;

    margin:
        4px 20px 20px !important;

    border: 0 !important;

    border-radius:
        13px !important;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #6c63ff
        ) !important;

    color: #ffffff !important;

    font-size: .78rem;
    font-weight: 900;

    box-shadow:
        0 12px 24px
        rgba(37,99,235,.24);
}


/*
 * Give the other hosted page previews the same
 * clean premium canvas even before their own
 * type-specific artwork is expanded further.
 */

.fq-menu-page,
.fq-feedback-page,
.fq-gallery-page,
.fq-document-page,
.fq-landing-page,
.fq-business-page,
.fq-social-page,
.fq-links-page,
.fq-product-page,
.fq-booking-page,
.fq-review-page,
.fq-coupon-page {
    min-height: 100%;

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

    color: #172033;
}


/*
 * Dynamic publish area
 */

.qr-dynamic-notice {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 28%,
            var(--line)
        );

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--primary) 8%,
                var(--surface)
            ),
            var(--surface)
        );
}


/*
 * Stronger separation for utility sections inside
 * the long preview panel.
 */

.qr-preview-card .qr-downloads,
.qr-preview-card .qr-secondary-actions {
    gap: 8px;
}

.qr-preview-card .qr-payload,
.qr-preview-card .qr-pro-export {
    border-color:
        color-mix(
            in srgb,
            var(--line) 86%,
            var(--primary)
        );
}


/*
 * Mobile phone preview can be a little taller
 * because the entire page itself scrolls normally.
 */

@media (max-width: 520px) {

    .fq-phone {
        width: min(100%, 330px) !important;

        height: 590px;

        min-height: 500px !important;
    }
}