/* =========================================================
   QR-TH V1 — CLEAN UI
   Frontend only. Backend untouched.
   ========================================================= */

.qrth-v1-page,
.qrth-v1-page * {
    box-sizing: border-box;
}

.qrth-v1-page {
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    padding: 32px 24px 56px;
    color: #111827;
}

.qrth-v1-shell {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) 330px;
    gap: 24px;
    align-items: start;
}

.qrth-v1-sidebar,
.qrth-v1-main,
.qrth-v1-preview-card {
    min-width: 0;
}

/* Sidebar */
.qrth-v1-sidebar {
    position: sticky;
    top: 24px;
}

.qrth-v1-sidebar-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.qrth-v1-type-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qrth-v1-type {
    appearance: none;
    width: 100%;
    border: 0;
    background: transparent;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: .18s ease;
}

.qrth-v1-type:hover {
    background: #f3f4f6;
    color: #111827;
}

.qrth-v1-type.is-active {
    background: #eef4ff;
    color: #2563eb;
    font-weight: 700;
}

.qrth-v1-type-icon {
    width: 22px;
    text-align: center;
    flex: 0 0 22px;
}

/* Premium */
.qrth-v1-premium-card {
    margin-top: 22px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
}

.qrth-v1-premium-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}

.qrth-v1-check {
    font-size: 12px;
    color: #6b7280;
    margin-top: 7px;
}

.qrth-v1-premium-btn {
    display: block;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 9px;
    background: #111827;
    color: #fff !important;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

/* Main */
.qrth-v1-heading {
    margin-bottom: 20px;
}

.qrth-v1-heading h1 {
    margin: 0;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.1;
    letter-spacing: -.035em;
    font-weight: 800;
}

.qrth-v1-heading h1 span {
    font-size: .7em;
}

.qrth-v1-heading p {
    margin: 9px 0 0;
    color: #6b7280;
    font-size: 14px;
}

/* Builder */
.qrth-v1-builder {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.qrth-v1-step {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 20px;
}

.qrth-v1-step-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.qrth-v1-step-head > span,
.qrth-v1-collapse > span:first-child {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #111827;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex: 0 0 28px;
}

.qrth-v1-step-head h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 750;
}

.qrth-v1-step-head p {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 12px;
}

/* Inputs */
.qrth-v1-label {
    display: block;
    margin: 0 0 7px;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
}

.qrth-v1-input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    padding: 10px 12px;
    font: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

textarea.qrth-v1-input {
    min-height: 110px;
    resize: vertical;
}

.qrth-v1-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

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

/* Panels */
.qr-type-panel.hidden,
.qrth-v1-color-panel[hidden],
.qrth-v1-control-panel[hidden],
.qrth-v1-advanced.hidden {
    display: none !important;
}

.qrth-v1-info-note {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 11px;
}

.qrth-v1-switch-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 12px;
    color: #374151;
}

.qrth-v1-switch-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.qrth-v1-switch {
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #d1d5db;
    position: relative;
    cursor: pointer;
}

.qrth-v1-switch::after {
    content: "";
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: .18s ease;
}

.qrth-v1-switch-row input:checked + .qrth-v1-switch {
    background: #2563eb;
}

.qrth-v1-switch-row input:checked + .qrth-v1-switch::after {
    transform: translateX(16px);
}

/* Design tabs */
.qrth-v1-design-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 5px;
    border-bottom: 1px solid #e5e7eb;
}

.qrth-v1-design-tabs button {
    border: 0;
    background: transparent;
    padding: 9px 11px;
    border-radius: 8px;
    color: #6b7280;
    white-space: nowrap;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.qrth-v1-design-tabs button:hover,
.qrth-v1-design-tabs button.is-active {
    background: #f3f4f6;
    color: #111827;
    font-weight: 700;
}

.qrth-v1-design-body {
    padding-top: 18px;
}

.qrth-v1-preset-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
}

.qrth-v1-preset {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 12px;
    padding: 11px;
    cursor: pointer;
    text-align: left;
}

.qrth-v1-preset:hover,
.qrth-v1-preset.is-selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,.08);
}

.qrth-v1-preset b {
    display: block;
    margin-top: 7px;
    font-size: 12px;
}

.qr-mini {
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background:
        linear-gradient(90deg,#111 20%,transparent 20% 40%,#111 40% 60%,transparent 60% 80%,#111 80%),
        linear-gradient(#111 20%,transparent 20% 40%,#111 40% 60%,transparent 60% 80%,#111 80%);
    background-size: 12px 12px;
    background-color: #fff;
}

.qrth-v1-control-panel,
.qrth-v1-color-panel {
    padding-top: 2px;
}

/* Advanced */
.qrth-v1-step-collapsed {
    padding: 0;
    overflow: hidden;
}

.qrth-v1-collapse {
    width: 100%;
    min-height: 62px;
    padding: 14px 18px;
    border: 0;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.qrth-v1-collapse strong {
    flex: 1;
    font-size: 13px;
}

.qrth-v1-advanced {
    padding: 0 18px 18px;
    font-size: 12px;
}

.qrth-v1-advanced a {
    color: #2563eb;
}

/* Actions */
.qrth-v1-actions-row {
    display: flex;
    gap: 10px;
}

.qrth-v1-create-btn,
.qrth-v1-reset-btn {
    min-height: 46px;
    border-radius: 11px;
    padding: 0 18px;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.qrth-v1-create-btn {
    flex: 1;
    border: 0;
    background: #111827;
    color: #fff;
}

.qrth-v1-create-btn:hover {
    background: #2563eb;
}

.qrth-v1-reset-btn {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
}

/* Preview */
.qrth-v1-preview-card {
    position: sticky;
    top: 24px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 18px;
}

.qrth-v1-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.qrth-v1-preview-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.qrth-v1-live-dot {
    display: block;
    margin-top: 4px;
    color: #16a34a;
    font-size: 10px;
}

.qrth-v1-scan {
    font-size: 11px;
    color: #6b7280;
}

.qrth-v1-qr-stage {
    width: 100%;
    aspect-ratio: 1;
    max-width: 260px;
    margin: 22px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    overflow: hidden;
}

.qrth-v1-qr-stage #return-ajax {
    width: 82%;
    height: 82%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qrth-v1-qr-stage img,
.qrth-v1-qr-stage svg,
.qrth-v1-qr-stage canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
}

.qrth-v1-download-btn {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.qrth-v1-format-label {
    margin-top: 16px;
    margin-bottom: 7px;
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
}

.qrth-v1-format-row,
.qrth-v1-size-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5px;
}

.qrth-v1-format-row button,
.qrth-v1-size-row button {
    min-height: 34px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 8px;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}

.qrth-v1-format-row button.is-active,
.qrth-v1-size-row button.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
}

.qrth-v1-preview-note {
    margin: 12px 0 0;
    font-size: 10px;
    color: #9ca3af;
}

/* Benefits */
.qrth-v1-benefits {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 10px;
}

.qrth-v1-benefits > div {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 13px;
    padding: 13px;
}

.qrth-v1-benefits span {
    display: block;
    margin-bottom: 7px;
    color: #2563eb;
}

.qrth-v1-benefits b {
    display: block;
    font-size: 11px;
}

.qrth-v1-benefits small {
    display: block;
    margin-top: 4px;
    color: #9ca3af;
    font-size: 9px;
}

/* Responsive */
@media (max-width: 1200px) {
    .qrth-v1-shell {
        grid-template-columns: 200px minmax(0,1fr);
    }

    .qrth-v1-preview-card {
        grid-column: 2;
        position: static;
    }

    .qrth-v1-sidebar {
        grid-row: 1 / span 2;
    }

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

@media (max-width: 820px) {
    .qrth-v1-page {
        padding: 20px 14px 40px;
    }

    .qrth-v1-shell {
        display: flex;
        flex-direction: column;
    }

    .qrth-v1-sidebar,
    .qrth-v1-preview-card {
        position: static;
        width: 100%;
    }

    .qrth-v1-type-list {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

    .qrth-v1-premium-card {
        display: none;
    }

    .qrth-v1-preview-card {
        order: 3;
    }

    .qrth-v1-main {
        order: 2;
        width: 100%;
    }

    .qrth-v1-sidebar {
        order: 1;
    }

    .qrth-v1-qr-stage {
        max-width: 300px;
    }

    .qrth-v1-benefits {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .qrth-v1-heading h1 {
        font-size: 28px;
    }

    .qrth-v1-step {
        padding: 15px;
    }

    .qrth-v1-grid-2,
    .qrth-v1-preset-grid {
        grid-template-columns: 1fr;
    }

    .qrth-v1-actions-row {
        flex-direction: column;
    }
}

/* =========================================================
   QR-TH V1 — BRAND IMAGE FIX
   Prevent original logo from using intrinsic dimensions.
   ========================================================= */

body.qrth-v1 .qrth-v1-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    overflow: hidden !important;
}

body.qrth-v1 .qrth-v1-brand img {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    object-position: center !important;
}

body.qrth-v1 .qrth-v1-brand-mark {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    object-fit: contain !important;
}


/* =========================================================
   QR-TH V1.3 — HEADER
   Header UI only. Backend untouched.
   ========================================================= */

body.qrth-v1 .qrth-v1-header {
    width: 100% !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    position: relative !important;
    z-index: 1000 !important;
}

body.qrth-v1 .qrth-v1-nav {
    width: 100% !important;
    max-width: 1440px !important;
    min-height: 72px !important;
    margin: 0 auto !important;
    padding: 0 28px !important;

    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
}

body.qrth-v1 .qrth-v1-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 0 42px !important;

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

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

    overflow: hidden !important;
    text-decoration: none !important;
}

body.qrth-v1 .qrth-v1-brand img {
    display: block !important;

    width: 42px !important;
    height: 42px !important;

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

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

    object-fit: contain !important;
    object-position: center !important;
}

body.qrth-v1 .qrth-v1-desktop-nav {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
}

body.qrth-v1 .qrth-v1-nav-dropdown {
    position: relative !important;
}

body.qrth-v1 .qrth-v1-nav-link {
    appearance: none !important;
    border: 0 !important;
    background: transparent !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    min-height: 40px !important;
    padding: 8px 12px !important;

    border-radius: 9px !important;

    color: #334155 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;

    line-height: 1.2 !important;
    text-decoration: none !important;

    cursor: pointer !important;

    transition:
        background .15s ease,
        color .15s ease !important;
}

body.qrth-v1 .qrth-v1-nav-link:hover {
    background: #f5f5f7 !important;
    color: #111827 !important;
}

body.qrth-v1 .qrth-v1-chevron {
    font-size: 12px !important;
    opacity: .65 !important;
}

body.qrth-v1 .qrth-v1-dropdown-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;

    min-width: 190px !important;

    padding: 8px !important;

    background: #ffffff !important;

    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;

    box-shadow:
        0 12px 35px rgba(15, 23, 42, .12) !important;

    z-index: 1100 !important;
}

body.qrth-v1 .qrth-v1-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;

    flex: 0 0 auto !important;
}

body.qrth-v1 .qrth-v1-actions > * {
    flex-shrink: 0 !important;
}

body.qrth-v1 .qrth-v1-language {
    display: flex !important;
    align-items: center !important;
}

body.qrth-v1 .qrth-v1-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 40px !important;

    padding: 8px 15px !important;

    border-radius: 9px !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1 !important;
    text-decoration: none !important;

    white-space: nowrap !important;

    cursor: pointer !important;
}

body.qrth-v1 .qrth-v1-btn-outline {
    background: #ffffff !important;
    color: #334155 !important;

    border: 1px solid #dfe3ea !important;
}

body.qrth-v1 .qrth-v1-btn-outline:hover {
    background: #f8fafc !important;
}

body.qrth-v1 .qrth-v1-btn-primary {
    background: #111827 !important;
    color: #ffffff !important;

    border: 1px solid #111827 !important;
}

body.qrth-v1 .qrth-v1-btn-primary:hover {
    background: #1f2937 !important;
}

body.qrth-v1 .qrth-v1-mobile-toggle {
    display: none !important;

    appearance: none !important;
    border: 0 !important;
    background: transparent !important;

    width: 40px !important;
    height: 40px !important;

    border-radius: 9px !important;

    font-size: 22px !important;
    cursor: pointer !important;
}

body.qrth-v1 .qrth-v1-mobile-nav {
    display: none !important;
}

/* ---------------------------------------------------------
   HEADER RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {

    body.qrth-v1 .qrth-v1-nav {
        min-height: 64px !important;
        padding: 0 18px !important;
        gap: 16px !important;
    }

    body.qrth-v1 .qrth-v1-desktop-nav {
        display: none !important;
    }

    body.qrth-v1 .qrth-v1-actions {
        margin-left: auto !important;
    }

    body.qrth-v1 .qrth-v1-mobile-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.qrth-v1 .qrth-v1-mobile-nav:not(.hidden) {
        display: block !important;
    }
}

@media (max-width: 600px) {

    body.qrth-v1 .qrth-v1-nav {
        padding: 0 14px !important;
    }

    body.qrth-v1 .qrth-v1-actions .qrth-v1-btn-outline {
        display: none !important;
    }

    body.qrth-v1 .qrth-v1-btn {
        min-height: 38px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}


/* =========================================================
   QR-TH V1.4 — HEADER DROPDOWN
   Visual fix only. Existing navigation behavior preserved.
   ========================================================= */

body.qrth-v1 .qrth-v1-nav-dropdown {
    position: relative !important;
}

body.qrth-v1 .qrth-v1-dropdown-panel {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    z-index: 9999 !important;

    display: none !important;

    min-width: 220px !important;
    width: max-content !important;
    max-width: 280px !important;

    padding: 8px !important;

    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.10),
        0 3px 10px rgba(15, 23, 42, 0.06) !important;
}

body.qrth-v1 .qrth-v1-nav-dropdown:hover .qrth-v1-dropdown-panel,
body.qrth-v1 .qrth-v1-nav-dropdown
.qrth-v1-nav-link[aria-expanded="true"]
+ .qrth-v1-dropdown-panel {
    display: flex !important;
    flex-direction: column !important;
}

body.qrth-v1 .qrth-v1-dropdown-panel a {
    display: flex !important;
    align-items: center !important;

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

    padding: 9px 12px !important;

    color: #111827 !important;
    text-decoration: none !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;

    white-space: nowrap !important;

    border-radius: 8px !important;
}

body.qrth-v1 .qrth-v1-dropdown-panel a:hover {
    background: #f3f6fb !important;
    color: #1677ff !important;
}

body.qrth-v1 .qrth-v1-chevron {
    margin-left: 5px !important;
    font-size: 12px !important;
    opacity: 0.55 !important;
}

@media (max-width: 900px) {
    body.qrth-v1 .qrth-v1-dropdown-panel {
        display: none !important;
    }
}


/* =========================================================
   QR-TH V1.5 — TARGET UI
   Visual reconstruction only.
   Backend / QR generation / original controls untouched.
   ========================================================= */

/* ---------- DESIGN TOKENS ---------- */

body.qrth-v1 {
    --qr-purple: #6d28d9;
    --qr-purple-2: #c026d3;
    --qr-purple-soft: #f3e8ff;
    --qr-purple-soft-2: #faf5ff;

    --qr-text: #1f2937;
    --qr-heading: #182033;
    --qr-muted: #6b7280;
    --qr-border: #e5e7eb;
    --qr-bg: #faf9fc;
    --qr-card: #ffffff;

    background:
        radial-gradient(
            circle at 72% 15%,
            rgba(192,38,211,.055),
            transparent 28%
        ),
        radial-gradient(
            circle at 35% 65%,
            rgba(109,40,217,.035),
            transparent 30%
        ),
        #faf9fc !important;

    color: var(--qr-text) !important;
}


/* =========================================================
   HEADER
   ========================================================= */

body.qrth-v1 .qrth-v1-header {
    position: relative !important;
    z-index: 1000 !important;

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

    background: rgba(255,255,255,.96) !important;

    border-bottom: 1px solid #eeeef2 !important;

    box-shadow:
        0 1px 0 rgba(15,23,42,.02) !important;
}

body.qrth-v1 .qrth-v1-nav {
    width: 100% !important;
    max-width: 1480px !important;

    min-height: 82px !important;

    margin: 0 auto !important;
    padding: 0 32px !important;

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

    gap: 34px !important;
}

body.qrth-v1 .qrth-v1-brand {
    flex: 0 0 48px !important;

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

    height: 48px !important;

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

    overflow: hidden !important;
}

body.qrth-v1 .qrth-v1-brand img {
    width: 42px !important;
    height: 42px !important;

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

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

    object-fit: contain !important;
    display: block !important;
}

body.qrth-v1 .qrth-v1-desktop-nav {
    display: flex !important;
    align-items: center !important;

    gap: 30px !important;

    flex: 1 1 auto !important;
}

body.qrth-v1 .qrth-v1-nav-dropdown {
    position: relative !important;
}

body.qrth-v1 .qrth-v1-nav-link {
    border: 0 !important;
    background: transparent !important;

    color: #374151 !important;

    padding: 10px 0 !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    white-space: nowrap !important;

    cursor: pointer !important;
}

body.qrth-v1 .qrth-v1-nav-link:hover {
    color: var(--qr-purple) !important;
}

body.qrth-v1 .qrth-v1-chevron {
    margin-left: 6px !important;
    color: #6b7280 !important;
    font-size: 11px !important;
}

body.qrth-v1 .qrth-v1-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    margin-left: auto !important;
}

body.qrth-v1 .qrth-v1-btn {
    min-height: 42px !important;

    padding: 0 18px !important;

    border-radius: 10px !important;

    font-size: 14px !important;
    font-weight: 600 !important;

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

    white-space: nowrap !important;
}

body.qrth-v1 .qrth-v1-btn-outline {
    background: #fff !important;

    border: 1px solid #ddd6fe !important;

    color: var(--qr-purple) !important;
}

body.qrth-v1 .qrth-v1-btn-outline:hover {
    background: var(--qr-purple-soft-2) !important;
}

body.qrth-v1 .qrth-v1-btn-primary {
    border: 0 !important;

    background:
        linear-gradient(
            135deg,
            #6d28d9 0%,
            #c026d3 100%
        ) !important;

    color: #fff !important;

    box-shadow:
        0 5px 14px rgba(109,40,217,.18) !important;
}

body.qrth-v1 .qrth-v1-btn-primary:hover {
    transform: translateY(-1px) !important;

    box-shadow:
        0 8px 18px rgba(109,40,217,.24) !important;
}


/* =========================================================
   DROPDOWN
   ========================================================= */

body.qrth-v1 .qrth-v1-dropdown-panel {
    min-width: 225px !important;

    padding: 8px !important;

    background: #fff !important;

    border: 1px solid #ececf1 !important;
    border-radius: 12px !important;

    box-shadow:
        0 18px 40px rgba(17,24,39,.12) !important;
}

body.qrth-v1 .qrth-v1-dropdown-panel a {
    display: flex !important;
    align-items: center !important;

    min-height: 40px !important;

    padding: 9px 12px !important;

    border-radius: 8px !important;

    color: #374151 !important;

    font-size: 14px !important;
    font-weight: 500 !important;

    white-space: nowrap !important;
}

body.qrth-v1 .qrth-v1-dropdown-panel a:hover {
    background: #f5f3ff !important;
    color: var(--qr-purple) !important;
}


/* =========================================================
   PAGE
   ========================================================= */

body.qrth-v1 .qrth-v1-page {
    max-width: 1480px !important;

    margin: 0 auto !important;

    padding:
        28px 32px 50px !important;
}

body.qrth-v1 .qrth-v1-shell {
    display: grid !important;

    grid-template-columns:
        230px
        minmax(0, 1fr)
        330px !important;

    gap: 30px !important;

    align-items: start !important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

body.qrth-v1 .qrth-v1-sidebar {
    background: #fff !important;

    border: 1px solid #eeeef3 !important;
    border-radius: 14px !important;

    padding: 16px 12px !important;

    box-shadow:
        0 3px 14px rgba(15,23,42,.035) !important;
}

body.qrth-v1 .qrth-v1-sidebar-title {
    padding:
        4px 10px 12px !important;

    color: #374151 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}

body.qrth-v1 .qrth-v1-type-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

body.qrth-v1 .qrth-v1-type {
    min-height: 40px !important;

    padding: 8px 10px !important;

    border-radius: 9px !important;

    color: #4b5563 !important;

    font-size: 14px !important;
    font-weight: 500 !important;

    transition:
        background .15s ease,
        color .15s ease !important;
}

body.qrth-v1 .qrth-v1-type:hover {
    background: #faf5ff !important;
    color: var(--qr-purple) !important;
}

body.qrth-v1 .qrth-v1-type.is-active,
body.qrth-v1 .qrth-v1-type.active {
    background:
        linear-gradient(
            135deg,
            #f3e8ff,
            #fce7f3
        ) !important;

    color: var(--qr-purple) !important;

    font-weight: 700 !important;
}


/* =========================================================
   PREMIUM CARD
   ========================================================= */

body.qrth-v1 .qrth-v1-premium-card {
    margin-top: 16px !important;

    padding: 16px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #faf5ff 100%
        ) !important;

    border: 1px solid #e9d5ff !important;
    border-radius: 13px !important;

    box-shadow: none !important;
}

body.qrth-v1 .qrth-v1-premium-title {
    color: #374151 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}

body.qrth-v1 .qrth-v1-premium-card li,
body.qrth-v1 .qrth-v1-premium-card p {
    color: #6b7280 !important;

    font-size: 12px !important;
}

body.qrth-v1 .qrth-v1-premium-btn {
    width: 100% !important;

    min-height: 38px !important;

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

    background:
        linear-gradient(
            135deg,
            #6d28d9,
            #c026d3
        ) !important;

    color: #fff !important;

    font-weight: 700 !important;
}


/* =========================================================
   MAIN
   ========================================================= */

body.qrth-v1 .qrth-v1-main {
    min-width: 0 !important;
}

body.qrth-v1 .qrth-v1-heading {
    margin-bottom: 22px !important;
}

body.qrth-v1 .qrth-v1-heading h1 {
    margin: 0 !important;

    color: var(--qr-heading) !important;

    font-size:
        clamp(28px, 3vw, 34px) !important;

    line-height: 1.2 !important;

    font-weight: 800 !important;

    letter-spacing: -0.025em !important;
}

body.qrth-v1 .qrth-v1-heading p {
    margin: 8px 0 0 !important;

    color: #7b8190 !important;

    font-size: 14px !important;
}


/* =========================================================
   STEPS / MAIN CARDS
   ========================================================= */

body.qrth-v1 .qrth-v1-step {
    background: #fff !important;

    border: 1px solid #ececf1 !important;

    border-radius: 14px !important;

    box-shadow:
        0 3px 15px rgba(15,23,42,.035) !important;

    padding: 20px !important;

    margin-bottom: 16px !important;
}

body.qrth-v1 .qrth-v1-step-head {
    display: flex !important;
    align-items: center !important;

    gap: 11px !important;

    margin-bottom: 14px !important;
}

body.qrth-v1 .qrth-v1-step-number,
body.qrth-v1 .qrth-v1-step > .qrth-v1-step-head:first-child::before {
    background:
        linear-gradient(
            135deg,
            #6d28d9,
            #9333ea
        ) !important;

    color: #fff !important;
}

body.qrth-v1 .qrth-v1-label {
    color: #374151 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
}

body.qrth-v1 .qrth-v1-input {
    width: 100% !important;

    min-height: 46px !important;

    padding: 0 14px !important;

    background: #fff !important;

    border: 1px solid #e1e4ea !important;

    border-radius: 9px !important;

    color: #374151 !important;

    font-size: 14px !important;

    outline: none !important;
}

body.qrth-v1 .qrth-v1-input:focus {
    border-color: #a78bfa !important;

    box-shadow:
        0 0 0 3px rgba(139,92,246,.10) !important;
}


/* =========================================================
   DESIGN TABS
   ========================================================= */

body.qrth-v1 .qrth-v1-design-tabs {
    display: flex !important;
    align-items: center !important;

    gap: 4px !important;

    border-bottom: 1px solid #eeeef2 !important;

    padding-bottom: 8px !important;
}

body.qrth-v1 .qrth-v1-design-tabs > * {
    min-height: 34px !important;

    padding: 6px 12px !important;

    border-radius: 7px !important;

    color: #6b7280 !important;

    font-size: 12px !important;
    font-weight: 600 !important;
}

body.qrth-v1 .qrth-v1-design-tabs .is-active,
body.qrth-v1 .qrth-v1-design-tabs > *:hover {
    background: #f5f3ff !important;

    color: var(--qr-purple) !important;
}


/* =========================================================
   PRESETS
   ========================================================= */

body.qrth-v1 .qrth-v1-preset-grid {
    gap: 10px !important;
}

body.qrth-v1 .qrth-v1-preset {
    background: #fff !important;

    border: 1px solid #e5e7eb !important;

    border-radius: 10px !important;

    padding: 10px !important;
}

body.qrth-v1 .qrth-v1-preset.is-active,
body.qrth-v1 .qrth-v1-preset.active {
    border-color: #8b5cf6 !important;

    box-shadow:
        0 0 0 2px rgba(139,92,246,.12) !important;
}

body.qrth-v1 .qrth-v1-preset:hover {
    border-color: #c4b5fd !important;
}


/* =========================================================
   PRIMARY ACTION
   ========================================================= */

body.qrth-v1 .qrth-v1-actions-row {
    display: flex !important;

    gap: 12px !important;

    margin-top: 14px !important;
}

body.qrth-v1 .qrth-v1-create-btn {
    flex: 1 !important;

    min-height: 46px !important;

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

    background:
        linear-gradient(
            135deg,
            #6d28d9,
            #c026d3
        ) !important;

    color: #fff !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    box-shadow:
        0 6px 15px rgba(109,40,217,.16) !important;
}

body.qrth-v1 .qrth-v1-reset-btn {
    min-width: 120px !important;

    min-height: 46px !important;

    background: #fff !important;

    border: 1px solid #e5e7eb !important;

    border-radius: 10px !important;

    color: #4b5563 !important;
}


/* =========================================================
   PREVIEW
   ========================================================= */

body.qrth-v1 .qrth-v1-preview-card {
    position: sticky !important;
    top: 22px !important;

    background: #fff !important;

    border: 1px solid #ececf1 !important;
    border-radius: 14px !important;

    padding: 18px !important;

    box-shadow:
        0 4px 18px rgba(15,23,42,.045) !important;
}

body.qrth-v1 .qrth-v1-preview-head {
    margin-bottom: 14px !important;
}

body.qrth-v1 .qrth-v1-preview-head h3,
body.qrth-v1 .qrth-v1-preview-head strong {
    color: #374151 !important;

    font-size: 15px !important;
    font-weight: 700 !important;
}

body.qrth-v1 .qrth-v1-preview-note {
    color: #10a968 !important;

    font-size: 12px !important;
}

body.qrth-v1 .qrth-v1-qr-stage {
    width: 100% !important;

    max-width: 100% !important;

    padding: 20px !important;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(192,38,211,.12),
            transparent 35%
        ),
        #fff !important;

    border: 1px solid #f0eef5 !important;

    border-radius: 14px !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.7) !important;
}

body.qrth-v1 .qrth-v1-download-btn {
    width: 100% !important;

    min-height: 44px !important;

    margin-top: 12px !important;

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

    background:
        linear-gradient(
            135deg,
            #6d28d9,
            #c026d3
        ) !important;

    color: #fff !important;

    font-size: 13px !important;
    font-weight: 700 !important;
}

body.qrth-v1 .qrth-v1-format-row,
body.qrth-v1 .qrth-v1-size-row {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 8px !important;

    margin-top: 10px !important;
}

body.qrth-v1 .qrth-v1-format-row > *,
body.qrth-v1 .qrth-v1-size-row > * {
    min-height: 38px !important;

    background: #fff !important;

    border: 1px solid #e5e7eb !important;

    border-radius: 8px !important;

    color: #4b5563 !important;

    font-size: 12px !important;
    font-weight: 600 !important;
}

body.qrth-v1 .qrth-v1-format-row .is-active,
body.qrth-v1 .qrth-v1-size-row .is-active {
    border-color: #8b5cf6 !important;

    color: var(--qr-purple) !important;

    background: #faf5ff !important;
}


/* =========================================================
   BENEFITS BAR
   ========================================================= */

body.qrth-v1 .qrth-v1-benefits {
    width: 100% !important;

    margin-top: 28px !important;

    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;

    background: #fff !important;

    border: 1px solid #eeeef1 !important;

    border-radius: 14px !important;

    overflow: hidden !important;

    box-shadow:
        0 3px 14px rgba(15,23,42,.03) !important;
}

body.qrth-v1 .qrth-v1-benefit,
body.qrth-v1 .qrth-v1-benefits > * {
    min-height: 86px !important;

    padding: 16px !important;

    border-right: 1px solid #eeeef1 !important;
}

body.qrth-v1 .qrth-v1-benefits > *:last-child {
    border-right: 0 !important;
}


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

@media (max-width: 1100px) {

    body.qrth-v1 .qrth-v1-nav {
        padding: 0 20px !important;
        gap: 20px !important;
    }

    body.qrth-v1 .qrth-v1-desktop-nav {
        gap: 18px !important;
    }

    body.qrth-v1 .qrth-v1-shell {
        grid-template-columns:
            200px
            minmax(0, 1fr)
            300px !important;

        gap: 18px !important;
    }

    body.qrth-v1 .qrth-v1-page {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (max-width: 900px) {

    body.qrth-v1 .qrth-v1-desktop-nav {
        display: none !important;
    }

    body.qrth-v1 .qrth-v1-mobile-toggle {
        display: inline-flex !important;
    }

    body.qrth-v1 .qrth-v1-shell {
        grid-template-columns: 1fr !important;
    }

    body.qrth-v1 .qrth-v1-preview-card {
        position: relative !important;
        top: auto !important;
        order: 2 !important;
    }

    body.qrth-v1 .qrth-v1-sidebar {
        order: 1 !important;
    }

    body.qrth-v1 .qrth-v1-main {
        order: 2 !important;
    }

    body.qrth-v1 .qrth-v1-benefits {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 560px) {

    body.qrth-v1 .qrth-v1-nav {
        min-height: 70px !important;
        padding: 0 14px !important;
    }

    body.qrth-v1 .qrth-v1-header {
        min-height: 70px !important;
    }

    body.qrth-v1 .qrth-v1-actions .qrth-v1-btn-outline {
        display: none !important;
    }

    body.qrth-v1 .qrth-v1-page {
        padding:
            18px 12px 30px !important;
    }

    body.qrth-v1 .qrth-v1-shell {
        gap: 14px !important;
    }

    body.qrth-v1 .qrth-v1-benefits {
        grid-template-columns: 1fr !important;
    }

    body.qrth-v1 .qrth-v1-benefits > * {
        border-right: 0 !important;
        border-bottom: 1px solid #eeeef1 !important;
    }

    body.qrth-v1 .qrth-v1-benefits > *:last-child {
        border-bottom: 0 !important;
    }
}


/* =========================================================
   QR-TH V1 — FINAL UI MATCH
   Target: Purple / Pink Premium QR Builder
   Backend untouched
   ========================================================= */

body.qrth-v1 {
    background:
        radial-gradient(circle at 58% 18%, rgba(245,225,255,.42), transparent 34%),
        #fbfaff !important;
    color: #172033 !important;
}

/* ---------- HEADER ---------- */

body.qrth-v1 .qrth-v1-header {
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid #eeeaf5 !important;
    box-shadow: 0 1px 8px rgba(30,20,60,.035) !important;
    position: relative !important;
    z-index: 100 !important;
}

body.qrth-v1 .qrth-v1-nav {
    min-height: 82px !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
}

body.qrth-v1 .qrth-v1-brand {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
}

body.qrth-v1 .qrth-v1-desktop-nav {
    gap: 34px !important;
}

body.qrth-v1 .qrth-v1-nav-link {
    color: #172033 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

/* ---------- PAGE ---------- */

body.qrth-v1 .qrth-v1-page {
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 34px 32px 50px !important;
}

/* ---------- MAIN GRID ---------- */

body.qrth-v1 .qrth-v1-shell {
    display: grid !important;
    grid-template-columns: 235px minmax(0,1fr) 380px !important;
    gap: 28px !important;
    align-items: start !important;
}

/* ---------- SIDEBAR ---------- */

body.qrth-v1 .qrth-v1-sidebar {
    background: #fff !important;
    border: 1px solid #eeeaf5 !important;
    border-radius: 18px !important;
    padding: 18px !important;
    box-shadow: 0 5px 25px rgba(50,30,90,.035) !important;
}

body.qrth-v1 .qrth-v1-sidebar a,
body.qrth-v1 .qrth-v1-sidebar button {
    border-radius: 10px !important;
    transition: .18s ease !important;
}

body.qrth-v1 .qrth-v1-sidebar a:hover,
body.qrth-v1 .qrth-v1-sidebar button:hover {
    background: #faf2ff !important;
}

body.qrth-v1 .qrth-v1-sidebar .is-active,
body.qrth-v1 .qrth-v1-sidebar a.active {
    background: linear-gradient(
        90deg,
        #f1ddff 0%,
        #fae7f8 100%
    ) !important;
    color: #7028d9 !important;
    font-weight: 700 !important;
}

/* ---------- MAIN CONTENT ---------- */

body.qrth-v1 .qrth-v1-main {
    min-width: 0 !important;
}

body.qrth-v1 .qrth-v1-main h1 {
    font-size: clamp(34px,3vw,46px) !important;
    line-height: 1.08 !important;
    letter-spacing: -1.5px !important;
    font-weight: 800 !important;
    color: #172033 !important;
    margin-bottom: 8px !important;
}

body.qrth-v1 .qrth-v1-main > p {
    color: #8a91a3 !important;
    font-size: 16px !important;
    margin-bottom: 24px !important;
}

/* ---------- BUILDER ---------- */

body.qrth-v1 .qrth-v1-builder {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

body.qrth-v1 .qrth-v1-builder > section,
body.qrth-v1 .qrth-v1-step,
body.qrth-v1 .qrth-v1-card {
    background: rgba(255,255,255,.96) !important;
    border: 1px solid #eeeaf5 !important;
    border-radius: 18px !important;
    box-shadow: 0 5px 24px rgba(45,25,80,.035) !important;
}

/* ---------- STEP NUMBER ---------- */

body.qrth-v1 .qrth-v1-step-number,
body.qrth-v1 .step-number {
    background: linear-gradient(
        135deg,
        #6324df,
        #c529d8
    ) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 12px rgba(115,35,220,.22) !important;
}

/* ---------- INPUT ---------- */

body.qrth-v1 input[type="text"],
body.qrth-v1 input[type="url"],
body.qrth-v1 input[type="email"],
body.qrth-v1 textarea,
body.qrth-v1 select {
    background: #fff !important;
    border: 1px solid #ddddea !important;
    border-radius: 10px !important;
    min-height: 48px !important;
}

body.qrth-v1 input:focus,
body.qrth-v1 textarea:focus,
body.qrth-v1 select:focus {
    border-color: #9341e8 !important;
    box-shadow: 0 0 0 3px rgba(147,65,232,.10) !important;
    outline: none !important;
}

/* ---------- PREMIUM NOTICE ---------- */

body.qrth-v1 .qrth-v1-premium,
body.qrth-v1 .premium-notice {
    background: linear-gradient(
        90deg,
        #faf0ff,
        #fff2fb
    ) !important;
    border: 1px solid #f0d8fa !important;
    color: #7625c9 !important;
    border-radius: 10px !important;
}

/* ---------- TABS ---------- */

body.qrth-v1 .qrth-v1-tabs {
    border-bottom: 1px solid #eeeaf5 !important;
}

body.qrth-v1 .qrth-v1-tabs button,
body.qrth-v1 .qrth-v1-tab {
    color: #667085 !important;
    font-weight: 600 !important;
}

body.qrth-v1 .qrth-v1-tabs .is-active,
body.qrth-v1 .qrth-v1-tab.is-active {
    color: #7a24df !important;
    border-bottom-color: #8b2be2 !important;
}

/* ---------- PRESET CARDS ---------- */

body.qrth-v1 .qrth-v1-preset,
body.qrth-v1 .qrth-v1-template {
    background: #fff !important;
    border: 1px solid #e7e5ed !important;
    border-radius: 12px !important;
}

body.qrth-v1 .qrth-v1-preset:hover,
body.qrth-v1 .qrth-v1-template:hover {
    border-color: #a442ed !important;
    box-shadow: 0 4px 16px rgba(130,45,220,.10) !important;
}

body.qrth-v1 .qrth-v1-preset.is-active,
body.qrth-v1 .qrth-v1-template.is-active {
    border: 2px solid #8d31e8 !important;
    box-shadow: 0 5px 18px rgba(120,35,220,.10) !important;
}

/* ---------- PRIMARY BUTTON ---------- */

body.qrth-v1 .qrth-v1-btn-primary,
body.qrth-v1 button[type="submit"],
body.qrth-v1 .qrth-v1-create-btn {
    background: linear-gradient(
        90deg,
        #6524df 0%,
        #bd25d7 100%
    ) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 10px !important;
    min-height: 48px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 20px rgba(123,35,218,.18) !important;
}

body.qrth-v1 .qrth-v1-btn-primary:hover,
body.qrth-v1 button[type="submit"]:hover,
body.qrth-v1 .qrth-v1-create-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 25px rgba(123,35,218,.24) !important;
}

/* ---------- PREVIEW ---------- */

body.qrth-v1 .qrth-v1-preview-card {
    background: #fff !important;
    border: 1px solid #eeeaf5 !important;
    border-radius: 18px !important;
    padding: 22px !important;
    box-shadow: 0 6px 28px rgba(45,25,80,.045) !important;
    position: sticky !important;
    top: 20px !important;
}

body.qrth-v1 .qrth-v1-preview-card img,
body.qrth-v1 .qrth-v1-preview-card canvas {
    border-radius: 14px !important;
}

body.qrth-v1 .qrth-v1-download-btn {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    background: linear-gradient(
        90deg,
        #6723df,
        #c325d7
    ) !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 700 !important;
}

/* ---------- FORMAT BUTTONS ---------- */

body.qrth-v1 .qrth-v1-format-row button {
    background: #fff !important;
    border: 1px solid #e4e1ea !important;
    border-radius: 10px !important;
    min-height: 42px !important;
}

body.qrth-v1 .qrth-v1-format-row button.is-active {
    color: #7b28df !important;
    border-color: #963bed !important;
    background: #fbf4ff !important;
}

/* ---------- PREMIUM SIDEBAR CARD ---------- */

body.qrth-v1 .qrth-v1-sidebar .premium-card {
    background: linear-gradient(
        145deg,
        #fffaff,
        #faf1ff
    ) !important;
    border: 1px solid #ead6f7 !important;
    border-radius: 14px !important;
}

body.qrth-v1 .qrth-v1-sidebar .premium-card button {
    background: linear-gradient(
        90deg,
        #6824df,
        #c126d8
    ) !important;
    color: #fff !important;
    border: 0 !important;
}

/* ---------- FEATURE STRIP ---------- */

body.qrth-v1 .qrth-v1-feature-strip {
    display: grid !important;
    grid-template-columns: repeat(5,1fr) !important;
    margin-top: 28px !important;
    background: #fff !important;
    border: 1px solid #eeeaf5 !important;
    border-radius: 18px !important;
    box-shadow: 0 5px 24px rgba(45,25,80,.035) !important;
    overflow: hidden !important;
}

body.qrth-v1 .qrth-v1-feature {
    padding: 22px 20px !important;
    border-right: 1px solid #eeeaf5 !important;
}

body.qrth-v1 .qrth-v1-feature:last-child {
    border-right: 0 !important;
}

/* ---------- MOBILE ---------- */

@media (max-width: 1100px) {
    body.qrth-v1 .qrth-v1-shell {
        grid-template-columns: 210px minmax(0,1fr) !important;
    }

    body.qrth-v1 .qrth-v1-preview-card {
        grid-column: 2 !important;
        position: static !important;
    }
}

@media (max-width: 800px) {
    body.qrth-v1 .qrth-v1-page {
        padding: 20px 14px 30px !important;
    }

    body.qrth-v1 .qrth-v1-shell {
        grid-template-columns: 1fr !important;
    }

    body.qrth-v1 .qrth-v1-sidebar,
    body.qrth-v1 .qrth-v1-preview-card {
        grid-column: 1 !important;
    }

    body.qrth-v1 .qrth-v1-feature-strip {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* =========================================================
   QR-TH V1.9 — AUTHORITATIVE HEADER
   Final header layout. Must remain unscoped so it works
   before JavaScript initializes body.qrth-v1.
   ========================================================= */

.qrth-v1-header {
    position: relative !important;
    z-index: 1000 !important;
    width: 100% !important;
    min-height: 72px !important;
    display: block !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eeeeef !important;
    box-sizing: border-box !important;
}

.qrth-v1-nav {
    width: 100% !important;
    max-width: 1540px !important;
    min-height: 72px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;

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

    gap: 28px !important;
    box-sizing: border-box !important;
}

.qrth-v1-brand {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;

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

    overflow: hidden !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

.qrth-v1-brand img {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;

    object-fit: contain !important;
}

.qrth-v1-desktop-nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;

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

    gap: 6px !important;
}

.qrth-v1-nav-dropdown {
    position: relative !important;
    flex: 0 0 auto !important;
}

.qrth-v1-nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 40px !important;
    padding: 8px 12px !important;

    white-space: nowrap !important;
    box-sizing: border-box !important;

    text-decoration: none !important;
    cursor: pointer !important;
}

.qrth-v1-actions {
    flex: 0 0 auto !important;

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

    gap: 8px !important;
    margin-left: auto !important;

    white-space: nowrap !important;
}

.qrth-v1-actions > * {
    flex: 0 0 auto !important;
}

.qrth-v1-dropdown-panel {
    position: absolute !important;

    top: calc(100% + 8px) !important;
    left: 0 !important;

    z-index: 2000 !important;

    display: none;
}

.qrth-v1-nav-dropdown:hover .qrth-v1-dropdown-panel,
.qrth-v1-nav-dropdown:focus-within .qrth-v1-dropdown-panel {
    display: block !important;
}

.qrth-v1-mobile-toggle {
    display: none !important;
    flex: 0 0 auto !important;
}

.qrth-v1-mobile-nav {
    position: relative !important;
    z-index: 999 !important;
}

@media (max-width: 900px) {

    .qrth-v1-header {
        min-height: 64px !important;
    }

    .qrth-v1-nav {
        min-height: 64px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 12px !important;
    }

    .qrth-v1-desktop-nav {
        display: none !important;
    }

    .qrth-v1-actions {
        gap: 6px !important;
    }

    .qrth-v1-mobile-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 40px !important;
        height: 40px !important;
    }
}

@media (min-width: 901px) {

    .qrth-v1-mobile-toggle {
        display: none !important;
    }

    .qrth-v1-mobile-nav {
        display: none !important;
    }
}