/* QR-specific layouts. Header, menu, typography, cards and footer inherit Calculator. */
:root {
    --color-primary: #c52b63;
    --color-primary-dark: #a11f4f;
    --color-primary-soft: #fff0f4;
    --color-electric: #c52b63;
    --color-electric-soft: #fff0f4;
    --color-raspberry: #c52b63}

html[data-theme=dark] {
    --color-primary: #fb92b7;
    --color-primary-dark: #ffc3da;
    --color-primary-soft: #302030;
    --color-electric: #fb92b7;
    --color-electric-soft: #302030;
    --color-raspberry: #fb92b7}

.qr-site .button.primary,.qr-site button.primary {
    background: #c52b63;
    border-color: #c52b63;
    color: #fff
}

.qr-site .button.primary:hover,.qr-site button.primary:hover {
    background: #a11f4f;
    border-color: #a11f4f
}

.qr-site .qr-main {
    padding-bottom: 12px
}

.qr-site .daily-page {
    max-width: var(--container)
}

.qr-site .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 9px;
    line-height: 1.6;
    overflow-wrap: anywhere
}

.qr-site .breadcrumb-divider {
    color: var(--color-muted)
}

.qr-site .daily-heading {
    max-width: 880px;
    margin-bottom: 36px
}

.qr-site .daily-heading h1 {
    max-width: 850px;
    text-wrap: balance
}

.qr-site .daily-heading .lead {
    max-width: 760px
}

.qr-site .qr-hero {
    padding-top: 52px;
    gap: 60px
}

.qr-site .qr-hero .hero-copy h1 {
    font-size: clamp(38px,4.7vw,60px)
}

.qr-hero-sample {
    justify-self: center;
    width: min(100%,360px);
    padding: 24px;
    border-radius: 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    box-shadow: 0 12px 0 -6px var(--color-border),0 20px 40px #0000000d;
    text-align: center
}

.qr-sample-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    letter-spacing: .12em;
    font-weight: 750;
    color: var(--color-muted);
    margin-bottom: 20px
}

.qr-hero-sample img {
    width: 100%;
    max-width: 230px;
    height: auto;
    border-radius: 12px;
    display: block;
    margin: auto
}

.qr-hero-sample p {
    font-weight: 650;
    font-size: 14px;
    margin: 18px 0
}

.qr-sample-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 10px;
    color: var(--color-muted)
}

.qr-sample-badges span {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 4px 8px;
    background: var(--color-background)
}

.workspace {
    display: grid;
    grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);
    gap: 24px;
    align-items: start;
    scroll-margin-top: 110px
}

.workspace .panel {
    padding: 30px;
    border: 1px solid var(--color-border);
    border-radius: 22px;
    background: var(--color-background);
    box-shadow: var(--shadow-panel);
    min-width: 0
}

.qr-site .panel h2 {
    font-size: 21px;
    margin: 0 0 22px
}

.qr-site .panel h3 {
    font-size: 17px;
    margin: 22px 0 12px
}

.step {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    font-size: 12px;
    margin-right: 9px
}

.workspace label {
    display: block;
    font-size: 13px;
    font-weight: 650;
    margin: 15px 0 8px
}

.workspace input:not([type=checkbox],[type=range]),.workspace select,.workspace textarea {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    border: 1px solid var(--color-border-strong);
    border-radius: 9px;
    background: var(--color-background);
    color: var(--color-text);
    font-size: 16px;
    padding: 12px
}

.workspace textarea {
    resize: vertical;
    min-height: 105px;
    line-height: 1.6
}

.workspace input[type=color] {
    height: 50px;
    padding: 6px !important
}

.workspace input[type=checkbox] {
    display: inline-block;
    width: 18px;
    height: 18px;
    min-height: 0;
    vertical-align: middle;
    margin: 0 8px 0 0;
    padding: 0;
    appearance: auto;
    accent-color: var(--color-primary)
}

.workspace input[type=range] {
    width: 100%;
    padding: 0;
    min-height: 30px;
    accent-color: var(--color-primary)
}

.fields,.two {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 18px
}

.fields>div:only-child,.wide {
    grid-column: 1/-1
}

.controls {
    border-top: 1px solid var(--color-border);
    margin-top: 24px;
    padding-top: 17px
}

.controls>summary {
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    min-height: 44px;
    padding: 9px 0
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 20px
}

.qr-site .workspace button.primary,.qr-site .workspace button.secondary,.qr-site .workspace .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 10px;
    border: 1px solid var(--color-border-strong);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer
}

.qr-site .workspace button.secondary {
    background: var(--color-background);
    color: var(--color-text)
}

.qr-site .workspace button.primary {
    border-color: #c52b63
}

.qr-site .workspace button:disabled {
    cursor: not-allowed;
    opacity: .5
}

.qr-site .example-button {
    min-height: 40px
}

.hint,.muted {
    font-size: 12px;
    line-height: 1.65;
    color: var(--color-muted)
}

.hint {
    overflow-wrap: anywhere
}

.status,.notice {
    background: var(--color-primary-soft);
    color: var(--color-text);
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.7;
    overflow-wrap: anywhere
}

.status:empty {
    display: none
}

.preview-panel {
    position: sticky;
    top: 100px
}

.preview-stage {
    background: repeating-conic-gradient(#efecee 0% 25%,#faf8f9 0% 50%) 50%/20px 20px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    min-height: 290px;
    padding: 22px;
    display: grid;
    place-items: center;
    color: #514a51;
    text-align: center;
    font-size: 14px
}

.preview-stage img,.preview-stage canvas {
    display: block;
    max-width: 100%;
    width: 280px;
    height: auto
}

.quality-list {
    font-size: 13px;
    line-height: 1.7;
    padding-left: 20px
}

.scanner-video {
    display: block;
    width: 100%;
    max-height: 340px;
    border-radius: 12px;
    background: #111;
    margin-top: 20px
}

.workspace pre {
    font-size: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 100%;
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px
}

.workspace canvas {
    max-width: 100%;
    height: auto
}

.workspace progress {
    width: 100%;
    margin-top: 20px;
    accent-color: var(--color-primary)
}

.full {
    grid-column: 1/-1
}

.output-link {
    overflow-wrap: anywhere
}

.preview-jump {
    display: none
}

.qr-resource-card>div,.qr-related .daily-tool-card>div {
    min-width: 0
}

.qr-card-meta,.qr-article-meta {
    display: block;
    font-size: 11px;
    color: var(--color-muted);
    margin-bottom: 12px
}

.qr-site .qr-catalog {
    padding-top: 20px
}

.qr-site .qr-resource-card h3,.qr-site .qr-related h3 {
    overflow-wrap: anywhere
}

.editorial {
    max-width: 800px;
    margin: 48px 0 0
}

.editorial:empty {
    display: none
}

.qr-site .editorial h2 {
    font-size: clamp(22px,2.5vw,29px);
    margin: 0 0 18px
}

.qr-prose-section {
    margin: 0 0 38px
}

.qr-site .editorial p,.qr-site .editorial li {
    font-size: 15px;
    line-height: 1.85;
    overflow-wrap: anywhere
}

.editorial figure {
    margin: 0 0 32px
}

.editorial figure img {
    width: 100%;
    height: auto
}

.editorial figcaption {
    font-size: 12px;
    color: var(--color-muted);
    margin-top: 10px
}

.qr-example {
    padding: 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px
}

.qr-example p:last-child {
    margin-bottom: 0
}

.qr-steps {
    padding-left: 24px
}

.qr-steps li {
    padding-left: 8px;
    margin: 12px 0
}

.qr-steps li::marker {
    color: var(--color-primary);
    font-weight: 750
}

.qr-sources {
    border-top: 1px solid var(--color-border);
    padding-top: 28px
}

.qr-sources ul {
    padding-left: 20px
}

.qr-site .editorial .table-scroll {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin: 0 0 36px;
    max-height: none
}

.qr-site .editorial td,.qr-site .editorial th {
    white-space: normal;
    min-width: 130px;
    vertical-align: top;
    line-height: 1.65;
    padding: 14px
}

.qr-site .editorial table {
    min-width: 480px
}

.qr-site .faq p {
    padding: 16px 18px;
    font-size: 14px
}

.qr-site .qr-related {
    border-top: 1px solid var(--color-border);
    margin-top: 36px
}

.qr-article-body h2,.qr-article-body h3 {
    margin-top: 36px !important
}

.qr-article-body blockquote {
    margin: 24px 0;
    padding: 4px 20px;
    border-left: 3px solid var(--color-primary);
    background: var(--color-surface)
}

.qr-article-body pre {
    overflow: auto;
    padding: 16px;
    background: var(--color-surface);
    border-radius: 10px;
    font-size: 13px
}

.qr-category-nav,.qr-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}

.qr-category-nav {
    margin: 24px 0
}

.qr-category-nav a,.qr-pagination a,.qr-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: var(--color-background);
    color: var(--color-text);
    font-size: 13px;
    text-decoration: none
}

.qr-category-nav [aria-current],.qr-pagination [aria-current] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
    font-weight: 700
}

.qr-pagination {
    justify-content: center;
    margin: 8px 0 40px
}

.qr-trademark {
    font-size: 10px !important;
    color: var(--color-muted);
    margin: 18px 0 0
}

.qr-site .footer-top .footer-brand>span {
    color: var(--color-text)
}

.qr-site .footer-top .footer-brand .brand-dot {
    color: var(--color-raspberry)
}

@media(max-width:900px) {
    .workspace {
        gap: 18px
    }

    .workspace .panel {
        padding: 22px
    }

    .qr-site .qr-hero {
        gap: 28px
    }

    .qr-site .qr-hero .hero-copy h1 {
        font-size: 44px
    }
}

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

    .preview-panel {
        position: static
    }

    .preview-jump {
        display: block;
        font-size: 13px;
        margin-bottom: 18px
    }

    #preview {
        scroll-margin-top: 100px
    }

    .qr-site .qr-hero {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .qr-hero-sample {
        display: none
    }

    .qr-site .qr-hero .hero-copy h1 {
        font-size: 42px
    }

    .qr-site .qr-hero {
        padding: 36px 0
    }

    .qr-site .qr-hero .hero-links {
        display: flex
    }

    .editorial {
        margin-top: 36px
    }
}

@media(max-width:420px) {
    .workspace .panel {
        padding: 18px
    }

    .fields,.two {
        grid-template-columns: 1fr
    }

    .qr-site .qr-hero .hero-copy h1 {
        font-size: 37px
    }

    .qr-site .brand-subtitle {
        font-size: 9px
    }

    .qr-site .brand-title {
        font-size: 23px
    }

    .qr-site .daily-heading h1 {
        font-size: 29px
    }

    .qr-site .panel h2 {
        font-size: 19px
    }

    .workspace .actions {
        gap: 8px
    }

    .qr-example {
        padding: 18px
    }

    .qr-site .calc-menu>nav {
        max-width: calc(100vw - 24px)
    }
}

@media print {

    .site-header,.site-footer,.privacy-trust-badge-root,.controls,button,.qr-hero {
        display: none !important
    }

    .workspace {
        display: block
    }

    .workspace .panel {
        box-shadow: none;
        border: 0
    }

    .preview-panel {
        position: static
    }
}

.qr-site .preview-stage,.qr-site .preview-stage .muted,.qr-site .preview-stage .hint {
    color: #514a51
}

@media(max-width:640px) {
    .qr-site .qr-trademark {
        padding-right: 58px;
        padding-bottom: 10px
    }
}

/* Preproduction: readable secondary text over the inherited light gradient. */
html:not([data-theme=dark]) .qr-site {
    --color-muted: #454545}

/* Keep the example action readable when hovered or keyboard-focused. */
.qr-site .example-button:hover,.qr-site .example-button:focus-visible {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-primary)
}

/* Shared generator UX. Calculator reference sheets remain byte-identical. */
.generator-workspace {
    grid-template-areas: "content preview" "customize preview";
    grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr)
}

.generator-workspace:has(.scanner-panel) {
    grid-template-areas: "scan preview" "content preview" "customize preview"
}

.editor-shell,#generator-form {
    display: contents
}

#generator-form[hidden] {
    display: none !important
}

.generator-content {
    grid-area: content
}

.personalization-panel {
    grid-area: customize
}

.scanner-panel {
    grid-area: scan
}

.generator-workspace .preview-panel {
    grid-area: preview
}

.personalization-panel summary,.payload-secondary>summary {
    cursor: pointer;
    min-height: 44px;
    padding: 8px 0;
    font-weight: 650;
    line-height: 1.6
}

.personalization-panel>details>summary {
    font-size: 17px
}

.payload-secondary {
    grid-column: 1/-1;
    border-top: 1px solid var(--color-border);
    margin-top: 16px
}

.payload-secondary .fields {
    padding-bottom: 12px
}

.field-error {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-primary);
    margin: 6px 0 0
}

.field-error:empty {
    display: none
}

.workspace [aria-invalid=true] {
    border: 2px solid var(--color-primary) !important
}

.workspace .example-button {
    background: transparent;
    color: var(--color-text);
    border: 1px solid transparent;
    padding: 8px;
    min-height: 44px;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px
}

.generator-workspace .status {
    margin: 0 0 16px
}

.generator-workspace .status[data-state=success] {
    border: 1px solid var(--color-primary)
}

.generator-workspace .preview-stage {
    min-height: 250px
}

.generator-workspace .preview-stage img {
    width: 260px
}

.preview-stage.is-stale {
    opacity: .5
}

.generator-workspace #content-help {
    margin: 10px 0
}

.generator-workspace #counter:empty {
    display: none
}

.generator-workspace #counter {
    margin-bottom: 0
}

.generator-workspace input:disabled,.generator-workspace select:disabled {
    opacity: .55;
    cursor: not-allowed
}

.generator-workspace [hidden] {
    display: none !important
}

.generator-workspace #payment-review {
    margin-top: 16px;
    overflow-wrap: anywhere
}

.generator-workspace #payment-review p {
    margin: 4px 0
}

.generator-workspace #quality details>summary {
    cursor: pointer;
    min-height: 44px;
    padding: 12px 0;
    font-size: 13px;
    font-weight: 650
}

.generator-workspace #quality .notice {
    padding: 10px 14px
}

.brand-title {
    white-space: normal
}

.qr-site .brand-title {
    font-size: clamp(17px,2.3vw,24px)
}

.qr-site .footer-brand>span {
    font-size: 23px
}

.qr-site .brand-calculator {
    flex-shrink: 0
}

.workspace :focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px
}

.qr-site .personalization-panel {
    padding-top: 18px;
    padding-bottom: 18px
}

@media(max-width:759px) {

    .generator-workspace,.generator-workspace:has(.scanner-panel) {
        grid-template-columns: minmax(0,1fr);
        grid-template-areas: "scan" "content" "preview" "customize";
        gap: 16px
    }

    .generator-workspace .preview-panel {
        position: static
    }

    .generator-workspace .preview-jump {
        display: inline-block;
        margin-top: 12px;
        min-height: 44px;
        font-size: 13px
    }

    .generator-workspace .preview-stage {
        min-height: 220px;
        padding: 16px
    }

    .generator-workspace .preview-stage img {
        width: 220px
    }

    .qr-site .brand-subtitle {
        font-size: 10px
    }

    .qr-site .brand-title {
        max-width: 180px
    }

    .qr-site .brand-calculator {
        width: 36px;
        height: 36px
    }
}

@media(max-width:374px) {
    .qr-site .brand-title {
        font-size: 17px;
        max-width: 145px
    }

    .qr-site .brand-subtitle {
        display: none
    }

    .generator-workspace .fields,.generator-workspace .two {
        grid-template-columns: minmax(0,1fr)
    }

    .download-actions button {
        width: 100%
    }
}

@media(prefers-reduced-motion:reduce) {
    .generator-workspace * {
        scroll-behavior: auto;
        transition: none;
        animation: none
    }
}

@media print {
    .brand-calculator {
        filter: grayscale(1)
    }

    .brand-title {
        color: #000
    }
}

/* Keep the first action and preview close on small screens. */
.generator-content #input-summary {
    display: none
}

@media(max-width:759px) {
    .generator-workspace .generator-content {
        padding-top: 20px;
        padding-bottom: 20px
    }

    .generator-workspace .generator-content h2 {
        margin-bottom: 10px
    }

    .generator-workspace .generator-content h3 {
        margin: 14px 0 8px
    }

    .generator-workspace .preview-jump {
        display: none
    }

    .generator-workspace .generator-content .actions {
        margin-top: 16px
    }

    .generator-workspace .generator-content #content-help {
        margin: 6px 0
    }
}

.qr-site .brand-title {
    overflow-wrap: anywhere
}

/* Electric-blue frosted header, becoming pale glass over scrolled content. */
body.qr-site .site-header {
    background:
        radial-gradient(ellipse 55% 130% at 52% 0%,rgba(131,209,255,.48),transparent 78%),
    linear-gradient(105deg,rgba(119,188,255,.95) 0%,rgba(48,148,255,.9) 48%,rgba(0,93,247,.92) 100%);
    border: 1.5px solid rgba(255,255,255,.84);
    box-shadow: 0 14px 34px rgba(0,43,149,.2),inset 0 1px 0 rgba(255,255,255,.65);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    transition: background-color .25s ease,box-shadow .25s ease,border-color .25s ease;
}

body.qr-site .site-header.is-scrolled {
    background:
        radial-gradient(ellipse 65% 130% at 50% 0%,rgba(99,176,255,.21),transparent 78%),
    linear-gradient(105deg,rgba(246,251,255,.91),rgba(224,239,255,.87) 65%,rgba(206,228,255,.88));
    border-color: rgba(255,255,255,.96);
    box-shadow: 0 14px 34px rgba(0,38,128,.18),inset 0 1px 0 rgba(255,255,255,.85);
}

html[data-theme=dark] body.qr-site .site-header {
    background: radial-gradient(ellipse 60% 140% at 56% 0%,rgba(58,147,255,.38),transparent 80%),linear-gradient(105deg,rgba(14,65,151,.94),rgba(0,91,224,.86) 55%,rgba(5,42,120,.94));
    border-color: rgba(125,180,255,.65);
    box-shadow: 0 14px 36px rgba(0,8,29,.38),inset 0 1px rgba(255,255,255,.16);
}

html[data-theme=dark] body.qr-site .site-header.is-scrolled {
    background: linear-gradient(105deg,rgba(31,62,110,.92),rgba(22,53,103,.9),rgba(15,43,93,.92));
}

@media(prefers-reduced-motion:reduce) {
    body.qr-site .site-header {
        transition: none
    }
}

/* QR Code Ninja: electric blue canvas and shared generator presentation. */
body.qr-site {
    --qr-electric-blue: #005cff;
    background-color: #005cff;
    background-image:
        radial-gradient(ellipse 50% 68% at 94% 8%,#1b63c4 0%,rgba(20,92,200,.82) 42%,transparent 86%),
    radial-gradient(ellipse 74% 73% at -13% 14%,#1954b5 0%,rgba(14,70,168,.76) 43%,transparent 88%),
    radial-gradient(ellipse 70% 88% at 108% 104%,#0028aa 0%,rgba(0,44,174,.86) 40%,transparent 86%),
    linear-gradient(145deg,#0759ec 0%,#005cff 55%,#003acb 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

html[data-theme=dark] body.qr-site {
    --qr-electric-blue: #4a91ff;
    background-color: #071b42;
    background-image:
        radial-gradient(ellipse 78% 70% at -10% -5%,rgba(31,76,155,.8) 0%,transparent 78%),
    radial-gradient(ellipse 70% 85% at 112% 58%,rgba(0,5,27,.86) 0%,transparent 82%),
    radial-gradient(ellipse 70% 68% at 27% 110%,rgba(24,67,141,.7) 0%,transparent 79%),
    linear-gradient(145deg,#0c2b68 0%,#071b42 47%,#030d25 100%);
}

.qr-site .breadcrumbs,.qr-site .breadcrumbs a,.qr-site .breadcrumb-divider,
.qr-site .daily-heading h1,.qr-site .daily-heading .lead,.qr-site .daily-heading .eyebrow,
.qr-site .qr-hero h1,.qr-site .qr-hero .hero-lead,.qr-site .qr-hero .eyebrow,
.qr-site .qr-hero .privacy-note,.qr-site .section-heading h2,.qr-site .section-heading .eyebrow,
.qr-site .section-heading .section-count {
    color: #fff
}

.qr-site .breadcrumbs a {
    text-decoration-color: rgba(255,255,255,.6)
}

.qr-site .daily-heading .lead,.qr-site .qr-hero .hero-lead {
    max-width: 760px;
    color: #edf4ff
}

.qr-site .qr-hero .electric-underline {
    text-decoration-color: #a8d1ff
}

.qr-site .qr-catalog,.qr-site .qr-related {
    border-color: rgba(255,255,255,.32)
}

.qr-site .editorial {
    max-width: 860px;
    padding: clamp(24px,4vw,48px);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    box-shadow: 0 16px 48px rgba(0,27,112,.2)
}

.qr-site .editorial:empty {
    display: none
}

.qr-site .qr-pagination {
    margin-top: 28px
}

.qr-site .generator-workspace {
    gap: 20px;
    grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr)
}

.qr-site .generator-workspace .panel {
    border: 1px solid rgba(9,75,194,.18);
    border-radius: 24px;
    box-shadow: 0 20px 48px rgba(0,27,112,.2),0 3px 10px rgba(0,27,112,.08)
}

.qr-site .generator-workspace .generator-content,.qr-site .generator-workspace .preview-panel {
    border-top: 5px solid #075bff
}

.qr-site .generator-workspace .generator-content h2,.qr-site .generator-workspace .preview-panel h2 {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
    font-size: 22px
}

.qr-site .generator-workspace .generator-content h3 {
    margin: 23px 0 10px
}

.qr-site .generator-workspace .step {
    width: 29px;
    height: 29px;
    background: #e8f0ff;
    color: #0647cc;
    border-radius: 9px;
    font-weight: 800
}

.qr-site .generator-workspace .workspace label {
    font-size: 13px
}

.qr-site .generator-workspace input:not([type=checkbox],[type=range]):hover,.qr-site .generator-workspace select:hover,.qr-site .generator-workspace textarea:hover {
    border-color: #638de8
}

.qr-site .generator-workspace input:not([type=checkbox],[type=range]):focus,.qr-site .generator-workspace select:focus,.qr-site .generator-workspace textarea:focus {
    border-color: #075bff;
    box-shadow: 0 0 0 3px rgba(7,91,255,.14);
    outline: none
}

.qr-site .generator-workspace .generator-content .actions {
    padding-top: 17px;
    border-top: 1px solid var(--color-border);
    gap: 8px
}

.qr-site .generator-workspace .generator-content button.primary {
    box-shadow: 0 7px 16px rgba(197,43,99,.2)
}

.qr-site .generator-workspace .preview-panel .status {
    background: #eaf1ff;
    color: #103771;
    border: 1px solid #cfe0ff;
    font-weight: 650
}

.qr-site .generator-workspace .preview-panel .status[data-state=success] {
    background: #e5f8ef;
    color: #125b35;
    border-color: #a8e0c1
}

.qr-site .generator-workspace .preview-panel .status[data-state=error] {
    background: #fff0f4;
    color: #8f1c47;
    border-color: #f4bed0
}

.qr-site .generator-workspace .preview-stage {
    min-height: 272px;
    border: 1px dashed #a9c3ef;
    border-radius: 17px;
    background-color: #fff;
    background-image: repeating-conic-gradient(#f1f5fd 0% 25%,#fff 0% 50%);
    background-size: 16px 16px;
    box-shadow: inset 0 0 0 8px #fff
}

.qr-site .generator-workspace .download-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.qr-site .generator-workspace .download-actions button {
    width: 100%
}

.qr-site .generator-workspace .personalization-panel {
    border-top: 5px solid #9ebeff
}

.qr-site .generator-workspace .personalization-panel>details>summary {
    color: var(--color-text)
}

html[data-theme=dark] .qr-site .editorial {
    background: #101b34;
    border-color: #3a5a95
}

html[data-theme=dark] .qr-site .generator-workspace .panel {
    border-color: #375995;
    box-shadow: 0 18px 44px rgba(0,13,59,.28)
}

html[data-theme=dark] .qr-site .generator-workspace .step {
    background: #1b3975;
    color: #c9dcff
}

html[data-theme=dark] .qr-site .generator-workspace .preview-panel .status {
    background: #1b3563;
    color: #e2edff;
    border-color: #4567a6
}

html[data-theme=dark] .qr-site .generator-workspace .preview-panel .status[data-state=success] {
    background: #143c34;
    color: #cbf6dc;
    border-color: #337c65
}

html[data-theme=dark] .qr-site .generator-workspace .preview-panel .status[data-state=error] {
    background: #4c2137;
    color: #ffd7e5;
    border-color: #8f4263
}

@media(max-width:759px) {
    .qr-site .generator-workspace {
        grid-template-columns: minmax(0,1fr);
        gap: 16px
    }

    .qr-site .generator-workspace .generator-content h2,.qr-site .generator-workspace .preview-panel h2 {
        font-size: 20px
    }

    .qr-site .generator-workspace .preview-stage {
        min-height: 230px
    }
}

@media print {
    body.qr-site {
        background: #fff !important
    }

    .qr-site .editorial,.qr-site .generator-workspace .panel {
        box-shadow: none;
        border-color: #bbb
    }

    .qr-site .daily-heading h1,.qr-site .section-heading h2 {
        color: #000
    }
}

/* One-click image copy beside the verified QR download heading. */
.qr-site .generator-workspace button.copy-qr-button {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    display: grid;
    place-items: center;
    border-color: #a9c3ef;
    border-radius: 12px;
    color: #075bff;
    background: #eaf1ff
}

.qr-site .generator-workspace button.copy-qr-button:hover:not(:disabled) {
    background: #d9e8ff;
    border-color: #075bff
}

.qr-site .generator-workspace button.copy-qr-button:disabled {
    opacity: .45
}

.qr-site .generator-workspace .copy-status {
    margin: 0 0 10px;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.5
}

.qr-site .generator-workspace .copy-status:empty {
    display: none
}

html[data-theme=dark] .qr-site .generator-workspace button.copy-qr-button {
    background: #1b3975;
    color: #dce9ff;
    border-color: #4567a6
}

html[data-theme=dark] .qr-site .generator-workspace button.copy-qr-button:hover:not(:disabled) {
    background: #274a91;
    border-color: #9dbdff
}

/* PNG, SVG and image copy share one action row at every viewport width. */
.qr-site .generator-workspace .download-actions {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) 48px;
    gap: 8px;
    align-items: stretch
}

.qr-site .generator-workspace .download-actions button:not(.copy-qr-button) {
    min-width: 0;
    padding-inline: 8px
}

.qr-site .generator-workspace .download-actions button.copy-qr-button {
    margin: 0;
    width: 48px;
    height: auto;
    min-height: 48px
}

@media(max-width:420px) {
    .qr-site .generator-workspace .download-actions {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) 48px
    }

    .qr-site .generator-workspace .download-actions button:not(.copy-qr-button) {
        font-size: 12px;
        padding-inline: 4px;
        line-height: 1.25
    }
}

/* Local A4 QR printing modal, shared by every generator page. */
.qr-site .generator-workspace .qr-print-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    margin-top: 10px
}

.qr-site .qr-print-dialog {
    width: min(560px,calc(100vw - 24px));
    max-height: min(90vh,800px);
    padding: 0;
    border: 1px solid #e7bfd0;
    border-radius: 20px;
    background: #fff;
    color: #251925;
    box-shadow: 0 24px 70px #081c5370
}

.qr-site .qr-print-dialog::backdrop {
    background: rgba(4,15,43,.7)
}

.qr-site .qr-print-dialog-body {
    padding: clamp(18px,4vw,30px);
    overflow: auto;
    max-height: min(90vh,800px)
}

.qr-site .qr-print-dialog h2 {
    margin: 0 0 8px;
    color: inherit
}

.qr-site .qr-print-dialog .qr-print-fields {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    margin: 18px 0
}

.qr-site .qr-print-dialog label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 13px
}

.qr-site .qr-print-dialog input,.qr-site .qr-print-dialog select {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #d9a6bc;
    border-radius: 9px;
    background: #fff8fa;
    color: #281725;
    font: inherit
}

.qr-site .qr-print-dialog .qr-print-summary {
    padding: 12px 14px;
    border-radius: 10px;
    background: #f9edf2;
    color: #52243b;
    font-weight: 700;
    line-height: 1.5
}

.qr-site .qr-print-dialog .field-error:empty {
    display: none
}

.qr-print-frame {
    position: fixed;
    width: 0;
    height: 0;
    border: 0;
    opacity: 0;
    pointer-events: none
}

html[data-theme=dark] .qr-site .qr-print-dialog {
    background: #15213b;
    color: #f3f6ff;
    border-color: #8c5172
}

html[data-theme=dark] .qr-site .qr-print-dialog input,html[data-theme=dark] .qr-site .qr-print-dialog select {
    background: #312338;
    color: #fff;
    border-color: #a96b87
}

html[data-theme=dark] .qr-site .qr-print-dialog .qr-print-summary {
    background: #3d2740;
    color: #fff
}

@media(max-width:480px) {
    .qr-site .qr-print-dialog .qr-print-fields {
        grid-template-columns: 1fr
    }

    .qr-site .qr-print-dialog-body {
        padding: 18px
    }
}

/* Night mode: a dark canvas with restrained electric blue accents. */

html[data-theme=dark] .qr-site .qr-hero-sample {
    background: #111e38;
    border-color: #38598b;
    box-shadow: 0 18px 46px rgba(0,7,25,.32)
}

html[data-theme=dark] .qr-site .generator-workspace .panel {
    background: #111d36;
    border-color: #385783;
    box-shadow: 0 16px 42px rgba(0,7,25,.34)
}

html[data-theme=dark] .qr-site .generator-workspace .generator-content,html[data-theme=dark] .qr-site .generator-workspace .preview-panel {
    border-top-color: #4a91ff
}

html[data-theme=dark] .qr-site .generator-workspace .personalization-panel {
    border-top-color: #5075b6
}

html[data-theme=dark] .qr-site .daily-tool-card {
    background: #111d36;
    border-color: #385783
}

html[data-theme=dark] .qr-site .daily-tool-card:hover,html[data-theme=dark] .qr-site .daily-tool-card:focus-visible {
    border-color: #77a7ff
}

html[data-theme=dark] .qr-site .editorial {
    background: #111d36;
    border-color: #385783;
    box-shadow: 0 16px 42px rgba(0,7,25,.32)
}

/* Contextual Ninja illustrations retain the original transparent artwork. */
.qr-site .daily-heading.has-mascot {
    display: grid;
    grid-template-columns: minmax(0,1fr) 172px;
    gap: 30px;
    align-items: center;
    max-width: 960px
}

.qr-site .daily-heading-copy {
    min-width: 0
}

.qr-site .qr-mascot {
    margin: 0;
    width: 172px;
    max-width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none
}

.qr-site .qr-mascot picture,.qr-site .qr-mascot img {
    display: block;
    width: 100%;
    height: auto
}

.qr-site .qr-mascot img {
    object-fit: contain
}

.qr-site .mascot-home {
    width: 145px;
    margin: 18px 0 0 auto
}

html[data-theme=dark] .qr-site .qr-mascot {
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 0 6px rgba(213,229,255,.55))
}

@media(max-width:600px) {
    .qr-site .daily-heading.has-mascot {
        grid-template-columns: minmax(0,1fr) 112px;
        gap: 12px;
        align-items: start
    }

    .qr-site .qr-mascot {
        width: 112px
    }

    .qr-site .mascot-home {
        width: 112px;
        margin: 14px 0 0 auto
    }

    .qr-site .daily-heading.has-mascot h1 {
        font-size: clamp(24px,6.5vw,34px)
    }

    .qr-site .mascot-editorial {
        width: 112px;
        margin: 0 0 12px 12px
    }
}

@media(max-width:375px) {
    .qr-site .daily-heading.has-mascot {
        grid-template-columns: 1fr
    }

    .qr-site .daily-heading.has-mascot .qr-mascot {
        justify-self: center
    }
}

@media print {
    .qr-site .qr-mascot {
        box-shadow: none
    }
}

/* Split wordmark colors without changing its accessible or SEO name. */
.qr-site .brand-title .brand-title-qr {
    color: #111827
}

.qr-site .brand-title .brand-title-ninja {
    color: #c5225b;
    margin-left: .12em
}

html[data-theme=dark] .qr-site .brand-title .brand-title-qr {
    color: #111827;
    background: #eef4ff;
    border-radius: 4px;
    padding: 0 3px
}

html[data-theme=dark] .qr-site .brand-title .brand-title-ninja {
    color: #ff5d8e;
    background: transparent;
    padding: 0
}

/* QR content type picker: compact icon cards in the project's raspberry palette. */
.qr-site .generator-workspace .qr-type-heading {
    font-size: 15px;
    margin: 18px 0 12px;
    display: flex;
    align-items: center
}

.qr-site .generator-workspace .qr-type-options {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    margin: 0 0 24px
}

.qr-site .generator-workspace .qr-type-button {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 54px;
    padding: 10px 11px;
    border: 1px solid #e9c6d3;
    border-radius: 11px;
    background: #fff8fa;
    color: #58283b;
    text-align: left;
    font-family: inherit;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
    cursor: pointer;
    transition: background .16s,border-color .16s,box-shadow .16s,transform .16s
}

.qr-site .generator-workspace .qr-type-button svg {
    flex: none;
    color: #bc2b60
}

.qr-site .generator-workspace .qr-type-button span {
    min-width: 0;
    overflow-wrap: anywhere
}

.qr-site .generator-workspace .qr-type-button:hover {
    border-color: #c52b63;
    background: #ffedf3;
    transform: translateY(-1px)
}

.qr-site .generator-workspace .qr-type-button[aria-pressed=true] {
    border-color: #c52b63;
    background: #f9dbe6;
    color: #802343;
    box-shadow: inset 0 0 0 1px #c52b63,0 3px 10px rgba(138,24,70,.12)
}

.qr-site .generator-workspace .qr-type-button[aria-pressed=true] svg {
    color: #a11f4f
}

.qr-site .generator-workspace .qr-type-button:focus-visible {
    outline: 3px solid #c52b63;
    outline-offset: 2px
}

html[data-theme=dark] .qr-site .generator-workspace .qr-type-button {
    background: #281b2e;
    color: #f7d9e4;
    border-color: #694058
}

html[data-theme=dark] .qr-site .generator-workspace .qr-type-button svg {
    color: #ff9bbd
}

html[data-theme=dark] .qr-site .generator-workspace .qr-type-button:hover {
    background: #392238;
    border-color: #ff8eb4
}

html[data-theme=dark] .qr-site .generator-workspace .qr-type-button[aria-pressed=true] {
    background: #602842;
    border-color: #ff9bbd;
    color: #fff;
    box-shadow: inset 0 0 0 1px #ff9bbd,0 4px 12px rgba(0,0,0,.22)
}

html[data-theme=dark] .qr-site .generator-workspace .qr-type-button[aria-pressed=true] svg {
    color: #ffd1e0
}

@media(max-width:600px) {
    .qr-site .generator-workspace .qr-type-options {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

.qr-site .generator-workspace #qr-type[hidden] {
    display: none !important
}

/* Narrower type buttons while keeping two usable columns on phones. */
.qr-site .generator-workspace .qr-type-options {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

@media(max-width:600px) {
    .qr-site .generator-workspace .qr-type-options {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

/* A quiet raspberry tint distinguishes text entry from the white panels. */
.qr-site .workspace input:is([type=text],[type=url],[type=email],[type=tel],[type=password],[type=search]),
.qr-site .workspace input:not([type]),
.qr-site .workspace textarea {
    background: #fff4f7;
    border-color: #e8c6d2
}

.qr-site .workspace input:is([type=text],[type=url],[type=email],[type=tel],[type=password],[type=search]):focus,
.qr-site .workspace input:not([type]):focus,
.qr-site .workspace textarea:focus {
    background: #fff0f5
}

html[data-theme=dark] .qr-site .workspace input:is([type=text],[type=url],[type=email],[type=tel],[type=password],[type=search]),
html[data-theme=dark] .qr-site .workspace input:not([type]),
html[data-theme=dark] .qr-site .workspace textarea {
    background: #2b2032;
    border-color: #68415a
}

html[data-theme=dark] .qr-site .workspace input:is([type=text],[type=url],[type=email],[type=tel],[type=password],[type=search]):focus,
html[data-theme=dark] .qr-site .workspace input:not([type]):focus,
html[data-theme=dark] .qr-site .workspace textarea:focus {
    background: #34243b
}

/* Unified QR actions: raspberry buttons and one shared export/print dialog. */
.qr-site .generator-workspace .qr-action-toolbar {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(126px,1.35fr) minmax(0,1fr);
    gap: 8px;
    align-items: stretch;
    margin-top: 14px
}

.qr-site .generator-workspace .qr-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 54px;
    margin: 0;
    padding: 8px 9px;
    border: 1px solid #9f1743;
    border-radius: 12px;
    background: #b71d4d;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    box-shadow: 0 5px 12px #8f1c4729
}

.qr-site .generator-workspace .qr-action-button svg {
    flex: none
}

.qr-site .generator-workspace .qr-action-button:hover:not(:disabled) {
    background: #92143e;
    border-color: #730d30
}

.qr-site .generator-workspace .qr-action-button:focus-visible {
    outline: 3px solid #142d7d;
    outline-offset: 3px
}

.qr-site .generator-workspace .qr-action-button:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none
}

.qr-site .generator-workspace .qr-export-group {
    padding: 4px;
    border: 1px solid #cd6e94;
    border-radius: 13px;
    background: #fff0f5;
    text-align: center
}

.qr-site .generator-workspace .qr-export-label {
    display: block;
    margin: 0 0 3px;
    color: #762344;
    font-size: 11px;
    font-weight: 800
}

.qr-site .generator-workspace .qr-export-group>div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px
}

.qr-site .generator-workspace .qr-export-group .qr-action-button {
    min-height: 35px;
    padding: 4px;
    border-radius: 8px;
    font-size: 12px
}

.qr-site .qr-print-dialog .qr-brand-options {
    display: grid;
    gap: 10px;
    margin: 6px 0 18px
}

.qr-site .qr-print-dialog .qr-brand-options label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    min-height: 34px;
    cursor: pointer
}

.qr-site .qr-print-dialog .qr-brand-options input {
    width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
    accent-color: #b71d4d;
    flex: none
}

html[data-theme=dark] .qr-site .generator-workspace .qr-action-button {
    background: #a61749;
    border-color: #e07aa0;
    color: #fff
}

html[data-theme=dark] .qr-site .generator-workspace .qr-action-button:hover:not(:disabled) {
    background: #c5225b
}

html[data-theme=dark] .qr-site .generator-workspace .qr-export-group {
    background: #39243c;
    border-color: #b7557f
}

html[data-theme=dark] .qr-site .generator-workspace .qr-export-label {
    color: #ffd2e4
}

@media(max-width:420px) {
    .qr-site .generator-workspace .qr-action-toolbar {
        grid-template-columns: minmax(0,.9fr) minmax(116px,1.3fr) minmax(0,.9fr);
        gap: 5px
    }

    .qr-site .generator-workspace .qr-action-button {
        padding: 5px;
        font-size: 11px;
        flex-direction: column;
        gap: 2px
    }
}

/* Preserve visible keyboard skip-link contrast in both themes. */
body.qr-site .skip-link:focus {
    background: #111;
    color: #fff;
}

.qr-file-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin: .4rem 0 .75rem
}

.qr-file-selection {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: .85rem
}

/* EN-7: retain the blue canvas with readable small text in both locales. */
body.qr-site .brand-subtitle {
    color: #061b39;
}

html[data-theme=dark] body.qr-site .brand-subtitle {
    color: #fff;
}

/* EN-7: keep the focused skip-link above the sticky header. */
body.qr-site .skip-link:focus {
    z-index: 1600;
}

/* Floating privacy information stays above page content and below the menu. */
.qr-site .privacy-trust-badge-root {
    position: fixed;
    inset: auto max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    margin: 0;
    min-height: 0;
    align-items: flex-end;
    justify-content: flex-start;
    z-index: 1700;
}

.qr-site .site-header:has(.calc-menu[open]) {
    z-index: 1800;
}

.qr-site .privacy-trust-badge-root .privacy-trust-panel {
    flex: 0 1 330px;
    min-width: 0;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px - env(safe-area-inset-bottom));
    overflow-y: auto;
}

.qr-site .privacy-trust-badge-root.is-open .privacy-trust-panel {
    max-width: 330px;
}

.qr-site .privacy-trust-panel-inner {
    width: 100%;
}

.qr-site .privacy-trust-title {
    padding-inline-end: 28px;
    font-size: 1.05rem;
}

.qr-site .privacy-trust-panel-close {
    z-index: 1;
}


/* DE6: sitemap count is outside the white editorial surface, on the blue site background. */
.qr-site .qr-site-map>.source-caption {
    color: #fff
}

/* DE-8: keep long institutional German headings readable on small screens. */
@media(max-width:420px) {
    html[lang="de"] .qr-site .daily-heading:not(.has-mascot) h1 {
        font-size: clamp(24px,7.25vw,29px)
    }
}

/* Compact shared footer text; retain the navigation link spacing. */
.qr-site .site-footer.calc-footer {
    padding: 16px 0;
}

.qr-site .site-footer .footer-top {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.qr-site .site-footer .footer-identity {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 20px;
    min-width: 0;
}

.qr-site .site-footer .footer-identity > p {
    margin: 0;
}

.qr-site .site-footer .footer-bottom {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px 16px;
    padding-top: 12px;
}

.qr-site .site-footer .footer-bottom > span {
    white-space: nowrap;
}

.qr-site .site-footer .footer-bottom > .qr-trademark {
    flex: 1 1 32rem;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .qr-site .site-footer .footer-identity {
        display: block;
    }

    .qr-site .site-footer .footer-identity > p {
        margin-top: 4px;
    }
}

/* One quiet fade: the panel and its contents keep their final dimensions. */
.qr-site .privacy-trust-badge-root .privacy-trust-panel {
    max-width: 330px;
    opacity: 0;
    transform: none;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease-out,visibility 0s linear 180ms;
    will-change: auto;
}

.qr-site .privacy-trust-badge-root.is-open .privacy-trust-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.qr-site .privacy-trust-panel :is(.privacy-trust-title,.privacy-trust-commitments,.privacy-trust-subtitle,.privacy-trust-links) {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .qr-site .privacy-trust-badge-root .privacy-trust-panel {
        transition: none;
    }
}

/* Functional audience preference on the privacy page. */
.qr-site .audience-choice-actions {display:flex;flex-wrap:wrap;gap:1rem}
.qr-site .audience-choice-actions button {max-width:100%;white-space:normal;overflow-wrap:anywhere;padding:.75rem 1rem;border:1px solid currentColor;border-radius:.5rem;color:inherit;background:transparent;cursor:pointer;font:inherit}
.qr-site .audience-choice-actions button:focus-visible {outline:3px solid currentColor;outline-offset:3px}
.qr-site .audience-choice [hidden] {display:none}