:root {
    --bg: #f5f2ec;
    --surface: rgba(255, 255, 255, 0.8);
    --surface-strong: #ffffff;
    --text: #162033;
    --muted: #637089;
    --line: rgba(22, 32, 51, 0.1);
    --primary: #0f172a;
    --accent: #d97745;
    --accent-soft: #f3d4c3;
    --success: #0f766e;
    --danger: #b42318;
    --shadow: 0 24px 80px rgba(15, 23, 42, 0.12);
    --radius-xl: 32px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --container: min(1240px, calc(100% - 32px));
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top right, rgba(217, 119, 69, 0.18), transparent 28%),
        radial-gradient(circle at left center, rgba(30, 64, 175, 0.09), transparent 32%),
        linear-gradient(180deg, #fbfaf7 0%, #f1eee8 100%);
    overflow-x: hidden;
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

code {
    font-family: Consolas, Monaco, monospace;
}

.container {
    width: var(--container);
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(18px);
    background: rgba(251, 250, 247, 0.82);
    border-bottom: 1px solid rgba(22, 32, 51, 0.06);
}

.site-header--tool {
    background: rgba(252, 250, 246, 0.9);
}

.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 82px;
}

.header-tool-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.header-tool-meta span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(22, 32, 51, 0.08);
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.brand-mark {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.brand-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #1f2937 0%, #0f766e 100%);
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.18);
}

.brand-copy {
    display: grid;
    gap: 2px;
}

.brand-copy strong {
    font-size: 1rem;
}

.brand-copy small,
.section-heading p,
.hero-content p,
.info-card p,
.benefit-card p,
.contact-card p,
.summary-note,
small {
    color: var(--muted);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav-links a,
.header-cta,
.primary-link,
.ghost-link,
.restart-link {
    text-decoration: none;
}

.header-cta,
.primary-link,
.submit-order,
.primary-btn,
.secondary-btn,
.success-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 54px;
    padding: 0 22px;
    border-radius: 999px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.header-cta,
.primary-link,
.submit-order,
.primary-btn {
    background: linear-gradient(135deg, var(--primary) 0%, #22324e 100%);
    color: #fff;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.22);
}

.ghost-link,
.secondary-btn {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.8);
    color: var(--text);
}

.success-btn {
    background: linear-gradient(135deg, var(--success) 0%, #115e59 100%);
    color: #fff;
    box-shadow: 0 18px 35px rgba(15, 118, 110, 0.2);
}

.header-cta:hover,
.primary-link:hover,
.ghost-link:hover,
.submit-order:hover,
.primary-btn:hover,
.secondary-btn:hover,
.success-btn:hover {
    transform: translateY(-1px);
}

.hero-section,
.config-section,
.benefits-section,
.pricing-section,
.contact-section,
.result-section,
.info-section {
    padding: 42px 0;
}

.compact-hero {
    padding-bottom: 22px;
}

.hero-grid,
.pricing-layout,
.benefit-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 28px;
    align-items: center;
}

.compact-hero .hero-grid {
    grid-template-columns: 1fr;
}

.hero-content h1,
.section-heading h2,
.contact-card h2 {
    margin: 10px 0 14px;
    line-height: 1.02;
}

.hero-content h1 {
    font-size: clamp(2.8rem, 5vw, 5rem);
    max-width: 12ch;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b4d29;
    background: rgba(217, 119, 69, 0.12);
}

.hero-actions,
.hero-trust,
.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.hero-trust {
    margin-top: 26px;
}

.hero-trust span {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(22, 32, 51, 0.08);
    font-size: 0.92rem;
}

.showcase-card,
.card-block,
.summary-card,
.result-preview-card,
.result-summary-card,
.benefit-card,
.pricing-card,
.contact-card,
.info-card {
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.66);
    backdrop-filter: blur(18px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.showcase-card {
    padding: 22px;
}

.collapsible-block {
    padding: 0;
    overflow: hidden;
}

.collapsible-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    list-style: none;
    cursor: pointer;
    padding: 22px 24px;
    font-weight: 700;
}

.collapsible-head::-webkit-details-marker {
    display: none;
}

.collapsible-head small {
    font-weight: 600;
}

.collapsible-body {
    padding: 0 24px 24px;
}

.showcase-head,
.block-head,
.summary-top,
.section-heading {
    display: grid;
    gap: 6px;
}

.preview-mode-switch {
    display: inline-flex;
    gap: 8px;
    margin-top: 8px;
    padding: 6px;
    width: fit-content;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
}

.summary-card .preview-mode-switch {
    width: fit-content;
    max-width: 100%;
}

.mode-btn {
    border: none;
    background: transparent;
    color: var(--muted);
    border-radius: 999px;
    padding: 10px 14px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.mode-btn.is-active {
    background: #fff;
    color: var(--text);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.showcase-preview,
.summary-preview {
    margin: 20px 0;
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 24px;
    padding: 22px;
}

.showcase-preview.preview-stage {
    min-height: 420px;
    margin-bottom: 0;
}

.qr-card-preview,
.mini-preview {
    --rx: 0deg;
    --ry: 0deg;
    --rz: 0deg;
    position: relative;
    display: grid;
    place-items: center;
    transition: transform 0.28s ease, filter 0.28s ease;
    transform-style: preserve-3d;
}

.preview-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
}

.qr-grid,
.mini-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 4px;
    padding: 16px;
    border-radius: 22px;
    width: min(100%, 360px);
    aspect-ratio: 1;
    box-shadow: inset 0 0 0 1px rgba(22, 32, 51, 0.06);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.mini-grid {
    width: 190px;
}

.wide-preview {
    width: min(100%, 320px);
    min-height: 280px;
    gap: 18px;
}

.wide-grid {
    width: 220px;
}

.live-preview-shell {
    display: grid;
    gap: 14px;
}

.preview-live-note {
    display: grid;
    gap: 3px;
}

.preview-live-note strong {
    font-size: 0.98rem;
}

.preview-stage {
    min-height: 250px;
    display: grid;
    place-items: center;
    perspective: 1200px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.94), rgba(226, 232, 240, 0.75)),
        linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.06));
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.preview-stage.is-dragging {
    cursor: grabbing;
}

.mini-preview {
    --tz: 0px;
    --module-lift: 9px;
    --base-depth: 14px;
    --module-shadow: 5px;
    width: min(100%, 320px);
    min-height: 260px;
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) translateZ(var(--tz));
}

.mini-base {
    position: absolute;
    inset: 16px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(15,23,42,0.08));
    transform: translateZ(calc(var(--base-depth) * -1));
    box-shadow: 0 16px 26px rgba(15, 23, 42, 0.18);
}

.mini-usage-support {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.mini-usage-support--stand {
    width: 54%;
    height: 18%;
    bottom: 28px;
    left: 50%;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(203, 213, 225, 0.92), rgba(148, 163, 184, 0.95));
    box-shadow: 0 16px 24px rgba(15, 23, 42, 0.14);
    transform: translateX(-50%) rotateX(65deg) translateZ(-18px);
    transform-origin: center top;
}

.mini-usage-support--tab {
    width: 20%;
    height: 14%;
    top: 12px;
    left: 50%;
    border-radius: 14px 14px 10px 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(226, 232, 240, 0.96));
    box-shadow: 0 10px 16px rgba(15, 23, 42, 0.12);
    transform: translateX(-50%) translateZ(-8px);
}

.qr-grid::before,
.mini-grid::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 16px;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.95) 10%, transparent 10%, transparent 20%, rgba(255,255,255,0.95) 20%, rgba(255,255,255,0.95) 30%, transparent 30%, transparent 40%, rgba(255,255,255,0.95) 40%, rgba(255,255,255,0.95) 50%, transparent 50%, transparent 60%, rgba(255,255,255,0.95) 60%, rgba(255,255,255,0.95) 70%, transparent 70%, transparent 80%, rgba(255,255,255,0.95) 80%);
    opacity: 0.08;
}

.qr-grid::after,
.mini-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.62);
}

.qr-grid > i,
.mini-grid > i {
    display: block;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-radius 0.28s ease;
}

.preview-logo-slot,
.mini-logo {
    position: absolute;
    inset: 33% 33%;
    z-index: 2;
    display: none;
    place-items: center;
    padding: 10%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(22, 32, 51, 0.08);
    overflow: hidden;
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.1);
}

.mini-cavity {
    position: absolute;
    z-index: 2;
    display: none;
    border: 2px dashed rgba(217, 119, 69, 0.88);
    background: rgba(217, 119, 69, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

.preview-logo-slot span {
    color: var(--muted);
    font-weight: 700;
}

.preview-logo-slot img,
.mini-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mini-logo-emoji {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    line-height: 1;
}

.mini-grid {
    z-index: 2;
    width: min(100%, 260px);
    aspect-ratio: 1 / 1;
}

.qr-card-preview.preview-3d {
    --rz: -8deg;
    transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
}

.mini-preview.preview-3d {
    --rz: -8deg;
}

.qr-grid.preview-3d,
.mini-grid.preview-3d {
    box-shadow:
        0 26px 40px rgba(15, 23, 42, 0.18),
        inset 0 0 0 1px rgba(22, 32, 51, 0.04);
}

.qr-grid.preview-3d > i,
.mini-grid.preview-3d > i {
    transform: translateY(calc(var(--module-lift) * -0.32)) translateZ(var(--module-lift));
    box-shadow: 0 var(--module-shadow) 0 rgba(15, 23, 42, 0.18);
    border-radius: 3px;
}

.mini-grid > i.is-labyrinth {
    transform: none;
}

.mini-grid.preview-3d > i.is-labyrinth {
    transform: translateY(calc(var(--module-lift) * -0.32)) translateZ(var(--module-lift));
}

.qr-grid > i.is-flat,
.mini-grid > i.is-flat {
    box-shadow: none;
    opacity: 0;
}

.qr-grid > i.is-placeholder,
.mini-grid > i.is-placeholder {
    min-width: 100%;
    min-height: 100%;
}

.qr-grid.preview-3d .preview-logo-slot,
.mini-grid.preview-3d .mini-logo {
    transform: translateZ(20px);
}

.preview-label {
    justify-self: center;
    align-self: end;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: none;
    line-height: 1.1;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
    padding: 0 10px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: transform 0.28s ease, text-shadow 0.28s ease;
    position: relative;
    z-index: 3;
}

.mini-preview.preview-3d .preview-label {
    transform: translateY(-2px) translateZ(var(--module-lift));
    text-shadow:
        0 var(--module-shadow) 0 rgba(15, 23, 42, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.82);
}

.showcase-metrics,
.info-grid,
.config-layout,
.result-layout,
.benefit-grid {
    display: grid;
    gap: 18px;
}

.showcase-metrics {
    grid-template-columns: repeat(3, 1fr);
}

.showcase-metrics div,
.order-facts div {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(22, 32, 51, 0.06);
}

.showcase-metrics strong,
.order-facts strong {
    font-size: 1.05rem;
}

.info-grid {
    grid-template-columns: repeat(3, 1fr);
}

.info-card,
.benefit-card {
    padding: 24px;
}

.info-card span {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(15, 118, 110, 0.12);
    color: var(--success);
    font-weight: 800;
}

.config-layout,
.result-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    align-items: start;
}

.config-layout > *,
.result-layout > * {
    min-width: 0;
}

.config-form,
.result-summary-card {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.summary-panel {
    display: grid;
    align-self: start;
    min-width: 0;
    min-height: calc(100vh - 48px);
}

.sbs-body {
    background:
        radial-gradient(circle at top left, rgba(15, 118, 110, 0.1), transparent 26%),
        radial-gradient(circle at bottom right, rgba(217, 119, 69, 0.14), transparent 28%),
        linear-gradient(180deg, #fcfbf8 0%, #f3efe7 100%);
}

.sbs-hero {
    padding-bottom: 24px;
}

.sbs-hero--compact {
    padding-top: 26px;
    padding-bottom: 18px;
}

.sbs-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 24px;
    align-items: center;
}

.sbs-intro-card,
.sbs-progress-card {
    padding: 22px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(22, 32, 51, 0.08);
    box-shadow: var(--shadow);
}

.sbs-intro-card--tool {
    display: grid;
    gap: 12px;
}

.tool-stat {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(22, 32, 51, 0.08);
}

.tool-stat strong {
    font-size: 1rem;
}

.tool-stat span {
    color: var(--muted);
    font-size: 0.92rem;
}

.sbs-intro-list {
    margin: 14px 0 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
    color: var(--muted);
}

.sbs-layout {
    align-items: start;
}

.sbs-form {
    gap: 18px;
}

.sbs-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
}

.sbs-progress-head strong {
    white-space: nowrap;
}

.sbs-progress-head h2 {
    margin: 10px 0 0;
}

.sbs-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.sbs-step-pill {
    display: grid;
    justify-items: start;
    gap: 6px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(22, 32, 51, 0.08);
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    text-align: left;
    color: var(--muted);
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.sbs-step-pill span {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: var(--text);
    background: rgba(15, 23, 42, 0.08);
}

.sbs-step-pill small {
    color: inherit;
    font-size: 0.88rem;
    font-weight: 700;
}

.sbs-step-pill.is-active {
    color: var(--text);
    border-color: rgba(15, 23, 42, 0.16);
    background: #fff;
    transform: translateY(-1px);
}

.sbs-step-pill.is-active span,
.sbs-step-pill.is-complete span {
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, #22324e 100%);
}

.sbs-progress-bar {
    margin-top: 16px;
    height: 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.sbs-progress-bar span {
    display: block;
    width: 10%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--accent) 0%, #f0a06d 100%);
    transition: width 0.25s ease;
}

.sbs-step-panel {
    display: none;
}

.sbs-step-panel.is-active {
    display: grid;
    gap: 20px;
}

.sbs-actions {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.sbs-nav-btn {
    display: inline-flex;
    align-items: center;
    min-height: 54px;
    padding: 0 18px;
    border-radius: 999px;
}

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

.sbs-review-grid div {
    display: grid;
    gap: 4px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(22, 32, 51, 0.08);
}

.sbs-review-grid span {
    color: var(--muted);
    font-size: 0.9rem;
}

.card-block,
.summary-card,
.result-summary-card,
.result-preview-card,
.pricing-card,
.contact-card {
    padding: 24px;
}

.step-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.field-grid {
    display: grid;
    gap: 16px;
}

.tool-subsection {
    display: grid;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(247, 244, 238, 0.72);
    border: 1px solid rgba(22, 32, 51, 0.06);
}

.tool-subsection + .tool-subsection {
    margin-top: 4px;
}

.tool-subsection-head {
    display: grid;
    gap: 4px;
}

.tool-subsection-head h4 {
    margin: 0;
    font-size: 1rem;
}

.tool-subsection-head p {
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
}

.inline-note {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(15, 118, 110, 0.08);
    border: 1px solid rgba(15, 118, 110, 0.14);
    color: var(--text);
    font-size: 0.92rem;
}

.inline-note strong {
    color: var(--success);
}

.field--emoji-picker {
    position: relative;
}

.emoji-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 27;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(4px);
}

.emoji-picker {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 28;
    display: grid;
    gap: 14px;
    width: min(460px, calc(100vw - 32px));
    max-width: min(24cm, calc(100vw - 32px));
    max-height: min(10cm, calc(100vh - 32px));
    overflow: auto;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(22, 32, 51, 0.1);
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(16px);
}

.emoji-picker-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.emoji-selected {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(247, 244, 238, 0.92);
    color: var(--muted);
    font-size: 0.94rem;
}

.emoji-category {
    display: grid;
    gap: 8px;
}

.emoji-category > span {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--muted);
}

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

.emoji-option {
    min-height: 46px;
    border: 1px solid rgba(22, 32, 51, 0.08);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.emoji-option:hover,
.emoji-option.is-active {
    transform: translateY(-1px);
    border-color: rgba(15, 23, 42, 0.18);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.emoji-option.is-active {
    background: rgba(217, 119, 69, 0.12);
}

.emoji-clear-btn {
    padding: 0;
    background: transparent;
    border: none;
    color: var(--muted);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.inline-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.mini-action-btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
}

.color-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.color-preview {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
    background: #ffffff;
}

.warning-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(217, 119, 69, 0.1);
    border: 1px solid rgba(217, 119, 69, 0.18);
}

.warning-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.warning-card-head strong {
    color: #8b4d29;
}

.warning-card-head span {
    color: var(--muted);
    font-size: 0.88rem;
}

.warning-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    color: var(--text);
}

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

.three-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.field {
    display: grid;
    gap: 8px;
}

label {
    font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea,
select,
input[type="file"] {
    width: 100%;
    min-height: 54px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(99, 112, 137, 0.22);
    background: var(--surface-strong);
    font: inherit;
    color: var(--text);
}

input[type="file"] {
    padding: 14px;
}

textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.45;
}

input[type="color"] {
    width: 100%;
    min-height: 56px;
    border-radius: 16px;
    border: 1px solid rgba(99, 112, 137, 0.22);
    background: var(--surface-strong);
    padding: 6px;
}

input:focus,
select:focus {
    outline: 3px solid rgba(217, 119, 69, 0.18);
    border-color: rgba(217, 119, 69, 0.9);
}

.options-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.option-pill {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(22, 32, 51, 0.08);
    cursor: pointer;
}

.option-pill input {
    transform: scale(1.1);
}

.option-pill--wide {
    width: 100%;
    justify-content: flex-start;
}

.submit-order {
    min-height: 60px;
}

.production-form {
    display: grid;
    gap: 12px;
}

.sticky-card {
    position: sticky;
    top: 96px;
    transform: none;
    max-height: calc(100vh - 112px);
    overflow: auto;
    overscroll-behavior: contain;
}

.mini-grid.has-preview-image {
    display: block;
    overflow: hidden;
    border-radius: inherit;
    width: min(100%, 220px);
    max-width: min(100%, 220px);
    padding: 0;
    justify-self: center;
}

.mini-grid-preview-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.mini-preview.has-server-preview {
    width: min(100%, 360px);
    min-height: 0;
    gap: 10px;
}

.mini-preview.has-server-preview .mini-base {
    display: none;
}

.mini-preview.has-server-preview .wide-grid,
.mini-preview.has-server-preview .mini-grid {
    width: min(100%, 220px);
    max-width: min(100%, 220px);
}

.mini-preview.has-server-preview .mini-grid::before,
.mini-preview.has-server-preview .mini-grid::after {
    display: none;
}

.mini-preview.has-server-preview.preview-3d .mini-grid-preview-image {
    filter: drop-shadow(0 18px 24px rgba(15, 23, 42, 0.18));
}

.mini-preview.has-server-preview.preview-3d .mini-grid.has-preview-image {
    transform: translateZ(var(--module-lift));
}

.summary-list {
    margin: 18px 0;
    display: grid;
    gap: 12px;
}

.live-config-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(22, 32, 51, 0.08);
}

.live-config-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.live-config-head h4 {
    margin: 0;
    font-size: 1rem;
}

.live-config-head span {
    color: var(--muted);
    font-size: 0.9rem;
}

.live-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.live-config-grid div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(22, 32, 51, 0.06);
}

.live-config-grid span {
    color: var(--muted);
    font-size: 0.9rem;
}

.color-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.color-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(22, 32, 51, 0.08);
    font-size: 0.92rem;
}

.color-chip i {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.live-option-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.live-option-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(22, 32, 51, 0.08);
    font-size: 0.94rem;
}

.live-option-list li:last-child {
    border-bottom: none;
}

.summary-list div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(22, 32, 51, 0.08);
}

.summary-list dt {
    color: var(--muted);
}

.summary-list dd {
    margin: 0;
    text-align: right;
    font-weight: 700;
}

.price-box {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
    color: #fff;
}

.summary-card.sticky-card {
    gap: 18px;
    width: 100%;
    max-width: 100%;
    min-height: calc(100vh - 112px);
}

.price-row,
.price-total,
.price-lines li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.price-lines {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.price-lines li {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

.price-total {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 1.1rem;
}

.result-shell {
    display: grid;
    gap: 24px;
}

.compact-result-layout {
    grid-template-columns: 1fr;
}

.wide-result-card {
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
}

.result-preview-card {
    min-height: 100%;
    display: grid;
    align-content: center;
    position: relative;
}

.result-preview-frame {
    position: relative;
    width: min(100%, 420px);
    margin: 0 auto;
}

.result-preview-card img {
    width: 100%;
    border-radius: 24px;
}

.result-logo-overlay {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 28%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    z-index: 3;
    border-radius: 22px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(22, 32, 51, 0.08);
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.16);
}

.result-logo-overlay img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 14px;
}

.result-logo-chip {
    position: absolute;
    bottom: 24px;
    left: 24px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    font-size: 0.88rem;
}

.order-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.order-facts span {
    color: var(--muted);
    font-size: 0.9rem;
}

.success-banner {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(15, 118, 110, 0.09);
    border: 1px solid rgba(15, 118, 110, 0.18);
}

.success-banner strong {
    color: var(--success);
}

.backend-box {
    margin-top: 8px;
}

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

.pricing-option-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: grid;
    gap: 12px;
}

.pricing-option-list li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(22, 32, 51, 0.08);
}

.starting-price strong {
    font-size: 2.4rem;
}

.contact-card {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

.form-errors,
.field-error {
    color: var(--danger);
    font-size: 0.92rem;
}

.is-hidden {
    display: none !important;
}

.submit-order.is-loading,
.success-btn.is-loading {
    opacity: 0.7;
    cursor: wait;
}

.ghost-autofill {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    border: 0;
    clip: rect(0, 0, 0, 0);
}

.production-login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.production-login-card,
.production-hero-card,
.production-client-card,
.production-empty {
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.66);
    backdrop-filter: blur(18px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.production-login-card {
    width: min(100%, 520px);
    padding: 28px;
    display: grid;
    gap: 18px;
}

.production-login-card h1,
.production-hero-card h1,
.production-client-card h2 {
    margin: 0;
}

.production-login-form {
    display: grid;
    gap: 16px;
}

.production-body .nav-bar {
    min-height: 88px;
}

.production-shell {
    display: grid;
    gap: 22px;
}

.production-header-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}

.production-header-badge {
    display: grid;
    gap: 2px;
    min-width: 160px;
    padding: 10px 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(18, 25, 43, 0.96) 0%, rgba(34, 50, 78, 0.94) 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16);
}

.production-header-badge span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.production-header-badge strong {
    font-size: 1rem;
}

.production-header-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.production-header-metrics span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(22, 32, 51, 0.08);
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.production-header-metrics strong {
    color: var(--ink);
    font-size: 0.94rem;
}

.production-hero-card {
    padding: 24px;
    display: grid;
    gap: 8px;
}

.production-hero-card--dashboard {
    gap: 18px;
    background: linear-gradient(135deg, rgba(18, 25, 43, 0.96) 0%, rgba(34, 50, 78, 0.94) 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.24);
}

.production-hero-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.production-hero-card--dashboard h1,
.production-hero-card--dashboard .eyebrow {
    color: #ffffff;
}

.production-hero-card--dashboard p {
    margin: 0;
    max-width: 760px;
    color: rgba(255, 255, 255, 0.74);
}

.production-hero-badge {
    display: grid;
    gap: 4px;
    min-width: 180px;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.production-hero-badge span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.production-hero-badge strong {
    font-size: 1.15rem;
}

.atelier-top-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.atelier-top-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    appearance: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}

.atelier-top-link.is-active,
.atelier-top-link:hover,
.atelier-top-link:focus-visible {
    background: rgba(217, 119, 69, 0.18);
    border-color: rgba(217, 119, 69, 0.42);
}

.production-stats-grid--hero .production-stat {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.08);
}

.production-stats-grid--hero .production-stat span {
    color: rgba(255, 255, 255, 0.62);
}

.production-stats-grid--hero .production-stat strong {
    color: #ffffff;
}

.production-mail-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.66);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
}

.production-card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.production-card-head h2 {
    margin: 8px 0 6px;
}

.production-card-head p {
    margin: 0;
    color: var(--muted);
}

.production-mail-form,
.production-test-form {
    display: grid;
    gap: 16px;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
}

.production-filters-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.66);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
}

.production-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.production-stat {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(22, 32, 51, 0.08);
}

.production-stat span {
    color: var(--muted);
    font-size: 0.88rem;
}

.production-stat strong {
    font-size: 1.6rem;
}

.production-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.6fr) auto;
    gap: 14px;
    align-items: end;
}

.production-filter-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.production-client-card {
    padding: 22px;
    display: grid;
    gap: 18px;
    border: 1px solid rgba(22, 32, 51, 0.1);
}

.production-client-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.production-folder {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--muted);
}

.production-request-list {
    display: grid;
    gap: 16px;
}

.production-request-item {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(290px, 0.8fr);
    gap: 18px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(22, 32, 51, 0.08);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
}

.production-request-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.production-thumb-shell {
    width: 120px;
    height: 120px;
    padding: 10px;
    border-radius: 22px;
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid rgba(22, 32, 51, 0.06);
    margin-bottom: 14px;
}

.production-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 14px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
}

.status-pill--nouveau {
    background: rgba(217, 119, 69, 0.14);
    color: #8b4d29;
}

.status-pill--en-cours-impression {
    background: rgba(29, 78, 216, 0.12);
    color: #1d4ed8;
}

.status-pill--termine {
    background: rgba(15, 118, 110, 0.14);
    color: #0f766e;
}

.production-request-grid {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.production-request-grid div {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(247, 244, 238, 0.9);
}

.production-request-grid div.full {
    grid-column: 1 / -1;
}

.production-request-grid dt {
    color: var(--muted);
    font-size: 0.88rem;
}

.production-request-grid dd {
    margin: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.production-request-actions {
    display: grid;
    gap: 14px;
    align-content: start;
}

.production-delete-btn {
    border-color: rgba(185, 28, 28, 0.22);
    color: #991b1b;
    background: rgba(254, 242, 242, 0.92);
}

.production-delete-btn:hover {
    border-color: rgba(185, 28, 28, 0.42);
    background: #fee2e2;
}

.atelier-tab-link {
    text-decoration: none;
}

.production-file-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.production-file-links a,
.production-status-form .primary-btn {
    min-height: 48px;
}

.production-status-form {
    display: grid;
    gap: 12px;
}

.production-empty {
    padding: 24px;
}

.atelier-admin-shell {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(420px, 1.15fr);
    gap: 18px;
}

.atelier-management-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.atelier-management-content {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.atelier-tab-nav {
    position: sticky;
    top: 96px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    justify-content: flex-start;
    padding: 14px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(24, 32, 52, 0.96) 0%, rgba(30, 40, 64, 0.94) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 44px rgba(15, 23, 42, 0.22);
    overflow-x: auto;
    overflow-y: hidden;
}

.atelier-view-panel {
    display: none;
    min-width: 0;
}

.atelier-view-panel.is-active {
    display: grid;
    gap: 22px;
}

.atelier-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1 1 220px;
    min-width: 200px;
    min-height: 54px;
    padding: 0 16px;
    border-radius: 16px;
    appearance: none;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.86);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-weight: 700;
    white-space: nowrap;
    transition: transform 0.16s ease, color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.atelier-tab-icon {
    font-size: 1rem;
    line-height: 1;
}

.atelier-tab-btn.is-active,
.atelier-tab-btn:hover,
.atelier-tab-btn:focus-visible {
    transform: translateY(-1px);
    color: #ffffff;
    background: rgba(217, 119, 69, 0.16);
    border-color: rgba(217, 119, 69, 0.36);
    box-shadow: inset 0 -3px 0 rgba(217, 119, 69, 0.94);
}

.atelier-pane {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.66);
    box-shadow: var(--shadow);
}

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

.atelier-pricing-block {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(247, 244, 238, 0.7);
    border: 1px solid rgba(22, 32, 51, 0.08);
}

.atelier-pricing-list {
    display: grid;
    gap: 12px;
}

.atelier-pricing-item {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(22, 32, 51, 0.08);
}

.atelier-pricing-copy {
    display: grid;
    gap: 4px;
}

.atelier-pricing-copy strong {
    font-size: 0.98rem;
}

.atelier-pricing-copy small {
    color: var(--muted);
    font-size: 0.82rem;
}

.atelier-pricing-inline-actions {
    justify-content: flex-start;
    margin-top: -2px;
}

.atelier-pane--cloud {
    background:
        linear-gradient(180deg, rgba(255, 247, 237, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.field-help {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.color-stock-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.5fr) minmax(180px, 0.5fr);
    gap: 14px;
    margin-bottom: 16px;
}

.color-stock-sortbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.color-stock-sort {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(22, 32, 51, 0.1);
    background: rgba(247, 244, 238, 0.92);
    color: var(--ink);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.color-stock-sort.is-active {
    color: #ffffff;
    background: var(--accent);
    border-color: var(--accent);
}

.color-inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}

.color-stock-groups {
    display: grid;
    gap: 18px;
}

.filament-group {
    border-radius: 18px;
    border: 1px solid rgba(22, 32, 51, 0.08);
    background: rgba(255, 255, 255, 0.8);
    overflow: hidden;
}

.filament-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(247, 244, 238, 0.92);
    cursor: pointer;
    list-style: none;
}

.filament-group-head::-webkit-details-marker {
    display: none;
}

.filament-group-title {
    display: grid;
    gap: 4px;
}

.filament-group-title strong {
    font-size: 1rem;
}

.filament-group-title small,
.filament-group-toggle {
    color: var(--muted);
    font-size: 0.88rem;
}

.filament-group[open] .filament-group-toggle {
    color: var(--accent);
}

.filament-group-body {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.color-inventory-slot {
    position: relative;
    border-radius: 18px;
    padding: 8px;
    background:
        linear-gradient(145deg, rgba(34, 41, 61, 0.98) 0%, rgba(22, 28, 46, 0.98) 100%);
    border: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 28px rgba(15, 23, 42, 0.16);
}

.color-inventory-slot.is-stocked {
    border-color: rgba(79, 209, 143, 0.42);
}

.color-inventory-slot.is-empty {
    border-color: rgba(255, 255, 255, 0.08);
    opacity: 0.9;
}

.color-inventory-inner {
    display: grid;
    gap: 10px;
    min-height: 208px;
    padding: 12px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.color-inventory-swatch {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 0 0 2px rgba(15, 23, 42, 0.08),
        0 8px 18px rgba(15, 23, 42, 0.18);
}

.color-inventory-meta {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.color-inventory-meta strong {
    color: #ffffff;
    font-size: 0.96rem;
    line-height: 1.2;
}

.color-inventory-meta code {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    background: transparent;
    padding: 0;
}

.filament-empty-state {
    display: grid;
    gap: 6px;
    align-content: center;
    min-height: 180px;
    padding: 18px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.08);
    color: #ffffff;
}

.filament-empty-state p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
}

.color-stock-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid transparent;
    width: fit-content;
}

.color-stock-badge.is-stocked {
    color: #d1fae5;
    background: rgba(15, 118, 110, 0.24);
    border-color: rgba(110, 231, 183, 0.2);
}

.color-stock-badge.is-empty {
    color: #fed7aa;
    background: rgba(180, 83, 9, 0.24);
    border-color: rgba(251, 191, 36, 0.18);
}

.color-inventory-qty {
    display: grid;
    gap: 6px;
    margin-top: auto;
}

.color-inventory-qty span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.color-inventory-qty input {
    width: 100%;
    min-height: 42px;
    border-radius: 10px;
    background: rgba(9, 14, 24, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.filament-add-panel {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(247, 244, 238, 0.88);
    border: 1px dashed rgba(22, 32, 51, 0.14);
}

.filament-add-head {
    display: grid;
    gap: 4px;
}

.filament-add-head span {
    color: var(--muted);
    font-size: 0.9rem;
}

.atelier-cloud-help {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.atelier-cloud-help .info-card {
    padding: 16px;
}

.atelier-pane-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.atelier-pane-head h2,
.atelier-pane-subhead h3 {
    margin: 8px 0 6px;
}

.atelier-pane-head p,
.atelier-pane-subhead p {
    margin: 0;
    color: var(--muted);
}

.atelier-cloud-form,
.atelier-local-form {
    display: grid;
    gap: 16px;
}

.atelier-cloud-grid {
    align-items: end;
}

.atelier-cloud-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.atelier-cloud-list {
    display: grid;
    gap: 14px;
}

.atelier-cloud-diagnostics {
    display: grid;
    gap: 12px;
}

.atelier-cloud-printers {
    display: grid;
    gap: 12px;
    max-height: 520px;
    overflow: auto;
    padding-right: 4px;
}

.atelier-cloud-card {
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(217, 119, 69, 0.18);
    background: rgba(255, 255, 255, 0.88);
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.atelier-cloud-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 30px rgba(22, 32, 51, 0.08);
    border-color: rgba(217, 119, 69, 0.42);
}

.atelier-cloud-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.atelier-cloud-card span:not(.status-pill) {
    color: var(--muted);
}

.atelier-cloud-empty {
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px dashed rgba(217, 119, 69, 0.3);
}

.atelier-cloud-empty p {
    margin: 6px 0 0;
    color: var(--muted);
}

@media (max-width: 1100px) {
    .hero-grid,
    .pricing-layout,
    .benefit-layout,
    .config-layout,
    .result-layout,
    .sbs-hero-grid {
        grid-template-columns: 1fr;
    }

    .sticky-card {
        position: sticky;
        top: 12px;
        transform: none;
        max-height: none;
    }

    .summary-panel {
        order: -1;
        min-height: auto;
    }

    .header-tool-meta {
        justify-content: flex-end;
    }
}

@media (max-width: 900px) {
    .nav-bar,
    .contact-card {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .info-grid,
    .three-cols,
    .benefit-grid,
    .showcase-metrics,
    .order-facts,
    .live-config-grid,
    .sbs-stepper,
    .sbs-review-grid {
        grid-template-columns: 1fr;
    }

    .two-cols {
        grid-template-columns: 1fr;
    }

    .header-tool-meta {
        justify-content: flex-start;
    }

    .header-tool-meta span {
        display: none;
    }

    .header-tool-meta .header-cta {
        width: 100%;
    }

    .sbs-progress-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .production-request-item {
        grid-template-columns: 1fr;
    }

    .atelier-management-shell,
    .atelier-admin-shell {
        grid-template-columns: 1fr;
    }

    .atelier-pricing-grid {
        grid-template-columns: 1fr;
    }

    .atelier-tab-nav {
        position: static;
        display: flex;
        flex-wrap: wrap;
        padding: 14px;
    }

    .atelier-tab-btn {
        flex: 1 1 calc(50% - 10px);
        min-width: 220px;
    }

    .atelier-cloud-summary {
        grid-template-columns: 1fr;
    }

    .production-request-grid {
        grid-template-columns: 1fr;
    }

    .production-stats-grid,
    .production-filter-form {
        grid-template-columns: 1fr;
    }

    .production-hero-top,
    .atelier-pane-head,
    .production-header-stats {
        flex-direction: column;
        align-items: flex-start;
    }

    .production-header-metrics {
        justify-content: flex-start;
    }

    .atelier-cloud-help {
        grid-template-columns: 1fr;
    }

    .emoji-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hero-content h1,
    .section-heading h2,
    .contact-card h2 {
        font-size: 2.1rem;
    }

    .container {
        width: min(100% - 18px, 1240px);
    }

    .card-block,
    .summary-card,
    .result-summary-card,
    .result-preview-card,
    .pricing-card,
    .contact-card,
    .showcase-card,
    .info-card,
    .benefit-card {
        padding: 18px;
        border-radius: 24px;
    }

    .collapsible-head {
        padding: 18px;
        align-items: flex-start;
        flex-direction: column;
    }

    .collapsible-body {
        padding: 0 18px 18px;
    }

    .hero-actions,
    .result-actions,
    .sbs-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-bar {
        align-items: stretch;
    }

    .production-header-stats {
        gap: 12px;
    }

    .production-header-badge,
    .production-header-metrics {
        width: 100%;
    }

    .production-header-metrics {
        gap: 8px;
    }

    .production-header-metrics span,
    .atelier-tab-btn {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
    }

    .tool-subsection {
        padding: 16px;
    }

    .sbs-hero--compact {
        padding-top: 14px;
        padding-bottom: 8px;
    }

    .tool-stat {
        padding: 14px 16px;
    }

    .sbs-stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sbs-step-pill {
        min-height: 72px;
    }

    .preview-mode-switch {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mode-btn {
        width: 100%;
        text-align: center;
        padding: 12px 10px;
    }

    .summary-preview {
        padding: 12px;
    }

    .wide-preview {
        width: 100%;
        min-height: 220px;
    }

    .wide-grid {
        width: min(100%, 210px);
    }

    .preview-label {
        font-size: 0.9rem;
        letter-spacing: 0.04em;
    }

    .summary-list div,
    .order-facts div {
        align-items: start;
        gap: 6px;
    }

    .summary-list dd {
        text-align: left;
    }

    .price-row,
    .price-total,
    .price-lines li {
        align-items: start;
        flex-direction: column;
    }

    .result-actions a,
    .production-form button,
    .primary-btn,
    .secondary-btn,
    .success-btn,
    .submit-order,
    .ghost-link.sbs-nav-btn {
        width: 100%;
    }

    .option-pill {
        width: 100%;
        justify-content: flex-start;
        border-radius: 18px;
    }

    .emoji-picker {
        left: 50%;
        right: auto;
        top: 44%;
        bottom: auto;
        transform: translate(-50%, -44%);
        width: min(calc(100vw - 24px), 420px);
        max-width: min(24cm, calc(100vw - 24px));
        max-height: min(10cm, calc(100vh - 32px));
        padding: 12px;
    }

    .emoji-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .emoji-option {
        min-height: 50px;
        font-size: 1.3rem;
    }

    .production-card-head,
    .production-client-head,
    .production-request-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .atelier-tab-btn {
        flex: 1 1 calc(50% - 10px);
        min-width: 140px;
    }

    .color-stock-toolbar {
        grid-template-columns: 1fr;
    }

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

    .atelier-top-nav {
        flex-direction: column;
    }

    .atelier-top-link {
        width: 100%;
        justify-content: center;
    }

    .production-file-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .production-file-links a,
    .production-status-form .primary-btn {
        width: 100%;
    }

    .showcase-preview.preview-stage,
    .preview-stage {
        min-height: 220px;
    }

.result-logo-overlay {
        width: 32%;
    }
}

.canva-body {
    margin: 0;
    min-height: 100vh;
    font-family: "Inter", sans-serif;
    color: #162033;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(217, 119, 69, 0.18), transparent 24%),
        radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.14), transparent 28%),
        linear-gradient(180deg, #fbfaf7 0%, #edf2f7 100%);
}

.canva-shell {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(260px, 320px);
    grid-template-areas: "sidebar stage palette";
    grid-template-rows: minmax(0, 1fr);
    align-items: start;
    gap: 0;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.canva-sidebar {
    grid-area: sidebar;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 16px;
    padding: 20px 20px 132px;
    background: rgba(251, 250, 247, 0.9);
    border-right: 1px solid rgba(22, 32, 51, 0.08);
    align-content: start;
    min-height: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.canva-panel {
    display: grid;
    gap: 14px;
    padding: 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(22, 32, 51, 0.07);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.canva-panel-note {
    margin: 0;
    color: var(--muted);
}

.canva-panel-head,
.canva-section-head {
    display: grid;
    gap: 6px;
}

.canva-panel-head h1,
.canva-section-head h2,
.canva-stage-topbar h2 {
    margin: 0;
    letter-spacing: -0.03em;
}

.canva-panel-head p,
.canva-section-head p {
    margin: 0;
    color: var(--muted);
    max-width: 34ch;
}

.canva-color-select {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.canva-color-select-swatch {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid rgba(22, 32, 51, 0.12);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        0 4px 10px rgba(15, 23, 42, 0.08);
}

.canva-color-select select {
    min-width: 0;
}

.canva-action-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.canva-stage-shell {
    grid-area: stage;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 18px;
    padding: 24px;
    min-width: 0;
    min-height: 0;
    height: 100vh;
    overflow: hidden;
    overscroll-behavior: contain;
}

.canva-module-palette {
    grid-area: palette;
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-content: start;
    padding: 20px 20px 132px 0;
    min-height: 0;
    height: 150vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.canva-panel--palette {
    position: static;
    min-height: 0;
    overflow: hidden;
}

.canva-module-grid {
    display: grid;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.canva-module-card {
    display: grid;
    gap: 5px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(22, 32, 51, 0.07);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 245, 239, 0.92));
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.canva-module-card strong {
    font-size: 0.96rem;
}

.canva-module-card span {
    color: var(--muted);
    font-size: 0.88rem;
}

.canva-module-card:hover {
    transform: translateY(-1px);
    border-color: rgba(217, 119, 69, 0.28);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.canva-stage-topbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
    flex-wrap: wrap;
}

.canva-stage-hint {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.canva-stage-hint span {
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(22, 32, 51, 0.08);
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.canva-stage-backdrop {
    min-height: 0;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 30px;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.48) 0 22%, transparent 22% 78%, rgba(255,255,255,0.48) 78% 100%),
        radial-gradient(circle at top, rgba(255,255,255,0.96), rgba(229, 235, 243, 0.92));
    box-shadow:
        inset 0 0 0 1px rgba(22, 32, 51, 0.05),
        0 22px 60px rgba(15, 23, 42, 0.07);
    overflow: hidden;
    padding: 24px;
    touch-action: none;
    overscroll-behavior: contain;
}

.canva-stage {
    min-width: 100%;
    min-height: 100%;
    display: grid;
    place-items: center;
    touch-action: none;
}

.canva-plate {
    position: relative;
    background: #dfe6ef;
    border-radius: 32px;
    box-shadow:
        0 20px 44px rgba(15, 23, 42, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    touch-action: none;
}

.canva-item {
    position: absolute;
    cursor: grab;
    user-select: none;
    touch-action: none;
    -webkit-user-select: none;
}

.canva-item.is-selected {
    z-index: 99 !important;
}

.canva-item-body {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 18px;
    border: 2px solid transparent;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
    overflow: hidden;
}

.canva-item.is-selected .canva-item-body {
    border-color: #d97745;
}

.canva-item.is-invalid .canva-item-body {
    border-color: #c62828;
    box-shadow:
        0 10px 22px rgba(198, 40, 40, 0.16),
        0 0 0 2px rgba(198, 40, 40, 0.16);
}

.canva-item.is-selected.is-invalid .canva-item-body {
    border-color: #c62828;
}

.canva-item-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.82);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.canva-item-warning {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #c62828;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 900;
    box-shadow: 0 6px 14px rgba(198, 40, 40, 0.24);
}

.canva-item--qr .canva-item-body {
    background: #ffffff;
    padding: 18px;
}

.canva-qr-canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.canva-qr-center-badge {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 22%;
    height: 22%;
    min-width: 18px;
    min-height: 18px;
    max-width: 34%;
    max-height: 34%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 2px solid rgba(16, 24, 32, 0.24);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    z-index: 2;
    pointer-events: none;
}

.canva-qr-center-logo-graphic {
    width: 62%;
    height: 62%;
}

.canva-item--text .canva-item-body {
    align-items: stretch;
    justify-items: stretch;
    padding: 10px;
}

.canva-shape-node {
    border-style: solid;
}

.canva-text-node {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.05;
    font-family: "Manrope", "Inter", sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.canva-resize-handle {
    position: absolute;
    right: -9px;
    bottom: -9px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    background: #d97745;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
    cursor: nwse-resize;
    touch-action: none;
}

.canva-selection-empty {
    padding: 14px;
    border-radius: 18px;
    background: rgba(247, 244, 238, 0.8);
    color: var(--muted);
}

.canva-selection-form {
    display: grid;
    gap: 16px;
}

.canva-summary-list {
    display: grid;
    gap: 10px;
}

.canva-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(247, 244, 238, 0.88);
}

.canva-summary-row--error {
    background: rgba(198, 40, 40, 0.08);
    border: 1px solid rgba(198, 40, 40, 0.18);
}

.canva-summary-row span {
    color: var(--muted);
}

.canva-option-card {
    display: grid;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(247, 244, 238, 0.88);
    border: 1px solid rgba(22, 32, 51, 0.08);
}

.canva-option-card-copy {
    display: grid;
    gap: 4px;
}

.canva-option-card-copy span {
    color: var(--muted);
    font-size: 0.92rem;
}

.canva-option-pill {
    width: fit-content;
}

.canva-inspector {
    position: static;
    z-index: 20;
    width: auto;
    max-height: none;
    margin: 0;
    display: grid;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(22, 32, 51, 0.1);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(18px);
}

.canva-inspector-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(35, 49, 78, 0.96));
    color: #ffffff;
    cursor: default;
    user-select: none;
}

.canva-inspector-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.canva-advanced-head-btn {
    min-height: 40px;
    padding: 0 16px;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.canva-advanced-head-btn:hover {
    border-color: rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.2);
}

.canva-inspector-head strong,
.canva-inspector-head span {
    display: block;
}

.canva-inspector-toggle {
    display: none;
    min-width: 88px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.canva-inspector-head span {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.86rem;
}

.canva-inspector-body {
    display: grid;
    gap: 16px;
    padding: 16px;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
}

.canva-bottom-bar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 80;
    width: min(1220px, calc(100vw - 36px));
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    transform: translateX(-50%);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(28, 41, 67, 0.94));
    color: #ffffff;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(16px);
}

.canva-bottom-meta {
    display: grid;
    gap: 4px;
}

.canva-bottom-meta span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
}

.canva-recap-backdrop {
    position: fixed;
    inset: 0;
    z-index: 149;
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(5px);
}

.canva-recap-modal {
    position: fixed;
    inset: 24px;
    z-index: 150;
    display: grid;
    gap: 18px;
    padding: 20px;
    border-radius: 28px;
    background: rgba(251, 250, 247, 0.98);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.2);
    overflow: auto;
}

.canva-recap-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.canva-recap-head h2 {
    margin: 10px 0 0;
}

.canva-recap-preview {
    display: grid;
    gap: 14px;
}

.canva-recap-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.canva-zoom-controls {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.canva-zoom-btn {
    min-width: 52px;
}

.canva-recap-stage {
    min-height: 340px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.96), rgba(226, 232, 240, 0.84)),
        linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.05));
    perspective: 1400px;
    touch-action: none;
    overscroll-behavior: contain;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}

.canva-recap-viewport {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: inherit;
    touch-action: none;
}

.canva-recap-plate {
    position: relative;
    box-shadow: 0 24px 55px rgba(15, 23, 42, 0.16);
    transition: transform 0.25s ease;
    transform-origin: center center;
    margin: 0 auto;
}

.canva-recap-item {
    pointer-events: none;
}

.canva-recap-item .canva-item-tag,
.canva-recap-item .canva-resize-handle {
    display: none;
}

.canva-recap-item-body {
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.canva-recap-item--qr .canva-recap-item-body,
.canva-recap-item--text .canva-recap-item-body,
.canva-recap-item--logo .canva-recap-item-body {
    background: transparent;
}

.canva-recap-item--shape .canva-recap-item-body {
    border-width: 0;
    box-shadow:
        0 10px 18px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.canva-recap-qr-canvas {
    filter:
        drop-shadow(0 3px 0 rgba(15, 23, 42, 0.18))
        drop-shadow(0 8px 12px rgba(15, 23, 42, 0.12));
}

.canva-recap-text-node {
    align-items: center;
    justify-items: center;
    font-weight: 800;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28),
        0 3px 5px rgba(15, 23, 42, 0.10);
}

.canva-recap-logo-node .canva-logo-graphic {
    filter:
        drop-shadow(0 2px 0 rgba(15, 23, 42, 0.16))
        drop-shadow(0 8px 12px rgba(15, 23, 42, 0.10));
}

.canva-recap-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(340px, 1fr);
    gap: 18px;
}

.canva-quote-form {
    align-content: start;
}

.canva-account-resume {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid rgba(57, 117, 104, .24);
    border-radius: 16px;
    background: #f1f8f4;
}

.canva-account-resume p {
    margin: 0;
    color: #56615d;
}

.canva-account-resume > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.canva-quote-feedback {
    padding: 12px 14px;
    border-radius: 16px;
    font-weight: 700;
}

.canva-quote-feedback.is-error {
    background: rgba(180, 35, 24, 0.1);
    color: var(--danger);
}

.canva-quote-feedback.is-success {
    background: rgba(15, 118, 110, 0.1);
    color: var(--success);
}

.canva-selection-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.canva-inline-edit-btn {
    min-width: 132px;
}

.canva-danger-btn {
    color: var(--danger);
    font-weight: 800;
}

.canva-layer-list {
    display: grid;
    gap: 10px;
    min-height: 120px;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
}

.canva-layer-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(22, 32, 51, 0.08);
    background: rgba(255, 255, 255, 0.88);
    text-align: left;
    cursor: pointer;
}

.canva-layer-item strong {
    font-size: 0.95rem;
}

.canva-layer-meta {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1;
    border: 0;
    padding: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.canva-layer-item span {
    color: var(--muted);
    font-size: 0.85rem;
}

.canva-layer-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.canva-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(22, 32, 51, 0.1);
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.canva-icon-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.canva-icon-btn--danger {
    color: var(--danger);
}

.canva-layer-item.is-active {
    border-color: rgba(217, 119, 69, 0.5);
    background: rgba(217, 119, 69, 0.08);
}

.canva-layer-item.is-invalid {
    border-color: rgba(198, 40, 40, 0.32);
    background: rgba(198, 40, 40, 0.06);
}

.canva-panel--layers {
    min-height: 220px;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.canva-layer-empty {
    display: grid;
    place-items: center;
    min-height: 120px;
    padding: 16px;
    border-radius: 18px;
    border: 1px dashed rgba(22, 32, 51, 0.16);
    background: rgba(248, 250, 252, 0.9);
    color: var(--muted);
    text-align: center;
}

.canva-item--logo .canva-item-body {
    background: rgba(255, 255, 255, 0.96);
    padding: 16px;
}

.canva-logo-node {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 14px;
    overflow: hidden;
}

.canva-logo-graphic {
    width: 100%;
    height: 100%;
    background: currentColor;
}

.canva-logo-placeholder {
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
    font-weight: 700;
}

.canva-advanced-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(6px);
    z-index: 210;
}

.canva-advanced-modal {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(720px, calc(100vw - 32px));
    max-height: min(84vh, 860px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(22, 32, 51, 0.1);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.26);
    z-index: 220;
    overflow: hidden;
}

.canva-advanced-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(35, 49, 78, 0.98));
    color: #fff;
}

.canva-advanced-head h2 {
    margin: 6px 0 0;
}

.canva-advanced-body {
    display: grid;
    gap: 18px;
    padding: 20px;
    overflow: auto;
}

.canva-advanced-section {
    display: grid;
    gap: 14px;
}

.canva-advanced-section h3 {
    margin: 0;
}

.canva-emoji-field {
    grid-column: 1 / -1;
}

.canva-emoji-inline-picker {
    display: grid;
    gap: 12px;
    max-height: 220px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(22, 32, 51, 0.08);
    background: rgba(247, 244, 238, 0.74);
    overflow: auto;
}

.canva-emoji-inline-picker .emoji-picker-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding-bottom: 8px;
    background: rgba(247, 244, 238, 0.92);
}

.canva-emoji-inline-picker .emoji-selected {
    font-size: 0.84rem;
}

.canva-advanced-note {
    margin: 0;
    color: var(--muted);
}

.canva-mobile-quickbar,
.canva-mobile-overlay {
    display: none;
}

.canva-mobile-tab.is-active {
    background: linear-gradient(135deg, var(--primary) 0%, #22324e 100%);
    color: #fff;
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.18);
}

@media (max-width: 1100px) {
    .canva-shell {
        grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
        grid-template-areas:
            "sidebar stage"
            "palette palette";
        grid-template-rows: auto auto;
        height: auto;
        overflow: visible;
    }

    .canva-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(22, 32, 51, 0.08);
        overflow: visible;
        grid-template-rows: auto auto auto;
    }

    .canva-module-palette {
        padding: 0 20px 20px 20px;
        height: auto;
        overflow: visible;
    }

    .canva-panel--palette {
        position: static;
    }

    .canva-stage-shell {
        height: auto;
        overflow: visible;
    }

    .canva-stage-backdrop {
        min-height: calc(100vh - 120px);
        height: auto;
    }

    .canva-bottom-bar {
        position: static;
        width: auto;
        margin: 0 20px 20px;
        transform: none;
    }

    .canva-recap-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .canva-body {
        overflow: auto;
    }

    .canva-body.canva-mobile-panel-open {
        overflow: hidden;
    }

    .canva-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "stage"
            "sidebar";
        height: auto;
        padding-bottom: 20px;
        overflow: visible;
    }

    .canva-stage-shell,
    .canva-sidebar,
    .canva-module-palette {
        padding: 16px;
        height: auto;
    }

    .canva-selection-actions,
    .canva-stage-topbar,
    .canva-bottom-bar,
    .canva-recap-head,
    .canva-recap-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .canva-stage-shell {
        gap: 14px;
    }

    .canva-mobile-quickbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .canva-mobile-tab {
        min-height: 46px;
        padding: 0 14px;
        font-size: 0.94rem;
    }

    .canva-mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 150;
        background: rgba(15, 23, 42, 0.34);
        backdrop-filter: blur(4px);
    }

    .canva-sidebar,
    .canva-module-palette {
        padding: 0;
        border: 0;
        background: transparent;
    }

    .canva-sidebar > .canva-panel:first-child {
        margin: 0 16px 16px;
    }

    .canva-sidebar > .canva-mobile-drawer,
    .canva-module-palette > .canva-mobile-drawer,
    .canva-inspector.canva-mobile-drawer {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 84px;
        bottom: calc(86px + env(safe-area-inset-bottom, 0px));
        z-index: 160;
        display: none;
        margin: 0;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 24px;
        box-shadow: 0 30px 60px rgba(15, 23, 42, 0.24);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .canva-sidebar > .canva-mobile-drawer.is-open,
    .canva-module-palette > .canva-mobile-drawer.is-open,
    .canva-inspector.canva-mobile-drawer.is-open {
        display: grid;
    }

    .canva-inspector {
        position: fixed;
        top: auto;
        z-index: 160;
        width: auto;
        max-height: none;
        margin: 0;
        border-radius: 22px;
        transition: none;
    }

    .canva-inspector:not(.is-open) {
        transform: none;
        opacity: 1;
    }

    .canva-inspector.is-open {
        transform: none;
    }

    .canva-inspector:not(.is-open) .canva-inspector-body {
        display: grid;
    }

    .canva-inspector-head {
        cursor: default;
        padding: 12px 14px;
        position: static;
    }

    .canva-inspector-head strong {
        font-size: 0.98rem;
    }

    .canva-inspector-head span {
        font-size: 0.8rem;
    }

    .canva-inspector-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 96px;
        min-height: 38px;
        padding: 0 14px;
    }

    .canva-inspector-body {
        max-height: none;
        padding: 14px;
    }

    .canva-sidebar {
        gap: 12px;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        grid-template-rows: auto;
    }

    .canva-panel {
        min-width: 0;
    }

    .canva-panel--layers {
        max-height: 38vh;
    }

    .canva-layer-list {
        max-height: none;
        min-height: 160px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .canva-advanced-modal {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 24px);
        inset: 12px 10px auto 10px;
        transform: none;
    }

    .canva-stage-backdrop {
        min-height: 360px;
        height: auto;
        padding: 14px;
    }

    .canva-stage {
        min-height: 320px;
    }

    .canva-plate {
        max-width: 100%;
    }

    .canva-bottom-bar {
        position: static;
        width: auto;
        transform: none;
        margin: 16px;
    }

    .canva-recap-modal {
        inset: 10px;
    }
}

/* QRCode Studio refresh */
.sbs-body[data-ui-mode="sbs"] {
    --studio-ink: #172033;
    --studio-soft: #5f6678;
    --studio-paper: #fffaf2;
    --studio-panel: rgba(255, 252, 247, 0.88);
    --studio-line: rgba(23, 32, 51, 0.1);
    --studio-night: #131b2d;
    --studio-clay: #cb7f52;
    --studio-gold: #d5b06b;
    --studio-teal: #1f6f6a;
    font-family: "Montserrat", "Segoe UI", sans-serif;
    color: var(--studio-ink);
    background:
        radial-gradient(circle at top right, rgba(213, 176, 107, 0.22), transparent 24%),
        radial-gradient(circle at top left, rgba(31, 111, 106, 0.12), transparent 26%),
        linear-gradient(180deg, #f8f2e7 0%, #f2ebdf 42%, #ebe1d3 100%);
}

.sbs-body[data-ui-mode="sbs"]::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 38%),
        radial-gradient(circle at 15% 18%, rgba(255, 255, 255, 0.4), transparent 18%);
    opacity: 0.9;
}

.sbs-body[data-ui-mode="sbs"] .container {
    width: min(1380px, calc(100% - 40px));
}

.sbs-body[data-ui-mode="sbs"] .site-header {
    background: rgba(248, 242, 231, 0.74);
    border-bottom: 1px solid rgba(23, 32, 51, 0.08);
    box-shadow: 0 16px 42px rgba(23, 32, 51, 0.06);
}

.sbs-body[data-ui-mode="sbs"] .site-header--tool {
    backdrop-filter: blur(20px);
}

.sbs-body[data-ui-mode="sbs"] .nav-bar {
    min-height: 94px;
}

.sbs-body[data-ui-mode="sbs"] .brand-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, #172033 0%, #294367 48%, #cb7f52 100%);
    box-shadow: 0 18px 36px rgba(23, 32, 51, 0.18);
    letter-spacing: 0.08em;
}

.sbs-body[data-ui-mode="sbs"] .brand-copy strong,
.sbs-body[data-ui-mode="sbs"] .hero-content h1,
.sbs-body[data-ui-mode="sbs"] .block-head h3,
.sbs-body[data-ui-mode="sbs"] .summary-top h3,
.sbs-body[data-ui-mode="sbs"] .sbs-progress-head h2,
.sbs-body[data-ui-mode="sbs"] .section-heading h2,
.sbs-body[data-ui-mode="sbs"] .live-config-head h4,
.sbs-body[data-ui-mode="sbs"] .tool-subsection-head h4 {
    font-family: "Playfair Display", Georgia, serif;
    letter-spacing: -0.03em;
}

.sbs-body[data-ui-mode="sbs"] .brand-copy small {
    color: var(--studio-soft);
}

.sbs-body[data-ui-mode="sbs"] .header-tool-meta {
    gap: 10px;
}

.sbs-body[data-ui-mode="sbs"] .header-tool-meta span {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(23, 32, 51, 0.08);
    color: var(--studio-soft);
}

.sbs-body[data-ui-mode="sbs"] .header-cta,
.sbs-body[data-ui-mode="sbs"] .primary-btn,
.sbs-body[data-ui-mode="sbs"] .submit-order,
.sbs-body[data-ui-mode="sbs"] .primary-link,
.sbs-body[data-ui-mode="sbs"] .success-btn {
    background: linear-gradient(135deg, var(--studio-gold) 0%, var(--studio-clay) 100%);
    color: #1b1f29;
    box-shadow: 0 18px 36px rgba(203, 127, 82, 0.22);
}

.sbs-body[data-ui-mode="sbs"] .ghost-link,
.sbs-body[data-ui-mode="sbs"] .secondary-btn,
.sbs-body[data-ui-mode="sbs"] .sbs-nav-btn {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(23, 32, 51, 0.12);
    color: var(--studio-ink);
}

.sbs-body[data-ui-mode="sbs"] .hero-content {
    position: relative;
    overflow: hidden;
    padding: 40px;
    border-radius: 38px;
    background:
        radial-gradient(circle at top right, rgba(213, 176, 107, 0.2), transparent 24%),
        linear-gradient(145deg, #121a2d 0%, #1f304d 56%, #314a64 100%);
    box-shadow: 0 32px 80px rgba(19, 27, 45, 0.28);
}

.sbs-body[data-ui-mode="sbs"] .hero-content::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -88px;
    top: -96px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 62%);
}

.sbs-body[data-ui-mode="sbs"] .hero-content > * {
    position: relative;
    z-index: 1;
}

.sbs-body[data-ui-mode="sbs"] .hero-content .eyebrow {
    background: rgba(213, 176, 107, 0.14);
    color: #f4d7a0;
    border: 1px solid rgba(213, 176, 107, 0.2);
}

.sbs-body[data-ui-mode="sbs"] .hero-content h1 {
    margin: 14px 0 16px;
    max-width: 10ch;
    font-size: clamp(3.2rem, 6vw, 5.8rem);
    line-height: 0.94;
    color: #fffaf2;
}

.sbs-body[data-ui-mode="sbs"] .hero-content p {
    max-width: 58ch;
    color: rgba(255, 250, 242, 0.82);
    font-size: 1.04rem;
    line-height: 1.8;
}

.sbs-body[data-ui-mode="sbs"] .sbs-hero-actions,
.sbs-body[data-ui-mode="sbs"] .sbs-hero-trust {
    margin-top: 22px;
}

.sbs-body[data-ui-mode="sbs"] .sbs-hero-trust span {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 250, 242, 0.84);
}

.sbs-body[data-ui-mode="sbs"] .sbs-hero-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
    gap: 28px;
    align-items: stretch;
}

.sbs-body[data-ui-mode="sbs"] .sbs-intro-card,
.sbs-body[data-ui-mode="sbs"] .sbs-progress-card,
.sbs-body[data-ui-mode="sbs"] .card-block,
.sbs-body[data-ui-mode="sbs"] .result-summary-card,
.sbs-body[data-ui-mode="sbs"] .result-preview-card {
    background: var(--studio-panel);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 24px 70px rgba(23, 32, 51, 0.1);
}

.sbs-body[data-ui-mode="sbs"] .sbs-intro-card,
.sbs-body[data-ui-mode="sbs"] .sbs-progress-card {
    border-radius: 32px;
}

.sbs-body[data-ui-mode="sbs"] .sbs-intro-card--tool {
    background:
        linear-gradient(180deg, rgba(255, 249, 240, 0.94), rgba(255, 244, 229, 0.9));
    border-color: rgba(203, 127, 82, 0.14);
}

.sbs-body[data-ui-mode="sbs"] .tool-stat {
    gap: 6px;
    padding: 18px 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(23, 32, 51, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.sbs-body[data-ui-mode="sbs"] .tool-stat strong {
    color: var(--studio-ink);
    font-size: 1.02rem;
}

.sbs-body[data-ui-mode="sbs"] .tool-stat span {
    color: var(--studio-soft);
    line-height: 1.55;
}

.sbs-body[data-ui-mode="sbs"] .sbs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.82fr);
    gap: 28px;
}

.sbs-body[data-ui-mode="sbs"] .sbs-progress-head strong,
.sbs-body[data-ui-mode="sbs"] .block-head p,
.sbs-body[data-ui-mode="sbs"] .tool-subsection-head p,
.sbs-body[data-ui-mode="sbs"] .subtle-copy,
.sbs-body[data-ui-mode="sbs"] small {
    color: var(--studio-soft);
}

.sbs-body[data-ui-mode="sbs"] .sbs-step-pill {
    min-height: 92px;
    align-content: start;
    border-radius: 22px;
    border: 1px solid rgba(23, 32, 51, 0.08);
    background: rgba(255, 255, 255, 0.64);
}

.sbs-body[data-ui-mode="sbs"] .sbs-step-pill span {
    width: 36px;
    height: 36px;
    background: rgba(23, 32, 51, 0.08);
}

.sbs-body[data-ui-mode="sbs"] .sbs-step-pill.is-active {
    background: #fffdf9;
    border-color: rgba(203, 127, 82, 0.22);
    box-shadow: 0 12px 24px rgba(23, 32, 51, 0.06);
}

.sbs-body[data-ui-mode="sbs"] .sbs-step-pill.is-active span,
.sbs-body[data-ui-mode="sbs"] .sbs-step-pill.is-complete span {
    background: linear-gradient(135deg, var(--studio-night) 0%, var(--studio-clay) 100%);
}

.sbs-body[data-ui-mode="sbs"] .sbs-progress-bar {
    height: 12px;
    background: rgba(23, 32, 51, 0.08);
}

.sbs-body[data-ui-mode="sbs"] .sbs-progress-bar span {
    background: linear-gradient(135deg, var(--studio-gold) 0%, var(--studio-clay) 100%);
}

.sbs-body[data-ui-mode="sbs"] .card-block,
.sbs-body[data-ui-mode="sbs"] .result-summary-card,
.sbs-body[data-ui-mode="sbs"] .result-preview-card {
    padding: 28px;
    border-radius: 34px;
}

.sbs-body[data-ui-mode="sbs"] .step-kicker {
    background: rgba(23, 32, 51, 0.06);
    color: var(--studio-soft);
}

.sbs-body[data-ui-mode="sbs"] .tool-subsection {
    padding: 22px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(249, 242, 230, 0.72), rgba(255, 255, 255, 0.94));
    border: 1px solid rgba(23, 32, 51, 0.06);
}

.sbs-body[data-ui-mode="sbs"] .field-grid.two-cols,
.sbs-body[data-ui-mode="sbs"] .field-grid.three-cols,
.sbs-body[data-ui-mode="sbs"] .live-config-grid {
    gap: 18px;
}

.sbs-body[data-ui-mode="sbs"] input[type="text"],
.sbs-body[data-ui-mode="sbs"] input[type="email"],
.sbs-body[data-ui-mode="sbs"] input[type="url"],
.sbs-body[data-ui-mode="sbs"] input[type="number"],
.sbs-body[data-ui-mode="sbs"] input[type="file"],
.sbs-body[data-ui-mode="sbs"] select,
.sbs-body[data-ui-mode="sbs"] textarea {
    width: 100%;
    min-height: 56px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(23, 32, 51, 0.12);
    background: rgba(255, 255, 255, 0.94);
    color: var(--studio-ink);
    font: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.sbs-body[data-ui-mode="sbs"] textarea {
    min-height: 128px;
    resize: vertical;
}

.sbs-body[data-ui-mode="sbs"] input:focus,
.sbs-body[data-ui-mode="sbs"] select:focus,
.sbs-body[data-ui-mode="sbs"] textarea:focus {
    outline: none;
    border-color: rgba(203, 127, 82, 0.42);
    box-shadow: 0 0 0 4px rgba(203, 127, 82, 0.12);
}

.sbs-body[data-ui-mode="sbs"] .field label {
    display: inline-flex;
    margin-bottom: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--studio-ink);
}

.sbs-body[data-ui-mode="sbs"] .field-static,
.sbs-body[data-ui-mode="sbs"] .inline-note,
.sbs-body[data-ui-mode="sbs"] .option-pill,
.sbs-body[data-ui-mode="sbs"] .warning-card,
.sbs-body[data-ui-mode="sbs"] .sbs-review-grid div {
    border-radius: 20px;
}

.sbs-body[data-ui-mode="sbs"] .field-static {
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(23, 32, 51, 0.08);
}

.sbs-body[data-ui-mode="sbs"] .option-pill {
    gap: 12px;
    min-height: 58px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(23, 32, 51, 0.08);
}

.sbs-body[data-ui-mode="sbs"] .option-pill input:checked + span,
.sbs-body[data-ui-mode="sbs"] .option-pill:has(input:checked) {
    color: var(--studio-ink);
    border-color: rgba(203, 127, 82, 0.26);
    background: rgba(255, 247, 237, 0.96);
}

.sbs-body[data-ui-mode="sbs"] .summary-card {
    position: sticky;
    top: 108px;
    display: grid;
    gap: 20px;
    padding: 28px;
    border-radius: 34px;
    background:
        radial-gradient(circle at top right, rgba(213, 176, 107, 0.14), transparent 20%),
        linear-gradient(180deg, #121928 0%, #1c2840 100%);
    color: #fffaf2;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 86px rgba(19, 27, 45, 0.28);
}

.sbs-body[data-ui-mode="sbs"] .summary-card .eyebrow {
    background: rgba(213, 176, 107, 0.14);
    color: #f4d7a0;
    border: 1px solid rgba(213, 176, 107, 0.18);
}

.sbs-body[data-ui-mode="sbs"] .summary-card .summary-top h3,
.sbs-body[data-ui-mode="sbs"] .summary-card .live-config-head h4,
.sbs-body[data-ui-mode="sbs"] .summary-card strong,
.sbs-body[data-ui-mode="sbs"] .summary-card dd {
    color: #fffaf2;
}

.sbs-body[data-ui-mode="sbs"] .summary-card .live-config-head span,
.sbs-body[data-ui-mode="sbs"] .summary-card span,
.sbs-body[data-ui-mode="sbs"] .summary-card dt {
    color: rgba(255, 250, 242, 0.68);
}

.sbs-body[data-ui-mode="sbs"] .summary-card .preview-mode-switch,
.sbs-body[data-ui-mode="sbs"] .summary-card .live-config-card,
.sbs-body[data-ui-mode="sbs"] .summary-card .warning-card,
.sbs-body[data-ui-mode="sbs"] .summary-card .summary-list div,
.sbs-body[data-ui-mode="sbs"] .summary-card .price-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sbs-body[data-ui-mode="sbs"] .summary-card .summary-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sbs-body[data-ui-mode="sbs"] .summary-card .summary-list div {
    display: grid;
    align-content: center;
    gap: 5px;
    min-width: 0;
    padding: 14px 16px;
    border-radius: 18px;
    border-bottom: 0;
}

.sbs-body[data-ui-mode="sbs"] .summary-card .summary-list div:last-child {
    grid-column: 1 / -1;
}

.sbs-body[data-ui-mode="sbs"] .summary-card .summary-list dd {
    text-align: left;
    overflow-wrap: anywhere;
}

.sbs-body[data-ui-mode="sbs"] .summary-card .live-config-grid div {
    background: rgba(9, 15, 27, 0.72);
    border-color: rgba(255, 255, 255, 0.12);
}

.sbs-body[data-ui-mode="sbs"] .summary-card .live-config-grid div span {
    color: rgba(255, 250, 242, 0.72);
}

.sbs-body[data-ui-mode="sbs"] .summary-card .live-config-grid div strong {
    color: #fffaf2;
}

.sbs-body[data-ui-mode="sbs"] .summary-card .mode-btn {
    color: rgba(255, 250, 242, 0.72);
}

.sbs-body[data-ui-mode="sbs"] .summary-card .mode-btn.is-active {
    background: #fffaf2;
    color: var(--studio-ink);
}

.sbs-body[data-ui-mode="sbs"] .summary-card .preview-stage {
    border-radius: 28px;
    background:
        radial-gradient(circle at top, rgba(213, 176, 107, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(10, 15, 24, 0.94) 0%, rgba(28, 40, 64, 0.98) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.sbs-body[data-ui-mode="sbs"] .summary-pinned-preview {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: #121928;
    box-shadow: 0 18px 24px rgba(10, 15, 24, 0.22);
}

.sbs-body[data-ui-mode="sbs"] .summary-card .mini-preview {
    border-radius: 26px;
    box-shadow: 0 20px 44px rgba(10, 15, 24, 0.28);
}

.sbs-body[data-ui-mode="sbs"] .summary-card .color-chip {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sbs-body[data-ui-mode="sbs"] .result-section .section-heading,
.sbs-body[data-ui-mode="sbs"] .result-summary-card .success-banner,
.sbs-body[data-ui-mode="sbs"] .result-summary-card .tool-subsection {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(23, 32, 51, 0.08);
    border-radius: 24px;
}

.sbs-body[data-ui-mode="sbs"] .result-summary-card .success-banner {
    padding: 18px 20px;
}

.sbs-body[data-ui-mode="sbs"] .order-facts div {
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(23, 32, 51, 0.08);
    border-radius: 22px;
}

.sbs-body[data-ui-mode="sbs"] .result-actions {
    align-items: stretch;
    gap: 12px;
}

.sbs-body[data-ui-mode="sbs"] .result-actions .primary-btn,
.sbs-body[data-ui-mode="sbs"] .result-actions .secondary-btn {
    min-width: 210px;
    text-decoration: none;
}

.sbs-body[data-ui-mode="sbs"] .production-form .success-btn {
    justify-self: start;
    min-width: 260px;
    background: linear-gradient(135deg, var(--studio-gold) 0%, var(--studio-clay) 100%);
    color: #fff;
}

@media (min-width: 1081px) {
    .sbs-body[data-ui-mode="sbs"] .summary-panel {
        position: sticky;
        top: 92px;
        align-self: start;
        min-height: 0;
        max-height: calc(100vh - 108px);
    }

    .sbs-body[data-ui-mode="sbs"] .summary-card {
        position: static;
        top: auto;
        max-height: calc(100vh - 108px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: 1080px) {
    .sbs-body[data-ui-mode="sbs"] .sbs-layout,
    .sbs-body[data-ui-mode="sbs"] .sbs-hero-grid {
        grid-template-columns: 1fr;
    }

    .sbs-body[data-ui-mode="sbs"] .summary-panel {
        min-height: 0;
    }

    .sbs-body[data-ui-mode="sbs"] .summary-card {
        position: relative;
        top: 0;
    }
}

@media (max-width: 720px) {
    .sbs-body[data-ui-mode="sbs"] .container {
        width: min(100% - 24px, 1380px);
    }

    .sbs-body[data-ui-mode="sbs"] .nav-bar {
        min-height: 84px;
    }

    .sbs-body[data-ui-mode="sbs"] .hero-content,
    .sbs-body[data-ui-mode="sbs"] .sbs-intro-card,
    .sbs-body[data-ui-mode="sbs"] .sbs-progress-card,
    .sbs-body[data-ui-mode="sbs"] .card-block,
    .sbs-body[data-ui-mode="sbs"] .summary-card,
    .sbs-body[data-ui-mode="sbs"] .result-summary-card,
    .sbs-body[data-ui-mode="sbs"] .result-preview-card {
        padding: 22px;
        border-radius: 26px;
    }

    .sbs-body[data-ui-mode="sbs"] .hero-content h1 {
        font-size: clamp(2.5rem, 11vw, 4rem);
    }

    .sbs-body[data-ui-mode="sbs"] .sbs-stepper,
    .sbs-body[data-ui-mode="sbs"] .sbs-review-grid,
    .sbs-body[data-ui-mode="sbs"] .live-config-grid,
    .sbs-body[data-ui-mode="sbs"] .summary-card .summary-list {
        grid-template-columns: 1fr;
    }

    .sbs-body[data-ui-mode="sbs"] .summary-card .summary-list div:last-child {
        grid-column: auto;
    }

    .sbs-body[data-ui-mode="sbs"] .header-tool-meta {
        display: none;
    }
}
/* QR-specific additions to the canonical public navigation in shared/ui. */
.public-shell-nav--qrcode {
    backdrop-filter: blur(8px);
}

.public-shell-nav--qrcode .public-shell-nav__inner {
    width: min(1240px, calc(100% - 4px));
}

.public-shell-nav--qrcode .public-shell-nav__copy strong {
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.public-shell-nav--qrcode .public-shell-nav__copy small {
    font-weight: 600;
}

.public-shell-nav--qrcode .public-shell-nav__actions {
    justify-content: flex-end;
    flex: 0 0 auto;
}

.public-shell-nav--qrcode .public-shell-nav__link,
.public-shell-nav--qrcode .public-shell-nav__button {
    font-size: 0.92rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.public-shell-nav--qrcode .public-shell-nav__link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 1px solid rgba(22, 32, 51, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
}

.public-shell-nav--qrcode .public-shell-nav__button {
    box-shadow: 0 14px 28px rgba(217, 119, 69, 0.24);
}

.public-shell-nav--qrcode .public-shell-nav__link:hover,
.public-shell-nav--qrcode .public-shell-nav__button:hover,
.public-shell-nav--qrcode .public-shell-nav__account[open] .public-shell-nav__avatar {
    transform: translateY(-1px);
}

.public-shell-nav--qrcode .public-shell-nav__dropdown {
    backdrop-filter: blur(20px);
}

.public-shell-nav--qrcode .public-shell-nav__dropdown strong {
    color: var(--text);
    font-size: 0.98rem;
}

.public-shell-nav--qrcode .public-shell-nav__dropdown a {
    font-weight: 600;
}

.public-shell-nav--qrcode + .site-header--tool {
    position: sticky;
    top: 84px;
    z-index: 70;
    margin: 90px 16px 0;
    border: none;
    background: transparent;
    backdrop-filter: none;
}

.public-shell-nav--qrcode + .site-header--tool .nav-bar {
    width: min(1240px, 100%);
    min-height: auto;
    margin: 0 auto;
    padding: 14px 18px;
    border: 1px solid rgba(22, 32, 51, 0.08);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255, 250, 242, 0.92) 0%, rgba(248, 243, 233, 0.92) 100%),
        radial-gradient(circle at top left, rgba(217, 119, 69, 0.12), transparent 34%);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(16px);
}

.public-shell-nav--qrcode + .site-header--tool .brand-icon {
    border-radius: 18px;
    background: linear-gradient(135deg, #25385a 0%, #101820 42%, #d97745 100%);
}

.public-shell-nav--qrcode + .site-header--tool .brand-copy strong {
    font-size: 1.06rem;
    letter-spacing: -0.02em;
}

.public-shell-nav--qrcode + .site-header--tool .brand-copy small {
    font-size: 0.9rem;
}

.public-shell-nav--qrcode + .site-header--tool .header-tool-meta span {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(22, 32, 51, 0.06);
}

.public-shell-nav--qrcode + .site-header--tool .header-cta {
    background: linear-gradient(135deg, var(--accent) 0%, #e7a46b 100%);
    color: #162033;
    box-shadow: 0 18px 35px rgba(217, 119, 69, 0.22);
}

@media (max-width: 720px) {
    .public-shell-nav--qrcode .public-shell-nav__inner {
        width: calc(100% - 2px);
    }

    .public-shell-nav--qrcode .public-shell-nav__link {
        min-height: 40px;
        padding: 0 13px;
        font-size: 0.84rem;
    }

    .public-shell-nav--qrcode .public-shell-nav__button {
        font-size: 0.84rem;
    }

    .public-shell-nav--qrcode + .site-header--tool {
        top: 72px;
        margin: 78px 10px 0;
    }

    .public-shell-nav--qrcode + .site-header--tool .nav-bar {
        padding: 12px 14px;
        border-radius: 22px;
    }
}

@media (max-width: 520px) {
    .public-shell-nav--qrcode .public-shell-nav__link {
        padding-inline: 10px;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .public-shell-nav--qrcode .public-shell-nav__button {
        font-size: 0.78rem;
        white-space: nowrap;
    }
}
.production-activation-note{display:grid;gap:4px;margin-top:14px;padding:13px 15px;border:1px solid #efd3bd;border-radius:16px;color:#8d3d1b;background:#fff7ef}
.production-activation-note span{font-size:.88rem;line-height:1.45}
.production-slicer-note{border-color:#bbd7cf;color:#164f43;background:#effaf6}
.production-slicer-note .secondary-btn{justify-self:start;margin-top:4px}
.production-slicer-note--error{border-color:#efc4b5;color:#883619;background:#fff4ef}
.production-product-details{margin-top:14px;padding:12px 14px;border:1px solid rgba(24,33,54,.12);border-radius:16px;background:#f8f8f6}
.production-product-details summary{cursor:pointer;font-weight:800}
.production-product-list{display:grid;gap:8px;max-height:280px;margin-top:10px;overflow:auto}
.production-product-list article{display:grid;gap:3px;padding:10px;border-radius:12px;background:#fff}
.production-product-list a{overflow-wrap:anywhere;color:#a4471d}
.production-order-recap{margin-top:14px;padding:13px 15px;border:1px solid rgba(24,33,54,.12);border-radius:16px;background:rgba(255,255,255,.72)}
.production-order-recap summary{cursor:pointer;font-weight:800}
.production-order-recap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.production-order-recap-grid div{display:grid;gap:2px;padding:10px;border-radius:12px;background:#f5f1e9}
.production-order-recap-grid span,.production-order-colors>strong{color:#657089;font-size:.76rem}
.production-order-colors,.production-product-files{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.production-order-colors span,.production-product-files a{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:#f3eadb;color:#8f451d;font-size:.76rem;font-weight:750}
.production-order-colors i{width:12px;height:12px;border:1px solid rgba(28,36,55,.18);border-radius:50%;background:var(--order-color,#ddd)}
.production-related-links{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 9px;margin-top:7px;padding-top:7px;border-top:1px solid rgba(24,33,54,.1);font-size:.76rem}
@media(max-width:720px){.production-order-recap-grid{grid-template-columns:1fr}}

.filament-stock-workspace{gap:18px}
.filament-stock-overview{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(420px,1fr);gap:28px;align-items:center;padding:26px 28px;border:1px solid rgba(24,33,54,.08);border-radius:24px;background:linear-gradient(135deg,#fffdf9 0%,#f1f8f5 100%);box-shadow:0 18px 44px rgba(24,33,54,.07)}
.filament-stock-overview h2{margin:5px 0 8px;font-size:clamp(1.7rem,3vw,2.35rem)}
.filament-stock-overview p{max-width:650px;margin:0;color:#657089;line-height:1.55}
.filament-stock-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.filament-stock-metrics article{display:grid;gap:4px;padding:16px;border:1px solid rgba(24,33,54,.08);border-radius:17px;background:rgba(255,255,255,.84)}
.filament-stock-metrics span,.filament-stock-metrics small{color:#657089;font-size:.75rem}
.filament-stock-metrics strong{color:#182136;font-size:1.65rem}
.filament-inventory-card .color-stock-toolbar{padding:14px;border-radius:18px;background:#f7f4ee}
.filament-inventory-card .filament-group{overflow:hidden;border-radius:18px;background:#fff}
.filament-inventory-card .color-inventory-slot{box-shadow:none;transition:transform .18s ease,border-color .18s ease}
.filament-inventory-card .color-inventory-slot:focus-within,.filament-inventory-card .color-inventory-slot:hover{transform:translateY(-2px);border-color:rgba(196,99,57,.34)}
@media(max-width:980px){.filament-stock-overview{grid-template-columns:1fr}.filament-stock-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.filament-stock-overview{padding:20px}.filament-stock-metrics{grid-template-columns:1fr}.filament-stock-metrics article{grid-template-columns:1fr auto;align-items:center}.filament-stock-metrics small{grid-column:1/-1}}