/* =========================================================
   MODUQR — BUILDER
   ========================================================= */

.generator-preview {
    position: relative;
    padding: 56px 0 96px;
}

.generator-shell {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 75% 10%,
            rgba(37, 132, 255, 0.08),
            transparent 30%
        ),
        rgba(8, 14, 21, 0.92);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.generator-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(255, 255, 255, 0.015);
}

.generator-title-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.generator-step {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(44, 139, 255, 0.32);
    border-radius: 11px;
    background: rgba(37, 132, 255, 0.1);
    color: #62a9ff;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.generator-title-group strong {
    display: block;
    color: #f7fbff;
    font-size: 0.98rem;
    line-height: 1.2;
}

.generator-title-group p {
    margin: 5px 0 0;
    color: #7f91a5;
    font-size: 0.78rem;
}

.generator-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(55, 215, 153, 0.18);
    border-radius: 999px;
    background: rgba(55, 215, 153, 0.07);
    color: #65e6ad;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
}

.builder-workspace {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 0;
    min-height: 590px;
}

.builder-controls {
    padding: 26px 24px;
    border-right: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(6, 11, 17, 0.62);
}

.builder-controls-header {
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.builder-kicker {
    display: block;
    margin-bottom: 7px;
    color: #579ef5;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.builder-controls-header strong,
.builder-preview-heading strong,
.print-intelligence-title strong {
    display: block;
    color: #f5f9fd;
    font-size: 0.96rem;
    line-height: 1.25;
}

.builder-controls-header p {
    margin: 8px 0 0;
    max-width: 230px;
    color: #7f91a5;
    font-size: 0.76rem;
    line-height: 1.6;
}

.builder-control {
    padding: 21px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.09);
}

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

.control-heading label {
    color: #cdd8e3;
    font-size: 0.77rem;
    font-weight: 700;
}

.control-heading output {
    min-width: 60px;
    color: #6aafff;
    font-size: 0.75rem;
    font-weight: 800;
    text-align: right;
}

.mode-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mode-option {
    position: relative;
    cursor: pointer;
}

.mode-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.mode-option-content {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 64px;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.018);
    transition:
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.mode-option:hover .mode-option-content {
    border-color: rgba(79, 154, 255, 0.34);
    background: rgba(37, 132, 255, 0.045);
}

.mode-option input:checked + .mode-option-content {
    border-color: rgba(55, 145, 255, 0.72);
    background:
        linear-gradient(
            135deg,
            rgba(37, 132, 255, 0.16),
            rgba(37, 132, 255, 0.055)
        );
    box-shadow:
        inset 0 0 0 1px rgba(37, 132, 255, 0.08),
        0 8px 24px rgba(0, 94, 255, 0.08);
}

.mode-icon {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: rgba(71, 157, 255, 0.1);
    color: #6aafff;
    font-size: 0.8rem;
    font-weight: 900;
}

.mode-option-content strong {
    display: block;
    color: #eaf2fa;
    font-size: 0.72rem;
}

.mode-option-content small {
    display: block;
    margin-top: 3px;
    color: #708297;
    font-size: 0.59rem;
    line-height: 1.25;
}

.builder-control input[type="range"] {
    width: 100%;
    height: 4px;
    margin: 4px 0 0;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 999px;
    outline: none;
    background: rgba(130, 150, 172, 0.22);
    cursor: pointer;
}

.builder-control input[type="range"]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    border: 3px solid #0b121a;
    border-radius: 50%;
    background: #3790ff;
    box-shadow:
        0 0 0 1px rgba(71, 157, 255, 0.35),
        0 0 16px rgba(55, 144, 255, 0.28);
}

.builder-control input[type="range"]::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border: 3px solid #0b121a;
    border-radius: 50%;
    background: #3790ff;
    box-shadow:
        0 0 0 1px rgba(71, 157, 255, 0.35),
        0 0 16px rgba(55, 144, 255, 0.28);
}

.control-range {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    color: #5f7185;
    font-size: 0.6rem;
}

.builder-control-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 13px;
    border: 1px solid rgba(70, 151, 255, 0.13);
    border-radius: 12px;
    background: rgba(37, 132, 255, 0.045);
}

.note-icon {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(96, 170, 255, 0.4);
    border-radius: 50%;
    color: #6aafff;
    font-size: 0.62rem;
    font-weight: 900;
}

.builder-control-note p {
    margin: 0;
    color: #7e91a5;
    font-size: 0.68rem;
    line-height: 1.55;
}

.builder-preview {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 24px;
    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(39, 117, 211, 0.07),
            transparent 34%
        );
}

.builder-preview-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
}

.preview-help {
    color: #65778b;
    font-size: 0.68rem;
}

.viewer-frame {
    position: relative;
    min-height: 500px;
    flex: 1;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(44, 128, 229, 0.075),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            rgba(7, 13, 20, 0.9),
            rgba(4, 9, 14, 0.96)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

.qr-3d-viewer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.qr-3d-viewer canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.viewer-badge {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    padding: 6px 9px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    background: rgba(6, 11, 17, 0.72);
    color: #62758a;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    pointer-events: none;
    backdrop-filter: blur(8px);
}

.print-intelligence {
    padding: 22px 24px 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(5, 10, 16, 0.5);
}

.print-intelligence-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.print-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6f8296;
    font-size: 0.64rem;
}

.print-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #46d59b;
    box-shadow: 0 0 10px rgba(70, 213, 155, 0.4);
}

.model-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.11);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.015);
}

.model-metric {
    position: relative;
    min-width: 0;
    padding: 16px 17px;
    border-right: 1px solid rgba(148, 163, 184, 0.09);
}

.model-metric:last-child {
    border-right: 0;
}

.metric-label {
    display: block;
    margin-bottom: 7px;
    overflow: hidden;
    color: #678099;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.metric-value {
    display: block;
    overflow: hidden;
    color: #f0f6fc;
    font-size: 1.02rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.model-metric-highlight {
    background:
        linear-gradient(
            135deg,
            rgba(37, 132, 255, 0.1),
            rgba(37, 132, 255, 0.025)
        );
}

.model-metric-highlight::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: #2d8cff;
}

.model-metric-highlight .metric-value {
    color: #5ca6ff;
}


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

@media (max-width: 980px) {
    .builder-workspace {
        grid-template-columns: 280px minmax(0, 1fr);
    }

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

    .model-metric {
        border-bottom: 1px solid rgba(148, 163, 184, 0.09);
    }
}

@media (max-width: 760px) {
    .generator-preview {
        padding: 38px 0 70px;
    }

    .generator-shell {
        border-radius: 18px;
    }

    .generator-header {
        padding: 17px;
    }

    .builder-workspace {
        display: flex;
        flex-direction: column;
    }

    .builder-preview {
        order: 1;
        padding: 17px;
    }

    .builder-controls {
        order: 2;
        padding: 21px 18px;
        border-top: 1px solid rgba(148, 163, 184, 0.12);
        border-right: 0;
    }

    .viewer-frame {
        min-height: 390px;
    }

    .preview-help {
        display: none;
    }

    .print-intelligence {
        padding: 19px 17px;
    }

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

    .model-metric:nth-child(2n) {
        border-right: 0;
    }

    .model-metric:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .generator-title-group p {
        display: none;
    }

    .generator-status {
        padding: 6px 8px;
    }

    .mode-selector {
        grid-template-columns: 1fr;
    }

    .builder-preview-heading,
    .print-intelligence-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .viewer-frame {
        min-height: 330px;
    }

    .model-metrics {
        grid-template-columns: 1fr;
    }

    .model-metric,
    .model-metric:nth-child(2n) {
        border-right: 0;
    }

    .model-metric:last-child {
        grid-column: auto;
    }
}


/* =========================================================
   STAGING BUILD 0.2.0 — EXPORT + SCANSAFE ALPHA
   ========================================================= */

.generator-status-group {
    display: flex;
    align-items: center;
    gap: 9px;
}


.builder-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(255, 255, 255, 0.012);
}

.builder-actions-copy strong {
    display: block;
    color: #f4f8fc;
    font-size: 0.92rem;
}

.builder-actions-copy p {
    margin: 6px 0 0;
    max-width: 520px;
    color: #708398;
    font-size: 0.68rem;
    line-height: 1.5;
}

.builder-action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.builder-button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease,
        opacity 150ms ease;
}

.builder-button:hover {
    transform: translateY(-1px);
}

.builder-button:disabled {
    cursor: wait;
    opacity: 0.6;
    transform: none;
}

.builder-button-secondary {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.025);
    color: #aebdcb;
}

.builder-button-secondary:hover {
    border-color: rgba(80, 157, 255, 0.35);
    background: rgba(37, 132, 255, 0.06);
}

.builder-button-primary {
    border-color: rgba(55, 144, 255, 0.65);
    background: linear-gradient(135deg, #2387ff, #1474e8);
    color: #fff;
    box-shadow: 0 10px 28px rgba(22, 116, 232, 0.18);
}

.scansafe-panel {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
    padding: 22px 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    background:
        linear-gradient(
            90deg,
            rgba(37, 132, 255, 0.035),
            transparent 42%
        );
}

.scansafe-score-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.scansafe-score-row strong {
    color: #62a9ff;
    font-size: 2rem;
    line-height: 1;
}

.scansafe-score-row span {
    color: #b7c6d5;
    font-size: 0.72rem;
    font-weight: 800;
}

.scansafe-score p {
    margin: 10px 0 0;
    color: #6f8296;
    font-size: 0.64rem;
    line-height: 1.55;
}

.scansafe-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.scansafe-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.014);
}

.scansafe-check-dot {
    width: 7px;
    height: 7px;
    margin-top: 4px;
    flex: 0 0 auto;
    border-radius: 50%;
}

.scansafe-check.is-pass .scansafe-check-dot {
    background: #46d59b;
    box-shadow: 0 0 9px rgba(70, 213, 155, 0.35);
}

.scansafe-check.is-warn .scansafe-check-dot {
    background: #f0b84c;
    box-shadow: 0 0 9px rgba(240, 184, 76, 0.28);
}

.scansafe-check.is-risk .scansafe-check-dot {
    background: #ff6b78;
    box-shadow: 0 0 9px rgba(255, 107, 120, 0.28);
}

.scansafe-check strong {
    display: block;
    color: #c8d4df;
    font-size: 0.66rem;
}

.scansafe-check small {
    display: block;
    margin-top: 3px;
    color: #687b8f;
    font-size: 0.59rem;
    line-height: 1.35;
}

.export-message {
    margin: 0 24px 18px;
    padding: 10px 12px;
    border: 1px solid rgba(70, 213, 155, 0.16);
    border-radius: 10px;
    background: rgba(70, 213, 155, 0.055);
    color: #8fe7bf;
    font-size: 0.66rem;
}

.export-message.is-error {
    border-color: rgba(255, 107, 120, 0.2);
    background: rgba(255, 107, 120, 0.055);
    color: #ff9aa4;
}

@media (max-width: 760px) {
    .builder-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .builder-action-buttons {
        width: 100%;
        justify-content: stretch;
    }

    .builder-button {
        flex: 1;
    }

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

@media (max-width: 520px) {
    .generator-status-group {
        align-items: flex-end;
        flex-direction: column;
        gap: 4px;
    }

    .staging-build {
        display: none;
    }

    .builder-action-buttons {
        flex-direction: column;
    }

    .scansafe-checks {
        grid-template-columns: 1fr;
    }
}

/* BUILD 0.3.0 — QR CONTENT ENGINE */
.qr-content-engine{padding:22px 24px;border-bottom:1px solid rgba(148,163,184,.12);background:rgba(37,132,255,.018)}
.qr-content-title{display:block;margin:6px 0 12px;color:#f2f7fc;font-size:.84rem}.qr-type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.qr-type{min-height:34px;padding:0 8px;border:1px solid rgba(148,163,184,.12);border-radius:9px;background:rgba(255,255,255,.018);color:#8295a9;font:inherit;font-size:.6rem;font-weight:800;cursor:pointer}.qr-type:hover,.qr-type.is-active{color:#dcecff;border-color:rgba(48,137,255,.62);background:rgba(35,132,255,.095)}
.qr-type-hint{margin:8px 0 12px;color:#62778c;font-size:.58rem}.qr-fields{display:grid;gap:9px}.qr-field{display:grid;gap:5px}.qr-field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.qr-field label{color:#8195aa;font-size:.56rem;font-weight:800}
.qr-field input,.qr-field textarea,.qr-field select{width:100%;min-width:0;border:1px solid rgba(148,163,184,.14);border-radius:9px;outline:0;background:#08121c;color:#dce7f1;font:inherit;font-size:.63rem}.qr-field input,.qr-field select{height:36px;padding:0 10px}.qr-field textarea{min-height:68px;padding:9px 10px;resize:vertical}.qr-field input:focus,.qr-field textarea:focus,.qr-field select:focus{border-color:rgba(48,137,255,.68);box-shadow:0 0 0 3px rgba(35,132,255,.07)}
.qr-checkbox{display:flex;align-items:center;gap:8px;color:#8295a9;font-size:.58rem;font-weight:700}.qr-checkbox input{width:14px;height:14px;accent-color:#2587ff}.qr-content-error{padding:8px 9px;border:1px solid rgba(255,107,120,.2);border-radius:8px;background:rgba(255,107,120,.055);color:#ff9aa4;font-size:.58rem}@media(max-width:520px){.qr-field-row{grid-template-columns:1fr}}

/* BUILD 0.4.0 — CUSTOMIZATION ENGINE */
.customization-engine{padding:22px 24px;border-bottom:1px solid rgba(148,163,184,.12);background:rgba(255,255,255,.008)}
.customization-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.mode-switch{display:inline-flex;padding:3px;border:1px solid rgba(148,163,184,.12);border-radius:9px;background:#07111a}.mode-switch-button{min-height:27px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:#64798e;font:inherit;font-size:.53rem;font-weight:800;cursor:pointer}.mode-switch-button.is-active{background:rgba(35,132,255,.14);color:#dcecff}
.color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.color-control{display:grid;gap:6px;color:#8195aa;font-size:.56rem;font-weight:800}.color-input-wrap{display:flex;align-items:center;gap:7px;min-height:36px;padding:5px 7px;border:1px solid rgba(148,163,184,.14);border-radius:9px;background:#08121c}.color-input-wrap input{width:27px;height:24px;padding:0;border:0;background:transparent;cursor:pointer}.color-input-wrap code{color:#a9bacb;font-size:.52rem}
.customization-advanced{display:grid;gap:9px;margin-top:10px}.customization-advanced[hidden]{display:none}.advanced-control{display:grid;grid-template-columns:minmax(0,1fr) 92px;align-items:center;gap:10px;padding:9px;border:1px solid rgba(148,163,184,.1);border-radius:9px;background:rgba(8,18,28,.72)}.advanced-control strong{display:block;color:#9eb0c2;font-size:.57rem}.advanced-control small{display:block;margin-top:3px;color:#52677c;font-size:.5rem;line-height:1.35}.advanced-control select{width:100%;height:32px;padding:0 7px;border:1px solid rgba(148,163,184,.14);border-radius:8px;background:#07111a;color:#c8d6e4;font:inherit;font-size:.55rem}.customization-reset{min-height:32px;border:1px solid rgba(148,163,184,.13);border-radius:8px;background:transparent;color:#72879c;font:inherit;font-size:.54rem;font-weight:800;cursor:pointer}
@media(max-width:520px){.customization-heading{display:grid}.color-grid,.advanced-control{grid-template-columns:1fr}}

/* BUILD 0.5.6 — EXPORT PRO FINALIZATION */
.builder-action-buttons{flex-wrap:wrap}

/* BUILD 0.6.0 */
.template-controls-header{padding-bottom:20px;border-bottom:1px solid #172430;margin-bottom:20px}.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:13px}.template-card{border:1px solid #1b2a38;background:#0b141d;color:#8ea5ba;border-radius:9px;padding:10px 7px;cursor:pointer;text-align:left}.template-card strong,.template-card small{display:block}.template-card strong{font-size:.62rem;color:#d8e5ef;margin-bottom:3px}.template-card small{font-size:.49rem}.template-card.is-active{border-color:#218ce4;background:#0d1d2c}.template-card.is-active strong{color:#61b4ff}@media(max-width:720px){.template-grid{grid-template-columns:1fr}}

.keychain-options{margin-top:12px;padding:12px;border:1px solid rgba(33,140,228,.18);border-radius:10px;background:rgba(8,18,28,.72)}
.keychain-options[hidden],.keychain-advanced[hidden]{display:none}
.keychain-option-heading strong,.keychain-option-heading small{display:block}
.keychain-option-heading strong{color:#d8e5ef;font-size:.62rem}
.keychain-option-heading small{margin-top:3px;color:#60778d;font-size:.5rem}
.keychain-position-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.keychain-position{min-height:31px;border:1px solid #1b2a38;border-radius:8px;background:#08121c;color:#7f96ab;font:inherit;font-size:.52rem;font-weight:800;cursor:pointer}
.keychain-position.is-active{border-color:#218ce4;background:#0d1d2c;color:#61b4ff}
.keychain-advanced{display:grid;gap:10px;margin-top:12px;padding-top:11px;border-top:1px solid rgba(148,163,184,.1)}
.keychain-advanced label{display:grid;gap:6px;color:#8195aa;font-size:.54rem;font-weight:700}
.keychain-advanced label span{display:flex;justify-content:space-between;gap:10px}
.keychain-advanced label strong{color:#61b4ff}
.keychain-advanced input{width:100%;accent-color:#2587ff}
@media(max-width:520px){.keychain-position-grid{grid-template-columns:repeat(2,1fr)}}

.keychain-position-guide{margin-top:10px;padding:11px 12px;border:1px solid rgba(56,139,212,.22);border-radius:9px;background:linear-gradient(145deg,rgba(15,35,52,.76),rgba(7,18,28,.82))}
.keychain-guide-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.keychain-guide-head strong{color:#dce9f3;font-size:.58rem;line-height:1.35}
.keychain-position-guide p{margin:6px 0 0;color:#91a8bc;font-size:.52rem;line-height:1.55}
.keychain-recommended{flex:none;padding:3px 6px;border:1px solid rgba(42,151,255,.45);border-radius:999px;background:rgba(22,126,222,.14);color:#55b4ff;font-size:.43rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.keychain-recommended[hidden]{display:none}

/* === Builder UX v2 / Build 0.6.3 === */
.builder-flow-nav{
    position:sticky;top:0;z-index:8;
    display:grid;grid-template-columns:repeat(4,1fr);gap:5px;
    padding:8px;margin:-2px -2px 12px;
    border:1px solid rgba(126,157,184,.12);border-radius:11px;
    background:rgba(5,14,22,.94);backdrop-filter:blur(12px)
}
.builder-flow-step{
    display:flex;align-items:center;justify-content:center;gap:5px;
    min-height:34px;padding:6px 5px;border:1px solid transparent;border-radius:8px;
    background:transparent;color:#71879a;font:inherit;font-size:.5rem;font-weight:850;
    cursor:pointer;transition:.18s ease
}
.builder-flow-step span{
    display:grid;place-items:center;width:17px;height:17px;border-radius:50%;
    background:#101e2a;color:#688299;font-size:.43rem
}
.builder-flow-step:hover{color:#b7c9d8;background:#0a1722}
.builder-flow-step.is-active{color:#e3f1fb;border-color:#1e82d3;background:#0d2132}
.builder-flow-step.is-active span{background:#1688e8;color:white}

.builder-panel{display:none;animation:builderPanelIn .18s ease}
.builder-panel.is-active{display:block}
@keyframes builderPanelIn{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:none}}

@media(min-width:900px){
    .builder-workspace{align-items:start}
    .builder-controls{
        max-height:720px;overflow-y:auto;overscroll-behavior:contain;
        scrollbar-width:thin;scrollbar-color:#20394d transparent
    }
    .builder-preview{position:sticky;top:18px;align-self:start}
    .viewer-frame{min-height:620px}
}

.builder-quick-status{
    display:grid;grid-template-columns:repeat(3,minmax(110px,160px)) 1fr;
    align-items:center;gap:7px;padding:9px 12px;
    border-top:1px solid rgba(127,155,180,.11);
    border-bottom:1px solid rgba(127,155,180,.11);
    background:rgba(5,14,22,.64)
}
.quick-status-item{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    min-height:35px;padding:7px 9px;border:1px solid #172a3a;border-radius:8px;
    background:#08131d;color:#7f95a8;font:inherit;cursor:pointer
}
.quick-status-item span{font-size:.46rem;text-transform:uppercase;letter-spacing:.06em}
.quick-status-item strong{color:#d8e8f4;font-size:.51rem;white-space:nowrap}
.quick-status-item:first-child strong{color:#53b8ff}
.quick-status-hint{text-align:right;color:#536a7d;font-size:.47rem}

.builder-actions{padding-top:12px;padding-bottom:12px}
.builder-actions-copy p{max-width:440px}
.scansafe-panel,.print-intelligence{margin-top:0}

/* Keep specialized object controls compact inside their own step. */
.template-controls-header{padding-top:0}
.keychain-options{margin-bottom:2px}

@media(max-width:899px){
    .builder-flow-nav{position:sticky;top:0}
    .builder-preview{position:relative}
    .builder-quick-status{grid-template-columns:repeat(3,1fr)}
    .quick-status-hint{display:none}
}
@media(max-width:560px){
    .builder-flow-step{font-size:.46rem}
    .builder-flow-step span{display:none}
    .builder-quick-status{grid-template-columns:1fr}
}

/* === Build 0.6.4 — Readability / Builder Polish === */
.builder-shell{max-width:1440px}
.builder-header{padding:18px 22px}
.builder-title h2{font-size:1.08rem;line-height:1.25}
.builder-title p{font-size:.78rem;line-height:1.5;color:#91a8bc}

.builder-workspace{grid-template-columns:minmax(330px,380px) minmax(0,1fr);gap:20px}
.builder-controls{padding:18px}
.builder-preview{min-width:0}

.builder-flow-nav{gap:7px;padding:9px}
.builder-flow-step{min-height:42px;font-size:.72rem;gap:7px}
.builder-flow-step span{width:20px;height:20px;font-size:.6rem}

.builder-kicker,
.content-kicker,
.customization-kicker{font-size:.68rem;letter-spacing:.13em}
.builder-controls h3,
.qr-content-engine h3,
.customization-engine h3{font-size:1rem;line-height:1.35}
.builder-controls p,
.qr-content-engine p,
.customization-engine p{font-size:.75rem;line-height:1.55}

.qr-type-button,
.template-button{min-height:48px}
.qr-type-button strong,
.template-button strong{font-size:.72rem}
.qr-type-button small,
.template-button small{font-size:.62rem;line-height:1.35}

.builder-field label,
.qr-field label,
.customization-field label{font-size:.72rem}
.builder-field input,
.builder-field select,
.qr-field input,
.qr-field textarea,
.qr-field select,
.customization-field input,
.customization-field select{font-size:.76rem;min-height:42px}

.mode-button{font-size:.7rem;min-height:38px}
.style-card{min-height:64px}
.style-card strong{font-size:.76rem}
.style-card small{font-size:.65rem}

.control-row label,
.control-heading,
.slider-heading{font-size:.76rem}
.control-value,
.slider-value{font-size:.78rem}
.range-labels,
.control-minmax{font-size:.64rem}

.keychain-option-heading strong{font-size:.76rem}
.keychain-option-heading small{font-size:.66rem}
.keychain-position{min-height:38px;font-size:.68rem}
.keychain-guide-head strong{font-size:.72rem}
.keychain-position-guide p{font-size:.67rem;line-height:1.55}
.keychain-recommended{font-size:.56rem}
.keychain-advanced label{font-size:.68rem}

.preview-heading .builder-kicker{font-size:.68rem}
.preview-heading h3{font-size:1rem}
.preview-help{font-size:.68rem}
.viewer-frame{border-radius:14px}

.builder-quick-status{grid-template-columns:repeat(3,minmax(145px,190px)) 1fr;padding:10px 14px;gap:9px}
.quick-status-item{min-height:44px;padding:9px 11px}
.quick-status-item span{font-size:.58rem}
.quick-status-item strong{font-size:.7rem}
.quick-status-hint{font-size:.6rem}

.builder-actions{padding:16px 18px}
.builder-actions-copy h3{font-size:.9rem}
.builder-actions-copy p{font-size:.68rem;line-height:1.45}
.builder-actions button,
.builder-actions .button{min-height:42px;font-size:.68rem;padding:9px 13px}

.scansafe-panel{padding:16px 18px}
.scansafe-panel h3{font-size:.86rem}
.scansafe-panel p{font-size:.67rem;line-height:1.5}
.scansafe-score{font-size:1.25rem}
.scansafe-status{font-size:.68rem}

.print-intelligence{padding:16px 18px}
.print-intelligence h3{font-size:.86rem}
.metric-label{font-size:.58rem}
.metric-value{font-size:.76rem}

@media(min-width:900px){
  .builder-controls{max-height:760px}
  .viewer-frame{min-height:650px}
}
@media(max-width:1100px) and (min-width:900px){
  .builder-workspace{grid-template-columns:330px minmax(0,1fr)}
  .builder-controls{padding:15px}
  .builder-flow-step{font-size:.64rem}
}
@media(max-width:899px){
  .builder-workspace{grid-template-columns:1fr}
  .builder-controls{max-height:none;overflow:visible}
  .builder-preview{position:relative}
}


/* =========================================================
   BUILD 0.6.5 — PREMIUM COMPACT BUILDER
   Approved layout direction: vertical workflow + dominant 3D
   ========================================================= */

.header-tools{display:flex;align-items:center;gap:12px}
.language-switch{
    display:flex;align-items:center;gap:7px;height:42px;padding:0 10px;
    border:1px solid #20384c;border-radius:10px;background:#07131d;color:#c6d8e7
}
.language-globe{font-size:1rem;color:#80bfff}
.language-switch select{
    appearance:none;border:0;outline:0;background:transparent;color:inherit;
    font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;padding-right:4px
}
.language-switch option{background:#07131d;color:#e9f4fb}

.generator-preview{padding:18px 0 42px}
.generator-preview>.container{max-width:1540px;width:min(96%,1540px)}
.generator-shell{
    overflow:hidden;border:1px solid #183044;border-radius:18px;
    background:linear-gradient(180deg,#07121c 0%,#05101a 100%);
    box-shadow:0 28px 80px rgba(0,0,0,.34)
}
.generator-header{display:none}

.builder-workspace{
    display:grid;grid-template-columns:420px minmax(0,1fr);gap:0;
    min-height:720px;background:#06111a
}
.builder-controls{
    max-height:720px!important;overflow-y:auto!important;
    padding:16px 18px 20px;border-right:1px solid #173044;
    background:linear-gradient(180deg,#071722,#06131d)
}
.builder-preview{
    position:relative!important;top:auto!important;
    padding:18px 20px 0;background:
    radial-gradient(circle at 55% 45%,rgba(12,93,152,.12),transparent 38%),
    #06111a
}

.builder-flow-nav{
    position:static;display:grid;grid-template-columns:1fr;gap:9px;
    margin:0 0 18px;padding:0;border:0;background:transparent;backdrop-filter:none
}
.builder-flow-step{
    position:relative;display:grid;grid-template-columns:36px 1fr 18px;
    grid-template-rows:auto auto;column-gap:10px;align-items:center;justify-content:stretch;
    min-height:66px;padding:10px 12px;border:1px solid #1b3a50;border-radius:12px;
    background:linear-gradient(135deg,#0a1e2c,#081722);text-align:left;color:#d9e9f5
}
.builder-flow-step::after{
    content:'›';grid-column:3;grid-row:1/3;align-self:center;
    color:#9bc8e8;font-size:1.6rem;font-weight:400
}
.builder-flow-step>span{
    grid-column:1;grid-row:1/3;width:36px;height:36px;
    background:#0f2b40;color:#7bc6ff;font-size:.72rem;font-weight:900
}
.builder-flow-step strong{
    grid-column:2;grid-row:1;font-size:.93rem;line-height:1.1;color:#f4f9fd
}
.builder-flow-step small{
    grid-column:2;grid-row:2;margin-top:4px;font-size:.69rem;line-height:1.25;
    color:#91aac0;font-weight:500
}
.builder-flow-step.is-active{
    border-color:#1c9cff;background:linear-gradient(135deg,#0e69aa,#0b3858);
    box-shadow:0 0 0 1px rgba(27,155,255,.2),0 0 24px rgba(0,137,255,.16)
}
.builder-flow-step.is-active>span{background:#159cff;color:white}
.builder-flow-step.is-active::after{color:white}

.builder-panel{padding:0 2px}
.builder-kicker{font-size:.72rem!important;letter-spacing:.12em;color:#42adff}
.qr-content-title,.builder-controls-header>strong{font-size:1rem!important;color:#f1f7fb}
.qr-type-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.qr-type{
    min-height:46px;border-radius:9px;font-size:.72rem;font-weight:800;
    border:1px solid #213b50;background:#091925;color:#b9cddd
}
.qr-type.is-active{border-color:#18a0ff;background:#0a3150;color:white}
.qr-type-hint{font-size:.68rem!important;margin-top:10px}
.qr-field label{font-size:.75rem!important;color:#d2e1ec}
.qr-field input,.qr-field textarea,.qr-field select{
    min-height:44px!important;border-radius:9px!important;font-size:.76rem!important
}
.builder-next-button{
    width:100%;min-height:48px;margin-top:14px;border:0;border-radius:9px;
    background:linear-gradient(135deg,#1f98ff,#1177e9);color:white;
    font:inherit;font-size:.82rem;font-weight:900;cursor:pointer;
    box-shadow:0 10px 28px rgba(20,134,235,.2)
}
.builder-next-button:hover{filter:brightness(1.08)}

.template-grid{grid-template-columns:repeat(3,1fr);gap:8px}
.template-card{min-height:58px}
.template-card strong{font-size:.73rem!important}.template-card small{font-size:.62rem!important}

.builder-preview-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.builder-preview-heading>div:first-child{padding-top:4px}
.builder-preview-heading strong{display:block;margin-top:3px;font-size:1.45rem!important;color:#f5fbff}
.preview-toolbar{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.view-mode-switch{
    display:flex;overflow:hidden;border:1px solid #224058;border-radius:10px;background:#071722
}
.view-mode-button{
    min-width:82px;height:39px;border:0;border-right:1px solid #173349;
    background:transparent;color:#a9bfd0;font:inherit;font-size:.72rem;font-weight:800;cursor:pointer
}
.view-mode-button:last-child{border-right:0}
.view-mode-button.is-active{background:#1599ff;color:white;box-shadow:0 0 18px rgba(0,145,255,.22)}
.preview-help{font-size:.68rem!important;color:#7f99ad}

.viewer-frame{
    min-height:590px!important;height:590px;overflow:hidden;
    border:1px solid #18384f;border-radius:14px;background:
    radial-gradient(circle at 50% 50%,#0a2131 0%,#06131e 58%,#040d15 100%)
}
.qr-3d-viewer{height:100%}
.viewer-badge{font-size:.62rem}

.builder-quick-status{
    display:grid;grid-template-columns:1.35fr repeat(4,1fr);
    gap:0;padding:0 18px 16px;margin-left:420px;
    border:0;background:#06111a
}
.quick-status-item{
    min-height:64px;border-radius:0;border:1px solid #18374d;border-left:0;
    background:#081722;padding:10px 13px
}
.quick-status-item:first-child{border-left:1px solid #18374d;border-radius:11px 0 0 11px}
.quick-status-item:last-child{border-radius:0 11px 11px 0}
.quick-status-item span{font-size:.62rem!important;color:#95adbf}
.quick-status-item strong{font-size:.78rem!important}
.quick-status-scansafe span{color:#38b2ff;font-weight:900}
.quick-status-scansafe strong{color:#58ff9d!important}

.builder-actions{
    display:grid;grid-template-columns:180px 1fr;align-items:center;
    gap:12px;margin-left:420px;padding:14px 18px 18px;
    border-top:1px solid #153044;background:#06111a
}
.builder-actions-copy strong{font-size:.82rem!important}
.builder-actions-copy p{font-size:.61rem!important;margin-top:4px}
.builder-action-buttons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.builder-button{
    min-height:44px!important;border-radius:9px!important;font-size:.68rem!important;
    white-space:nowrap;padding:8px 10px!important
}
.builder-button-primary{box-shadow:0 8px 24px rgba(16,133,255,.2)}

.scansafe-panel,.print-intelligence,.export-message{margin-left:420px}
.scansafe-panel{border-top:1px solid #153044}

body.builder-focus .hero{display:none}
body.builder-focus .generator-preview{padding-top:10px}
body.builder-focus .site-header{position:sticky;top:0;z-index:50}

@media(max-width:1180px){
    .builder-workspace{grid-template-columns:350px minmax(0,1fr)}
    .builder-quick-status,.builder-actions,.scansafe-panel,.print-intelligence,.export-message{margin-left:350px}
    .builder-controls{padding:14px}
    .viewer-frame{height:540px;min-height:540px!important}
}
@media(max-width:899px){
    .builder-workspace{grid-template-columns:1fr}
    .builder-controls{max-height:none!important;overflow:visible!important;border-right:0;border-bottom:1px solid #173044}
    .builder-preview{padding:14px}
    .builder-quick-status,.builder-actions,.scansafe-panel,.print-intelligence,.export-message{margin-left:0}
    .builder-quick-status{grid-template-columns:repeat(2,1fr);padding:12px}
    .quick-status-item,.quick-status-item:first-child,.quick-status-item:last-child{border:1px solid #18374d;border-radius:9px}
    .builder-actions{grid-template-columns:1fr;padding:14px}
    .builder-action-buttons{grid-template-columns:repeat(2,1fr)}
    .viewer-frame{height:470px;min-height:470px!important}
    .header-tools .language-switch{display:none}
}
@media(max-width:620px){
    .builder-flow-step{min-height:60px}
    .qr-type-grid{grid-template-columns:repeat(2,1fr)}
    .preview-toolbar{width:100%;align-items:stretch}
    .builder-preview-heading{flex-direction:column}
    .view-mode-switch{width:100%}.view-mode-button{flex:1;min-width:0}
    .viewer-frame{height:390px;min-height:390px!important}
    .builder-quick-status{grid-template-columns:1fr}
    .builder-action-buttons{grid-template-columns:1fr}
}


/* =========================================================
   BUILD 0.6.6 — ICONS + DISCOVERABLE CONTROL SCROLL
   ========================================================= */

.builder-controls{
    position:relative;
    display:flex;
    flex-direction:column;
    height:720px;
    max-height:720px!important;
    overflow:hidden!important;
}
.builder-flow-nav{flex:0 0 auto;margin-bottom:12px}

.builder-flow-step{
    grid-template-columns:42px 30px 1fr 18px;
    grid-template-rows:auto auto;
    min-height:58px;
    padding:8px 10px;
}
.builder-flow-step::after{grid-column:4;grid-row:1/3}
.builder-flow-step>.step-icon{grid-column:1;grid-row:1/3}
.builder-flow-step>span:not(.ui-icon){
    grid-column:2;grid-row:1/3;width:28px;height:28px
}
.builder-flow-step>strong{grid-column:3;grid-row:1}
.builder-flow-step>small{grid-column:3;grid-row:2}

.ui-icon{display:inline-grid;place-items:center;flex:0 0 auto}
.ui-icon svg{
    width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round
}
.step-icon{
    width:38px;height:38px;border-radius:10px;background:#0b4169;color:#57baff;
    box-shadow:inset 0 0 0 1px rgba(75,177,255,.15)
}
.step-icon svg{width:22px;height:22px}
.builder-flow-step[data-builder-panel="design"] .step-icon{color:#e18bff;background:#342047}
.builder-flow-step[data-builder-panel="object"] .step-icon{color:#39c7ff;background:#0c394f}
.builder-flow-step[data-builder-panel="print"] .step-icon{color:#9ec6ff;background:#17305f}
.builder-flow-step.is-active .step-icon{
    color:#fff;background:#149fff;box-shadow:0 0 20px rgba(14,151,255,.30)
}

.builder-panel{
    flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
    padding:2px 7px 62px 2px;
    scrollbar-width:thin;scrollbar-color:#178fe3 #07141e
}
.builder-panel::-webkit-scrollbar{width:8px}
.builder-panel::-webkit-scrollbar-track{background:#07141e;border-radius:999px}
.builder-panel::-webkit-scrollbar-thumb{
    background:linear-gradient(#24a7ff,#116cad);
    border:2px solid #07141e;border-radius:999px
}
.builder-panel::-webkit-scrollbar-thumb:hover{background:#39b3ff}

.builder-scroll-cue{
    position:absolute;left:18px;right:26px;bottom:10px;z-index:12;
    display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:36px;padding:7px 12px;border:1px solid rgba(36,154,234,.22);
    border-radius:9px;background:linear-gradient(180deg,rgba(8,25,38,.72),rgba(7,20,30,.96));
    color:#85c9f7;font-size:.66rem;font-weight:800;opacity:0;
    transform:translateY(8px);pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
    box-shadow:0 -14px 24px rgba(5,16,26,.78)
}
.builder-scroll-cue strong{
    color:#31aaff;font-size:.9rem;animation:scrollCueBounce 1.3s ease-in-out infinite
}
.builder-scroll-cue.is-visible{opacity:1;transform:translateY(0)}
@keyframes scrollCueBounce{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3px)}}

.qr-type{display:flex;align-items:center;justify-content:center;gap:7px}
.qr-type-icon{width:18px;height:18px;color:#8ebbd8}
.qr-type.is-active .qr-type-icon{color:#fff}

.builder-button{display:inline-flex!important;align-items:center;justify-content:center;gap:7px}
.action-icon{width:17px;height:17px;color:currentColor}
.builder-button-primary .action-icon{width:18px;height:18px}

@media(max-width:1180px){
    .builder-controls{height:680px;max-height:680px!important}
    .builder-flow-step{min-height:54px}
}
@media(max-width:899px){
    .builder-controls{height:auto;max-height:none!important;overflow:visible!important}
    .builder-panel{overflow:visible;padding-bottom:12px}
    .builder-scroll-cue{display:none}
}


/* =========================================================
   BUILD 0.6.7 — READABILITY PASS
   Target: text marked as too small in QA screenshot
   ========================================================= */

/* Left panel: keychain explanatory content */
.keychain-option-heading strong{
    font-size:.82rem!important;
    line-height:1.35!important;
}
.keychain-option-heading small{
    font-size:.72rem!important;
    line-height:1.5!important;
}
.keychain-position{
    font-size:.72rem!important;
    min-height:40px!important;
}
.keychain-guide-head strong{
    font-size:.78rem!important;
    line-height:1.4!important;
}
.keychain-position-guide p{
    font-size:.72rem!important;
    line-height:1.6!important;
}
.keychain-recommended{
    font-size:.60rem!important;
}

/* Export block */
.builder-actions-copy .builder-kicker{
    font-size:.72rem!important;
}
.builder-actions-copy strong{
    font-size:.88rem!important;
    line-height:1.35!important;
}
.builder-actions-copy p{
    font-size:.72rem!important;
    line-height:1.5!important;
    color:#91a8bc!important;
}
.builder-button{
    font-size:.72rem!important;
    font-weight:800!important;
}

/* ScanSafe: heading, explanation and validation cards */
.scansafe-panel .builder-kicker,
.scansafe-panel .scansafe-kicker{
    font-size:.72rem!important;
}
.scansafe-score{
    font-size:1.48rem!important;
    line-height:1!important;
}
.scansafe-status{
    font-size:.76rem!important;
    line-height:1.35!important;
}
.scansafe-panel p,
.scansafe-copy,
.scansafe-description{
    font-size:.72rem!important;
    line-height:1.55!important;
}
.scansafe-check strong,
.scansafe-item strong,
.validation-card strong{
    font-size:.75rem!important;
    line-height:1.35!important;
}
.scansafe-check small,
.scansafe-item small,
.validation-card small{
    font-size:.68rem!important;
    line-height:1.45!important;
}

/* Export/status message */
.export-message{
    font-size:.72rem!important;
    line-height:1.45!important;
}

/* Print Intelligence / Model data */
.print-intelligence .builder-kicker{
    font-size:.72rem!important;
}
.print-intelligence h3,
.print-intelligence strong{
    line-height:1.35;
}
.print-intelligence h3{
    font-size:.92rem!important;
}
.metric-label{
    font-size:.66rem!important;
    line-height:1.35!important;
    letter-spacing:.06em!important;
}
.metric-value{
    font-size:.82rem!important;
    line-height:1.25!important;
}

/* Quick status row under the 3D preview */
.quick-status-item span{
    font-size:.64rem!important;
}
.quick-status-item strong{
    font-size:.76rem!important;
}

/* General tiny helper text in builder */
.builder-controls small,
.builder-preview small{
    line-height:1.45;
}

/* Keep the layout from expanding excessively after increasing type */
@media(min-width:900px){
    .builder-controls{
        height:740px;
        max-height:740px!important;
    }
    .builder-panel{
        padding-bottom:68px;
    }
}
@media(max-width:1180px) and (min-width:900px){
    .builder-controls{
        height:700px;
        max-height:700px!important;
    }
}
@media(max-width:899px){
    .builder-controls{
        height:auto;
        max-height:none!important;
    }
}


/* =========================================================
   BUILD 0.6.8 — TABLE STAND
   ========================================================= */

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

.stand-options{
    margin-top:12px;
    padding:13px;
    border:1px solid rgba(33,140,228,.20);
    border-radius:10px;
    background:rgba(8,18,28,.78);
}
.stand-options[hidden],
.stand-advanced[hidden]{
    display:none;
}

.stand-option-heading strong,
.stand-option-heading small{
    display:block;
}
.stand-option-heading strong{
    color:#e0edf6;
    font-size:.82rem;
    line-height:1.35;
}
.stand-option-heading small{
    margin-top:4px;
    color:#8da5b9;
    font-size:.70rem;
    line-height:1.5;
}

.stand-preset-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-top:11px;
}
.stand-preset{
    min-height:50px;
    padding:7px 5px;
    border:1px solid #1d3548;
    border-radius:9px;
    background:#08151f;
    color:#91a8bb;
    font:inherit;
    cursor:pointer;
}
.stand-preset strong,
.stand-preset small{
    display:block;
}
.stand-preset strong{
    color:#dceaf4;
    font-size:.78rem;
}
.stand-preset small{
    margin-top:3px;
    font-size:.62rem;
}
.stand-preset.is-active{
    border-color:#1b9cff;
    background:#0c2940;
    box-shadow:inset 0 0 0 1px rgba(40,151,235,.14);
}
.stand-preset.is-active strong{
    color:#65bdff;
}

.stand-guide{
    margin-top:10px;
    padding:11px 12px;
    border:1px solid rgba(55,145,214,.24);
    border-radius:9px;
    background:linear-gradient(145deg,rgba(15,35,52,.78),rgba(7,18,28,.84));
}
.stand-guide-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}
.stand-guide-head strong{
    color:#e0edf6;
    font-size:.76rem;
    line-height:1.4;
}
.stand-guide p{
    margin:6px 0 0;
    color:#93aabe;
    font-size:.70rem;
    line-height:1.55;
}
.stand-recommended{
    flex:none;
    padding:3px 7px;
    border:1px solid rgba(42,151,255,.45);
    border-radius:999px;
    background:rgba(22,126,222,.14);
    color:#55b4ff;
    font-size:.56rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.stand-recommended[hidden]{
    display:none;
}

.stand-advanced{
    display:grid;
    gap:12px;
    margin-top:12px;
    padding-top:11px;
    border-top:1px solid rgba(148,163,184,.10);
}
.stand-advanced label{
    display:grid;
    gap:7px;
    color:#8fa7ba;
    font-size:.70rem;
    font-weight:700;
}
.stand-advanced label>span{
    display:flex;
    justify-content:space-between;
    gap:10px;
}
.stand-advanced label strong{
    color:#5eb7ff;
}
.stand-advanced input{
    width:100%;
    accent-color:#2587ff;
}

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


/* =========================================================
   BUILD 0.6.9 — WIFI SIGN TEMPLATE
   ========================================================= */

.template-card-wide{
    grid-column:1 / -1;
}

.wifi-sign-options{
    margin-top:12px;
    padding:13px;
    border:1px solid rgba(38,158,236,.20);
    border-radius:10px;
    background:rgba(8,18,28,.78);
}
.wifi-sign-options[hidden],
.wifi-sign-advanced[hidden]{
    display:none;
}

.wifi-sign-heading strong,
.wifi-sign-heading small{
    display:block;
}
.wifi-sign-heading strong{
    color:#e3eff7;
    font-size:.82rem;
    line-height:1.35;
}
.wifi-sign-heading small{
    margin-top:4px;
    color:#8da5b9;
    font-size:.70rem;
    line-height:1.5;
}

.wifi-sign-guide{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:center;
    margin-top:11px;
    padding:11px 12px;
    border:1px solid rgba(56,150,221,.24);
    border-radius:9px;
    background:linear-gradient(145deg,rgba(14,36,52,.82),rgba(7,19,29,.86));
}
.wifi-sign-guide strong{
    color:#dfeef8;
    font-size:.75rem;
}
.wifi-sign-guide p{
    margin:5px 0 0;
    color:#93aabe;
    font-size:.69rem;
    line-height:1.5;
}
.wifi-use-content{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:36px;
    padding:8px 10px;
    border:1px solid #178de2;
    border-radius:8px;
    background:#0b3150;
    color:#6fc1ff;
    font:inherit;
    font-size:.66rem;
    font-weight:900;
    cursor:pointer;
    white-space:nowrap;
}
.wifi-use-content:hover{
    background:#0e4068;
    color:#fff;
}

.wifi-sign-advanced{
    display:grid;
    gap:12px;
    margin-top:12px;
    padding-top:11px;
    border-top:1px solid rgba(148,163,184,.10);
}
.wifi-sign-advanced label{
    display:grid;
    gap:7px;
    color:#8fa7ba;
    font-size:.70rem;
    font-weight:700;
}
.wifi-sign-advanced label>span{
    display:flex;
    justify-content:space-between;
    gap:10px;
}
.wifi-sign-advanced label strong{
    color:#5eb7ff;
}
.wifi-sign-advanced input{
    width:100%;
    accent-color:#2587ff;
}

@media(max-width:520px){
    .wifi-sign-guide{
        grid-template-columns:1fr;
    }
    .wifi-use-content{
        width:100%;
        justify-content:center;
    }
}


/* =========================================================
   BUILD 0.6.10 — GOOGLE REVIEW SIGN TEMPLATE
   ========================================================= */

.review-sign-options{
    margin-top:12px;
    padding:13px;
    border:1px solid rgba(38,158,236,.20);
    border-radius:10px;
    background:rgba(8,18,28,.78);
}
.review-sign-options[hidden],
.review-sign-advanced[hidden]{
    display:none;
}

.review-sign-heading strong,
.review-sign-heading small{
    display:block;
}
.review-sign-heading strong{
    color:#e3eff7;
    font-size:.82rem;
    line-height:1.35;
}
.review-sign-heading small{
    margin-top:4px;
    color:#8da5b9;
    font-size:.70rem;
    line-height:1.5;
}

.review-sign-guide{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:center;
    margin-top:11px;
    padding:11px 12px;
    border:1px solid rgba(56,150,221,.24);
    border-radius:9px;
    background:linear-gradient(145deg,rgba(14,36,52,.82),rgba(7,19,29,.86));
}
.review-sign-guide strong{
    color:#dfeef8;
    font-size:.75rem;
}
.review-sign-guide p{
    margin:5px 0 0;
    color:#93aabe;
    font-size:.69rem;
    line-height:1.5;
}

.review-use-url{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:36px;
    padding:8px 10px;
    border:1px solid #178de2;
    border-radius:8px;
    background:#0b3150;
    color:#6fc1ff;
    font:inherit;
    font-size:.66rem;
    font-weight:900;
    cursor:pointer;
    white-space:nowrap;
}
.review-use-url:hover{
    background:#0e4068;
    color:#fff;
}

.review-sign-advanced{
    display:grid;
    gap:12px;
    margin-top:12px;
    padding-top:11px;
    border-top:1px solid rgba(148,163,184,.10);
}
.review-sign-advanced label{
    display:grid;
    gap:7px;
    color:#8fa7ba;
    font-size:.70rem;
    font-weight:700;
}
.review-sign-advanced label>span{
    display:flex;
    justify-content:space-between;
    gap:10px;
}
.review-sign-advanced label strong{
    color:#5eb7ff;
}
.review-sign-advanced input{
    width:100%;
    accent-color:#2587ff;
}

@media(max-width:520px){
    .review-sign-guide{
        grid-template-columns:1fr;
    }
    .review-use-url{
        width:100%;
        justify-content:center;
    }
}


/* =========================================================
   BUILD 0.7.0 — SCANSAFE BETA / PRINT INTELLIGENCE V1
   ========================================================= */

.scansafe-analysis{
    grid-template-columns:300px minmax(0,1fr);
    gap:18px;
}

.scansafe-heading-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}
.scansafe-title{
    display:block;
    margin-top:4px;
    color:#e8f4fb;
    font-size:.92rem;
    line-height:1.3;
}
.scansafe-profile{
    flex:none;
    padding:5px 8px;
    border:1px solid rgba(75,171,255,.24);
    border-radius:999px;
    background:rgba(32,129,218,.08);
    color:#74c0ff;
    font-size:.58rem;
    font-weight:900;
    white-space:nowrap;
}

.scansafe-counts{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    margin-top:12px;
}
.scansafe-counts>span{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:5px;
    min-height:34px;
    padding:7px 6px;
    border:1px solid rgba(148,163,184,.10);
    border-radius:8px;
    background:rgba(255,255,255,.018);
}
.scansafe-counts strong{
    font-size:.78rem;
}
.scansafe-counts small{
    font-size:.58rem;
}
.scansafe-counts .is-pass strong{color:#54e2a8}
.scansafe-counts .is-warn strong{color:#f0ba55}
.scansafe-counts .is-risk strong{color:#ff7b87}

.scansafe-autofix{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:100%;
    min-height:40px;
    margin-top:10px;
    border:1px solid #208fe4;
    border-radius:9px;
    background:linear-gradient(135deg,#0d426b,#0a2d49);
    color:#8dceff;
    font:inherit;
    font-size:.70rem;
    font-weight:900;
    cursor:pointer;
    transition:.18s ease;
}
.scansafe-autofix:hover:not(:disabled){
    border-color:#3ab2ff;
    color:white;
    background:linear-gradient(135deg,#12609a,#0c3c61);
}
.scansafe-autofix.is-clean,
.scansafe-autofix:disabled{
    border-color:rgba(70,213,155,.18);
    background:rgba(70,213,155,.05);
    color:#78dcb3;
    cursor:default;
}

.scansafe-analysis{
    display:grid;
    gap:10px;
}

.scansafe-live-metrics{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:7px;
}
.scansafe-live-metrics>div{
    min-width:0;
    padding:9px 10px;
    border:1px solid rgba(69,151,218,.15);
    border-radius:9px;
    background:#071722;
}
.scansafe-live-metrics span{
    display:block;
    color:#70899d;
    font-size:.58rem;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.scansafe-live-metrics strong{
    display:block;
    margin-top:4px;
    color:#d9ebf7;
    font-size:.76rem;
}

.scansafe-check.is-info .scansafe-check-dot{
    background:#4aa8e8;
    box-shadow:0 0 9px rgba(74,168,232,.25);
}
.scansafe-check.is-info strong{
    color:#9fcbe9;
}

.scansafe-recommendations{
    padding:10px 12px;
    border:1px solid rgba(240,184,76,.18);
    border-radius:10px;
    background:rgba(240,184,76,.045);
}
.scansafe-recommendations>strong{
    color:#e6bd68;
    font-size:.70rem;
}
.scansafe-recommendations ul{
    display:grid;
    gap:4px;
    margin:7px 0 0;
    padding-left:17px;
}
.scansafe-recommendations li{
    color:#a6b7c6;
    font-size:.66rem;
    line-height:1.45;
}

@media(max-width:1100px){
    .scansafe-analysis{
        grid-template-columns:1fr;
    }
}
@media(max-width:760px){
    .scansafe-live-metrics{
        grid-template-columns:repeat(2,1fr);
    }
}


/* =========================================================
   BUILD 0.7.1 — QR INTEGRITY / REAL DECODE VALIDATION
   ========================================================= */

.scansafe-live-metrics{
    grid-template-columns:repeat(5,1fr);
}

#scansafe-integrity-metric.is-pass{
    color:#59e6ac;
}
#scansafe-integrity-metric.is-risk{
    color:#ff828e;
}
#scansafe-integrity-metric.is-info{
    color:#7fc7f6;
}

.scansafe-integrity-metric{
    background:
        linear-gradient(
            145deg,
            rgba(20,86,126,.10),
            rgba(7,23,34,.96)
        )!important;
}

@media(max-width:1200px){
    .scansafe-live-metrics{
        grid-template-columns:repeat(3,1fr);
    }
}
@media(max-width:760px){
    .scansafe-live-metrics{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(max-width:480px){
    .scansafe-live-metrics{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   BUILD 0.7.2 — GEOMETRY HEALTH / EXPORT READINESS
   ========================================================= */

.scansafe-live-metrics{
    grid-template-columns:repeat(6,1fr);
}

#scansafe-geometry-metric.is-pass{
    color:#59e6ac;
}
#scansafe-geometry-metric.is-warn{
    color:#f0bd61;
}
#scansafe-geometry-metric.is-risk{
    color:#ff828e;
}
#scansafe-geometry-metric.is-info{
    color:#7fc7f6;
}

.scansafe-geometry-metric{
    background:
        linear-gradient(
            145deg,
            rgba(21,102,124,.10),
            rgba(7,23,34,.96)
        )!important;
}

@media(max-width:1320px){
    .scansafe-live-metrics{
        grid-template-columns:repeat(3,1fr);
    }
}
@media(max-width:760px){
    .scansafe-live-metrics{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(max-width:480px){
    .scansafe-live-metrics{
        grid-template-columns:1fr;
    }
}

/* BUILD 0.7.3 — PRINT PROFILE AWARENESS */
.scansafe-print-profile{margin-top:12px;padding:11px;border:1px solid rgba(65,158,226,.18);border-radius:10px;background:linear-gradient(145deg,rgba(10,31,46,.78),rgba(6,19,29,.86))}
.scansafe-print-profile-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.scansafe-print-profile-head strong{color:#e0eef8;font-size:.72rem}
.scansafe-print-profile-head span{color:#62bdff;font-size:.60rem;font-weight:850;white-space:nowrap}
.scansafe-profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.scansafe-profile-grid label{display:grid;gap:4px}
.scansafe-profile-grid label>span{color:#7790a4;font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.scansafe-profile-grid select{width:100%;min-height:34px;padding:6px 8px;border:1px solid #1a3a50;border-radius:8px;outline:none;background:#071722;color:#d9e9f5;font:inherit;font-size:.66rem;font-weight:700}
.scansafe-profile-grid select:focus{border-color:#218fdb;box-shadow:0 0 0 2px rgba(33,143,219,.10)}
.scansafe-print-profile>small{display:block;margin-top:8px;color:#6f8799;font-size:.59rem;line-height:1.45}
@media(max-width:1100px){.scansafe-profile-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.scansafe-profile-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.scansafe-profile-grid{grid-template-columns:1fr}.scansafe-print-profile-head{align-items:flex-start;flex-direction:column}}


/* =========================================================
   BUILD 0.7.4 — PRINT FORECAST BETA
   ========================================================= */

.print-forecast{
    margin-bottom:14px;
    padding:13px;
    border:1px solid rgba(54,151,220,.18);
    border-radius:11px;
    background:
        linear-gradient(
            145deg,
            rgba(8,29,43,.82),
            rgba(6,18,27,.92)
        );
}

.print-forecast-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.print-forecast-head>div>strong{
    display:block;
    margin-top:3px;
    color:#e6f1f8;
    font-size:.84rem;
}

.print-forecast-status{
    flex:none;
    padding:5px 9px;
    border-radius:999px;
    border:1px solid rgba(126,158,180,.18);
    background:rgba(126,158,180,.07);
    color:#8fa6b8;
    font-size:.60rem;
    font-weight:900;
}

.print-forecast-status.is-ready{
    border-color:rgba(80,221,164,.22);
    background:rgba(80,221,164,.06);
    color:#5ce0aa;
}
.print-forecast-status.is-review{
    border-color:rgba(237,184,83,.22);
    background:rgba(237,184,83,.06);
    color:#e6b85d;
}
.print-forecast-status.is-attention{
    border-color:rgba(255,116,131,.24);
    background:rgba(255,116,131,.06);
    color:#ff7e8d;
}

.print-forecast-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:11px;
}
.print-forecast-grid>div{
    min-width:0;
    padding:9px 10px;
    border:1px solid rgba(79,142,188,.12);
    border-radius:8px;
    background:#071722;
}
.print-forecast-grid span{
    display:block;
    color:#71899c;
    font-size:.58rem;
    line-height:1.3;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.print-forecast-grid strong{
    display:block;
    margin-top:5px;
    color:#dcebF5;
    font-size:.76rem;
    line-height:1.25;
}

.print-forecast-footer{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:14px;
    margin-top:10px;
    padding-top:9px;
    border-top:1px solid rgba(127,155,180,.09);
}
.print-forecast-footer>span small,
.print-forecast-footer>span strong{
    display:block;
}
.print-forecast-footer>span small{
    color:#6f8799;
    font-size:.57rem;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.print-forecast-footer>span strong{
    margin-top:3px;
    color:#69c0ff;
    font-size:.69rem;
}
.print-forecast-footer p{
    margin:0;
    color:#6e8597;
    font-size:.60rem;
    line-height:1.45;
    text-align:right;
}

@media(max-width:760px){
    .print-forecast-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .print-forecast-footer{
        grid-template-columns:1fr;
    }
    .print-forecast-footer p{
        text-align:left;
    }
}
@media(max-width:440px){
    .print-forecast-grid{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   BUILD 0.8.0 — UX / RESPONSIVE / ACCESSIBILITY FOUNDATION
   ========================================================= */

.mobile-builder-switch{
    display:none;
}

.builder-skip-link{
    position:absolute;
    left:14px;
    top:10px;
    z-index:60;
    transform:translateY(-180%);
    padding:9px 12px;
    border:1px solid #2b9df1;
    border-radius:8px;
    background:#071722;
    color:#dff2ff;
    font-size:.72rem;
    font-weight:850;
    text-decoration:none;
    box-shadow:0 10px 24px rgba(0,0,0,.28);
    transition:transform .16s ease;
}

.builder-skip-link:focus{
    transform:translateY(0);
}

.viewer-frame{
    position:relative;
}

.viewer-busy{
    position:absolute;
    inset:0;
    z-index:12;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(9,34,50,.54),
            rgba(4,14,22,.72)
        );
    backdrop-filter:blur(2px);
    color:#dff2ff;
    font-size:.74rem;
    font-weight:850;
    pointer-events:none;
}

.viewer-busy[hidden]{
    display:none;
}

.viewer-busy-spinner{
    width:18px;
    height:18px;
    border:2px solid rgba(108,194,255,.24);
    border-top-color:#5ebdff;
    border-radius:50%;
    animation:qr3dSpin .72s linear infinite;
}

@keyframes qr3dSpin{
    to{
        transform:rotate(360deg);
    }
}

.viewer-frame.is-busy .qr-3d-viewer{
    opacity:.82;
}

.mobile-preview-jump{
    display:none;
}

.builder-flow-step,
.qr-type,
.template-card,
.keychain-position,
.stand-preset,
.mode-switch-button,
.view-mode-button,
.builder-button,
.builder-next-button,
.quick-status-item,
.scansafe-autofix,
.mobile-preview-jump,
.mobile-builder-switch-button{
    -webkit-tap-highlight-color:transparent;
}

.builder-flow-step:focus-visible,
.qr-type:focus-visible,
.template-card:focus-visible,
.keychain-position:focus-visible,
.stand-preset:focus-visible,
.mode-switch-button:focus-visible,
.view-mode-button:focus-visible,
.builder-button:focus-visible,
.builder-next-button:focus-visible,
.quick-status-item:focus-visible,
.scansafe-autofix:focus-visible,
.mobile-preview-jump:focus-visible,
.mobile-builder-switch-button:focus-visible,
.qr-field input:focus-visible,
.qr-field textarea:focus-visible,
.qr-field select:focus-visible,
.scansafe-profile-grid select:focus-visible,
#qr-3d-viewer:focus-visible{
    outline:3px solid rgba(76,177,255,.78)!important;
    outline-offset:3px!important;
}

#qr-3d-viewer:focus-visible{
    border-radius:11px;
}

.builder-flow-step,
.qr-type,
.template-card,
.keychain-position,
.stand-preset,
.mode-switch-button,
.view-mode-button,
.builder-button,
.builder-next-button,
.quick-status-item,
.scansafe-autofix{
    transition:
        border-color .16s ease,
        background-color .16s ease,
        color .16s ease,
        transform .16s ease,
        box-shadow .16s ease,
        opacity .16s ease;
}

.builder-flow-step:active,
.qr-type:active,
.template-card:active,
.keychain-position:active,
.stand-preset:active,
.mode-switch-button:active,
.view-mode-button:active,
.builder-button:active:not(:disabled),
.builder-next-button:active,
.quick-status-item:active,
.scansafe-autofix:active:not(:disabled){
    transform:translateY(1px) scale(.995);
}

@media(max-width:899px){
    .builder-workspace{
        display:grid;
        grid-template-columns:1fr!important;
    }

    .mobile-builder-switch{
        position:sticky;
        top:76px;
        z-index:42;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:4px;
        grid-column:1 / -1;
        margin:0;
        padding:8px 12px;
        border-bottom:1px solid #173044;
        background:rgba(5,17,26,.94);
        backdrop-filter:blur(14px);
    }

    .mobile-builder-switch-button{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;
        min-height:44px;
        border:1px solid #1b3a50;
        border-radius:9px;
        background:#081722;
        color:#89a3b8;
        font:inherit;
        font-size:.72rem;
        font-weight:850;
        cursor:pointer;
    }

    .mobile-builder-switch-button.is-active{
        border-color:#1d9cff;
        background:linear-gradient(135deg,#0e5e98,#0a3756);
        color:white;
        box-shadow:0 0 18px rgba(21,145,235,.14);
    }

    .builder-workspace[data-mobile-view="controls"] .builder-preview{
        display:none;
    }

    .builder-workspace[data-mobile-view="preview"] .builder-controls{
        display:none!important;
    }

    .builder-workspace[data-mobile-view="preview"] .builder-preview{
        display:block!important;
    }

    .builder-controls{
        width:100%;
        padding-top:12px!important;
    }

    .builder-flow-nav{
        position:sticky!important;
        top:136px!important;
        z-index:36;
        display:flex!important;
        grid-template-columns:none!important;
        gap:6px!important;
        overflow-x:auto;
        overscroll-behavior-x:contain;
        scroll-snap-type:x proximity;
        margin:0 -4px 14px!important;
        padding:7px 4px!important;
        background:rgba(6,19,29,.96)!important;
        scrollbar-width:none;
    }

    .builder-flow-nav::-webkit-scrollbar{
        display:none;
    }

    .builder-flow-step{
        flex:0 0 auto;
        min-width:116px!important;
        min-height:46px!important;
        grid-template-columns:28px 1fr!important;
        grid-template-rows:1fr!important;
        column-gap:7px!important;
        padding:7px 9px!important;
        scroll-snap-align:start;
    }

    .builder-flow-step>span{
        grid-column:1!important;
        grid-row:1!important;
        width:28px!important;
        height:28px!important;
    }

    .builder-flow-step strong{
        grid-column:2!important;
        grid-row:1!important;
        font-size:.74rem!important;
    }

    .builder-flow-step small,
    .builder-flow-step::after{
        display:none!important;
    }

    .builder-panel{
        scroll-margin-top:195px;
    }

    .mobile-preview-jump{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        width:100%;
        min-height:46px;
        margin-top:14px;
        border:1px solid #218fe0;
        border-radius:9px;
        background:linear-gradient(135deg,#0b3452,#09263d);
        color:#74c4ff;
        font:inherit;
        font-size:.72rem;
        font-weight:900;
        cursor:pointer;
    }

    .builder-preview{
        min-height:calc(100vh - 132px);
        padding:14px!important;
    }

    .viewer-frame{
        height:min(62vh,560px)!important;
        min-height:360px!important;
    }

    .builder-preview-heading{
        position:relative;
    }

    .builder-quick-status{
        padding-top:14px!important;
    }

    .qr-type,
    .template-card,
    .keychain-position,
    .stand-preset,
    .mode-switch-button,
    .view-mode-button,
    .builder-button,
    .builder-next-button,
    .quick-status-item,
    .scansafe-autofix,
    .scansafe-profile-grid select,
    .qr-field input,
    .qr-field select{
        min-height:44px!important;
    }
}

@media(max-width:560px){
    .mobile-builder-switch{
        padding-inline:10px;
    }

    .builder-flow-step{
        min-width:108px!important;
    }

    .builder-flow-step>span{
        display:grid!important;
    }

    .builder-preview{
        padding:10px!important;
    }

    .viewer-frame{
        min-height:330px!important;
        height:56vh!important;
    }

    .preview-help{
        line-height:1.45;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        transition-duration:.001ms!important;
    }

    .viewer-busy-spinner{
        animation:none!important;
        border-color:#5ebdff!important;
    }
}


/* =========================================================
   BUILD 0.8.1 — MOBILE LAYOUT HOTFIX
   ========================================================= */

/*
 * Real accessible skip link:
 * fully clipped when it is not keyboard-focused.
 * The previous translate-only approach could remain visible
 * inside the mobile builder.
 */
.builder-skip-link{
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0 0 0 0)!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
    border:0!important;
    transform:none!important;
    opacity:0!important;
    pointer-events:none!important;
}

.builder-skip-link:focus,
.builder-skip-link:focus-visible{
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:9px 12px!important;
    overflow:visible!important;
    clip:auto!important;
    clip-path:none!important;
    white-space:normal!important;
    border:1px solid #2b9df1!important;
    transform:none!important;
    opacity:1!important;
    pointer-events:auto!important;
    top:10px!important;
    left:14px!important;
}

/*
 * Important mobile correction:
 * desktop .builder-workspace carries min-height:720px.
 * A CSS Grid with implicit auto rows stretched the first row,
 * making Controls / Preview look like giant cards.
 *
 * Mobile uses a normal flex column instead.
 */
@media(max-width:899px){
    .builder-workspace{
        display:flex!important;
        flex-direction:column!important;
        grid-template-columns:none!important;
        gap:0!important;
        min-height:0!important;
        height:auto!important;
        align-items:stretch!important;
        align-content:flex-start!important;
        overflow:visible!important;
    }

    .mobile-builder-switch{
        position:sticky!important;
        top:70px!important;
        z-index:42!important;

        display:flex!important;
        align-items:center!important;

        width:100%!important;
        min-height:60px!important;
        height:60px!important;

        flex:0 0 60px!important;

        gap:6px!important;
        margin:0!important;
        padding:8px 12px!important;

        border-bottom:1px solid #173044!important;
        background:rgba(5,17,26,.97)!important;
        backdrop-filter:blur(14px);
        box-sizing:border-box!important;
    }

    .mobile-builder-switch-button{
        flex:1 1 0!important;
        width:auto!important;
        min-width:0!important;

        min-height:42px!important;
        height:42px!important;
        max-height:42px!important;

        padding:0 10px!important;
        margin:0!important;

        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        gap:7px!important;

        border-radius:9px!important;
        line-height:1!important;
        box-sizing:border-box!important;
    }

    .mobile-builder-switch-button>span{
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        width:auto!important;
        height:auto!important;
        min-width:0!important;
    }

    .builder-controls{
        order:1!important;
        flex:0 0 auto!important;

        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;

        padding:14px 14px 22px!important;

        overflow:visible!important;
        border-right:0!important;
        border-top:0!important;
        border-bottom:1px solid #173044!important;

        box-sizing:border-box!important;
    }

    .builder-preview{
        order:1!important;
        flex:0 0 auto!important;

        width:100%!important;
        min-width:0!important;
        min-height:0!important;

        padding:14px!important;
        box-sizing:border-box!important;
    }

    /*
     * Only the Controls / Preview segmented switch stays sticky.
     * Keeping the four builder steps sticky underneath it used
     * too much vertical room on a phone.
     */
    .builder-flow-nav{
        position:static!important;
        top:auto!important;
        z-index:auto!important;

        display:flex!important;
        align-items:stretch!important;

        width:100%!important;
        min-height:0!important;

        gap:6px!important;
        margin:0 0 14px!important;
        padding:2px 0 7px!important;

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

        background:transparent!important;
        border:0!important;
        backdrop-filter:none!important;

        scroll-snap-type:x proximity;
        scrollbar-width:none;
    }

    .builder-flow-nav::-webkit-scrollbar{
        display:none!important;
    }

    .builder-flow-step{
        flex:0 0 108px!important;

        width:108px!important;
        min-width:108px!important;
        max-width:108px!important;

        min-height:46px!important;
        height:46px!important;
        max-height:46px!important;

        display:grid!important;
        grid-template-columns:26px 1fr!important;
        grid-template-rows:1fr!important;
        align-items:center!important;

        column-gap:7px!important;
        padding:6px 8px!important;
        margin:0!important;

        scroll-snap-align:start;
        box-sizing:border-box!important;
    }

    .builder-flow-step>.step-icon,
    .builder-flow-step>span:not(.ui-icon){
        grid-column:1!important;
        grid-row:1!important;

        width:26px!important;
        height:26px!important;
        min-width:26px!important;
        min-height:26px!important;

        display:grid!important;
        place-items:center!important;
    }

    .builder-flow-step strong{
        grid-column:2!important;
        grid-row:1!important;

        min-width:0!important;

        font-size:.69rem!important;
        line-height:1.1!important;

        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    .builder-flow-step small,
    .builder-flow-step::after{
        display:none!important;
    }

    .builder-panel{
        min-width:0!important;
        width:100%!important;
        overflow:visible!important;
        padding:0!important;
        scroll-margin-top:82px!important;
        box-sizing:border-box!important;
    }

    .customization-heading,
    .qr-content-engine,
    .customization-engine,
    .object-engine,
    .print-engine{
        min-width:0!important;
        width:100%!important;
        box-sizing:border-box!important;
    }

    .customization-heading{
        gap:12px!important;
    }

    .mode-switch{
        flex:0 0 auto!important;
    }

    .color-grid{
        width:100%!important;
        min-width:0!important;
        grid-template-columns:1fr!important;
        gap:10px!important;
    }

    .color-control,
    .color-input-wrap{
        width:100%!important;
        min-width:0!important;
        box-sizing:border-box!important;
    }

    .builder-workspace[data-mobile-view="controls"] .builder-controls{
        display:flex!important;
    }

    .builder-workspace[data-mobile-view="controls"] .builder-preview{
        display:none!important;
    }

    .builder-workspace[data-mobile-view="preview"] .builder-controls{
        display:none!important;
    }

    .builder-workspace[data-mobile-view="preview"] .builder-preview{
        display:block!important;
    }
}

@media(max-width:560px){
    .mobile-builder-switch{
        top:64px!important;
        padding-inline:10px!important;
    }

    .builder-controls{
        padding:12px 12px 20px!important;
    }

    .builder-preview{
        padding:10px!important;
    }

    .builder-flow-step{
        flex-basis:102px!important;
        width:102px!important;
        min-width:102px!important;
        max-width:102px!important;
    }

    .mobile-builder-switch-button{
        font-size:.70rem!important;
    }

    .customization-heading{
        align-items:flex-start!important;
    }
}


/* =========================================================
   BUILD 0.8.2 — MOBILE / TABLET POLISH + LANGUAGE SWITCHER
   ========================================================= */

/* ---- Language switch: replaces the native dropdown completely ---- */

.language-switch{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;

    min-width:104px!important;
    height:42px!important;
    padding:4px 5px 4px 9px!important;

    border:1px solid #20384c!important;
    border-radius:10px!important;

    background:#07131d!important;
    color:#c6d8e7!important;

    box-sizing:border-box!important;
    overflow:hidden!important;
}

.language-globe{
    flex:none!important;
    color:#80bfff!important;
    font-size:.92rem!important;
    line-height:1!important;
}

.language-options{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;

    flex:1 1 auto!important;

    height:32px!important;
    min-width:66px!important;

    padding:2px!important;
    gap:2px!important;

    border:1px solid rgba(95,151,194,.16)!important;
    border-radius:7px!important;

    background:#06101a!important;

    box-sizing:border-box!important;
}

.language-option{
    min-width:0!important;
    width:100%!important;
    height:26px!important;

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

    padding:0 5px!important;
    margin:0!important;

    border:0!important;
    border-radius:5px!important;

    background:transparent!important;
    color:#8299ab!important;

    font:inherit!important;
    font-size:.66rem!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:.02em!important;

    cursor:pointer!important;
    box-sizing:border-box!important;

    transition:
        background-color .16s ease,
        color .16s ease,
        box-shadow .16s ease!important;
}

.language-option:hover{
    color:#dcecf8!important;
}

.language-option.is-active{
    background:#158ff0!important;
    color:white!important;
    box-shadow:
        0 4px 12px rgba(20,132,226,.22)!important;
}

.language-option:focus-visible{
    outline:2px solid #78c9ff!important;
    outline-offset:1px!important;
}

.header-cta-label-mobile{
    display:none;
}

.brand-name{
    white-space:nowrap!important;
}

/* ---- Tablet header ---- */

@media(max-width:899px){
    /*
     * 0.6.5 hid the language switch below 900px.
     * 0.8.2 intentionally restores it.
     */
    .header-tools .language-switch{
        display:flex!important;
    }

    .header-inner{
        gap:12px!important;
    }

    .brand{
        flex:1 1 auto!important;
        min-width:0!important;
    }

    .header-tools{
        flex:0 0 auto!important;
        gap:8px!important;
    }

    .language-switch{
        min-width:98px!important;
    }
}

/* ---- Phone header ---- */

@media(max-width:600px){
    .header-inner{
        min-height:64px!important;
        gap:8px!important;
    }

    .site-header .container{
        width:min(
            calc(100% - 20px),
            var(--container)
        )!important;
    }

    .brand{
        gap:7px!important;
        font-size:16px!important;
        line-height:1!important;
    }

    .brand-mark{
        width:24px!important;
        height:24px!important;
        gap:2px!important;
    }

    .beta-badge{
        display:none!important;
    }

    .header-tools{
        gap:6px!important;
    }

    .language-switch{
        min-width:72px!important;
        width:72px!important;
        height:38px!important;
        padding:3px!important;
        gap:0!important;
        border-radius:9px!important;
    }

    .language-globe{
        display:none!important;
    }

    .language-options{
        min-width:0!important;
        width:100%!important;
        height:30px!important;
    }

    .language-option{
        height:24px!important;
        padding:0 3px!important;
        font-size:.62rem!important;
    }

    .header-cta{
        display:inline-flex!important;

        min-width:64px!important;
        width:auto!important;
        min-height:38px!important;
        height:38px!important;

        padding:0 10px!important;
        gap:5px!important;

        border-radius:9px!important;

        font-size:.70rem!important;
        line-height:1!important;
        white-space:nowrap!important;
    }

    .header-cta-label-desktop{
        display:none!important;
    }

    .header-cta-label-mobile{
        display:inline!important;
    }
}

/* ---- Small phone safety ---- */

@media(max-width:390px){
    .site-header .container{
        width:min(
            calc(100% - 14px),
            var(--container)
        )!important;
    }

    .brand{
        font-size:15px!important;
        gap:6px!important;
    }

    .brand-mark{
        width:22px!important;
        height:22px!important;
    }

    .language-switch{
        width:68px!important;
        min-width:68px!important;
    }

    .header-cta{
        min-width:58px!important;
        padding-inline:8px!important;
    }
}

/* ---- Mobile builder polish ---- */

@media(max-width:899px){
    .mobile-builder-switch{
        min-height:56px!important;
        height:56px!important;
        flex-basis:56px!important;
        padding:7px 10px!important;
    }

    .mobile-builder-switch-button{
        min-height:40px!important;
        height:40px!important;
        max-height:40px!important;

        border-radius:8px!important;
        font-size:.70rem!important;
    }

    .builder-controls{
        padding:
            12px
            12px
            20px!important;
    }

    .builder-flow-nav{
        margin-bottom:12px!important;
        gap:5px!important;
        padding-bottom:5px!important;
    }

    .builder-flow-step{
        flex-basis:100px!important;
        width:100px!important;
        min-width:100px!important;
        max-width:100px!important;

        height:44px!important;
        min-height:44px!important;
        max-height:44px!important;

        padding:5px 7px!important;
    }

    .builder-flow-step>.step-icon,
    .builder-flow-step>span:not(.ui-icon){
        width:24px!important;
        height:24px!important;
        min-width:24px!important;
        min-height:24px!important;
    }

    .builder-flow-step strong{
        font-size:.66rem!important;
    }

    .builder-preview{
        min-height:0!important;
        padding:12px!important;
    }

    .builder-preview-heading{
        gap:10px!important;
        margin-bottom:10px!important;
    }

    .preview-toolbar{
        gap:7px!important;
    }

    .view-mode-switch{
        min-height:44px!important;
    }

    .view-mode-button{
        min-height:44px!important;
        height:44px!important;
        padding:0 10px!important;
    }

    .viewer-frame{
        min-height:320px!important;
        height:min(54svh,430px)!important;
        max-height:430px!important;
        border-radius:11px!important;
    }

    .builder-quick-status{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )!important;

        gap:8px!important;
        padding:12px!important;
    }

    .quick-status-item{
        min-width:0!important;
        min-height:58px!important;
        padding:9px 10px!important;
    }

    .quick-status-item:first-child{
        grid-column:1 / -1!important;
    }

    .quick-status-item span,
    .quick-status-item small{
        min-width:0!important;
    }

    .quick-status-item strong{
        white-space:normal!important;
        overflow-wrap:anywhere!important;
    }

    .scansafe-panel{
        gap:12px!important;
        padding:14px!important;
    }

    .scansafe-live-metrics{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )!important;
    }

    .scansafe-live-metrics>div{
        min-height:58px!important;
    }

    .scansafe-print-profile{
        padding:10px!important;
    }

    .scansafe-profile-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )!important;
    }

    .print-forecast-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )!important;
    }

    .builder-actions{
        padding:12px!important;
    }

    .builder-action-buttons{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )!important;
    }

    .builder-button{
        min-width:0!important;
        white-space:normal!important;
        line-height:1.25!important;
    }
}

@media(max-width:480px){
    .builder-preview{
        padding:10px!important;
    }

    .viewer-frame{
        min-height:300px!important;
        height:min(50svh,400px)!important;
        max-height:400px!important;
    }

    /*
     * Keep two-up metric cards on modern phones.
     * The old one-column override created unnecessary vertical scrolling.
     */
    .builder-quick-status,
    .scansafe-live-metrics,
    .scansafe-profile-grid,
    .print-forecast-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )!important;
    }

    .quick-status-item:first-child{
        grid-column:1 / -1!important;
    }

    .builder-action-buttons{
        grid-template-columns:1fr!important;
    }
}

@media(max-width:350px){
    .builder-quick-status,
    .scansafe-live-metrics,
    .scansafe-profile-grid,
    .print-forecast-grid{
        grid-template-columns:1fr!important;
    }

    .quick-status-item:first-child{
        grid-column:auto!important;
    }
}


/* =========================================================
   BUILD 0.8.3 — GUIDANCE / TOOLTIPS / FEEDBACK POLISH
   ========================================================= */

.editor-mode-guidance{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin:10px 0 12px;
    padding:9px 10px;
    border:1px solid rgba(68,156,219,.14);
    border-radius:9px;
    background:rgba(13,44,63,.24);
}

.editor-mode-guidance-icon{
    flex:none;
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    margin-top:1px;
    border-radius:7px;
    background:rgba(74,205,155,.10);
    color:#66d8aa;
    font-size:.64rem;
    font-weight:950;
}

.editor-mode-guidance strong{
    display:block;
    color:#d9eaf5;
    font-size:.70rem;
    line-height:1.3;
}

.editor-mode-guidance p{
    margin:3px 0 0;
    color:#8299aa;
    font-size:.63rem;
    line-height:1.5;
}

.editor-mode-guidance.is-advanced{
    border-color:rgba(81,159,255,.20);
    background:rgba(27,89,143,.12);
}

.editor-mode-guidance.is-advanced .editor-mode-guidance-icon{
    background:rgba(44,145,255,.13);
    color:#65baff;
}

.inline-help-button{
    display:inline-grid!important;
    place-items:center!important;
    vertical-align:middle!important;
    width:18px!important;
    min-width:18px!important;
    height:18px!important;
    min-height:18px!important;
    margin:0 0 0 4px!important;
    padding:0!important;
    border:1px solid rgba(83,164,221,.25)!important;
    border-radius:50%!important;
    background:rgba(18,67,98,.24)!important;
    color:#72b8e8!important;
    font:inherit!important;
    font-size:.56rem!important;
    font-weight:950!important;
    line-height:1!important;
    cursor:pointer!important;
}

.inline-help-button:hover{
    border-color:#369be0!important;
    background:rgba(35,128,192,.20)!important;
    color:#d8f0ff!important;
}

.inline-help-button:focus-visible{
    outline:2px solid #6fc5ff!important;
    outline-offset:2px!important;
}

.metric-help-button{
    width:16px!important;
    min-width:16px!important;
    height:16px!important;
    min-height:16px!important;
    margin-left:3px!important;
    font-size:.50rem!important;
}

.standalone-help-button{
    flex:none!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    margin:0!important;
}

.scansafe-autofix-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 34px;
    align-items:center;
    gap:7px;
    margin-top:10px;
}

.scansafe-autofix-row .scansafe-autofix{
    margin-top:0!important;
}

.ux-help-popover{
    position:fixed;
    z-index:10000;
    width:min(320px,calc(100vw - 24px));
    padding:12px;
    border:1px solid rgba(67,160,227,.34);
    border-radius:11px;
    background:#071722;
    color:#dcebf5;
    box-shadow:
        0 18px 50px rgba(0,0,0,.48),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.ux-help-popover[hidden]{
    display:none!important;
}

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

.ux-help-head strong{
    color:#e8f4fb;
    font-size:.78rem;
    line-height:1.3;
}

.ux-help-close{
    flex:none;
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border:1px solid rgba(119,154,179,.18);
    border-radius:8px;
    background:#0a1d2b;
    color:#91a9ba;
    font:inherit;
    font-size:1rem;
    cursor:pointer;
}

.ux-help-close:hover{
    border-color:#318ccc;
    color:white;
}

.ux-help-body{
    margin:9px 0 0;
    color:#93a8b8;
    font-size:.68rem;
    line-height:1.58;
}

.export-message{
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    opacity:0;
    transform:translateY(5px);
    transition:
        opacity .16s ease,
        transform .16s ease,
        border-color .16s ease!important;
}

.export-message[hidden]{
    display:none!important;
}

.export-message.is-visible{
    opacity:1;
    transform:translateY(0);
}

.export-message-icon{
    flex:none;
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:rgba(76,213,158,.10);
    color:#5ce1aa;
    font-size:.68rem;
    font-weight:950;
}

.export-message.is-error .export-message-icon{
    background:rgba(255,105,121,.10);
    color:#ff7f8e;
}

.export-message-text{
    min-width:0;
    color:inherit;
}

.qr-content-error{
    transition:
        opacity .16s ease,
        transform .16s ease;
}

.qr-content-error.is-visible{
    opacity:1;
    transform:translateY(0);
}

.qr-fields [aria-invalid="true"]{
    border-color:rgba(255,103,119,.62)!important;
    box-shadow:0 0 0 2px rgba(255,103,119,.08)!important;
}

.control-heading label,
#relief-label{
    display:inline-flex;
    align-items:center;
    gap:2px;
}

.print-forecast-head strong,
.scansafe-print-profile-head strong{
    display:flex;
    align-items:center;
    gap:3px;
}

@media(max-width:640px){
    .ux-help-popover{
        left:12px!important;
        right:12px!important;
        top:auto!important;
        bottom:12px!important;
        width:auto!important;
        padding:14px!important;
        border-radius:14px!important;
        box-shadow:
            0 -12px 45px rgba(0,0,0,.52),
            inset 0 1px 0 rgba(255,255,255,.03);
    }

    .ux-help-body{
        font-size:.72rem;
        line-height:1.6;
    }

    .inline-help-button{
        width:24px!important;
        min-width:24px!important;
        height:24px!important;
        min-height:24px!important;
        font-size:.62rem!important;
    }

    .metric-help-button{
        width:20px!important;
        min-width:20px!important;
        height:20px!important;
        min-height:20px!important;
    }

    .standalone-help-button{
        width:40px!important;
        min-width:40px!important;
        height:40px!important;
        min-height:40px!important;
    }

    .scansafe-autofix-row{
        grid-template-columns:minmax(0,1fr) 40px;
    }

    .editor-mode-guidance{
        padding:10px;
    }

    .editor-mode-guidance p{
        font-size:.67rem;
    }
}

@media(prefers-reduced-motion:reduce){
    .export-message,
    .qr-content-error{
        transition:none!important;
        transform:none!important;
    }
}


/* =========================================================
   MODUQR 1.0.1 — SCANSAFE RESPONSIVE METRIC GRID FIX
   Fixes legacy 0.7.x cascade that forced six compressed columns.
   ========================================================= */

.scansafe-panel{
    grid-template-columns:minmax(270px,320px) minmax(0,1fr)!important;
}

.scansafe-analysis{
    min-width:0!important;
}

.scansafe-live-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
}

.scansafe-live-metrics>div{
    min-width:0!important;
    min-height:78px!important;
    padding:12px 13px!important;
    overflow:visible!important;
}

.scansafe-live-metrics span{
    line-height:1.25!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
}

.scansafe-live-metrics strong{
    line-height:1.3!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
}

.scansafe-integrity-metric>span,
.scansafe-geometry-metric>span{
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    flex-wrap:wrap!important;
}

@media(max-width:1180px){
    .scansafe-panel{
        grid-template-columns:minmax(245px,285px) minmax(0,1fr)!important;
    }

    .scansafe-live-metrics{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}

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

    .scansafe-live-metrics{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
}

@media(max-width:680px){
    .scansafe-live-metrics{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}

@media(max-width:460px){
    .scansafe-live-metrics{
        grid-template-columns:1fr!important;
    }
}