/* ============================================================
   qr-custom.css  —  QR Code Generator (coeusseo.com)
   Scoped under .qr-* to prevent Foundation conflicts.
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
    --qr-dark:        #0f172a;
    --qr-card-bg:     #1e293b;
    --qr-card-border: #334155;
    --qr-divider:     #2d3f55;
    --qr-text:        #f1f5f9;
    --qr-muted:       #94a3b8;
    --qr-blue:        #3b82f6;
    --qr-blue-light:  #60a5fa;
    --qr-gold:        #fbbf24;
    --qr-green:       #22c55e;
    --qr-red:         #ef4444;
    --qr-amber:       #f59e0b;
    --qr-radius:      8px;
    --qr-shadow:      0 4px 24px rgba(0,0,0,.45);
}

/* ── App Wrapper ─────────────────────────────────────────────── */
.qr-app-wrapper {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

/* ── Cards ───────────────────────────────────────────────────── */
.qr-config-card,
.qr-preview-card {
    background:    var(--qr-card-bg)     !important;
    border:        1px solid var(--qr-card-border) !important;
    border-radius: var(--qr-radius)      !important;
    box-shadow:    var(--qr-shadow)      !important;
}

.qr-config-card .card-divider,
.qr-preview-card .card-divider {
    background:    #162032              !important;
    border-bottom: 1px solid var(--qr-card-border);
    border-radius: var(--qr-radius) var(--qr-radius) 0 0 !important;
}

.qr-config-card .card-divider h5,
.qr-preview-card .card-divider h5 {
    color:       var(--qr-blue-light) !important;
    margin:      0;
    font-size:   1rem;
    font-weight: 600;
    letter-spacing: .03em;
}

.qr-config-card .card-divider h5 i,
.qr-preview-card .card-divider h5 i {
    margin-right: .4rem;
    color: var(--qr-gold);
}

.qr-config-card .card-section,
.qr-preview-card .card-section {
    padding: 1.5rem !important;
}

/* ── Form Groups ─────────────────────────────────────────────── */
.qr-form-group {
    margin-bottom: 1.1rem;
}

.qr-config-card label {
    color:       var(--qr-text)  !important;
    font-weight: 500;
    font-size:   .875rem;
    margin-bottom: .35rem;
    display:     block;
}

.qr-config-card label small {
    color:       var(--qr-muted) !important;
    font-weight: 400;
}

.qr-required {
    color: var(--qr-red);
    margin-left: .15rem;
}

/* ── Inputs ──────────────────────────────────────────────────── */
.qr-input {
    background:  #0f1e2e               !important;
    border:      1px solid var(--qr-card-border) !important;
    border-radius: 5px                 !important;
    color:       var(--qr-text)        !important;
    padding:     .6rem .85rem          !important;
    font-size:   .9rem                 !important;
    width:       100%;
    transition:  border-color .18s ease, box-shadow .18s ease;
    margin-bottom: 0;
}

.qr-input:focus {
    border-color: var(--qr-blue)       !important;
    box-shadow:   0 0 0 3px rgba(59,130,246,.25) !important;
    outline:      none;
}

.qr-input::placeholder {
    color: #475569;
}

/* Foundation select reset inside dark cards */
.qr-config-card select,
.qr-select {
    background:    #0f1e2e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E") no-repeat right .8rem center !important;
    background-size: 10px 6px          !important;
    border:        1px solid var(--qr-card-border) !important;
    border-radius: 5px                 !important;
    color:         var(--qr-text)      !important;
    padding:       .6rem 2rem .6rem .85rem !important;
    font-size:     .875rem             !important;
    appearance:    none;
    width:         100%;
    transition: border-color .18s ease;
    margin-bottom: 0;
    height: auto                       !important;
}

.qr-select:focus {
    border-color: var(--qr-blue)       !important;
    box-shadow:   0 0 0 3px rgba(59,130,246,.25) !important;
    outline:      none;
}

/* ── Color Trigger Button ────────────────────────────────────── */
.qr-color-row {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    margin-bottom: .25rem;
}

.qr-color-trigger {
    width:         48px;
    height:        48px;
    border-radius: 8px;
    border:        3px solid var(--qr-card-border);
    cursor:        pointer;
    flex-shrink:   0;
    transition:    border-color .18s, transform .12s, box-shadow .18s;
    padding:       0;
    background:    #000; /* overridden by JS */
    position:      relative;
}

.qr-color-trigger::after {
    content:       '\f040'; /* fa pencil */
    font-family:   'Font Awesome 6 Free';
    font-weight:   900;
    position:      absolute;
    bottom:        -2px;
    right:         -2px;
    font-size:     9px;
    background:    var(--qr-dark);
    color:         var(--qr-muted);
    border-radius: 3px;
    padding:       1px 3px;
    line-height:   1.4;
}

.qr-color-trigger:hover {
    border-color: var(--qr-blue)     !important;
    transform:    scale(1.06);
    box-shadow:   0 0 0 3px rgba(59,130,246,.25);
}

.qr-color-meta {
    display:        flex;
    flex-direction: column;
    gap:            .1rem;
}

.qr-color-label {
    font-family: monospace;
    font-size:   .82rem;
    color:       var(--qr-muted);
    line-height: 1.2;
}

.qr-color-mode {
    font-size:     .65rem;
    color:         #475569;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  CUSTOM COLOR PICKER PANEL  (#qrp-panel)                    ║
   ╚══════════════════════════════════════════════════════════════╝ */

#qrp-panel {
    position:      fixed;
    z-index:       99990;
    width:         300px;
    max-height:    calc(100vh - 16px);
    background:    #0f1e2e;
    border:        1px solid var(--qr-card-border);
    border-radius: 10px;
    box-shadow:    0 8px 40px rgba(0,0,0,.6);
    overflow:      auto;
    opacity:       0;
    transform:     translateY(0) scale(.985);
    transition:    opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1);
    /* display:none managed by JS */
}

#qrp-panel.qrp--above {
    transform: translateY(8px) scale(.985);
}

#qrp-panel.qrp--below {
    transform: translateY(-8px) scale(.985);
}

#qrp-panel.qrp--visible {
    opacity:   1;
    transform: translateY(0) scale(1);
}

/* Preview bar */
.qrp-preview-bar {
    height:     44px;
    background: #000;
    transition: background .1s;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Tabs */
.qrp-tabs {
    display:    flex;
    background: #0a1520;
    border-bottom: 1px solid var(--qr-card-border);
}

.qrp-tab {
    flex:          1;
    padding:       .5rem 0;
    font-size:     .75rem;
    font-weight:   700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:         var(--qr-muted);
    background:    transparent;
    border:        none;
    cursor:        pointer;
    transition:    color .15s, background .15s;
    margin:        0 !important;
}

.qrp-tab.active {
    color:       var(--qr-blue-light);
    background:  rgba(59,130,246,.1);
    border-bottom: 2px solid var(--qr-blue);
}

.qrp-tab:hover:not(.active) {
    color:      var(--qr-text);
    background: rgba(255,255,255,.04);
}

/* Tab body */
.qrp-body {
    padding: 1rem;
}

/* ── HEX Tab ─────────────────────────────────────────────────── */
.qrp-hex-row {
    display:     flex;
    align-items: center;
    gap:         .3rem;
    margin-bottom: .75rem;
}

.qrp-hash {
    font-family: monospace;
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--qr-muted);
    line-height: 1;
}

#qrp-hex-input {
    flex:          1;
    background:    #0a1520  !important;
    border:        1px solid var(--qr-card-border) !important;
    border-radius: 5px      !important;
    color:         var(--qr-text) !important;
    font-family:   monospace !important;
    font-size:     1rem     !important;
    padding:       .45rem .6rem !important;
    text-transform: uppercase;
    letter-spacing: .08em;
}

#qrp-hex-input:focus {
    border-color: var(--qr-blue) !important;
    outline:      none;
    box-shadow:   0 0 0 2px rgba(59,130,246,.2) !important;
}

.qrp-native-row {
    display:     flex;
    align-items: center;
    gap:         .6rem;
}

.qrp-native-label {
    font-size:   .75rem;
    color:       var(--qr-muted);
    flex-shrink: 0;
}

#qrp-native {
    width:         36px;
    height:        36px;
    border-radius: 5px;
    border:        2px solid var(--qr-card-border);
    padding:       2px;
    background:    transparent;
    cursor:        pointer;
}

#qrp-native::-webkit-color-swatch-wrapper { padding: 0; }
#qrp-native::-webkit-color-swatch         { border-radius: 3px; border: none; }

/* ── CMYK Tab ────────────────────────────────────────────────── */
.qrp-cmyk-grid {
    display:   flex;
    flex-direction: column;
    gap:       .65rem;
}

.qrp-cmyk-row {
    display:     flex;
    align-items: center;
    gap:         .5rem;
}

.qrp-cmyk-lbl {
    width:       18px;
    font-size:   .8rem;
    font-weight: 800;
    text-align:  center;
    border-radius: 3px;
    padding:     1px 0;
    flex-shrink: 0;
}

.qrp-c-lbl { background: rgba(0,159,227,.2); color: #38bdf8; }
.qrp-m-lbl { background: rgba(206,0,114,.2); color: #f472b6; }
.qrp-y-lbl { background: rgba(249,228,0,.2);  color: #fde047; }
.qrp-k-lbl { background: rgba(200,200,200,.1); color: #94a3b8; }
.qrp-r-lbl { background: rgba(239,68,68,.2);   color: #f87171; }
.qrp-g-lbl { background: rgba(34,197,94,.2);   color: #4ade80; }
.qrp-b-lbl { background: rgba(59,130,246,.2);  color: #60a5fa; }

.qrp-slider {
    flex:          1;
    height:        5px;
    appearance:    none;
    -webkit-appearance: none;
    border-radius: 3px;
    background:    linear-gradient(to right,
        var(--qr-blue) 0%,
        var(--qr-blue) var(--fill, 0%),
        rgba(255,255,255,.1) var(--fill, 0%),
        rgba(255,255,255,.1) 100%);
    cursor:        pointer;
    outline:       none;
}

.qrp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:         14px;
    height:        14px;
    border-radius: 50%;
    background:    var(--qr-blue-light);
    border:        2px solid var(--qr-dark);
    cursor:        pointer;
}

.qrp-slider::-moz-range-thumb {
    width:         14px;
    height:        14px;
    border-radius: 50%;
    background:    var(--qr-blue-light);
    border:        2px solid var(--qr-dark);
    cursor:        pointer;
}

.qrp-num {
    width:  48px !important;
    background:  #0a1520      !important;
    border:      1px solid var(--qr-card-border) !important;
    border-radius: 4px  !important;
    color:       var(--qr-text) !important;
    font-size:   .78rem       !important;
    padding:     .3rem .35rem !important;
    text-align:  center;
    -moz-appearance: textfield;
    flex-shrink: 0;
}
.qrp-num::-webkit-outer-spin-button,
.qrp-num::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── PANTONE Tab ─────────────────────────────────────────────── */
.qrp-search {
    width:         100%;
    background:    #0a1520 !important;
    border:        1px solid var(--qr-card-border) !important;
    border-radius: 5px     !important;
    color:         var(--qr-text) !important;
    font-size:     .82rem  !important;
    padding:       .4rem .6rem !important;
    margin-bottom: .65rem;
}

.qrp-search:focus {
    border-color: var(--qr-blue) !important;
    outline:      none;
}

.qrp-chip-grid {
    max-height:  200px;
    overflow-y:  auto;
    display:     grid;
    grid-template-columns: 1fr 1fr;
    gap:         .3rem;
    padding-right: 2px;
}

.qrp-chip-grid::-webkit-scrollbar       { width: 4px; }
.qrp-chip-grid::-webkit-scrollbar-track { background: transparent; }
.qrp-chip-grid::-webkit-scrollbar-thumb { background: var(--qr-card-border); border-radius: 2px; }

.qrp-chip {
    display:     flex;
    align-items: center;
    gap:         .4rem;
    padding:     .35rem .45rem;
    border-radius: 5px;
    cursor:      pointer;
    border:      1px solid transparent;
    transition:  background .12s, border-color .12s;
}

.qrp-chip:hover {
    background:   rgba(255,255,255,.06);
    border-color: var(--qr-card-border);
}

.qrp-chip--active {
    background:   rgba(59,130,246,.15) !important;
    border-color: var(--qr-blue)       !important;
}

.qrp-chip-dot {
    width:         22px;
    height:        22px;
    border-radius: 50%;
    flex-shrink:   0;
    border:        1px solid rgba(255,255,255,.12);
}

.qrp-chip-name {
    font-size:   .72rem;
    color:       var(--qr-muted);
    line-height: 1.2;
    word-break:  break-word;
}

/* ── Picker Action Buttons ───────────────────────────────────── */
.qrp-actions {
    display:     flex;
    gap:         .5rem;
    padding:     .75rem 1rem;
    border-top:  1px solid var(--qr-card-border);
    background:  rgba(0,0,0,.2);
}

.qrp-btn-apply {
    flex:          1;
    background:    linear-gradient(135deg, #1d4ed8, #0023FF) !important;
    color:         #fff           !important;
    border:        none           !important;
    border-radius: 5px            !important;
    font-size:     .82rem         !important;
    font-weight:   700            !important;
    padding:       .45rem 0       !important;
    margin:        0              !important;
    cursor:        pointer;
    transition:    opacity .18s;
}

.qrp-btn-apply:hover { opacity: .88; }

.qrp-btn-cancel {
    background:   transparent          !important;
    border:       1px solid var(--qr-card-border) !important;
    color:        var(--qr-muted)      !important;
    border-radius: 5px                 !important;
    font-size:    .8rem                !important;
    padding:      .45rem .75rem        !important;
    margin:       0                    !important;
    cursor:       pointer;
    transition:   border-color .15s;
}

.qrp-btn-cancel:hover {
    border-color: var(--qr-blue) !important;
    color:        var(--qr-blue-light) !important;
}

/* ── Embed Logo Row ──────────────────────────────────────────── */
.qr-embed-row {
    display:     flex;
    align-items: flex-start;
    gap:         .55rem;
    padding:     .6rem .75rem;
    background:  rgba(59,130,246,.06);
    border:      1px solid rgba(59,130,246,.2);
    border-radius: 6px;
    margin-bottom: .5rem;
}

.qr-embed-label {
    color:       var(--qr-text)  !important;
    font-size:   .82rem          !important;
    font-weight: 500             !important;
    margin:      0               !important;
    line-height: 1.5;
    cursor:      pointer;
}

.qr-embed-label i {
    color:       var(--qr-blue-light);
    margin-right: .3rem;
}

.qr-embed-label small {
    display:    block;
    color:      var(--qr-muted) !important;
    font-size:  .72rem          !important;
    margin-top: .1rem;
}

/* ── Contrast Row ────────────────────────────────────────────── */
.qr-contrast-row {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    margin:      .5rem 0 .75rem;
    flex-wrap:   wrap;
}

.qr-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           .35rem;
    padding:       .3rem .75rem;
    border-radius: 20px;
    font-size:     .8rem;
    font-weight:   600;
    transition:    background .2s, color .2s;
}

.qr-badge i { font-size: .8em; }

.qr-badge-ok {
    background: rgba(34,197,94,.15);
    color:      var(--qr-green);
    border:     1px solid rgba(34,197,94,.3);
}

.qr-badge-warn {
    background: rgba(245,158,11,.15);
    color:      var(--qr-amber);
    border:     1px solid rgba(245,158,11,.3);
}

.qr-contrast-warning {
    font-size:   .8rem;
    color:       var(--qr-amber);
    font-weight: 500;
}

/* ── Divider ─────────────────────────────────────────────────── */
.qr-divider {
    border:  none;
    border-top: 1px solid var(--qr-divider);
    margin:  1rem 0;
}

/* ── Extracted Swatches ──────────────────────────────────────── */
.qr-swatches-section {
    background:    rgba(255,255,255,.03);
    border:        1px solid var(--qr-card-border);
    border-radius: 6px;
    padding:       .85rem 1rem;
    margin-bottom: .5rem;
}

.qr-swatch-heading {
    color:       var(--qr-muted);
    font-size:   .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin:      0 0 .65rem;
}

.qr-swatch-grid {
    display: flex;
    gap:     1rem;
    flex-wrap: wrap;
}

.qr-swatch-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .3rem;
}

.qr-swatch-dot {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    border:        2px solid rgba(255,255,255,.12);
    box-shadow:    0 2px 8px rgba(0,0,0,.4);
    transition:    transform .15s ease, box-shadow .15s ease;
    cursor:        pointer;
    background:    none; /* actual bg set dynamically */
    padding:       0;
    flex-shrink:   0;
}

.qr-swatch-dot:hover {
    transform:  scale(1.08);
    box-shadow: 0 4px 14px rgba(0,0,0,.5);
}

.qr-swatch-hex {
    font-family: monospace;
    font-size:   .72rem;
    color:       var(--qr-muted);
}

.qr-swatch-cmyk {
    font-family: monospace;
    font-size:   .65rem;
    color:       #475569;
    white-space: nowrap;
}

.qr-swatch-btns {
    display: flex;
    gap:     .3rem;
}

.qr-apply-btn {
    padding:       3px 9px     !important;
    font-size:     .72rem      !important;
    line-height:   1.4         !important;
    border-radius: 12px        !important;
    background:    rgba(59,130,246,.2) !important;
    color:         var(--qr-blue-light) !important;
    border:        1px solid rgba(59,130,246,.35) !important;
    cursor:        pointer;
    transition:    background .15s, transform .1s;
    font-weight:   600;
    margin:        0           !important;
}

.qr-apply-btn.qr-apply-bg {
    background:  rgba(251,191,36,.15) !important;
    color:       var(--qr-gold)       !important;
    border-color: rgba(251,191,36,.35) !important;
}

.qr-apply-btn:hover {
    transform: scale(1.07);
    background: rgba(59,130,246,.35) !important;
}

.qr-apply-btn.qr-apply-bg:hover {
    background: rgba(251,191,36,.3) !important;
}

/* ── Upload Zone ─────────────────────────────────────────────── */
.qr-upload-zone {
    position:      relative;
    border:        2px dashed var(--qr-card-border);
    border-radius: var(--qr-radius);
    padding:       1.5rem 1rem;
    text-align:    center;
    cursor:        pointer;
    color:         var(--qr-muted);
    transition:    border-color .2s, background .2s;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           .4rem;
}

.qr-upload-zone:hover,
.qr-upload-hover {
    border-color: var(--qr-blue)     !important;
    background:   rgba(59,130,246,.06);
    color:        var(--qr-blue-light);
}

.qr-upload-zone i {
    color: var(--qr-blue);
    display: block;
}

.qr-upload-zone small {
    font-size:   .75rem;
    color:       #475569;
}

.qr-file-input {
    position: absolute;
    inset:    0;
    opacity:  0;
    cursor:   pointer;
    width:    100%;
    height:   100%;
}

/* ── Logo Preview Row ────────────────────────────────────────── */
.qr-logo-preview-row {
    display:     flex;
    align-items: center;
    gap:         1rem;
    padding:     .6rem 0;
}

.qr-logo-thumb {
    max-height:    64px;
    max-width:     120px;
    border-radius: 5px;
    border:        1px solid var(--qr-card-border);
    object-fit:    contain;
    background:    #fff;
    padding:       4px;
}

.qr-logo-clear {
    margin: 0 !important;
    padding: 6px 12px !important;
    font-size: .8rem !important;
}

/* ── ECL Locked Notice ───────────────────────────────────────── */
.qr-ecl-notice {
    display:       flex;
    align-items:   center;
    gap:           .45rem;
    background:    rgba(251,191,36,.1);
    border:        1px solid rgba(251,191,36,.3);
    border-radius: 5px;
    color:         var(--qr-gold);
    font-size:     .8rem;
    padding:       .45rem .75rem;
    margin-top:    .5rem;
}

/* ── Opt-In Row ──────────────────────────────────────────────── */
.qr-optin-row {
    display:     flex;
    align-items: flex-start;
    gap:         .5rem;
    margin-bottom: 1.1rem;
}

.qr-optin-label {
    color:       var(--qr-muted) !important;
    font-size:   .8rem !important;
    font-weight: 400 !important;
    margin:      0 !important;
    line-height: 1.5;
    cursor:      pointer;
}

/* ── Generate Button ─────────────────────────────────────────── */
.qr-generate-btn {
    background:    linear-gradient(135deg, #1d4ed8 0%, #0023FF 100%) !important;
    color:         #fff    !important;
    border:        none   !important;
    border-radius: 6px    !important;
    font-weight:   700    !important;
    letter-spacing: .04em;
    padding:       .9rem 1.5rem !important;
    margin:        .25rem 0 0  !important;
    transition:    opacity .2s, transform .15s;
    width:         100%;
}

.qr-generate-btn:hover:not(:disabled) {
    opacity:   .9;
    transform: translateY(-1px);
}

.qr-generate-btn:disabled {
    opacity: .6;
    cursor:  not-allowed;
}

.qr-generate-btn i {
    margin-right: .4rem;
}

/* ── Preview Card Body ───────────────────────────────────────── */
.qr-preview-body {
    min-height: 380px;
    display:    flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ── Placeholder ─────────────────────────────────────────────── */
.qr-placeholder {
    text-align: center;
    padding:    2rem 1rem;
    color:      var(--qr-muted);
}

.qr-placeholder-icon {
    font-size: 5rem;
    color:     var(--qr-card-border);
    display:   block;
    margin-bottom: 1rem;
}

.qr-placeholder p {
    color:       var(--qr-muted)  !important;
    font-size:   1rem;
    font-weight: 500;
    margin-bottom: .3rem;
}

.qr-placeholder small {
    color:     #475569 !important;
    font-size: .83rem;
}

/* ── Loading Spinner ─────────────────────────────────────────── */
.qr-loading-state {
    text-align: center;
    padding:    2rem;
    color:      var(--qr-muted);
}

.qr-loading-state p {
    color:     var(--qr-muted) !important;
    margin-top: 1rem;
}

.qr-spinner {
    width:  52px;
    height: 52px;
    margin: 0 auto;
    border: 4px solid rgba(59,130,246,.15);
    border-top-color: var(--qr-blue);
    border-radius: 50%;
    animation: qr-spin .7s linear infinite;
}

@keyframes qr-spin {
    to { transform: rotate(360deg); }
}

/* ── QR Result Area ──────────────────────────────────────────── */
.qr-result-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.qr-image-wrap {
    background:    #fff;
    border-radius: var(--qr-radius);
    padding:       12px;
    box-shadow:    0 0 0 1px rgba(255,255,255,.08), var(--qr-shadow);
    display:       inline-flex;
    position:      relative;
}

.qr-output-img {
    max-width:     100%;
    display:       block;
    image-rendering: pixelated; /* keep crisp zoom for high-contrast preview */
}

/* ── Meta Bar ────────────────────────────────────────────────── */
.qr-meta-bar {
    display:     flex;
    gap:         1.25rem;
    flex-wrap:   wrap;
    justify-content: center;
    width:       100%;
}

.qr-meta-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .15rem;
}

.qr-meta-label {
    font-size:   .7rem;
    color:       var(--qr-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}

.qr-hash {
    font-family:  monospace;
    font-size:    .8rem;
    color:        var(--qr-blue-light);
    background:   rgba(59,130,246,.1);
    padding:      2px 8px;
    border-radius: 4px;
}

.qr-ecl-tag {
    font-size:    .82rem;
    font-weight:  700;
    color:        var(--qr-green);
    background:   rgba(34,197,94,.1);
    padding:      2px 10px;
    border-radius: 4px;
    border:       1px solid rgba(34,197,94,.25);
}

/* ── Download + Reset Buttons ────────────────────────────────── */
.qr-download-btn {
    background: var(--qr-green)   !important;
    color:      #fff              !important;
    border:     none              !important;
    font-weight: 700              !important;
    border-radius: 6px            !important;
    margin:     0 0 .4rem         !important;
    width:      100%;
    transition: opacity .2s;
}

.qr-download-btn:hover { opacity: .9; }

.qr-reset-btn {
    background:   transparent                    !important;
    border:       1px solid var(--qr-card-border) !important;
    color:        var(--qr-muted)               !important;
    font-weight:  600                           !important;
    border-radius: 6px                          !important;
    margin:       0                             !important;
    width:        100%;
    transition:   border-color .2s;
}

.qr-reset-btn:hover {
    border-color: var(--qr-blue) !important;
    color:        var(--qr-blue-light) !important;
}

/* ── Tips Callout ────────────────────────────────────────────── */
.qr-tips-callout {
    background:    rgba(30,41,59,.85)   !important;
    border:        1px solid var(--qr-card-border) !important;
    border-radius: var(--qr-radius)     !important;
    margin-top:    1.25rem;
    padding:       1rem 1.25rem;
}

.qr-tips-callout h6 {
    color:        var(--qr-gold)  !important;
    font-size:    .85rem;
    font-weight:  700;
    margin-bottom: .6rem;
    letter-spacing: .03em;
}

.qr-tips-callout h6 i {
    margin-right: .35rem;
}

.qr-tips-list {
    margin:    0;
    padding:   0 0 0 1.1rem;
    list-style: disc;
}

.qr-tips-list li {
    color:       var(--qr-muted) !important;
    font-size:   .82rem;
    margin-bottom: .35rem;
    line-height: 1.55;
}

.qr-tips-list li strong {
    color: var(--qr-text) !important;
}

/* ── Toast Notifications ─────────────────────────────────────── */
.qr-toast {
    position:      fixed;
    bottom:        5.5rem; /* clear the cookie bar */
    right:         1.25rem;
    z-index:       99999;
    padding:       .75rem 1.2rem;
    border-radius: 8px;
    font-size:     .875rem;
    font-weight:   500;
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    max-width:     340px;
    box-shadow:    0 6px 24px rgba(0,0,0,.5);
    opacity:       0;
    transform:     translateX(24px);
    transition:    opacity .3s ease, transform .3s ease;
    pointer-events: none;
}

.qr-toast--visible {
    opacity:   1;
    transform: translateX(0);
}

.qr-toast--primary {
    background: #1e3a5f;
    color:      var(--qr-blue-light);
    border:     1px solid rgba(59,130,246,.4);
}

.qr-toast--alert {
    background: #3b0e0e;
    color:      #fca5a5;
    border:     1px solid rgba(239,68,68,.4);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 639px) {
    .qr-app-wrapper {
        padding-top: 1.5rem;
    }

    .qr-preview-body {
        min-height: 280px;
    }

    .qr-meta-bar {
        gap: .75rem;
    }

    .qr-toast {
        right:  .75rem;
        left:   .75rem;
        max-width: none;
        bottom: 5rem;
    }
}

/* ── Swatch Tap Popover ──────────────────────────────────────── */
#qr-swatch-pop {
    position:      fixed;
    z-index:       99999;
    background:    #111c2d;
    border:        1px solid rgba(59,130,246,.35);
    border-radius: 10px;
    box-shadow:    0 8px 32px rgba(0,0,0,.6);
    padding:       .75rem;
    width:         190px;
    display:       none;
    flex-direction: column;
    gap:           .5rem;
    opacity:       0;
    transform:     translateY(0) scale(.985);
    transition:    opacity .18s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}

#qr-swatch-pop.qrsp--above {
    transform: translateY(8px) scale(.985);
}

#qr-swatch-pop.qrsp--below {
    transform: translateY(-8px) scale(.985);
}

#qr-swatch-pop.qrsp--visible {
    display:   flex;
    opacity:   1;
    transform: translateY(0) scale(1);
}

.qrsp-arrow {
    display: none; /* visual arrow could be added later */
}

.qrsp-swatch-preview {
    height:        32px;
    border-radius: 5px;
    border:        1px solid rgba(255,255,255,.1);
}

.qrsp-hex {
    font-family:  monospace;
    font-size:    .78rem;
    color:        var(--qr-muted);
    text-align:   center;
}

.qrsp-btns {
    display:        flex;
    flex-direction: column;
    gap:            .4rem;
}

.qrsp-btn {
    padding:       .5rem .75rem;
    font-size:     .82rem;
    font-weight:   600;
    border-radius: 6px;
    border:        1px solid transparent;
    cursor:        pointer;
    text-align:    left;
    display:       flex;
    align-items:   center;
    gap:           .4rem;
    transition:    background .15s, transform .1s;
    width:         100%;
}

.qrsp-btn i { font-size: .8rem; }

.qrsp-fg {
    background: rgba(59,130,246,.18);
    color:      var(--qr-blue-light);
    border-color: rgba(59,130,246,.35);
}

.qrsp-fg:hover {
    background: rgba(59,130,246,.32);
    transform:  scale(1.02);
}

.qrsp-bg {
    background: rgba(251,191,36,.14);
    color:      var(--qr-gold);
    border-color: rgba(251,191,36,.35);
}

.qrsp-bg:hover {
    background: rgba(251,191,36,.28);
    transform:  scale(1.02);
}

/* ── Shape Selectors ─────────────────────────────────────────── */
.qr-shape-section {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.qr-shape-group {
    display:        flex;
    flex-direction: column;
    gap:            .55rem;
}

.qr-shape-label {
    font-size:   .8rem;
    font-weight: 700;
    color:       var(--qr-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    display:     flex;
    align-items: center;
    gap:         .4rem;
    margin:      0;
}

.qr-shape-label i { color: var(--qr-blue); }

.qr-shape-label small {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: .72rem;
    color: #475569;
}

.qr-shape-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   .5rem;
}

.qr-shape-tile {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .3rem;
    padding:        .55rem .3rem;
    background:     rgba(255,255,255,.04);
    border:         1px solid var(--qr-card-border);
    border-radius:  7px;
    cursor:         pointer;
    transition:     border-color .15s, background .15s;
    position:       relative;
    overflow:       hidden;
}

.qr-shape-tile input[type="radio"] {
    position: absolute;
    opacity:  0;
    pointer-events: none;
}

.qr-shape-tile:has(input:checked) {
    border-color: var(--qr-blue);
    background:   rgba(59,130,246,.12);
    box-shadow:   0 0 0 1px rgba(59,130,246,.5);
}

.qr-shape-tile:hover {
    border-color: rgba(59,130,246,.5);
    background:   rgba(59,130,246,.08);
}

.qr-shape-icon {
    width:  44px;
    height: 44px;
    flex-shrink: 0;
}

.qr-shape-icon svg {
    width:   100%;
    height:  100%;
    fill:    var(--qr-text);
    stroke:  var(--qr-text);
    display: block;
}

.qr-shape-name {
    font-size:   .72rem;
    font-weight: 600;
    color:       var(--qr-muted);
    text-align:  center;
}

.qr-shape-tile:has(input:checked) .qr-shape-name {
    color: var(--qr-blue-light);
}

/* ── Coming-Soon Analytics Bar ───────────────────────────────── */
.qr-coming-soon-bar {
    background:   linear-gradient(135deg, #0f1d3a 0%, #0a1520 100%);
    border-top:   1px solid rgba(59,130,246,.2);
    padding:      1.1rem 1.5rem;
    margin-top:   1.5rem;
}

.qr-coming-soon-inner {
    max-width:   760px;
    margin:      0 auto;
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex-wrap:   wrap;
}

.qr-cs-icon {
    font-size:  1.6rem;
    color:      var(--qr-blue);
    flex-shrink: 0;
}

.qr-cs-text {
    flex: 1;
    min-width: 160px;
}

.qr-cs-text strong {
    display:     block;
    color:       var(--qr-text);
    font-size:   .92rem;
    margin-bottom: .2rem;
}

.qr-cs-text span {
    color:     var(--qr-muted);
    font-size: .82rem;
}

.qr-cs-badge {
    background:    rgba(59,130,246,.18);
    color:         var(--qr-blue-light);
    border:        1px solid rgba(59,130,246,.35);
    border-radius: 20px;
    font-size:     .72rem;
    font-weight:   700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding:       .3rem .85rem;
    white-space:   nowrap;
    flex-shrink:   0;
}

@media (max-width: 639px) {
    .qr-shape-grid { grid-template-columns: repeat(3, 1fr); }
    .qr-cs-icon { display: none; }
}