:root {
    --ink: #0f172a;
    --muted: #64748b;
    --brand: #4f46e5;
    --brand-dark: #3730a3;
    --brand-2: #06b6d4;
    --paper: #f8fafc;
    --panel: #ffffff;
    --border: #dbe3ef;
    --shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: linear-gradient(180deg, #f8fafc, #eef2ff);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

a {
    color: var(--brand);
}

.fw-black {
    font-weight: 900;
}

.app-nav {
    background: rgba(15, 23, 42, 0.94);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
}

.app-nav .navbar-brand {
    color: #fff;
}

.brand-mark {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    border-radius: 12px;
    font-weight: 900;
}

.btn {
    border-radius: 12px;
    font-weight: 700;
}

.btn-pill {
    border-radius: 999px;
}

.btn-soft {
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.card,
.feature-card,
.qct-step-card {
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow);
}

.card,
.feature-card {
    border-radius: 24px;
}

.form-control,
.form-select {
    min-height: 44px;
    border-color: var(--border);
    border-radius: 10px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.12);
}

.form-control-color {
    width: 100%;
    min-width: 90px;
    height: 48px;
    padding: 0.35rem;
}

.eyebrow {
    margin-bottom: 0.4rem;
    color: var(--brand);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.page-heading {
    margin-bottom: 1.5rem;
}

.page-heading h1,
.dashboard-hero h1,
.hero-modern h1 {
    font-weight: 900;
    letter-spacing: -0.04em;
}

/* Landing page */
.hero-modern {
    padding-block: 3rem;
}

.hero-device {
    position: relative;
    display: grid;
    min-height: 420px;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #111827, #312e81 55%, #0891b2);
    border-radius: 36px;
    box-shadow: 0 30px 90px rgba(49, 46, 129, 0.28);
}

.hero-qr img {
    width: min(260px, 70vw);
    padding: 14px;
    background: #fff;
    border-radius: 24px;
}

.floating-card {
    position: absolute;
    right: 24px;
    bottom: 24px;
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    color: #fff;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    backdrop-filter: blur(14px);
}

.feature-card {
    height: 100%;
    padding: 1.75rem;
}

.feature-card > i {
    color: var(--brand);
    font-size: 2rem;
}

.feature-card h3 {
    margin-top: 1rem;
    font-size: 1.2rem;
    font-weight: 800;
}

/* Auth */
.auth-page {
    background: #eef2ff;
}

.auth-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
}

.auth-brand-panel {
    display: flex;
    align-items: center;
    padding: clamp(2rem, 6vw, 5rem);
    color: #fff;
    background:
        radial-gradient(circle at 20% 15%, rgba(34, 211, 238, 0.24), transparent 28rem),
        linear-gradient(135deg, #0f172a, #312e81 65%, #0e7490);
}

.auth-brand-content {
    max-width: 660px;
}

.auth-brand-pill,
.auth-mobile-brand {
    display: inline-flex;
    gap: 0.75rem;
    align-items: center;
}

.auth-brand-pill {
    padding: 0.65rem 0.9rem;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
}

.auth-brand-content h1 {
    max-width: 620px;
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.auth-brand-content p {
    max-width: 560px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 1.08rem;
    line-height: 1.8;
}

.auth-feature-list {
    display: grid;
    gap: 0.9rem;
    padding: 0;
    margin: 2rem 0 0;
    list-style: none;
}

.auth-feature-list li {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.auth-feature-list i {
    color: #67e8f9;
}

.auth-form-panel {
    display: grid;
    padding: 2rem;
    place-items: center;
}

.auth-card,
.register-card {
    width: min(100%, 470px);
    padding: 2rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 26px;
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.12);
}

.auth-card h2 {
    margin-top: 1.5rem;
    font-weight: 900;
}

.auth-mobile-brand {
    display: none;
}

.auth-input-group .form-control,
.auth-input-group .input-group-text {
    min-height: 52px;
}

/* Dashboard */
.dashboard-hero {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    color: #fff;
    background: linear-gradient(135deg, #111827, #312e81 60%, #0891b2);
    border-radius: 30px;
    box-shadow: 0 24px 70px rgba(49, 46, 129, 0.26);
}

.dashboard-hero p:not(.eyebrow) {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.78);
}

.dashboard-summary,
.analytics-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

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

.summary-card {
    display: grid;
    gap: 0.25rem;
    padding: 1.2rem 1.4rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.summary-card span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.summary-card strong {
    font-size: 1.9rem;
}

.summary-card .small-value {
    font-size: 1rem;
}

.qr-card {
    overflow: hidden;
}

.qr-card-top {
    display: grid;
    min-height: 230px;
    place-items: center;
    background: linear-gradient(135deg, #eef2ff, #e0f2fe);
}

.qr-img {
    max-width: 185px;
    max-height: 185px;
    object-fit: contain;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}

.scan-pill {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.4rem 0.7rem;
    color: #312e81;
    background: #eef2ff;
    border-radius: 999px;
    font-weight: 900;
}

.empty-state > i {
    color: var(--brand);
    font-size: 4rem;
}

/* Builder */
.builder-with-floating-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.5rem;
    align-items: start;
}

.qct-flow {
    display: grid;
    gap: 1.3rem;
    min-width: 0;
}

.qct-step-card {
    padding: 1rem;
    background: #e8eff3;
    border-radius: 16px;
    box-shadow: none;
}

.qct-step-title {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    margin-bottom: 1rem;
}

.qct-step-title > span {
    display: inline-grid;
    min-width: 72px;
    min-height: 32px;
    place-items: center;
    padding-inline: 0.75rem;
    color: #fff;
    background: #343a40;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 900;
}

.qct-step-title h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.template-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.template-option {
    position: relative;
    display: grid;
    gap: 0.8rem;
    justify-items: center;
    cursor: pointer;
}

.template-option > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.template-phone {
    position: relative;
    display: block;
    width: 160px;
    height: 344px;
    overflow: hidden;
    background: #f2f6f8;
    border-radius: 13px;
    box-shadow: 0 9px 22px rgba(15, 23, 42, 0.16);
    transition: transform 0.16s ease, outline-color 0.16s ease;
}

.template-option.is-selected .template-phone {
    outline: 4px solid rgba(37, 99, 235, 0.24);
    outline-offset: 4px;
    transform: translateY(-2px);
}

.template-head {
    display: flex;
    height: 112px;
    flex-direction: column;
    gap: 0.15rem;
    align-items: center;
    justify-content: center;
    padding: 0.8rem;
    color: #fff;
    background: #4d8ae0;
    text-align: center;
}

.template-avatar {
    width: 46px;
    height: 46px;
    margin-bottom: 0.2rem;
    background:
        radial-gradient(circle at 50% 35%, #f8fafc 0 16%, transparent 17%),
        radial-gradient(circle at 50% 75%, #f8fafc 0 26%, transparent 27%),
        #dbeafe;
    border: 3px solid #fff;
    border-radius: 50%;
}

.template-head strong {
    font-size: 0.72rem;
}

.template-head small {
    font-size: 0.44rem;
}

.template-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 31px;
    color: #fff;
    background: #4d8ae0;
}

.template-actions b {
    display: flex;
    gap: 0.16rem;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.4rem;
}

.template-lines {
    display: grid;
    gap: 0.65rem;
    padding: 0.85rem;
}

.template-lines em {
    display: block;
    height: 39px;
    background: #fff;
    border-radius: 5px;
}

.template-radio {
    display: block;
    width: 22px;
    height: 22px;
    background: #fff;
    border: 2px solid #9aa8b6;
    border-radius: 50%;
    box-shadow: inset 0 0 0 5px #fff;
}

.template-option.is-selected .template-radio {
    background: #2563eb;
    border-color: #2563eb;
}

.template-label {
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
}

.template-phone-minimal {
    padding-top: 38px;
    background: #eaf0f4;
}

.template-phone-minimal .template-head {
    width: calc(100% - 22px);
    height: 116px;
    margin: 0 auto 12px;
    border-radius: 6px;
}

.template-phone-minimal .template-actions {
    width: calc(100% - 30px);
    margin: 0 auto;
    overflow: hidden;
    border-radius: 6px;
}

.template-phone-portrait .template-head {
    height: 240px;
    justify-content: end;
    padding-bottom: 1.1rem;
}

.template-phone-portrait .template-avatar {
    width: 112px;
    height: 112px;
}

.template-phone-curve {
    background: #fff;
    border: 1px solid #cbd5e1;
}

.template-phone-curve::before {
    position: absolute;
    top: -44px;
    left: 50%;
    width: 170px;
    height: 120px;
    content: "";
    background: #dfe4ea;
    border-radius: 50%;
    transform: translateX(-50%);
}

.template-phone-curve .template-head {
    position: relative;
    z-index: 1;
    height: 160px;
    padding-top: 54px;
    color: #111827;
    background: #fff;
}

.template-phone-curve .template-head strong {
    color: #111827;
}

.template-phone-curve .template-head small {
    color: #64748b;
}

.template-phone-curve .template-avatar {
    width: 80px;
    height: 80px;
    background: #dbeafe;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.qct-field-heading {
    display: block;
    margin: 0 0 0.45rem;
    color: #2b2f33;
    font-size: 0.92rem;
    font-weight: 800;
}

.qct-field-heading small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 500;
}

.qct-entry-grid-no-preview {
    grid-template-columns: 1fr;
}

.qct-upload {
    display: grid;
    grid-template-columns: 68px 1fr;
    min-height: 126px;
    align-items: center;
    padding: 1rem;
    background: #fff;
    border: 1px solid #4d8ae0;
    border-radius: 8px;
    cursor: pointer;
}

.qct-upload > i {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #2563eb;
    border: 1px dashed #2563eb;
    font-size: 1.4rem;
}

.qct-upload > span {
    padding: 0.5rem 0.8rem;
    color: #fff;
    background: #2d8cff;
    border-radius: 6px;
    text-align: center;
    font-weight: 800;
}

.qct-upload input {
    display: none;
}

.qct-upload.wide {
    max-width: 520px;
}

.upload-feedback {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    margin-top: 0.6rem;
    color: #15803d;
    font-size: 0.88rem;
    font-weight: 700;
}

.qct-bg-box {
    min-height: 126px;
    padding: 1rem;
    background: #fff;
    border: 1px solid #4d8ae0;
    border-radius: 8px;
}

.social-strip {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding: 0.5rem;
    background: #fff;
    border-radius: 8px;
}

.social-strip span {
    display: grid;
    min-width: 36px;
    height: 36px;
    place-items: center;
    color: #475569;
    background: #e7eef2;
    border-radius: 6px;
}

/* Floating card preview */
.builder-floating-preview {
    position: sticky;
    top: 86px;
    display: flex;
    align-self: start;
    justify-content: center;
    padding-top: 0.5rem;
}

.phone-device {
    position: relative;
    width: 244px;
    height: 492px;
    padding: 14px;
    background: #111;
    border: 5px solid #3a3a3a;
    border-radius: 34px;
    box-shadow: 0 0 0 3px #9aa0a6, 0 18px 30px rgba(0, 0, 0, 0.26);
}

.phone-device::before {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 64px;
    height: 8px;
    content: "";
    background: #222;
    border-radius: 0 0 10px 10px;
    transform: translateX(-50%);
    z-index: 4;
}

.phone-card-preview {
    width: 100%;
    height: 100%;
    overflow: auto;
    color: #111827;
    background: #f4f7f9;
    border-radius: 23px;
    font-family: var(--preview-font, Inter), sans-serif;
}

.phone-card-header {
    display: flex;
    min-height: 165px;
    flex-direction: column;
    gap: 0.12rem;
    align-items: center;
    justify-content: center;
    padding: 1.6rem 0.8rem 0.85rem;
    color: #fff;
    background: var(--preview-header-bg, linear-gradient(135deg, var(--card-bg), var(--card-bg-2)));
    text-align: center;
}

.phone-card-header img {
    width: 58px;
    height: 58px;
    margin-bottom: 0.5rem;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
}

.phone-card-header strong {
    font-size: 0.85rem;
}

.phone-card-header small {
    font-size: 0.58rem;
    font-weight: 700;
}

.phone-card-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    min-height: 34px;
    color: #fff;
    background: var(--card-button, var(--card-bg));
}

.phone-card-actions span {
    display: grid;
    place-items: center;
    font-size: 0.45rem;
    font-weight: 800;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.phone-card-list p {
    margin: 0;
    padding: 0.8rem;
    color: #94a3b8;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.56rem;
    text-align: center;
}

.phone-card-list > div {
    display: flex;
    gap: 0.75rem;
    padding: 0.82rem 0.7rem;
    border-bottom: 1px solid #e5e7eb;
}

.phone-card-list i {
    color: #475569;
    font-size: 0.72rem;
}

.phone-card-list span {
    display: grid;
    color: #94a3b8;
    font-size: 0.54rem;
}

.phone-card-list b {
    color: #111827;
    font-size: 0.64rem;
    font-weight: 600;
}

.phone-card-preview.live-template-minimal {
    padding-top: 40px;
    background: #eaf0f4;
}

.phone-card-preview.live-template-minimal .phone-card-header {
    width: calc(100% - 26px);
    min-height: 126px;
    margin: 0 auto 12px;
    border-radius: 7px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.phone-card-preview.live-template-minimal .phone-card-actions {
    width: calc(100% - 34px);
    margin: 0 auto 10px;
    overflow: hidden;
    border-radius: 7px;
}

.phone-card-preview.live-template-portrait .phone-card-header {
    min-height: 260px;
    justify-content: end;
    padding-bottom: 1.2rem;
}

.phone-card-preview.live-template-portrait .phone-card-header img {
    width: 118px;
    height: 118px;
}

.phone-card-preview.live-template-curve .phone-card-header {
    min-height: 210px;
    color: #111827;
    background: radial-gradient(circle at 50% -18%, #dfe4ea 0 50%, #fff 51%);
}

.phone-card-preview.live-template-curve .phone-card-header strong,
.phone-card-preview.live-template-curve .phone-card-header small {
    color: #111827;
}

.phone-card-preview.live-template-curve .phone-card-header img {
    width: 96px;
    height: 96px;
}

/* QR customizer */
.qr-customizer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.3rem;
}

.qr-tabs-panel {
    min-height: 360px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.qct-tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.35rem;
    padding: 0.35rem;
    background: #dce5eb;
}

.qct-tabs .nav-link {
    width: 100%;
    min-height: 48px;
    color: #111827;
    background: #cfdbe3;
    border-radius: 7px;
    font-size: 0.82rem;
}

.qct-tabs .nav-link.active {
    color: #fff;
    background: #0d7df2;
}

.qct-tab-content {
    padding: 1.2rem;
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(86px, 1fr));
    gap: 0.75rem;
}

.qr-style-option,
.frame-style-option {
    position: relative;
    display: grid;
    min-height: 105px;
    gap: 0.35rem;
    place-items: center;
    padding: 0.65rem;
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    cursor: pointer;
}

.qr-style-option input,
.frame-style-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.qr-style-option.is-selected,
.frame-style-option.is-selected {
    border-color: #2563eb;
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.14);
}

.qr-style-option small {
    color: #64748b;
    font-weight: 700;
}

.pattern-demo,
.eye-demo {
    display: block;
    width: 68px;
    height: 68px;
}

.pattern-demo {
    background:
        radial-gradient(circle at 20% 20%, #000 0 4px, transparent 5px),
        repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 12px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.48) 0 6px, transparent 6px 12px);
}

.pattern-rounded {
    border-radius: 14px;
}

.pattern-dots {
    background-image: radial-gradient(circle, #000 0 3px, transparent 4px);
    background-size: 12px 12px;
}

.pattern-classy {
    background-image:
        linear-gradient(90deg, #000 0 16px, transparent 16px 24px, #000 24px 36px, transparent 36px),
        linear-gradient(0deg, transparent 0 9px, #000 9px 21px, transparent 21px 32px);
    background-size: 36px 32px;
}

.pattern-diamond {
    background-image:
        linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%),
        linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.eye-demo {
    border: 10px solid #000;
    box-shadow: inset 0 0 0 10px #fff, inset 0 0 0 18px #000;
}

.eye-rounded {
    border-radius: 16px;
}

.eye-circle {
    border-radius: 50%;
}

.eye-leaf {
    border-radius: 50% 0 50% 50%;
}

.frame-style-option {
    min-height: 84px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 900;
}

.preset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.preset-card {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    color: #111827;
    background: #f8fafc;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    text-align: left;
}

.preset-card:hover {
    border-color: #2563eb;
    background: #eff6ff;
}

.preset-card span {
    color: #64748b;
    font-size: 0.78rem;
}

.qr-final-preview {
    align-self: start;
}

.qr-preview-stage {
    position: relative;
    display: grid;
    min-height: 285px;
    place-items: center;
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 16px;
    overflow: hidden;
}

.qr-live-preview-img {
    max-width: 100%;
    max-height: 280px;
    padding: 0.6rem;
    object-fit: contain;
}

.qr-preview-placeholder {
    display: grid;
    gap: 0.5rem;
    place-items: center;
    color: #64748b;
}

.qr-preview-placeholder i {
    font-size: 4rem;
}

.qr-preview-loading {
    position: absolute;
    right: 0.7rem;
    bottom: 0.7rem;
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.4rem 0.65rem;
    color: #334155;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 0.75rem;
}

.format-row {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.format-row span {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    color: #15803d;
    font-weight: 800;
}

.format-row span::before {
    width: 10px;
    height: 10px;
    content: "";
    background: #22c55e;
    border-radius: 50%;
}

/* Analytics */
.analytics-bars {
    display: grid;
    min-height: 230px;
    grid-template-columns: repeat(14, minmax(24px, 1fr));
    gap: 0.5rem;
    align-items: end;
    padding-top: 1rem;
    overflow-x: auto;
}

.analytics-bar-item {
    display: grid;
    gap: 0.3rem;
    justify-items: center;
    align-items: end;
}

.analytics-value {
    color: #475569;
    font-size: 0.7rem;
    font-weight: 700;
}

.analytics-bar {
    display: block;
    width: min(100%, 24px);
    min-height: 4px;
    background: linear-gradient(180deg, #4f46e5, #06b6d4);
    border-radius: 8px 8px 3px 3px;
}

.analytics-bar-item small {
    color: #64748b;
    font-size: 0.62rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.device-list {
    display: grid;
    gap: 0.7rem;
    margin-top: 1rem;
}

.device-list div {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #e2e8f0;
}

/* Public profile */
.profile-body {
    background: #f1f5f9;
}

.tiger-profile-page {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    font-family: var(--profile-font, Inter, sans-serif);
}

.tiger-profile-card {
    position: relative;
    width: min(100%, 470px);
    overflow: hidden;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
}

.tiger-profile-header {
    padding: 4rem 1.5rem 1.4rem;
    color: #fff;
    background: var(--profile-header-bg);
    text-align: center;
}

.tiger-profile-header img {
    width: 106px;
    height: 106px;
    margin-bottom: 1rem;
    object-fit: cover;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.tiger-profile-header h1 {
    margin: 0 0 0.4rem;
    font-size: 1.9rem;
    font-weight: 700;
}

.tiger-profile-header p {
    margin: 0.18rem 0;
}

.tiger-action-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--profile-button, var(--profile-bg));
}

.tiger-action-bar a {
    display: flex;
    min-height: 72px;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    text-decoration: none;
}

.tiger-description {
    padding: 1.2rem;
    color: #64748b;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
}

.tiger-profile-row {
    display: grid;
    min-height: 100px;
    grid-template-columns: 64px 1fr;
    gap: 0.7rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.tiger-profile-row > i {
    justify-self: center;
    color: #94a3b8;
    font-size: 1.15rem;
}

.tiger-profile-row span {
    display: block;
    margin-bottom: 0.2rem;
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 600;
}

.tiger-profile-row strong,
.tiger-profile-row a {
    color: #1f2937;
    text-decoration: none;
}

.tiger-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 1.2rem;
}

.tiger-socials a {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #fff;
    background: var(--profile-bg);
    border-radius: 50%;
    text-decoration: none;
}

.tiger-save-contact {
    position: sticky;
    bottom: 1rem;
    display: flex;
    width: max-content;
    gap: 0.6rem;
    align-items: center;
    margin: 1.2rem auto;
    padding: 0.9rem 1.2rem;
    color: #fff;
    background: #0e087d;
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(14, 8, 125, 0.32);
    text-decoration: none;
}

.tiger-powered {
    padding: 1rem;
    color: #64748b;
    text-align: center;
}

.tiger-template-minimal .tiger-profile-header {
    margin: 2rem 1rem 1rem;
    padding-top: 2rem;
    border-radius: 18px;
}

.tiger-template-portrait .tiger-profile-header {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.tiger-template-portrait .tiger-profile-header img {
    width: 160px;
    height: 160px;
}

.tiger-template-curve .tiger-profile-header {
    padding-top: 3rem;
    border-radius: 0 0 50% 12%;
}



/* Phase 3: expanded Step 1 contact-card templates */
.template-copy {
    display: grid;
    gap: 0.12rem;
    justify-items: center;
    min-height: 36px;
    text-align: center;
}

.template-label {
    color: #334155;
    font-size: 0.84rem;
    font-weight: 900;
}

.template-description {
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 600;
}

.template-option:hover .template-phone {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.2);
}

/* Aurora: layered gradient, floating action strip */
.template-phone-aurora {
    background: #eef2ff;
}

.template-phone-aurora .template-head {
    position: relative;
    height: 168px;
    overflow: hidden;
    background: linear-gradient(145deg, #312e81 0%, #2563eb 48%, #22d3ee 100%);
}

.template-phone-aurora .template-head::before,
.template-phone-aurora .template-head::after {
    position: absolute;
    content: "";
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.template-phone-aurora .template-head::before {
    top: -36px;
    right: -26px;
    width: 110px;
    height: 110px;
}

.template-phone-aurora .template-head::after {
    bottom: -46px;
    left: -28px;
    width: 130px;
    height: 130px;
}

.template-phone-aurora .template-avatar,
.template-phone-aurora .template-head strong,
.template-phone-aurora .template-head small {
    position: relative;
    z-index: 1;
}

.template-phone-aurora .template-avatar {
    width: 62px;
    height: 62px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.28);
}

.template-phone-aurora .template-actions {
    position: relative;
    z-index: 2;
    width: calc(100% - 22px);
    margin: -13px auto 0;
    overflow: hidden;
    background: #111827;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
}

.template-phone-aurora .template-lines em {
    background: #fff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
}

/* Executive: strong left alignment with editorial business styling */
.template-phone-executive {
    background: #f8fafc;
    border: 1px solid #dbe3ef;
}

.template-phone-executive::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 7px;
    content: "";
    background: linear-gradient(180deg, #0f172a, #2563eb);
    z-index: 3;
}

.template-phone-executive .template-head {
    height: 164px;
    align-items: flex-start;
    padding: 1.1rem 1rem 1rem 1.35rem;
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 70%, #334155 100%);
    text-align: left;
}

.template-phone-executive .template-avatar {
    width: 58px;
    height: 58px;
    margin-bottom: 0.45rem;
}

.template-phone-executive .template-actions {
    width: calc(100% - 24px);
    margin: 10px auto 0;
    color: #0f172a;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.template-phone-executive .template-actions b {
    border-color: #e2e8f0;
}

.template-phone-executive .template-lines {
    gap: 0.5rem;
}

.template-phone-executive .template-lines em {
    height: 34px;
    background: linear-gradient(90deg, #e2e8f0 0 12%, #fff 12% 100%);
    border: 1px solid #edf2f7;
}

/* Spotlight: bright canvas with oversized portrait */
.template-phone-spotlight {
    background: #fff;
    border: 1px solid #dbe3ef;
}

.template-phone-spotlight .template-head {
    height: 190px;
    padding-top: 1.25rem;
    color: #111827;
    background: linear-gradient(180deg, #e0f2fe 0%, #f8fafc 74%, #fff 100%);
}

.template-phone-spotlight .template-avatar {
    width: 88px;
    height: 88px;
    border-width: 5px;
    box-shadow: 0 10px 22px rgba(30, 64, 175, 0.18);
}

.template-phone-spotlight .template-head strong {
    color: #0f172a;
    font-size: 0.8rem;
}

.template-phone-spotlight .template-head small {
    color: #64748b;
}

.template-phone-spotlight .template-actions {
    width: calc(100% - 22px);
    margin: 0 auto 3px;
    overflow: hidden;
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    border-radius: 999px;
}

.template-phone-spotlight .template-lines em {
    height: 34px;
    border: 1px solid #eef2f7;
    border-radius: 12px;
}

/* Midnight: dark glass card */
.template-phone-midnight {
    background: #0b1120;
    border: 1px solid #334155;
}

.template-phone-midnight .template-head {
    height: 160px;
    background: linear-gradient(145deg, #111827 0%, #312e81 58%, #0f766e 130%);
}

.template-phone-midnight .template-avatar {
    width: 64px;
    height: 64px;
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
}

.template-phone-midnight .template-actions {
    width: calc(100% - 24px);
    margin: 10px auto 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}

.template-phone-midnight .template-lines em {
    height: 34px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9px;
}

/* Matching floating mobile previews */
.phone-card-preview.live-template-aurora {
    background: #eef2ff;
}

.phone-card-preview.live-template-aurora .phone-card-header {
    position: relative;
    min-height: 215px;
    overflow: hidden;
    background: linear-gradient(145deg, var(--card-bg), var(--card-bg-2));
    border-radius: 0 0 28px 28px;
}

.phone-card-preview.live-template-aurora .phone-card-header::before,
.phone-card-preview.live-template-aurora .phone-card-header::after {
    position: absolute;
    content: "";
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

.phone-card-preview.live-template-aurora .phone-card-header::before {
    top: -46px;
    right: -36px;
    width: 150px;
    height: 150px;
}

.phone-card-preview.live-template-aurora .phone-card-header::after {
    bottom: -64px;
    left: -44px;
    width: 170px;
    height: 170px;
}

.phone-card-preview.live-template-aurora .phone-card-header img,
.phone-card-preview.live-template-aurora .phone-card-header strong,
.phone-card-preview.live-template-aurora .phone-card-header small {
    position: relative;
    z-index: 1;
}

.phone-card-preview.live-template-aurora .phone-card-header img {
    width: 82px;
    height: 82px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
}

.phone-card-preview.live-template-aurora .phone-card-actions {
    position: relative;
    z-index: 2;
    width: calc(100% - 28px);
    margin: -18px auto 10px;
    overflow: hidden;
    background: var(--card-button, #111827);
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}

.phone-card-preview.live-template-executive {
    background: #f8fafc;
    box-shadow: inset 7px 0 0 var(--card-bg);
}

.phone-card-preview.live-template-executive .phone-card-header {
    min-height: 205px;
    align-items: flex-start;
    padding: 2rem 1rem 1rem 1.45rem;
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 56%, var(--card-bg) 150%);
    text-align: left;
}

.phone-card-preview.live-template-executive .phone-card-header img {
    width: 76px;
    height: 76px;
}

.phone-card-preview.live-template-executive .phone-card-actions {
    width: calc(100% - 28px);
    margin: 12px auto 4px;
    overflow: hidden;
    color: #0f172a;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
}

.phone-card-preview.live-template-executive .phone-card-actions span {
    border-color: #e2e8f0;
}

.phone-card-preview.live-template-spotlight {
    background: #fff;
}

.phone-card-preview.live-template-spotlight .phone-card-header {
    min-height: 245px;
    color: #0f172a;
    background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 20%, #fff) 0%, #fff 82%);
    box-shadow: inset 0 8px 0 var(--card-bg);
}

.phone-card-preview.live-template-spotlight .phone-card-header img {
    width: 116px;
    height: 116px;
    border: 6px solid #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.phone-card-preview.live-template-spotlight .phone-card-header strong,
.phone-card-preview.live-template-spotlight .phone-card-header small {
    color: #0f172a;
}

.phone-card-preview.live-template-spotlight .phone-card-header small {
    color: #64748b;
}

.phone-card-preview.live-template-spotlight .phone-card-actions {
    width: calc(100% - 28px);
    margin: 0 auto 12px;
    overflow: hidden;
    background: var(--card-button, var(--card-bg));
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.phone-card-preview.live-template-midnight {
    color: #f8fafc;
    background: #0b1120;
}

.phone-card-preview.live-template-midnight .phone-card-header {
    min-height: 205px;
    background: linear-gradient(145deg, #111827 0%, var(--card-bg) 68%, var(--card-bg-2) 145%);
}

.phone-card-preview.live-template-midnight .phone-card-header img {
    width: 82px;
    height: 82px;
    border-color: rgba(255, 255, 255, 0.72);
}

.phone-card-preview.live-template-midnight .phone-card-actions {
    width: calc(100% - 28px);
    margin: 10px auto;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
}

.phone-card-preview.live-template-midnight .phone-card-list p,
.phone-card-preview.live-template-midnight .phone-card-list > div {
    color: #94a3b8;
    border-color: #1e293b;
}

.phone-card-preview.live-template-midnight .phone-card-list i,
.phone-card-preview.live-template-midnight .phone-card-list b {
    color: #f8fafc;
}

.phone-card-preview.live-template-midnight .phone-card-list span {
    color: #64748b;
}

/* Public digital contact-card counterparts for the new Step 1 templates */
.tiger-template-aurora .tiger-profile-header {
    position: relative;
    padding-top: 4.5rem;
    overflow: hidden;
    border-radius: 0 0 42px 42px;
}

.tiger-template-aurora .tiger-profile-header::before,
.tiger-template-aurora .tiger-profile-header::after {
    position: absolute;
    content: "";
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.11);
}

.tiger-template-aurora .tiger-profile-header::before {
    top: -70px;
    right: -55px;
    width: 220px;
    height: 220px;
}

.tiger-template-aurora .tiger-profile-header::after {
    bottom: -120px;
    left: -70px;
    width: 260px;
    height: 260px;
}

.tiger-template-aurora .tiger-profile-header > * {
    position: relative;
    z-index: 1;
}

.tiger-template-aurora .tiger-action-bar {
    position: relative;
    z-index: 2;
    margin: -24px 1rem 0;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.2);
}

.tiger-template-executive {
    box-shadow: inset 8px 0 0 var(--profile-bg), 0 18px 50px rgba(15, 23, 42, 0.14);
}

.tiger-template-executive .tiger-profile-header {
    padding: 3.4rem 2rem 2rem 2.35rem;
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 62%, var(--profile-bg) 150%);
    text-align: left;
}

.tiger-template-executive .tiger-profile-header img {
    width: 94px;
    height: 94px;
}

.tiger-template-executive .tiger-action-bar {
    margin: 1rem;
    overflow: hidden;
    border-radius: 14px;
}

.tiger-template-spotlight .tiger-profile-header {
    padding-top: 4.2rem;
    color: #0f172a;
    background: linear-gradient(180deg, rgba(224, 242, 254, 0.9), #fff 78%);
    box-shadow: inset 0 10px 0 var(--profile-bg);
}

.tiger-template-spotlight .tiger-profile-header img {
    width: 154px;
    height: 154px;
    border-width: 7px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
}

.tiger-template-spotlight .tiger-profile-header p {
    color: #64748b;
}

.tiger-template-spotlight .tiger-action-bar {
    margin: 0 1rem 1rem;
    overflow: hidden;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.tiger-template-midnight {
    color: #f8fafc;
    background: #0b1120;
}

.tiger-template-midnight .tiger-profile-header {
    background: linear-gradient(145deg, #111827 0%, var(--profile-bg) 65%, var(--profile-bg-2) 145%);
}

.tiger-template-midnight .tiger-action-bar {
    margin: 1rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

.tiger-template-midnight .tiger-description,
.tiger-template-midnight .tiger-profile-row {
    color: #94a3b8;
    border-color: #1e293b;
}

.tiger-template-midnight .tiger-profile-row > i,
.tiger-template-midnight .tiger-profile-row strong,
.tiger-template-midnight .tiger-profile-row a {
    color: #f8fafc;
}

.tiger-template-midnight .tiger-profile-row span,
.tiger-template-midnight .tiger-powered {
    color: #64748b;
}

.tiger-template-midnight .tiger-socials a {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Dashboard accents so saved template identity remains visible outside the builder */
.qr-card-top.template-aurora {
    background: linear-gradient(145deg, #312e81, #2563eb 58%, #22d3ee);
}

.qr-card-top.template-executive {
    background: linear-gradient(145deg, #0f172a, #334155);
}

.qr-card-top.template-spotlight {
    background: linear-gradient(180deg, #e0f2fe, #fff);
}

.qr-card-top.template-midnight {
    background: linear-gradient(145deg, #020617, #312e81);
}


/* Responsive */
@media (max-width: 1200px) {
    .builder-with-floating-preview,
    .qr-customizer-grid {
        grid-template-columns: 1fr;
    }

    .builder-floating-preview {
        position: relative;
        top: auto;
        order: -1;
    }

    .template-picker {
        grid-template-columns: repeat(4, minmax(135px, 1fr));
    }
}

@media (max-width: 991px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-brand-panel {
        display: none;
    }

    .auth-mobile-brand {
        display: inline-flex;
    }

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

    .template-picker {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

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

@media (max-width: 640px) {
    .dashboard-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-summary,
    .analytics-summary,
    .template-picker,
    .preset-grid {
        grid-template-columns: 1fr;
    }

    .qct-step-title {
        align-items: flex-start;
        flex-direction: column;
    }

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

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

    .phone-device {
        transform: scale(0.96);
        transform-origin: top center;
    }

    .tiger-profile-page {
        padding: 0;
    }

    .tiger-profile-card {
        min-height: 100vh;
        border-radius: 0;
    }
}

/* Local landing-page QR artwork: no third-party QR image request. */
.hero-qr-demo {
    position: relative;
    width: 260px;
    aspect-ratio: 1;
    border: 18px solid #fff;
    border-radius: 24px;
    background-color: #fff;
    background-image:
        linear-gradient(90deg, #111827 50%, transparent 50%),
        linear-gradient(#111827 50%, transparent 50%);
    background-size: 18px 18px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
    overflow: hidden;
}

.hero-qr-demo span {
    position: absolute;
    width: 64px;
    height: 64px;
    border: 12px solid #111827;
    background: #fff;
    box-shadow: inset 0 0 0 10px #fff, inset 0 0 0 20px #111827;
}

.hero-qr-demo span:nth-child(1) { left: 12px; top: 12px; }
.hero-qr-demo span:nth-child(2) { right: 12px; top: 12px; }
.hero-qr-demo span:nth-child(3) { left: 12px; bottom: 12px; }

/* Keyboard focus treatment for custom controls. */
.template-option:focus-within .template-phone,
.qr-style-option:focus-within,
.frame-style-option:focus-within,
.preset-card:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.55);
    outline-offset: 3px;
}

/* Phase 3 feature expansion */
.phase3-controls {
    padding: 1rem;
    background: linear-gradient(135deg, #f8fbff, #f4f7ff);
    border: 1px solid #dbe7f5;
    border-radius: 14px;
}

.utm-builder,
.destination-history {
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
}

.utm-builder summary,
.destination-history summary {
    cursor: pointer;
    color: #334155;
    font-weight: 800;
}

.history-list {
    display: grid;
    gap: 0.55rem;
}

.history-list > div {
    display: grid;
    gap: 0.1rem;
    padding: 0.65rem;
    background: #f8fafc;
    border-radius: 8px;
}

.history-list small {
    color: #64748b;
}

.saved-designs {
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.design-swatch {
    height: 92px;
    background:
        radial-gradient(circle at 20% 50%, var(--design-accent) 0 8px, transparent 9px),
        repeating-linear-gradient(90deg, var(--design-fg) 0 9px, transparent 9px 18px),
        var(--design-bg);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.format-downloads {
    gap: 0.45rem;
    flex-wrap: wrap;
}

.format-downloads a,
.format-downloads span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 0.35rem 0.55rem;
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 7px;
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
}

.format-downloads a:hover {
    color: #14532d;
    background: #dcfce7;
}

.dashboard-filter-bar {
    border-color: #dbe3ef;
}

.public-gate-body {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1rem;
    background: radial-gradient(circle at top, #eff6ff, #eef2f7 48%, #e2e8f0);
}

.public-gate-card {
    width: min(100%, 440px);
    padding: 2rem;
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
}

.public-gate-card h1 {
    margin-bottom: 0.6rem;
    font-size: 1.65rem;
    font-weight: 800;
}

.public-gate-icon {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    margin-bottom: 1rem;
    background: #eff6ff;
    border-radius: 18px;
    font-size: 1.8rem;
}

.analytics-bars {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(24px, 1fr);
}

@media (max-width: 767px) {
    .phase3-controls {
        padding: 0.8rem;
    }

    .format-downloads a,
    .format-downloads span {
        flex: 1 1 62px;
    }
}

/* --------------------------------------------------------------------------
   Step 3 Studio refresh: expanded QR styling, gloss, motion and preview polish
   -------------------------------------------------------------------------- */
:root {
    --studio-glass: rgba(255, 255, 255, 0.82);
    --studio-glass-strong: rgba(255, 255, 255, 0.94);
    --studio-blue: #0d7df2;
    --studio-cyan: #06b6d4;
    --studio-violet: #6366f1;
    --studio-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body::before,
body::after {
    position: fixed;
    width: 34rem;
    height: 34rem;
    content: "";
    pointer-events: none;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.14;
    z-index: -1;
}

body::before {
    top: -14rem;
    right: -10rem;
    background: #60a5fa;
}

body::after {
    bottom: -16rem;
    left: -12rem;
    background: #8b5cf6;
}

.qct-step-card {
    position: relative;
    overflow: hidden;
    padding: 1.15rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(232, 239, 243, 0.8)),
        #e8eff3;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 22px;
    box-shadow:
        0 18px 48px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    transition: transform 0.35s var(--studio-ease), box-shadow 0.35s var(--studio-ease);
}

.qct-step-card::before {
    position: absolute;
    top: 0;
    left: 8%;
    width: 58%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
}

.qct-step-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 24px 64px rgba(15, 23, 42, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.qct-step-title > span {
    background: linear-gradient(135deg, #111827, #334155);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255,255,255,.18);
}

.qr-tabs-panel {
    background: var(--studio-glass-strong);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
    backdrop-filter: blur(14px);
}

.qct-tabs {
    gap: 0.45rem;
    padding: 0.48rem;
    background: linear-gradient(180deg, #dce7ee, #d3e0e8);
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.qct-tabs .nav-link {
    position: relative;
    display: flex;
    gap: 0.42rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #334155;
    background: rgba(255, 255, 255, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: transform 0.22s var(--studio-ease), color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.qct-tabs .nav-link::after {
    position: absolute;
    top: -120%;
    left: -40%;
    width: 34%;
    height: 320%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
    transform: rotate(22deg);
    transition: left 0.55s var(--studio-ease);
}

.qct-tabs .nav-link:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.75);
}

.qct-tabs .nav-link:hover::after {
    left: 120%;
}

.qct-tabs .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.24), inset 0 1px 0 rgba(255,255,255,.3);
}

.qct-tab-content .tab-pane.active {
    animation: studioTabIn 0.34s var(--studio-ease) both;
}

.studio-tab-heading {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    color: #475569;
    font-size: 0.82rem;
}

.studio-tab-heading i {
    margin-top: 0.08rem;
    color: #0d7df2;
}

.option-grid-expanded,
.frame-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(78px, 1fr));
    gap: 0.75rem;
}

.qr-style-option,
.frame-style-option {
    min-height: 118px;
    padding: 0.7rem 0.55rem;
    overflow: hidden;
    background: linear-gradient(160deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #d7dee8;
    border-radius: 13px;
    box-shadow: inset 0 1px 0 #fff;
    transition: transform 0.24s var(--studio-ease), box-shadow 0.24s ease, border-color 0.24s ease;
}

.qr-style-option::before,
.frame-style-option::before,
.preset-card-visual::before {
    position: absolute;
    top: -80%;
    left: -45%;
    width: 38%;
    height: 260%;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
    transform: rotate(24deg);
    transition: left 0.65s var(--studio-ease);
}

.qr-style-option:hover,
.frame-style-option:hover {
    z-index: 2;
    transform: translateY(-5px) scale(1.015);
    border-color: #93c5fd;
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
}

.qr-style-option:hover::before,
.frame-style-option:hover::before,
.preset-card-visual:hover::before {
    left: 125%;
}

.qr-style-option.is-selected,
.frame-style-option.is-selected {
    border-color: #2563eb;
    background: linear-gradient(160deg, #ffffff, #eff6ff);
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.14), inset 0 0 0 2px rgba(37,99,235,.14);
}

.qr-style-option.is-selected::after,
.frame-style-option.is-selected::after {
    position: absolute;
    top: 7px;
    right: 7px;
    display: grid;
    width: 18px;
    height: 18px;
    content: "✓";
    place-items: center;
    color: #fff;
    background: #2563eb;
    border-radius: 50%;
    font-size: 0.66rem;
    font-weight: 900;
}

.pattern-demo,
.eye-demo {
    width: 68px;
    height: 68px;
    transition: transform 0.25s var(--studio-ease);
}

.qr-style-option:hover .pattern-demo,
.qr-style-option:hover .eye-demo {
    transform: scale(1.07) rotate(-1deg);
}

.pattern-demo {
    border-radius: 7px;
    background-color: #fff;
}

.pattern-square {
    background:
        linear-gradient(90deg, #000 36%, transparent 36% 56%, #000 56% 74%, transparent 74%),
        linear-gradient(#000 30%, transparent 30% 50%, #000 50% 68%, transparent 68%);
    background-size: 23px 23px;
}

.pattern-rounded {
    background: radial-gradient(ellipse at center, #000 0 52%, transparent 55%);
    background-size: 17px 17px;
    border-radius: 14px;
}

.pattern-dots {
    background-image: radial-gradient(circle, #000 0 3.6px, transparent 4px);
    background-size: 13px 13px;
}

.pattern-classy {
    background:
        radial-gradient(circle at 0 0, transparent 0 7px, #000 8px 13px, transparent 14px),
        radial-gradient(circle at 100% 100%, transparent 0 7px, #000 8px 13px, transparent 14px);
    background-size: 24px 24px;
}

.pattern-diamond {
    background:
        linear-gradient(45deg, transparent 30%, #000 31% 69%, transparent 70%);
    background-size: 15px 15px;
}

.pattern-soft {
    background: radial-gradient(circle, #000 0 5px, transparent 5.7px);
    background-size: 14px 14px;
    filter: saturate(.9);
}

.pattern-capsule {
    background: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 15px);
    border-radius: 20px;
}

.pattern-bars {
    background: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 12px);
}

.pattern-cross {
    background:
        linear-gradient(90deg, transparent 34%, #000 34% 66%, transparent 66%),
        linear-gradient(transparent 34%, #000 34% 66%, transparent 66%);
    background-size: 16px 16px;
}

.pattern-sparkle {
    background:
        linear-gradient(45deg, transparent 42%, #000 43% 57%, transparent 58%),
        linear-gradient(-45deg, transparent 42%, #000 43% 57%, transparent 58%);
    background-size: 17px 17px;
}

.pattern-mosaic {
    background:
        radial-gradient(circle at 25% 25%, #000 0 4px, transparent 4.5px),
        linear-gradient(45deg, #000 25%, transparent 26% 74%, #000 75%);
    background-size: 18px 18px;
}

.pattern-pixel {
    background:
        linear-gradient(90deg, #000 0 8px, transparent 8px 12px),
        linear-gradient(#000 0 8px, transparent 8px 12px);
    background-size: 12px 12px;
}

.eye-demo {
    position: relative;
    display: grid;
    place-items: center;
    background: #000;
    border: 0;
    box-shadow: none;
}

.eye-demo::before {
    position: absolute;
    inset: 10px;
    content: "";
    background: #fff;
}

.eye-demo > span {
    position: absolute;
    width: 22px;
    height: 22px;
    background: #000;
}

.eye-rounded,
.eye-rounded::before,
.eye-rounded > span { border-radius: 8px; }
.eye-circle,
.eye-circle::before,
.eye-circle > span,
.eye-orbit,
.eye-orbit::before { border-radius: 50%; }
.eye-circle > span { border-radius: 50%; }
.eye-leaf,
.eye-petal { border-radius: 50% 12% 50% 50%; }
.eye-leaf::before,
.eye-petal::before { border-radius: 50% 8% 50% 50%; }
.eye-leaf > span,
.eye-petal > span { border-radius: 50%; }
.eye-soft-square,
.eye-soft-square::before { border-radius: 16px; }
.eye-soft-square > span { border-radius: 7px; }
.eye-dot { border-radius: 9px; }
.eye-dot::before { border-radius: 5px; }
.eye-dot > span { border-radius: 50%; }
.eye-target,
.eye-target::before { border-radius: 50%; }
.eye-target > span { border-radius: 2px; }
.eye-diamond { transform: rotate(45deg) scale(.74); }
.eye-diamond::before,
.eye-diamond > span { transform: rotate(0); }
.eye-squircle,
.eye-squircle::before { border-radius: 20px; }
.eye-squircle > span { border-radius: 8px; }
.eye-inset { border-radius: 4px; }
.eye-inset::before { border-radius: 10px; }
.eye-inset > span { border-radius: 6px; }
.eye-orbit > span { border-radius: 8px; }
.eye-petal > span { transform: rotate(45deg); border-radius: 4px 50% 4px 50%; }

.frame-grid {
    grid-template-columns: repeat(6, minmax(86px, 1fr));
}

.frame-style-option {
    min-height: 132px;
    gap: 0.4rem;
    text-align: center;
}

.frame-style-option small {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 800;
}

.frame-preview {
    position: relative;
    display: grid;
    width: 78px;
    height: 82px;
    place-items: center;
    color: #111827;
    background: #fff;
    border: 2px solid #111827;
    border-radius: 8px;
}

.frame-preview i {
    width: 52px;
    height: 52px;
    background:
        radial-gradient(circle, #111827 0 1.7px, transparent 2px);
    background-size: 6px 6px;
    border: 4px solid #111827;
}

.frame-preview b {
    position: absolute;
    right: 5px;
    bottom: 3px;
    left: 5px;
    font-size: 0.45rem;
    letter-spacing: .06em;
}

.frame-preview-none {
    border-color: #cbd5e1;
}
.frame-preview-none i { display: none; }
.frame-preview-none b { top: 24px; bottom: auto; color: #22c55e; font-size: 1.55rem; font-weight: 300; }
.frame-preview-badge { border: 7px solid #111827; border-radius: 16px; }
.frame-preview-phone { border: 7px solid #111827; border-radius: 20px; }
.frame-preview-minimal { border: 2px solid #2563eb; }
.frame-preview-rounded { border: 5px solid #111827; border-radius: 22px; }
.frame-preview-ticket { border: 5px solid #111827; border-radius: 5px; clip-path: polygon(0 0,100% 0,100% 40%,94% 50%,100% 60%,100% 100%,0 100%,0 60%,6% 50%,0 40%); }
.frame-preview-tag { border: 6px solid #111827; border-radius: 14px 6px 14px 14px; }
.frame-preview-circle { width: 82px; height: 82px; border-width: 6px; border-radius: 50%; }
.frame-preview-ribbon { border: 0; box-shadow: inset 0 -18px 0 #111827; }
.frame-preview-corner { border: 0; background: linear-gradient(#111827,#111827) 0 0/24px 4px no-repeat, linear-gradient(#111827,#111827) 0 0/4px 24px no-repeat, linear-gradient(#111827,#111827) 100% 0/24px 4px no-repeat, linear-gradient(#111827,#111827) 100% 0/4px 24px no-repeat, linear-gradient(#111827,#111827) 0 100%/24px 4px no-repeat, linear-gradient(#111827,#111827) 0 100%/4px 24px no-repeat, linear-gradient(#111827,#111827) 100% 100%/24px 4px no-repeat, linear-gradient(#111827,#111827) 100% 100%/4px 24px no-repeat; }
.frame-preview-speech { border-width: 6px; border-radius: 18px; }
.frame-preview-speech::after { position:absolute; right:8px; bottom:-11px; content:""; border: 11px solid transparent; border-top-color:#111827; transform: rotate(-18deg); }
.frame-preview-shield { border-width: 6px; clip-path: polygon(8% 0,92% 0,100% 72%,50% 100%,0 72%); }
.frame-preview-stamp { border: 5px double #111827; border-radius: 3px; }

.studio-control-card {
    padding: 1rem;
    background: linear-gradient(145deg, rgba(248,250,252,.92), rgba(255,255,255,.98));
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}

.studio-segmented {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: #e9eef4;
    border-radius: 999px;
}

.studio-segmented label {
    cursor: pointer;
}

.studio-segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.studio-segmented span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0.35rem 0.8rem;
    color: #475569;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    transition: all 0.2s ease;
}

.studio-segmented input:checked + span {
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    box-shadow: 0 6px 16px rgba(37,99,235,.22);
}

#foregroundColor2Group,
#frameColor2Group {
    transition: opacity 0.2s ease, filter 0.2s ease;
}

#foregroundColor2Group.is-muted,
#frameColor2Group.is-muted {
    opacity: 0.42;
    filter: grayscale(.4);
}

.range-labels {
    display: flex;
    justify-content: space-between;
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 700;
}

.glossy-upload {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #fff, #f8fbff);
    transition: transform 0.25s var(--studio-ease), box-shadow 0.25s ease;
}

.glossy-upload::after {
    position: absolute;
    top: -120%;
    left: -35%;
    width: 30%;
    height: 340%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
    transform: rotate(24deg);
    transition: left .65s var(--studio-ease);
}

.glossy-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(37,99,235,.12);
}

.glossy-upload:hover::after { left: 125%; }

.preset-grid-expanded {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
}

.preset-card-visual {
    position: relative;
    min-height: 168px;
    overflow: hidden;
    align-content: start;
    justify-items: center;
    text-align: center;
    background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(248,250,252,.9));
    border-radius: 14px;
    transition: transform .25s var(--studio-ease), box-shadow .25s ease, border-color .25s ease;
}

.preset-card-visual:hover,
.preset-card-visual.is-active {
    transform: translateY(-5px);
    border-color: var(--preset-accent);
    box-shadow: 0 16px 30px rgba(15,23,42,.12);
}

.preset-qr-mini {
    position: relative;
    display: block;
    width: 82px;
    height: 90px;
    margin-bottom: 0.35rem;
    overflow: hidden;
    background: var(--preset-bg);
    border: 6px solid var(--preset-accent);
    border-radius: 9px;
    box-shadow: 0 8px 18px rgba(15,23,42,.12);
}

.preset-qr-mini::before {
    position: absolute;
    inset: 8px;
    content: "";
    background:
        radial-gradient(circle, var(--preset-a) 0 2.1px, transparent 2.5px);
    background-size: 7px 7px;
}

.preset-qr-mini i,
.preset-qr-mini b,
.preset-qr-mini em {
    position: absolute;
    width: 19px;
    height: 19px;
    border: 5px solid var(--preset-accent);
    background: var(--preset-bg);
    z-index: 2;
}
.preset-qr-mini i { top: 5px; left: 5px; }
.preset-qr-mini b { top: 5px; right: 5px; }
.preset-qr-mini em { bottom: 5px; left: 5px; }

.qr-final-preview {
    padding: 0.9rem;
    background: rgba(255,255,255,.48);
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    backdrop-filter: blur(10px);
}

.qr-preview-stage {
    background:
        radial-gradient(circle at 30% 20%, rgba(59,130,246,.08), transparent 45%),
        #fff;
    border-color: rgba(148,163,184,.28);
    box-shadow: 0 18px 38px rgba(15,23,42,.08), inset 0 1px 0 #fff;
}

.qr-live-preview-img {
    filter: drop-shadow(0 10px 18px rgba(15,23,42,.12));
}

.qr-live-preview-img.is-updated {
    animation: qrPreviewPop .38s var(--studio-ease) both;
}

.phone-device {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    overflow: hidden;
    background: linear-gradient(145deg, #141414, #050505);
    border-color: #4b5563;
    box-shadow:
        0 0 0 3px #9aa0a6,
        0 22px 52px rgba(15,23,42,.28),
        inset 0 1px 0 rgba(255,255,255,.12);
    transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style: preserve-3d;
    transition: transform .18s ease-out, box-shadow .3s ease;
    animation: phoneFloat 6s ease-in-out infinite;
}

.phone-device::after {
    position: absolute;
    top: -35%;
    left: -65%;
    width: 50%;
    height: 175%;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    transform: rotate(25deg);
    animation: phoneSheen 7.5s ease-in-out infinite;
    z-index: 5;
}

.phone-device:hover {
    box-shadow:
        0 0 0 3px #aab2bd,
        0 30px 70px rgba(15,23,42,.34),
        inset 0 1px 0 rgba(255,255,255,.16);
}

.phone-card-preview {
    overflow: hidden !important;
    scrollbar-width: none;
    overscroll-behavior: none;
}

.phone-card-preview::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.phone-card-list p {
    padding: 0.62rem 0.72rem;
}

.phone-card-list > div {
    padding: 0.62rem 0.68rem;
}

.btn-primary,
.btn-success,
.qct-step-card .btn {
    position: relative;
    overflow: hidden;
    transition: transform .22s var(--studio-ease), box-shadow .22s ease;
}

.btn-primary::after,
.btn-success::after,
.qct-step-card .btn::after {
    position: absolute;
    top: -140%;
    left: -45%;
    width: 30%;
    height: 380%;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.36), transparent);
    transform: rotate(25deg);
    transition: left .6s var(--studio-ease);
}

.btn-primary:hover,
.btn-success:hover,
.qct-step-card .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(15,23,42,.16);
}

.btn-primary:hover::after,
.btn-success:hover::after,
.qct-step-card .btn:hover::after {
    left: 125%;
}

.motion-enabled .motion-reveal {
    opacity: 0;
    transform: translateY(18px) scale(.99);
    transition: opacity .55s var(--studio-ease), transform .55s var(--studio-ease);
}

.motion-enabled .motion-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@keyframes studioTabIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes qrPreviewPop {
    0% { opacity: .45; transform: scale(.965); filter: drop-shadow(0 2px 6px rgba(15,23,42,.05)); }
    100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 10px 18px rgba(15,23,42,.12)); }
}

@keyframes phoneFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
}

@keyframes phoneSheen {
    0%, 62% { left: -70%; opacity: 0; }
    70% { opacity: 1; }
    86% { left: 130%; opacity: .6; }
    100% { left: 130%; opacity: 0; }
}

@media (max-width: 1200px) {
    .option-grid-expanded,
    .frame-grid { grid-template-columns: repeat(4, minmax(88px, 1fr)); }
    .preset-grid-expanded { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
}

@media (max-width: 767.98px) {
    .option-grid-expanded,
    .frame-grid { grid-template-columns: repeat(3, minmax(82px, 1fr)); }
    .preset-grid-expanded { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
    .qct-tabs .nav-link { flex-direction: column; gap: .15rem; min-height: 58px; font-size: .7rem; }
}

@media (max-width: 480px) {
    .option-grid-expanded,
    .frame-grid { grid-template-columns: repeat(2, minmax(88px, 1fr)); }
    .preset-grid-expanded { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
}

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

    .motion-enabled .motion-reveal {
        opacity: 1;
        transform: none;
    }
}


/* Asset-backed production polish */
.studio-step-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(rgba(255,255,255,.78), rgba(248,250,252,.88)),
        url("../img/qr-studio/decor/studio-mesh.svg") center / cover no-repeat;
    border-color: rgba(148,163,184,.30);
    box-shadow:
        0 24px 60px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.studio-step-card::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 12%, rgba(255,255,255,.86), transparent 24%),
        linear-gradient(115deg, transparent 18%, rgba(255,255,255,.42) 38%, transparent 58%);
    background-size: auto, 220% 100%;
    animation: studioSurfaceSheen 11s ease-in-out infinite;
}

.studio-step-title {
    position: relative;
    z-index: 2;
}

.studio-live-chip {
    display: inline-flex;
    gap: .42rem;
    align-items: center;
    margin-left: auto;
    padding: .38rem .7rem;
    color: #0f766e;
    background: rgba(240,253,250,.72);
    border: 1px solid rgba(45,212,191,.34);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(13,148,136,.08);
    backdrop-filter: blur(12px);
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.studio-live-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(34,197,94,.35);
    animation: studioLivePulse 2.2s ease-out infinite;
}

.studio-step-card .qr-tabs-panel,
.studio-step-card .qr-final-preview {
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(255,255,255,.78);
    box-shadow:
        0 22px 52px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter: blur(18px) saturate(1.12);
}

.studio-step-card .qct-tabs {
    background: rgba(226,232,240,.60);
    border-bottom: 1px solid rgba(148,163,184,.18);
    backdrop-filter: blur(12px);
}

.studio-asset-preview,
.frame-asset-preview,
.preset-asset-preview {
    position: relative;
    display: grid;
    place-items: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}

.studio-asset-preview img,
.frame-asset-preview img,
.preset-asset-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 7px 10px rgba(15,23,42,.07));
    transition:
        transform .28s var(--studio-ease),
        filter .28s ease;
}

.studio-asset-preview {
    width: 82px;
    height: 82px;
}

.frame-asset-preview {
    width: 88px;
    height: 102px;
}

.frame-asset-preview img {
    width: 88px;
    height: 102px;
}

.qr-style-option:hover .studio-asset-preview img,
.frame-style-option:hover .frame-asset-preview img,
.preset-card-visual:hover .preset-asset-preview img {
    transform: translateY(-3px) scale(1.045);
    filter: drop-shadow(0 13px 16px rgba(15,23,42,.13));
}

.qr-style-option.is-selected .studio-asset-preview img,
.frame-style-option.is-selected .frame-asset-preview img {
    filter: drop-shadow(0 10px 16px rgba(37,99,235,.19));
}

/* The asset artwork replaces the older CSS-only demo drawings. */
.studio-asset-preview::before,
.studio-asset-preview::after,
.frame-asset-preview::before,
.frame-asset-preview::after,
.frame-asset-preview i,
.frame-asset-preview b,
.preset-asset-preview::before,
.preset-asset-preview i,
.preset-asset-preview b,
.preset-asset-preview em {
    display: none !important;
}

.preset-grid-expanded {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.preset-card-visual {
    min-height: 226px;
    padding: .78rem .68rem .9rem;
    background:
        radial-gradient(circle at var(--gloss-x, 50%) var(--gloss-y, 12%), rgba(255,255,255,.96), transparent 38%),
        linear-gradient(155deg, rgba(255,255,255,.96), rgba(241,245,249,.82));
}

.preset-asset-preview {
    width: 112px;
    height: 140px;
    margin: 0 auto .35rem;
}

.preset-card-visual strong {
    color: #0f172a;
    font-size: .86rem;
}

.preset-card-visual > span:last-child {
    color: #64748b;
    font-size: .7rem;
}

.qr-style-option,
.frame-style-option,
.preset-card-visual {
    --gloss-x: 50%;
    --gloss-y: 25%;
    will-change: transform;
}

.qr-style-option {
    background:
        radial-gradient(circle at var(--gloss-x) var(--gloss-y), rgba(255,255,255,.98), transparent 42%),
        linear-gradient(160deg, #fff, #f8fafc);
}

.frame-style-option {
    background:
        radial-gradient(circle at var(--gloss-x) var(--gloss-y), rgba(255,255,255,.98), transparent 42%),
        linear-gradient(160deg, #fff, #f8fafc);
}

.qr-style-option.selection-pop,
.frame-style-option.selection-pop,
.preset-card-visual.selection-pop {
    animation: studioSelectionPop .42s var(--studio-ease);
}

/* Premium device shell. The screen remains deliberately non-scrollable. */
.phone-device {
    width: 252px;
    height: 506px;
    padding: 11px;
    overflow: visible;
    background:
        linear-gradient(145deg, #56606c 0%, #171b21 17%, #050608 55%, #2e3742 100%);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
        0 0 0 2px #8d96a0,
        0 0 0 4px #252b31,
        0 32px 74px rgba(15,23,42,.36),
        inset 0 1px 0 rgba(255,255,255,.26),
        inset 0 -1px 0 rgba(255,255,255,.08);
}

.phone-device::before {
    top: 9px;
    width: 74px;
    height: 21px;
    background: #020304;
    border: 1px solid rgba(255,255,255,.04);
    border-radius: 999px;
    box-shadow: inset 0 1px 3px rgba(255,255,255,.05), 0 1px 1px rgba(255,255,255,.04);
}

.phone-side-control {
    position: absolute;
    display: block;
    width: 4px;
    background: linear-gradient(#58616b, #171b20 50%, #4a535d);
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px rgba(15,23,42,.34);
}

.phone-side-control-volume-up { top: 105px; left: -7px; height: 42px; }
.phone-side-control-volume-down { top: 157px; left: -7px; height: 42px; }
.phone-side-control-power { top: 126px; right: -7px; height: 68px; }

.phone-statusbar {
    position: absolute;
    top: 16px;
    right: 23px;
    left: 23px;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
    font-size: .48rem;
    font-weight: 900;
    letter-spacing: .01em;
}

.phone-status-icons {
    display: inline-flex;
    gap: .22rem;
    align-items: center;
    font-size: .52rem;
}

.phone-screen-glass {
    position: absolute;
    inset: 11px;
    z-index: 8;
    pointer-events: none;
    background: url("../img/qr-studio/decor/phone-glass.svg") center / cover no-repeat;
    border-radius: 27px;
    opacity: .72;
    mix-blend-mode: screen;
}

.phone-card-preview {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow: hidden !important;
    border-radius: 27px;
    scrollbar-width: none !important;
    -ms-overflow-style: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.phone-card-preview::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.phone-home-indicator {
    position: absolute;
    right: 50%;
    bottom: 17px;
    z-index: 10;
    width: 74px;
    height: 4px;
    background: rgba(15,23,42,.72);
    border-radius: 999px;
    transform: translateX(50%);
    pointer-events: none;
    box-shadow: 0 1px 0 rgba(255,255,255,.18);
}

.phone-card-header {
    padding-top: 1.85rem;
}

.phone-card-list > div {
    transition: background .2s ease, transform .2s ease;
}

.phone-device:hover .phone-card-list > div:nth-child(2) { transform: translateX(1px); }
.phone-device:hover .phone-card-list > div:nth-child(3) { transform: translateX(2px); }
.phone-device:hover .phone-card-list > div:nth-child(4) { transform: translateX(3px); }

.qr-preview-stage {
    isolation: isolate;
    background:
        radial-gradient(circle at 28% 18%, rgba(59,130,246,.12), transparent 34%),
        radial-gradient(circle at 78% 82%, rgba(168,85,247,.08), transparent 34%),
        rgba(255,255,255,.88);
    box-shadow: inset 0 1px 0 #fff, 0 14px 36px rgba(15,23,42,.07);
}

.qr-preview-stage::before {
    position: absolute;
    inset: -50%;
    z-index: -1;
    content: "";
    background: conic-gradient(from 90deg, transparent 0 18%, rgba(56,189,248,.06) 24%, transparent 31% 62%, rgba(139,92,246,.05) 70%, transparent 78%);
    animation: studioPreviewOrbit 18s linear infinite;
}

@keyframes studioSurfaceSheen {
    0%, 100% { background-position: 0 0, 140% 0; }
    50% { background-position: 0 0, -110% 0; }
}

@keyframes studioLivePulse {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,.35); }
    72%,100% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}

@keyframes studioSelectionPop {
    0% { transform: scale(.96); }
    55% { transform: translateY(-3px) scale(1.025); }
    100% { transform: scale(1); }
}

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

@media (max-width: 991px) {
    .studio-live-chip { margin-left: 0; }
    .preset-grid-expanded { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}

@media (max-width: 640px) {
    .preset-grid-expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .preset-asset-preview { width: 104px; height: 130px; }
    .phone-device { width: 244px; height: 492px; }
}

@media (prefers-reduced-motion: reduce) {
    .studio-step-card::before,
    .studio-live-dot,
    .qr-preview-stage::before,
    .solution-experience-card,
    .qr-style-option.selection-pop,
    .frame-style-option.selection-pop,
    .preset-card-visual.selection-pop {
        animation: none !important;
    }
}


/* Step 3 centering and workspace expansion */
@media (min-width: 992px) {
    .builder-form-wide {
        width: 100%;
        max-width: 1540px;
        margin-inline: auto;
    }

    .studio-step-card .qr-customizer-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 1.5rem;
    }

    .studio-step-card .qct-tabs {
        width: min(100%, 820px);
        grid-template-columns: repeat(6, minmax(108px, 1fr));
        justify-content: center;
        margin-inline: auto;
        padding-inline: .6rem;
        border-radius: 14px 14px 0 0;
    }

    .studio-step-card .qct-tab-content {
        padding: 1.35rem 1.5rem 1.6rem;
    }

    .studio-step-card .studio-tab-heading {
        max-width: 820px;
        margin-right: auto;
        margin-left: auto;
    }

    .studio-step-card .option-grid-expanded,
    .studio-step-card .frame-grid {
        grid-template-columns: repeat(4, minmax(126px, 148px));
        justify-content: center;
        align-items: stretch;
        gap: 1rem 1.05rem;
        width: 100%;
        margin-inline: auto;
    }

    .studio-step-card .qr-style-option {
        width: 100%;
        min-height: 150px;
        padding: .8rem .7rem .72rem;
    }

    .studio-step-card .frame-style-option {
        width: 100%;
        min-height: 166px;
        padding: .8rem .65rem .72rem;
    }

    .studio-step-card .studio-asset-preview {
        width: 96px;
        height: 96px;
    }

    .studio-step-card .frame-asset-preview,
    .studio-step-card .frame-asset-preview img {
        width: 102px;
        height: 118px;
    }

    .studio-step-card .preset-grid-expanded {
        max-width: 860px;
        grid-template-columns: repeat(4, minmax(150px, 1fr));
        justify-content: center;
        margin-inline: auto;
        gap: 1rem;
    }

    .studio-step-card .qr-final-preview {
        width: 320px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .studio-step-card .option-grid-expanded,
    .studio-step-card .frame-grid {
        grid-template-columns: repeat(3, minmax(126px, 148px));
    }

    .studio-step-card .preset-grid-expanded {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

@media (max-width: 991.98px) {
    .builder-form-wide {
        width: 100%;
    }

    .studio-step-card .qct-tabs {
        justify-content: center;
    }

    .studio-step-card .option-grid-expanded,
    .studio-step-card .frame-grid,
    .studio-step-card .preset-grid-expanded {
        justify-content: center;
    }
}


/* ==========================================================================\n   Step 1 template gallery refresh + compact dashboard cards\n   ========================================================================== */

/* Step 1 gallery: the first five cards intentionally mirror full contact-card
   layouts rather than generic skeleton thumbnails. */
.template-picker {
    grid-template-columns: repeat(5, minmax(155px, 1fr));
    gap: 1.5rem 1.1rem;
}

.template-option {
    min-width: 0;
}

.template-phone {
    width: min(100%, 178px);
    height: 372px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 17px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.06);
    transition: transform 220ms ease, box-shadow 220ms ease, outline-color 180ms ease;
}

.template-option:hover .template-phone {
    transform: translateY(-6px) scale(1.012);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.2), 0 4px 12px rgba(15, 23, 42, 0.08);
}

.template-option.is-selected .template-phone {
    outline: 4px solid rgba(37, 99, 235, 0.3);
    outline-offset: 4px;
    transform: translateY(-4px);
}

.template-avatar {
    overflow: hidden;
    background: #dbeafe;
}

.template-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.template-description-sample,
.template-contact-list {
    display: none;
}

.template-description-sample {
    color: #667085;
    font-size: 0.45rem;
    text-align: center;
}

.template-contact-list {
    flex-direction: column;
}

.template-contact-row {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    min-height: 47px;
    padding: 0.58rem 0.65rem;
    border-top: 1px solid #dbe3ea;
}

.template-contact-row > i {
    color: #334155;
    font-size: 0.62rem;
}

.template-contact-row > span {
    display: grid;
    min-width: 0;
}

.template-contact-row small {
    color: #a0aec0;
    font-size: 0.37rem;
    line-height: 1.2;
}

.template-contact-row strong {
    overflow: hidden;
    color: #475569;
    font-size: 0.42rem;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-phone-classic .template-description-sample,
.template-phone-classic .template-contact-list,
.template-phone-minimal .template-description-sample,
.template-phone-minimal .template-contact-list,
.template-phone-portrait .template-description-sample,
.template-phone-portrait .template-contact-list,
.template-phone-aurora .template-description-sample,
.template-phone-aurora .template-contact-list,
.template-phone-curve .template-description-sample,
.template-phone-curve .template-contact-list {
    display: flex;
}

.template-phone-classic .template-lines,
.template-phone-minimal .template-lines,
.template-phone-portrait .template-lines,
.template-phone-aurora .template-lines,
.template-phone-curve .template-lines {
    display: none;
}

/* 1 — Classic list */
.template-phone-classic {
    background: #eef3f6;
}

.template-phone-classic .template-head {
    height: 118px;
    background: linear-gradient(145deg, #4f8fe9, #3477d8);
}

.template-phone-classic .template-avatar {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255, 255, 255, 0.92);
}

.template-phone-classic .template-actions {
    height: 31px;
    background: #3f83df;
}

.template-phone-classic .template-description-sample {
    display: block;
    padding: 0.65rem 0.4rem;
}

/* 2 — Wave photo hero */
.template-phone-minimal {
    padding-top: 0;
    background: #eef3f6;
}

.template-phone-minimal .template-head {
    position: relative;
    width: 100%;
    height: 170px;
    margin: 0;
    padding: 0.8rem 0.7rem 0.3rem;
    overflow: visible;
    background: #fff;
    border-radius: 0;
}

.template-phone-minimal .template-head::before {
    position: absolute;
    inset: 0 0 44px;
    content: "";
    background: linear-gradient(145deg, #4f8fe9, #3477d8);
    border-radius: 0 0 52% 13%;
}

.template-phone-minimal .template-head strong,
.template-phone-minimal .template-head small {
    position: relative;
    z-index: 2;
    color: #fff;
}

.template-phone-minimal .template-avatar {
    position: absolute;
    z-index: 3;
    bottom: -3px;
    left: 50%;
    width: 92px;
    height: 92px;
    margin: 0;
    border: 5px solid #fff;
    transform: translateX(-50%);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}

.template-phone-minimal .template-actions {
    width: calc(100% - 26px);
    height: 44px;
    margin: 8px auto 0;
    gap: 5px;
    background: transparent;
    border-radius: 0;
}

.template-phone-minimal .template-actions b {
    flex-direction: column;
    gap: 1px;
    color: #fff;
    background: #4287e2;
    border: 0;
    border-radius: 6px;
    font-size: 0.38rem;
}

.template-phone-minimal .template-description-sample {
    justify-content: center;
    padding: 0.55rem 0.3rem 0.35rem;
}

.template-phone-minimal .template-contact-list {
    gap: 7px;
    padding: 0 0.65rem 0.65rem;
}

.template-phone-minimal .template-contact-row {
    min-height: 43px;
    background: #fff;
    border: 0;
    border-radius: 7px;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.04);
}

/* 3 — Studio floating profile card */
.template-phone-portrait {
    padding-top: 0;
    background: #eaf0f4;
}

.template-phone-portrait .template-head {
    position: relative;
    height: 174px;
    justify-content: end;
    padding: 0 0.75rem 0.85rem;
    color: #fff;
    background: linear-gradient(180deg, #eef3f6 0 38%, #4d8ae0 38% 100%);
}

.template-phone-portrait .template-avatar {
    position: absolute;
    top: 15px;
    left: 50%;
    width: 66px;
    height: 66px;
    border: 4px solid #fff;
    transform: translateX(-50%);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
}

.template-phone-portrait .template-actions {
    position: relative;
    z-index: 2;
    width: calc(100% - 22px);
    height: 35px;
    margin: -10px auto 0;
    overflow: hidden;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.1);
}

.template-phone-portrait .template-actions b {
    color: #3f83df;
    border-color: #dbeafe;
}

.template-phone-portrait .template-description-sample {
    justify-content: center;
    padding: 0.65rem 0.35rem 0.4rem;
}

.template-phone-portrait .template-contact-row > i {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    color: #4388e1;
    background: #fff;
    border-radius: 50%;
}

/* 4 — Hero */
.template-phone-aurora {
    background: #edf2f6;
}

.template-phone-aurora .template-head {
    height: 220px;
    justify-content: end;
    padding-bottom: 1rem;
    background: linear-gradient(145deg, #4f8fe9, #3477d8);
}

.template-phone-aurora .template-avatar {
    width: 126px;
    height: 126px;
    border: 4px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2);
}

.template-phone-aurora .template-actions {
    position: relative;
    z-index: 2;
    width: calc(100% - 20px);
    height: 45px;
    margin: -8px auto 0;
    gap: 5px;
    background: transparent;
}

.template-phone-aurora .template-actions b {
    flex-direction: column;
    color: #3e82dc;
    background: #fff;
    border: 0;
    border-radius: 6px;
}

.template-phone-aurora .template-description-sample {
    justify-content: center;
    padding: 0.6rem 0.3rem 0.35rem;
}

.template-phone-aurora .template-contact-list {
    gap: 6px;
    padding: 0 0.65rem 0.65rem;
}

.template-phone-aurora .template-contact-row {
    min-height: 43px;
    background: #fff;
    border: 0;
    border-radius: 6px;
}

/* 5 — Editorial full photo cover */
.template-phone-curve {
    background: #eef3f6;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.template-phone-curve::before {
    display: none;
}

.template-phone-curve .template-head {
    position: relative;
    height: 202px;
    padding: 0;
    overflow: hidden;
    color: #0f172a;
    background: #dfe7ec;
}

.template-phone-curve .template-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 174px;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.template-phone-curve .template-avatar::after {
    position: absolute;
    right: -16px;
    bottom: -12px;
    left: -16px;
    height: 42px;
    content: "";
    background: #eef3f6;
    border-top: 5px solid #4589e4;
    border-radius: 50% 50% 0 0;
}

.template-phone-curve .template-head strong,
.template-phone-curve .template-head small {
    position: relative;
    z-index: 3;
    top: 145px;
    color: #0f172a;
}

.template-phone-curve .template-head strong {
    font-size: 0.72rem;
}

.template-phone-curve .template-actions {
    display: flex;
    height: auto;
    flex-direction: column;
    gap: 5px;
    padding: 0.2rem 0.65rem 0;
    background: transparent;
}

.template-phone-curve .template-actions b {
    min-height: 28px;
    color: #fff;
    background: #4689e2;
    border: 0;
    border-radius: 999px;
}

.template-phone-curve .template-description-sample {
    justify-content: center;
    padding: 0.45rem 0.3rem 0.3rem;
}

.template-phone-curve .template-contact-list {
    padding-bottom: 0.4rem;
}

.template-phone-curve .template-contact-row {
    min-height: 42px;
}

/* Bring the live phone versions of the first five closer to the Step 1 cards. */
.phone-card-preview.live-template-minimal {
    padding-top: 0;
    background: #edf2f6;
}

.phone-card-preview.live-template-minimal .phone-card-header {
    position: relative;
    width: 100%;
    min-height: 208px;
    margin: 0;
    padding-top: 1.4rem;
    overflow: visible;
    background: linear-gradient(145deg, var(--card-bg), var(--card-bg-2));
    border-radius: 0 0 42% 10%;
    box-shadow: none;
}

.phone-card-preview.live-template-minimal .phone-card-header img {
    width: 104px;
    height: 104px;
    border-width: 5px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.22);
}

.phone-card-preview.live-template-minimal .phone-card-actions {
    width: calc(100% - 34px);
    margin: 12px auto 10px;
    border-radius: 10px;
}

.phone-card-preview.live-template-portrait {
    background: #edf2f6;
}

.phone-card-preview.live-template-portrait .phone-card-header {
    position: relative;
    min-height: 205px;
    justify-content: end;
    padding-bottom: 1.2rem;
    background: linear-gradient(180deg, #edf2f6 0 36%, var(--preview-header-bg) 36% 100%);
}

.phone-card-preview.live-template-portrait .phone-card-header img {
    position: absolute;
    top: 22px;
    width: 96px;
    height: 96px;
}

.phone-card-preview.live-template-portrait .phone-card-actions {
    width: calc(100% - 30px);
    margin: -12px auto 10px;
    color: var(--card-bg);
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.phone-card-preview.live-template-aurora .phone-card-header {
    min-height: 258px;
    justify-content: end;
    padding-bottom: 1.35rem;
}

.phone-card-preview.live-template-aurora .phone-card-header img {
    width: 128px;
    height: 128px;
}

.phone-card-preview.live-template-curve .phone-card-header {
    min-height: 235px;
    justify-content: end;
    padding-bottom: 1.1rem;
    overflow: hidden;
    background: linear-gradient(180deg, #dfe7ec 0 74%, #fff 74% 100%);
}

.phone-card-preview.live-template-curve .phone-card-header::after {
    position: absolute;
    right: -30px;
    bottom: 34px;
    left: -30px;
    height: 56px;
    content: "";
    background: #fff;
    border-top: 7px solid var(--card-bg);
    border-radius: 50% 50% 0 0;
}

.phone-card-preview.live-template-curve .phone-card-header img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 185px;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    box-shadow: none;
}

.phone-card-preview.live-template-curve .phone-card-header strong,
.phone-card-preview.live-template-curve .phone-card-header small {
    position: relative;
    z-index: 2;
}

.phone-card-preview.live-template-curve .phone-card-actions {
    width: calc(100% - 30px);
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 10px auto;
    background: transparent;
}

.phone-card-preview.live-template-curve .phone-card-actions span {
    min-height: 28px;
    color: #fff;
    background: var(--card-button, var(--card-bg));
    border: 0;
    border-radius: 999px;
}

/* Public profile counterparts for the refreshed first five template families. */
.tiger-template-minimal .tiger-profile-header {
    position: relative;
    margin: 0;
    padding: 3rem 1.5rem 2rem;
    overflow: visible;
    border-radius: 0 0 44% 10%;
}

.tiger-template-minimal .tiger-profile-header img {
    width: 126px;
    height: 126px;
    border-width: 5px;
}

.tiger-template-minimal .tiger-action-bar {
    width: calc(100% - 2rem);
    margin: 1.25rem auto 0;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.tiger-template-portrait .tiger-profile-header {
    position: relative;
    min-height: 310px;
    justify-content: end;
    padding-bottom: 2rem;
    background: linear-gradient(180deg, #edf2f6 0 35%, var(--profile-header-bg) 35% 100%);
}

.tiger-template-portrait .tiger-profile-header img {
    position: absolute;
    top: 2rem;
    width: 124px;
    height: 124px;
}

.tiger-template-portrait .tiger-action-bar {
    width: calc(100% - 2rem);
    margin: -18px auto 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.tiger-template-aurora .tiger-profile-header img {
    width: 148px;
    height: 148px;
}

.tiger-template-curve .tiger-profile-header {
    position: relative;
    min-height: 390px;
    justify-content: end;
    padding: 0 1.5rem 2rem;
    overflow: hidden;
    color: #0f172a;
    background: #e5edf2;
    border-radius: 0;
}

.tiger-template-curve .tiger-profile-header::after {
    position: absolute;
    right: -3rem;
    bottom: 2.8rem;
    left: -3rem;
    height: 82px;
    content: "";
    background: #fff;
    border-top: 8px solid var(--profile-bg);
    border-radius: 50% 50% 0 0;
}

.tiger-template-curve .tiger-profile-header img {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 290px;
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    box-shadow: none;
}

.tiger-template-curve .tiger-profile-header h1,
.tiger-template-curve .tiger-profile-header p {
    position: relative;
    z-index: 2;
    color: #0f172a;
}

.tiger-template-curve .tiger-action-bar {
    display: grid;
    width: calc(100% - 2rem);
    grid-template-columns: 1fr;
    gap: 0.45rem;
    margin: 1rem auto;
    background: transparent;
}

.tiger-template-curve .tiger-action-bar a {
    min-height: 48px;
    flex-direction: row;
    color: #fff;
    background: var(--profile-button, var(--profile-bg));
    border: 0;
    border-radius: 999px;
}

/* Dashboard campaign cards: information-dense and substantially shorter. */
.dashboard-campaign-grid .qr-card-compact {
    overflow: visible;
    border: 1px solid rgba(203, 213, 225, 0.78);
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.055);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.dashboard-campaign-grid .qr-card-compact:hover {
    z-index: 2;
    border-color: rgba(37, 99, 235, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
}

.qr-card-compact-main {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 0.85rem;
    padding: 0.85rem;
}

.qr-card-compact .qr-card-top {
    min-height: 112px;
    align-self: start;
    overflow: hidden;
    border-radius: 14px;
}

.qr-card-compact .qr-img {
    width: 92px;
    height: 92px;
    max-width: none;
    max-height: none;
    padding: 4px;
    border-radius: 10px;
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.12);
}

.qr-card-meta {
    min-width: 0;
}

.qr-card-meta .badge {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.63rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qr-card-title {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 0.18rem;
    color: #0f172a;
    font-size: 0.98rem;
    font-weight: 850;
    line-height: 1.22;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.qr-card-person,
.qr-card-slug {
    overflow: hidden;
    margin: 0 0 0.22rem;
    color: #64748b;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qr-card-slug {
    color: #94a3b8;
}

.qr-card-compact .qr-style-summary {
    overflow: hidden;
    color: #64748b;
    font-size: 0.64rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qr-card-footer {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0.55rem 0.7rem;
    background: #f8fafc;
    border-top: 1px solid #e7edf4;
    border-radius: 0 0 18px 18px;
}

.qr-card-footer .scan-count {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 850;
    white-space: nowrap;
}

.qr-card-actions {
    display: flex;
    gap: 0.28rem;
    align-items: center;
}

.qr-card-actions > .btn,
.qr-card-actions .dropdown > .btn {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    padding: 0;
    border-radius: 9px;
}

.qr-card-actions .dropdown-toggle::after {
    margin: 0;
}

.qr-card-actions .dropdown-menu form {
    margin: 0;
}

@media (max-width: 1499.98px) {
    .template-picker {
        grid-template-columns: repeat(4, minmax(155px, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .template-picker {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .template-picker {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
        gap: 1.1rem 0.8rem;
    }

    .qr-card-compact-main {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .qr-card-compact .qr-card-top {
        min-height: 96px;
    }

    .qr-card-compact .qr-img {
        width: 78px;
        height: 78px;
    }
}

@media (max-width: 479.98px) {
    .template-picker {
        grid-template-columns: 1fr;
    }

    .template-phone {
        width: 190px;
    }
}


/* Compact dashboard KPI and filter deck */
.dashboard-control-deck {
    display: grid;
    gap: 0.75rem;
}

.dashboard-summary.dashboard-summary-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.summary-card.summary-card-compact {
    display: flex;
    min-height: 72px;
    gap: 0.7rem;
    align-items: center;
    padding: 0.72rem 0.85rem;
    border-radius: 15px;
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.045);
}

.summary-card-compact .summary-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 11px;
    font-size: 1rem;
}

.summary-icon-blue {
    color: #1d4ed8;
    background: #dbeafe;
}

.summary-icon-violet {
    color: #6d28d9;
    background: #ede9fe;
}

.summary-icon-amber {
    color: #b45309;
    background: #fef3c7;
}

.summary-icon-emerald {
    color: #047857;
    background: #d1fae5;
}

.summary-card-compact .summary-copy {
    display: grid;
    min-width: 0;
    gap: 0.06rem;
}

.summary-card-compact .summary-copy small {
    overflow: hidden;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    line-height: 1.15;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.summary-card-compact .summary-copy strong {
    color: #0f172a;
    font-size: 1.45rem;
    line-height: 1.05;
}

.dashboard-filter-bar.dashboard-filter-compact {
    display: grid;
    grid-template-columns: auto minmax(220px, 380px) auto auto;
    gap: 0.55rem;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 0.48rem 0.55rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(203, 213, 225, 0.78);
    border-radius: 15px;
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.045);
}

.dashboard-filter-label {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    padding-left: 0.35rem;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.dashboard-filter-compact .form-select {
    min-height: 38px;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    border-radius: 10px;
    font-size: 0.82rem;
}

.dashboard-filter-compact .btn {
    min-height: 38px;
    border-radius: 10px;
}

.dashboard-filter-button {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

.dashboard-filter-clear {
    display: grid;
    width: 38px;
    padding: 0;
    place-items: center;
}

@media (max-width: 991px) {
    .dashboard-summary.dashboard-summary-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dashboard-summary.dashboard-summary-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .summary-card.summary-card-compact {
        min-height: 64px;
        padding: 0.58rem 0.62rem;
    }

    .summary-card-compact .summary-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .summary-card-compact .summary-copy strong {
        font-size: 1.25rem;
    }

    .dashboard-filter-bar.dashboard-filter-compact {
        width: 100%;
        grid-template-columns: 1fr auto;
    }

    .dashboard-filter-label {
        grid-column: 1 / -1;
        padding-left: 0;
    }

    .dashboard-filter-compact .form-select {
        min-width: 0;
    }

    .dashboard-filter-clear {
        grid-column: 2;
    }
}

/* QR solution expansion: additive to the existing vCard builder. */
.solution-selector-card {
    overflow: hidden;
    padding: 1.1rem;
    background:
        radial-gradient(circle at 10% -30%, rgba(59, 130, 246, 0.16), transparent 34%),
        linear-gradient(135deg, #0f5ca8 0%, #1269bb 55%, #0d579d 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 18px 38px rgba(15, 83, 155, 0.18);
}

.solution-selector-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.solution-selector-heading h2 {
    margin: 0.15rem 0 0.35rem;
    font-size: 1.1rem;
    font-weight: 800;
}

.solution-selector-heading p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.88rem;
}

.solution-selector-heading .btn {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
}

.solution-selector-heading .btn:hover {
    color: #0e5ca7;
    background: #fff;
}

.solution-kicker {
    display: inline-flex;
    padding: 0.28rem 0.58rem;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.solution-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
    gap: 0.55rem;
}

.solution-toolbar.more-solutions {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.solution-chip {
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 0.4rem;
    color: #fff;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.solution-chip i {
    font-size: 1.35rem;
    line-height: 1;
}

.solution-chip span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.74rem;
    font-weight: 700;
}

.solution-chip:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
}

.solution-chip.is-active {
    color: #0e5ca7;
    background: #fff;
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 26px rgba(6, 42, 78, 0.2);
}

.solution-config-shell {
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

.solution-config-title {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.solution-config-title strong,
.solution-config-title small {
    display: block;
}

.solution-config-title strong {
    font-size: 1rem;
}

.solution-config-title small {
    margin-top: 0.15rem;
    color: #64748b;
}

.solution-config-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #1673d2, #27a4ed);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(22, 115, 210, 0.24);
}

.solution-panel {
    animation: solutionPanelIn 180ms ease both;
}

@keyframes solutionPanelIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.solution-upload-zone {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1.5rem;
    text-align: center;
    color: #176cc4;
    border: 2px dashed #bdd8ef;
    border-radius: 14px;
    background: #f9fcff;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.solution-upload-zone:hover {
    transform: translateY(-2px);
    border-color: #2f8ee8;
    background: #eef8ff;
}

.solution-upload-zone i {
    font-size: 2rem;
}

.solution-upload-zone strong {
    font-size: 1rem;
}

.solution-upload-zone span {
    color: #64748b;
    font-size: 0.8rem;
}

.solution-upload-zone input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.solution-current-asset {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    margin-top: 0.65rem;
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    background: #eef7ff;
    color: #334155;
    font-size: 0.82rem;
}

.solution-editor {
    min-height: 220px;
}

.solution-side-preview {
    position: sticky;
    top: 86px;
    display: none;
    align-self: start;
    justify-content: center;
    min-width: 0;
    padding-top: 0.5rem;
}

.solution-side-card {
    position: relative;
    top: auto;
    width: 100%;
    max-width: 300px;
    padding: 1.15rem;
    text-align: center;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 255, 0.94)),
        #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 22px;
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.10);
    backdrop-filter: blur(16px);
}

.solution-side-kicker {
    display: inline-flex;
    margin-bottom: 0.9rem;
    padding: 0.3rem 0.55rem;
    color: #475569;
    background: #eef4fb;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.solution-side-icon {
    display: grid;
    width: 64px;
    height: 64px;
    margin: 0 auto 0.8rem;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, #176cc4, #28a5ee);
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(23, 108, 196, 0.24);
}

.solution-side-icon i {
    font-size: 1.75rem;
}

.solution-side-card h3 {
    margin-bottom: 0.45rem;
    font-size: 1.12rem;
}

.solution-side-card p {
    margin-bottom: 1rem;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.55;
}

.solution-side-points {
    display: grid;
    gap: 0.55rem;
    text-align: left;
}

.solution-side-points span {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
}

.solution-side-points i {
    color: #10b981;
}

@media (min-width: 1201px) {
    .builder-with-floating-preview,
    .builder-with-floating-preview.solution-non-vcard {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .builder-with-floating-preview > .qct-flow {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }

    .builder-with-floating-preview > .builder-floating-preview,
    .builder-with-floating-preview > .solution-side-preview {
        grid-column: 2;
        grid-row: 1;
    }

    .builder-with-floating-preview.solution-non-vcard .builder-floating-preview {
        display: none;
    }

    .builder-with-floating-preview.solution-non-vcard .solution-side-preview {
        display: flex;
    }
}

.qr-solution-public {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 15% 10%, rgba(37, 99, 235, 0.14), transparent 32%),
        linear-gradient(180deg, #eef6ff, #f8fafc 54%, #fff);
}

.qr-solution-card {
    width: min(100%, 720px);
    padding: clamp(1.4rem, 4vw, 2.4rem);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    box-shadow: 0 32px 70px rgba(15, 23, 42, 0.14);
}

.qr-solution-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    padding: 0.4rem 0.75rem;
    color: #175eae;
    background: #eaf4ff;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
}

.qr-solution-card h1 {
    margin-bottom: 0.75rem;
    color: #0f172a;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    font-weight: 850;
}

.qr-solution-description {
    color: #64748b;
    line-height: 1.65;
}

.qr-solution-asset,
.qr-solution-copy,
.qr-solution-details > div {
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #f8fbff;
}

.qr-solution-asset {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin: 1rem 0;
}

.qr-solution-asset i {
    color: #176cc4;
    font-size: 1.35rem;
}

.qr-solution-details {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0;
}

.qr-solution-details span {
    display: block;
    margin-bottom: 0.18rem;
    color: #64748b;
    font-size: 0.75rem;
}

.qr-solution-links {
    display: grid;
    gap: 0.7rem;
    margin-top: 1rem;
}

.qr-solution-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #176cc4, #218ee0);
    border-radius: 12px;
    font-weight: 750;
    box-shadow: 0 10px 22px rgba(23, 108, 196, 0.2);
}

.qr-solution-video {
    display: block;
    width: 100%;
    max-height: 480px;
    margin-top: 1rem;
    border-radius: 16px;
    background: #0f172a;
}

@media (max-width: 767.98px) {
    .solution-selector-heading {
        align-items: stretch;
        flex-direction: column;
    }

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

    .solution-chip {
        min-height: 72px;
    }
}

@media (max-width: 1200px) {
  .solution-side-preview {
    display: none !important;
  }
}


/* Branded public profile splash */
.profile-splash {
    --splash-bg: #2563eb;
    --splash-bg-2: #0f4fbf;
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.24), transparent 34%),
        linear-gradient(145deg, var(--splash-bg), var(--splash-bg-2));
    color: #fff;
    animation: profile-splash-exit 2.5s cubic-bezier(.22,.8,.25,1) forwards;
}

.profile-splash::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(112deg, transparent 22%, rgba(255, 255, 255, 0.17) 46%, transparent 68%);
    transform: translateX(-110%);
    animation: profile-splash-shine 1.35s ease-out .18s both;
}

.profile-splash-glow {
    position: absolute;
    width: 22rem;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(42px);
    opacity: 0.22;
    background: #fff;
}

.profile-splash-glow-one {
    top: -10rem;
    right: -7rem;
}

.profile-splash-glow-two {
    bottom: -12rem;
    left: -7rem;
    opacity: 0.13;
}

.profile-splash-card {
    position: relative;
    z-index: 2;
    width: min(88vw, 360px);
    display: grid;
    justify-items: center;
    gap: 1rem;
    text-align: center;
    padding: 1.4rem 1.3rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 1.8rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.08));
    box-shadow:
        0 28px 70px rgba(8, 28, 73, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: profile-splash-card-in .58s cubic-bezier(.2,.85,.25,1) both;
}

.profile-splash-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 18px 34px rgba(3, 18, 55, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.88);
}

.profile-splash-mark img {
    position: relative;
    z-index: 2;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-splash-mark.is-logo {
    width: clamp(112px, 34vw, 220px);
    height: auto;
    min-height: 92px;
    aspect-ratio: var(--logo-ratio, 1);
    padding: 8px;
    border-radius: 24px;
    overflow: hidden;
}

.profile-splash-mark.is-logo.image-aspect-wide {
    width: min(220px, 70vw);
    min-height: 104px;
    border-radius: 24px;
}

.profile-splash-mark.is-logo.image-aspect-tall {
    width: min(116px, 38vw);
    min-height: 132px;
    border-radius: 24px;
}

.profile-splash-mark.is-logo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: .65rem;
    object-fit: contain;
    object-position: center;
}

.profile-splash-ring {
    position: absolute;
    inset: -8px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: inherit;
    animation: profile-splash-ring 1.35s ease-out .22s both;
}

.profile-splash-copy {
    display: grid;
    gap: 0.22rem;
}

.profile-splash-kicker {
    margin-bottom: 0.15rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.78;
}

.profile-splash-copy strong {
    font-family: var(--profile-font, Inter, sans-serif);
    font-size: clamp(1.25rem, 6vw, 1.7rem);
    line-height: 1.15;
}

.profile-splash-copy small {
    max-width: 290px;
    font-size: 0.82rem;
    line-height: 1.4;
    opacity: 0.86;
}

.profile-splash-progress {
    width: 128px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.profile-splash-progress span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.96);
    transform-origin: left;
    animation: profile-splash-progress 1.95s cubic-bezier(.2,.8,.3,1) .28s both;
}

.tiger-profile-page {
    animation: profile-content-reveal .58s cubic-bezier(.2,.8,.25,1) 2.02s both;
}

@keyframes profile-splash-card-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes profile-splash-ring {
    0% {
        opacity: 0;
        transform: scale(.8);
    }
    38% {
        opacity: .9;
    }
    100% {
        opacity: 0;
        transform: scale(1.22);
    }
}

@keyframes profile-splash-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes profile-splash-shine {
    from { transform: translateX(-110%); }
    to { transform: translateX(110%); }
}

@keyframes profile-splash-exit {
    0%, 77% {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@keyframes profile-content-reveal {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.992);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-splash {
        animation-duration: .42s;
    }

    .profile-splash-card,
    .profile-splash-ring,
    .profile-splash-progress span,
    .profile-splash::after,
    .tiger-profile-page {
        animation: none !important;
    }
}


/* Stable wide builder shell: avoids transient 100vw overflow when the browser scrollbar toggles. */
.app-main-wide {
    width: 100%;
    max-width: 1604px;
    margin-inline: auto;
    overflow-x: clip;
}

.app-main-wide .builder-form-wide,
.app-main-wide .builder-with-floating-preview,
.app-main-wide .qct-flow,
.app-main-wide .qct-step-card {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .app-main-wide {
        padding-inline: 0.75rem !important;
    }
}

/* Solution-specific scanner experience preview */
.solution-experience-card {
    padding: 1rem;
    text-align: left;
    overflow: hidden;
    transform: translateZ(0);
    animation: scannerExperienceFloat 6s ease-in-out infinite;
    transition: box-shadow .28s ease, transform .28s ease;
}

.solution-experience-card:hover {
    box-shadow: 0 30px 68px rgba(15, 23, 42, 0.16);
}

@keyframes scannerExperienceFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
}

.solution-experience-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.solution-experience-topline .solution-side-kicker {
    margin: 0;
}

.solution-experience-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.28rem 0.5rem;
    border: 1px solid #dce7f3;
    border-radius: 999px;
    color: #64748b;
    background: rgba(248, 250, 252, 0.88);
    font-size: 0.65rem;
    font-weight: 800;
    white-space: nowrap;
}

.solution-experience-status i {
    font-size: 0.44rem;
}

.solution-experience-status.is-ready {
    color: #047857;
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.solution-experience-status.is-waiting {
    color: #b45309;
    border-color: #fde68a;
    background: #fffbeb;
}

.solution-experience-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.solution-experience-heading .solution-side-icon {
    width: 54px;
    height: 54px;
    margin: 0;
    border-radius: 16px;
}

.solution-experience-heading .solution-side-icon i {
    font-size: 1.45rem;
}

.solution-experience-heading p {
    margin: 0 0 0.12rem;
    color: #94a3b8;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.solution-experience-heading h3 {
    margin: 0 0 0.12rem;
    color: #0f172a;
    font-size: 1rem;
}

.solution-experience-heading > div > span {
    display: block;
    overflow: hidden;
    color: #64748b;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.solution-experience-device {
    position: relative;
    padding: 0.8rem 0.65rem 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 22px;
    background: linear-gradient(180deg, #192334 0%, #0f172a 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 16px 34px rgba(15, 23, 42, 0.14);
}

.solution-experience-notch {
    position: absolute;
    z-index: 2;
    top: 0.32rem;
    left: 50%;
    width: 48px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 99px;
    background: rgba(255,255,255,0.25);
}

.solution-experience-screen {
    min-width: 0;
    min-height: 318px;
    overflow: hidden;
    border-radius: 16px;
    background:
        radial-gradient(circle at 85% 0%, rgba(56, 189, 248, 0.14), transparent 38%),
        linear-gradient(180deg, #f8fbff 0%, #eef5fc 100%);
}

.solution-experience-screen > * {
    animation: solutionExperienceReveal 260ms ease both;
}

@keyframes solutionExperienceReveal {
    from { opacity: 0; transform: translateY(5px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.solution-experience-footer {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 0.8rem;
    color: #64748b;
    font-size: 0.7rem;
    line-height: 1.45;
}

.solution-experience-footer i {
    flex: 0 0 auto;
    margin-top: 0.08rem;
    color: #0ea5e9;
}

.experience-browser,
.experience-file-card,
.experience-media-card,
.experience-video-card,
.experience-link-page,
.experience-landing-page,
.experience-routing-card,
.experience-wifi-card,
.experience-chat-card,
.experience-event-card,
.experience-map-card,
.experience-note-card,
.experience-email-card,
.experience-generic-card {
    min-height: 318px;
}

.experience-browser {
    background: #fff;
}

.experience-browser-bar {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.28rem;
    padding: 0.65rem;
    border-bottom: 1px solid #e8eef5;
    background: #f8fafc;
}

.experience-browser-bar > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd5e1;
}

.experience-browser-bar b {
    overflow: hidden;
    margin-left: 0.25rem;
    padding: 0.25rem 0.45rem;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    font-size: 0.62rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.experience-browser-content {
    display: flex;
    min-height: 266px;
    padding: 1.25rem 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.experience-brand-mark,
.experience-avatar,
.experience-media-art {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 0.8rem;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #176cc4, #29a9ef);
    box-shadow: 0 13px 28px rgba(23, 108, 196, 0.22);
}

.experience-brand-mark i,
.experience-avatar i,
.experience-media-art i {
    font-size: 1.55rem;
}

.experience-browser-content strong,
.experience-file-card > strong,
.experience-media-card > strong,
.experience-video-card > strong,
.experience-link-page > strong,
.experience-landing-page > strong,
.experience-wifi-card > strong,
.experience-event-card > strong,
.experience-map-card > strong,
.experience-note-card strong,
.experience-email-card strong,
.experience-generic-card strong {
    color: #0f172a;
    font-size: 0.95rem;
}

.experience-browser-content p,
.experience-file-card p,
.experience-link-page p,
.experience-landing-page p,
.experience-event-card p,
.experience-map-card p,
.experience-note-card p,
.experience-email-card p,
.experience-generic-card p {
    margin: 0.45rem 0 0.85rem;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.5;
}

.experience-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 34px;
    padding: 0.45rem 0.85rem;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(135deg, #176cc4, #1d8fe1);
    box-shadow: 0 8px 18px rgba(23, 108, 196, 0.18);
    font-size: 0.7rem;
    font-weight: 800;
}

.experience-file-card,
.experience-media-card,
.experience-video-card,
.experience-link-page,
.experience-landing-page,
.experience-wifi-card,
.experience-event-card,
.experience-map-card,
.experience-note-card,
.experience-email-card,
.experience-generic-card {
    padding: 1.1rem;
}

.experience-file-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.experience-file-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 84px;
    margin-bottom: 0.9rem;
    border-radius: 14px;
    color: #176cc4;
    background: #fff;
    border: 1px solid #dbeafe;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.experience-file-icon i {
    font-size: 2rem;
}

.experience-file-icon span {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 0.13rem 0.25rem;
    color: #fff;
    background: #176cc4;
    border-radius: 5px;
    font-size: 0.48rem;
    font-weight: 900;
}

.experience-file-name,
.experience-muted {
    display: block;
    max-width: 100%;
    margin: 0.25rem 0 0.8rem;
    overflow: hidden;
    color: #64748b;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.experience-media-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.experience-media-card .experience-media-art {
    margin-inline: auto;
    width: 88px;
    height: 88px;
    border-radius: 24px;
}

.experience-waveform {
    display: flex;
    height: 42px;
    margin: 0.7rem 0;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.experience-waveform i {
    width: 3px;
    height: 16px;
    border-radius: 99px;
    background: linear-gradient(180deg, #0ea5e9, #176cc4);
}

.experience-waveform i:nth-child(3n) { height: 30px; }
.experience-waveform i:nth-child(4n) { height: 22px; }
.experience-waveform i:nth-child(5n) { height: 36px; }

.experience-player-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    color: #334155;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.experience-player-row > span {
    height: 4px;
    overflow: hidden;
    border-radius: 99px;
    background: linear-gradient(90deg, #176cc4 38%, #e2e8f0 38%);
}

.experience-player-row b {
    font-size: 0.58rem;
}

.experience-video-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.experience-video-frame {
    display: flex;
    min-height: 150px;
    margin-bottom: 0.8rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    background:
        radial-gradient(circle at 70% 18%, rgba(56, 189, 248, 0.38), transparent 28%),
        linear-gradient(135deg, #172554, #0f172a 65%);
    border-radius: 15px;
}

.experience-video-frame i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 0.45rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    font-size: 1.5rem;
}

.experience-video-frame span {
    font-size: 0.65rem;
    font-weight: 800;
}

.experience-link-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg, #eaf5ff 0%, #f8fbff 100%);
}

.experience-link-buttons {
    display: grid;
    width: 100%;
    gap: 0.45rem;
}

.experience-link-buttons span {
    display: block;
    overflow: hidden;
    padding: 0.55rem 0.65rem;
    color: #fff;
    background: linear-gradient(135deg, #176cc4, #238fdf);
    border-radius: 10px;
    font-size: 0.67rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.experience-landing-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}

.experience-landing-accent {
    width: 42px;
    height: 5px;
    margin-bottom: 0.85rem;
    border-radius: 99px;
    background: linear-gradient(90deg, #176cc4, #22c55e);
}

.experience-copy-lines {
    display: grid;
    gap: 0.35rem;
    margin: 0.25rem 0 1rem;
}

.experience-copy-lines span {
    height: 7px;
    border-radius: 99px;
    background: #e8eef5;
}

.experience-copy-lines span:nth-child(2) { width: 82%; }
.experience-copy-lines span:nth-child(3) { width: 66%; }

.experience-routing-card {
    padding: 1rem;
}

.experience-routing-hero {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    margin-bottom: 0.85rem;
    padding: 0.8rem;
    color: #fff;
    background: linear-gradient(135deg, #176cc4, #22a3ef);
    border-radius: 13px;
}

.experience-routing-hero i {
    font-size: 1.35rem;
}

.experience-routing-hero strong {
    font-size: 0.78rem;
}

.experience-route-list {
    display: grid;
    gap: 0.5rem;
}

.experience-route {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.05rem 0.55rem;
    padding: 0.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #fff;
}

.experience-route i {
    grid-row: 1 / span 2;
    align-self: center;
    color: #176cc4;
    font-size: 1.15rem;
}

.experience-route b {
    font-size: 0.68rem;
}

.experience-route em {
    overflow: hidden;
    color: #64748b;
    font-size: 0.58rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.experience-route.is-empty {
    opacity: 0.5;
}

.experience-wifi-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.experience-wifi-signal {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    margin-bottom: 0.75rem;
    color: #fff;
    background: linear-gradient(135deg, #176cc4, #22a3ef);
    border: 8px solid rgba(23, 108, 196, 0.10);
    outline: 8px solid rgba(23, 108, 196, 0.05);
    border-radius: 50%;
}

.experience-wifi-signal i {
    font-size: 2rem;
}

.experience-detail-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0.75rem 0;
}

.experience-detail-grid span {
    min-width: 0;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.experience-detail-grid small,
.experience-detail-grid b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.experience-detail-grid small {
    color: #94a3b8;
    font-size: 0.55rem;
}

.experience-detail-grid b {
    margin-top: 0.15rem;
    color: #334155;
    font-size: 0.65rem;
}

.experience-chat-card {
    padding: 0.8rem;
    background: #f8fafc;
}

.experience-chat-card.is-whatsapp {
    background: #edf8f1;
}

.experience-chat-header {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    padding: 0.55rem;
    background: #fff;
    border-radius: 12px;
}

.experience-chat-header > span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: #fff;
    background: #176cc4;
    border-radius: 50%;
}

.experience-chat-card.is-whatsapp .experience-chat-header > span {
    background: #22c55e;
}

.experience-chat-header strong,
.experience-chat-header small {
    display: block;
}

.experience-chat-header strong {
    font-size: 0.7rem;
}

.experience-chat-header small {
    max-width: 150px;
    overflow: hidden;
    color: #64748b;
    font-size: 0.55rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.experience-chat-thread {
    margin: 1rem 0 2.6rem auto;
    width: 82%;
    padding: 0.7rem;
    color: #334155;
    background: #fff;
    border-radius: 13px 13px 4px 13px;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.07);
}

.experience-chat-card.is-whatsapp .experience-chat-thread {
    background: #dcfce7;
}

.experience-chat-thread p {
    margin: 0 0 0.25rem;
    font-size: 0.68rem;
    line-height: 1.45;
}

.experience-chat-thread small {
    display: block;
    color: #94a3b8;
    font-size: 0.52rem;
    text-align: right;
}

.experience-chat-compose {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.65rem;
    color: #94a3b8;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 0.62rem;
}

.experience-chat-compose i {
    color: #176cc4;
}

.experience-event-date {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    width: fit-content;
    margin-bottom: 0.9rem;
    padding: 0.45rem 0.6rem;
    color: #176cc4;
    background: #dbeafe;
    border-radius: 9px;
    font-size: 0.65rem;
    font-weight: 800;
}

.experience-event-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.experience-event-card p {
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    margin: 0.4rem 0;
}

.experience-event-card p i {
    color: #176cc4;
}

.experience-event-card .experience-cta {
    margin-top: 0.7rem;
    align-self: flex-start;
}

.experience-map-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.experience-map-grid {
    position: relative;
    height: 155px;
    margin-bottom: 0.85rem;
    overflow: hidden;
    border-radius: 14px;
    background:
        linear-gradient(28deg, transparent 43%, rgba(255,255,255,0.96) 44% 49%, transparent 50%),
        linear-gradient(-22deg, transparent 42%, rgba(255,255,255,0.95) 43% 48%, transparent 49%),
        #d8f2e4;
}

.experience-map-grid > span {
    position: absolute;
    width: 140%;
    height: 3px;
    left: -20%;
    background: rgba(96, 165, 250, 0.65);
    transform: rotate(18deg);
}

.experience-map-grid > span:nth-child(1) { top: 30%; }
.experience-map-grid > span:nth-child(2) { top: 62%; transform: rotate(-14deg); }
.experience-map-grid > span:nth-child(3) { left: 18%; top: 46%; transform: rotate(72deg); }
.experience-map-grid > span:nth-child(4) { left: 48%; top: 42%; transform: rotate(94deg); }

.experience-map-grid i {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #ef4444;
    transform: translate(-50%, -70%);
    font-size: 2.2rem;
    filter: drop-shadow(0 4px 4px rgba(15, 23, 42, 0.18));
}

.experience-map-card p {
    overflow: hidden;
    margin: 0.3rem 0 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.experience-note-card {
    display: flex;
    flex-direction: column;
}

.experience-note-header,
.experience-email-top {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid #e2e8f0;
}

.experience-note-header i,
.experience-email-top i {
    color: #176cc4;
}

.experience-note-card p {
    flex: 1;
    overflow: hidden;
    margin: 0;
    padding: 1rem 0;
    color: #334155;
    font-size: 0.74rem;
    line-height: 1.65;
}

.experience-note-action {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    color: #176cc4;
    font-size: 0.65rem;
    font-weight: 800;
}

.experience-email-card {
    background: #fff;
}

.experience-email-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.45rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #eef2f7;
}

.experience-email-row span {
    color: #94a3b8;
    font-size: 0.63rem;
}

.experience-email-row b {
    overflow: hidden;
    color: #334155;
    font-size: 0.64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.experience-email-card p {
    min-height: 92px;
    overflow: hidden;
    margin-bottom: 0.65rem;
}

.experience-generic-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.experience-generic-card > i {
    margin-bottom: 0.75rem;
    color: #176cc4;
    font-size: 2.2rem;
}

@media (prefers-reduced-motion: reduce) {
    .solution-experience-screen > * {
        animation: none !important;
    }
}

/* Scanner Experience uses the same floating companion behavior as the vCard phone preview. */
@media (prefers-reduced-motion: reduce) {
    .solution-experience-card {
        animation: none !important;
    }
}

/* Modern public QR solution experiences */
.qr-public-body {
    min-height: 100vh;
    background: #eef4fb;
}

.qr-solution-public {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 2.5rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--solution-accent) 22%, transparent), transparent 30%),
        radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--solution-accent-2) 20%, transparent), transparent 28%),
        linear-gradient(160deg, #eef5ff 0%, #f8fbff 52%, #ffffff 100%);
    animation: profile-content-reveal .58s cubic-bezier(.2,.8,.25,1) 2.02s both;
}

.qr-solution-card {
    position: relative;
    width: min(100%, 760px);
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 30px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 34px 90px rgba(15,23,42,.16),
        inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
}

.qr-solution-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.qr-solution-backdrop span {
    position: absolute;
    width: 230px;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(18px);
    opacity: .15;
    background: var(--solution-accent);
}

.qr-solution-backdrop span:first-child {
    top: -110px;
    right: -70px;
}

.qr-solution-backdrop span:last-child {
    bottom: -150px;
    left: -90px;
    background: var(--solution-accent-2);
}

.qr-solution-hero {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 1.2rem;
    align-items: center;
    padding: clamp(1.4rem, 5vw, 2.4rem);
    color: #fff;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--solution-accent) 92%, #0f172a 8%), var(--solution-accent-2));
}

.qr-solution-hero::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(112deg, transparent 18%, rgba(255,255,255,.13) 48%, transparent 72%);
    transform: translateX(-115%);
    animation: publicSolutionSheen 3.8s ease-in-out 2.8s infinite;
}

.qr-solution-brandmark {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 24px;
    color: var(--solution-accent);
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 34px rgba(6,24,60,.22);
}

.qr-solution-brandmark.has-logo {
    width: clamp(108px, 18vw, 190px);
    height: auto;
    min-height: 84px;
    aspect-ratio: var(--logo-ratio, 1);
    padding: 7px;
    overflow: hidden;
}

.qr-solution-brandmark.has-logo.image-aspect-wide {
    width: clamp(156px, 24vw, 220px);
    min-height: 96px;
    padding: 7px;
}

.qr-solution-brandmark.has-logo.image-aspect-tall {
    width: 96px;
    min-height: 112px;
}

.qr-solution-brandmark i {
    font-size: 2.15rem;
}

.qr-solution-brandmark img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 10px;
}

.qr-solution-hero-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.qr-solution-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .7rem;
    padding: .38rem .72rem;
    color: #fff;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.qr-solution-card h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.75rem, 5vw, 2.65rem);
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: -.035em;
}

.qr-solution-description {
    max-width: 590px;
    margin: .75rem 0 0;
    color: rgba(255,255,255,.84);
    font-size: .96rem;
    line-height: 1.58;
}

.qr-solution-content {
    position: relative;
    z-index: 1;
    padding: clamp(1.25rem, 5vw, 2.25rem);
}

.qr-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    min-height: 50px;
    padding: .78rem 1rem;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, var(--solution-accent), var(--solution-accent-2));
    border-radius: 14px;
    font-weight: 800;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--solution-accent) 28%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
}

.qr-primary-action:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px color-mix(in srgb, var(--solution-accent) 34%, transparent);
}

.qr-file-experience,
.qr-media-experience,
.qr-linkpage-experience,
.qr-landing-experience,
.qr-wifi-experience,
.qr-event-experience,
.qr-note-experience,
.qr-platform-experience,
.qr-location-experience,
.qr-message-experience,
.qr-chat-experience,
.qr-destination-experience,
.qr-empty-experience {
    border: 1px solid rgba(15,23,42,.07);
    border-radius: 22px;
    background: linear-gradient(180deg, #fff, #f8fbff);
    box-shadow: 0 18px 42px rgba(15,23,42,.07);
}

.qr-file-experience {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
}

.qr-file-icon,
.qr-media-art,
.qr-destination-icon {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(145deg, var(--solution-accent), var(--solution-accent-2));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--solution-accent) 24%, transparent);
}

.qr-file-icon i,
.qr-media-art i,
.qr-destination-icon i {
    font-size: 1.9rem;
}

.qr-file-copy,
.qr-media-copy,
.qr-location-copy {
    min-width: 0;
}

.qr-file-copy span,
.qr-media-copy span,
.qr-location-copy span,
.qr-linkpage-intro span,
.qr-platform-intro span,
.qr-video-meta span {
    display: block;
    margin-bottom: .15rem;
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.qr-file-copy strong,
.qr-media-copy strong,
.qr-location-copy strong,
.qr-linkpage-intro strong,
.qr-platform-intro strong,
.qr-video-meta strong {
    display: block;
    overflow: hidden;
    color: #0f172a;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qr-file-copy small {
    display: block;
    margin-top: .25rem;
    color: #94a3b8;
}

.qr-media-experience,
.qr-video-experience,
.qr-linkpage-experience,
.qr-landing-experience,
.qr-wifi-experience,
.qr-event-experience,
.qr-note-experience,
.qr-platform-experience,
.qr-location-experience,
.qr-message-experience,
.qr-chat-experience,
.qr-destination-experience,
.qr-empty-experience {
    padding: 1rem;
}

.qr-audio-experience {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .85rem 1rem;
    align-items: center;
}

.qr-audio-experience audio,
.qr-audio-wave {
    grid-column: 1 / -1;
}

.qr-audio-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 44px;
}

.qr-audio-wave span {
    width: 4px;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--solution-accent), var(--solution-accent-2));
}

.qr-audio-wave span:nth-child(3n) { height: 28px; }
.qr-audio-wave span:nth-child(4n) { height: 36px; }
.qr-audio-wave span:nth-child(5n) { height: 22px; }

.qr-video-meta {
    margin-bottom: .75rem;
}

.qr-solution-video {
    display: block;
    width: 100%;
    max-height: 480px;
    border-radius: 18px;
    background: #0f172a;
    box-shadow: 0 16px 36px rgba(15,23,42,.16);
}

.qr-linkpage-intro,
.qr-platform-intro {
    padding: .25rem .15rem .9rem;
}

.qr-solution-links {
    display: grid;
    gap: .7rem;
}

.qr-solution-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .85rem .95rem;
    color: #0f172a;
    text-decoration: none;
    border: 1px solid rgba(15,23,42,.07);
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 24px rgba(15,23,42,.05);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.qr-solution-links a:hover {
    color: #0f172a;
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--solution-accent) 34%, #fff);
    box-shadow: 0 14px 30px rgba(15,23,42,.09);
}

.qr-link-leading {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}

.qr-link-leading b {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--solution-accent), var(--solution-accent-2));
    font-size: .75rem;
}

.qr-link-leading span {
    overflow: hidden;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qr-landing-windowbar {
    display: flex;
    gap: .35rem;
    margin-bottom: 1rem;
}

.qr-landing-windowbar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cbd5e1;
}

.qr-landing-windowbar span:first-child { background: #fb7185; }
.qr-landing-windowbar span:nth-child(2) { background: #fbbf24; }
.qr-landing-windowbar span:nth-child(3) { background: #34d399; }

.qr-solution-copy {
    padding: 1rem;
    color: #334155;
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 16px;
    background: #f8fbff;
    line-height: 1.68;
}

.qr-landing-copy {
    margin-bottom: 1rem;
}

.qr-wifi-experience {
    text-align: center;
}

.qr-wifi-signal {
    position: relative;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin: 0 auto 1rem;
    border-radius: 28px;
    color: #fff;
    background: linear-gradient(145deg, var(--solution-accent), var(--solution-accent-2));
    box-shadow: 0 18px 34px color-mix(in srgb, var(--solution-accent) 26%, transparent);
}

.qr-wifi-signal i { font-size: 2.4rem; }

.qr-wifi-signal span {
    position: absolute;
    inset: -7px;
    border: 2px solid color-mix(in srgb, var(--solution-accent) 28%, transparent);
    border-radius: 32px;
    animation: qrWifiPulse 1.8s ease-out infinite;
}

.qr-wifi-network span,
.qr-secret-row span {
    display: block;
    color: #64748b;
    font-size: .75rem;
}

.qr-wifi-network strong {
    display: block;
    margin: .18rem 0;
    color: #0f172a;
    font-size: 1.35rem;
}

.qr-wifi-network small { color: #94a3b8; }

.qr-secret-row {
    margin: 1rem 0;
    padding: .8rem;
    border-radius: 14px;
    background: #f8fbff;
}

.qr-secret-row strong {
    display: block;
    margin-top: .2rem;
    color: #0f172a;
    word-break: break-word;
}

.qr-trust-row,
.qr-solution-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    color: #64748b;
    font-size: .75rem;
}

.qr-trust-row i { color: #10b981; }

.qr-event-experience {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
}

.qr-event-datecard {
    display: grid;
    place-items: center;
    width: 90px;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(15,23,42,.1);
}

.qr-event-datecard span {
    width: 100%;
    padding: .35rem;
    color: #fff;
    background: linear-gradient(135deg, var(--solution-accent), var(--solution-accent-2));
    font-size: .7rem;
    font-weight: 850;
    text-align: center;
}

.qr-event-datecard strong {
    padding: .55rem 0 .7rem;
    color: #0f172a;
    font-size: 1.8rem;
}

.qr-event-main strong {
    color: #0f172a;
    font-size: 1.08rem;
}

.qr-event-main p {
    display: flex;
    gap: .45rem;
    align-items: flex-start;
    margin: .45rem 0 0;
    color: #64748b;
    font-size: .82rem;
}

.qr-event-main i { color: var(--solution-accent); }
.qr-event-experience .qr-solution-copy { grid-column: 1 / -1; }

.qr-note-toolbar,
.qr-message-top,
.qr-chat-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .8rem;
    margin-bottom: .8rem;
    border-bottom: 1px solid #e8eef6;
}

.qr-note-toolbar span,
.qr-message-top {
    color: #334155;
    font-weight: 750;
}

.qr-note-toolbar i,
.qr-message-top i { color: var(--solution-accent); }
.qr-note-copy { min-height: 150px; }

.qr-platform-grid {
    display: grid;
    gap: .7rem;
}

.qr-platform-grid a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .7rem;
    align-items: center;
    padding: .85rem .9rem;
    color: #0f172a;
    text-decoration: none;
    border: 1px solid #e8eef6;
    border-radius: 14px;
    background: #fff;
}

.qr-platform-grid a > i:first-child {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(145deg, var(--solution-accent), var(--solution-accent-2));
}

.qr-location-map {
    position: relative;
    height: 210px;
    overflow: hidden;
    margin-bottom: 1rem;
    border-radius: 18px;
    background:
        linear-gradient(28deg, transparent 43%, rgba(255,255,255,.95) 44% 49%, transparent 50%),
        linear-gradient(-22deg, transparent 42%, rgba(255,255,255,.95) 43% 48%, transparent 49%),
        #d9f4e7;
}

.qr-location-map span {
    position: absolute;
    left: -10%;
    width: 120%;
    height: 4px;
    background: rgba(96,165,250,.5);
    transform: rotate(16deg);
}

.qr-location-map span:first-child { top: 28%; }
.qr-location-map span:nth-child(2) { top: 60%; transform: rotate(-15deg); }
.qr-location-map span:nth-child(3) { top: 48%; transform: rotate(76deg); }

.qr-location-map i {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #ef4444;
    transform: translate(-50%,-80%);
    font-size: 2.7rem;
    filter: drop-shadow(0 7px 8px rgba(15,23,42,.22));
}

.qr-location-copy { margin-bottom: 1rem; }

.qr-message-row {
    display: grid;
    grid-template-columns: 65px minmax(0,1fr);
    gap: .7rem;
    padding: .65rem 0;
    border-bottom: 1px solid #eef2f7;
}

.qr-message-row span { color: #94a3b8; }
.qr-message-row strong { overflow: hidden; color: #334155; text-overflow: ellipsis; white-space: nowrap; }
.qr-message-experience .qr-solution-copy { margin: .9rem 0; }

.qr-chat-contact {
    justify-content: flex-start;
}

.qr-chat-contact > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #fff;
    background: linear-gradient(145deg, var(--solution-accent), var(--solution-accent-2));
    border-radius: 50%;
}

.qr-chat-contact div { min-width: 0; }
.qr-chat-contact strong,
.qr-chat-contact small { display: block; }
.qr-chat-contact small { color: #94a3b8; }

.qr-chat-bubble {
    width: min(88%, 470px);
    margin: 1rem 0 1rem auto;
    padding: .9rem 1rem;
    color: #334155;
    background: #eef7ff;
    border-radius: 18px 18px 5px 18px;
    line-height: 1.55;
    box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

.qr-chat-experience.is-whatsapp .qr-chat-bubble { background: #dcfce7; }
.qr-chat-bubble small { display: block; margin-top: .4rem; color: #94a3b8; font-size: .68rem; text-align: right; }

.qr-destination-experience,
.qr-empty-experience {
    text-align: center;
}

.qr-destination-browser {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    gap: .35rem;
    align-items: center;
    padding: .65rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: #eef3f8;
}

.qr-destination-browser > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
}

.qr-destination-browser > span:first-child { background: #fb7185; }
.qr-destination-browser > span:nth-child(2) { background: #fbbf24; }
.qr-destination-browser > span:nth-child(3) { background: #34d399; }
.qr-destination-browser > div {
    overflow: hidden;
    margin-left: .3rem;
    padding: .35rem .55rem;
    color: #64748b;
    background: #fff;
    border-radius: 9px;
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qr-destination-icon { margin: 1rem auto; }
.qr-destination-experience p { color: #64748b; }

.qr-empty-experience {
    display: grid;
    justify-items: center;
    gap: .4rem;
    color: #64748b;
}
.qr-empty-experience i { color: var(--solution-accent); font-size: 2rem; }
.qr-empty-experience strong { color: #0f172a; }

.qr-solution-footer {
    position: relative;
    z-index: 1;
    justify-content: space-between;
    padding: 1rem clamp(1.25rem,5vw,2.25rem) 1.2rem;
    border-top: 1px solid #edf2f7;
    background: rgba(248,251,255,.82);
}

.qr-solution-footer span:first-child i { color: #10b981; }

.profile-splash-mark.is-icon i {
    position: relative;
    z-index: 2;
    color: var(--splash-bg);
    font-size: 2.45rem;
}

.profile-splash-continue {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: -.25rem;
    color: rgba(255,255,255,.82);
    font-size: .74rem;
    font-weight: 750;
    text-decoration: none;
}

.profile-splash-continue:hover { color: #fff; }

.profile-splash-only {
    min-height: 100vh;
    background: #0f172a;
}

.splash-redirect-underlay {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #64748b;
    background: #f8fafc;
}

@keyframes publicSolutionSheen {
    0%, 62% { transform: translateX(-115%); }
    100% { transform: translateX(115%); }
}

@keyframes qrWifiPulse {
    0% { opacity: .5; transform: scale(.88); }
    100% { opacity: 0; transform: scale(1.12); }
}

@media (max-width: 640px) {
    .qr-solution-hero {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .qr-solution-description { margin-inline: auto; }

    .qr-file-experience {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .qr-file-copy strong,
    .qr-file-copy small { white-space: normal; }

    .qr-file-experience .qr-primary-action { width: 100%; }

    .qr-event-experience {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .qr-event-main p { justify-content: center; }
    .qr-solution-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .qr-solution-public,
    .qr-solution-hero::after,
    .qr-wifi-signal span {
        animation: none !important;
    }
}

/* Public WiFi connection experience */
.qr-wifi-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}

.qr-wifi-meta-card {
    min-width: 0;
    padding: .85rem .9rem;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.96));
    box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
}

.qr-wifi-meta-card > span {
    display: block;
    margin-bottom: .25rem;
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 600;
}

.qr-wifi-meta-card > strong,
.qr-wifi-secret-display strong {
    color: #0f172a;
    font-size: .95rem;
    font-weight: 800;
}

.qr-wifi-secret-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 26px;
}

.qr-wifi-secret-display strong {
    min-width: 0;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: .08em;
}

.qr-wifi-icon-button {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: #64748b;
    background: rgba(226, 232, 240, .7);
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.qr-wifi-icon-button:hover,
.qr-wifi-icon-button:focus-visible {
    color: var(--solution-accent);
    background: color-mix(in srgb, var(--solution-accent) 12%, white);
    transform: translateY(-1px);
    outline: none;
}

.qr-wifi-join-action {
    width: min(100%, 230px);
    margin: .9rem auto .55rem;
    justify-content: space-between;
}

.qr-wifi-join-action > span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.qr-wifi-join-action.is-ready {
    box-shadow: 0 14px 30px color-mix(in srgb, var(--solution-accent) 28%, transparent);
}

.qr-wifi-copy-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 0;
    background: transparent;
    color: #64748b;
    padding: .3rem .5rem;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}

.qr-wifi-copy-action:hover,
.qr-wifi-copy-action:focus-visible,
.qr-wifi-copy-action.is-copied {
    color: var(--solution-accent);
    background: color-mix(in srgb, var(--solution-accent) 8%, transparent);
    outline: none;
}

.qr-wifi-helper {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: .9rem auto 0;
    padding: .8rem .9rem;
    max-width: 420px;
    border: 1px solid color-mix(in srgb, var(--solution-accent) 18%, #e2e8f0);
    border-radius: 15px;
    text-align: left;
    color: #334155;
    background: color-mix(in srgb, var(--solution-accent) 6%, white);
}

.qr-wifi-helper > i {
    margin-top: .1rem;
    color: #10b981;
    font-size: 1rem;
}

.qr-wifi-helper strong,
.qr-wifi-helper span {
    display: block;
}

.qr-wifi-helper strong {
    color: #0f172a;
    font-size: .83rem;
}

.qr-wifi-helper span {
    margin-top: .15rem;
    color: #64748b;
    font-size: .76rem;
    line-height: 1.45;
}

.qr-wifi-connect-note {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: .35rem;
    max-width: 460px;
    margin: .8rem auto 1rem;
    color: #94a3b8;
    font-size: .72rem;
    line-height: 1.45;
}

.qr-wifi-connect-note i {
    flex: 0 0 auto;
    margin-top: .1rem;
}

@media (max-width: 520px) {
    .qr-wifi-meta-grid {
        grid-template-columns: 1fr 1fr;
        gap: .55rem;
    }

    .qr-wifi-meta-card {
        padding: .75rem .6rem;
    }
}

/* User management / RBAC */
.user-admin-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.registration-control-card {
  border: 1px solid rgba(37, 99, 235, 0.12);
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(239,246,255,0.94));
}

.form-switch-lg .form-check-input {
  width: 3.25rem;
  height: 1.65rem;
}

.user-create-card.sticky-xl-top {
  top: 6.5rem;
}

.permission-picker {
  display: grid;
  gap: 0.8rem;
  max-height: 620px;
  overflow: auto;
  padding-right: 0.2rem;
}

.permission-group {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1rem;
  background: #f8fbff;
  padding: 0.85rem;
  margin: 0;
}

.permission-group legend {
  float: none;
  width: auto;
  margin: 0 0 0.55rem;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #60708a;
}

.permission-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  padding: 0.55rem 0;
  cursor: pointer;
}

.permission-option + .permission-option {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.permission-option span {
  display: grid;
  gap: 0.15rem;
}

.permission-option strong {
  font-size: 0.9rem;
}

.permission-option small {
  color: #718096;
  line-height: 1.35;
}

.permission-picker.is-admin-disabled {
  opacity: 0.55;
}

.permission-picker.is-admin-disabled::before {
  content: "Administrators automatically have full access.";
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: 0.8rem;
  background: rgba(15, 23, 42, 0.06);
  color: #43516a;
  font-size: 0.83rem;
  font-weight: 700;
}

.user-admin-list {
  display: grid;
  gap: 0.85rem;
}

.user-admin-row {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
}

.user-admin-row summary {
  list-style: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.95rem 1rem;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.user-admin-row summary::-webkit-details-marker {
  display: none;
}

.user-admin-row[open] summary {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.user-admin-row summary > i {
  transition: transform 0.2s ease;
}

.user-admin-row[open] summary > i {
  transform: rotate(180deg);
}

.user-avatar-admin {
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 0.85rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1d4ed8, #38bdf8);
  color: #fff;
  font-weight: 800;
}

.user-admin-identity {
  display: grid;
  min-width: 0;
}

.user-admin-identity small {
  color: #718096;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-admin-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.user-admin-edit-form {
  padding: 1rem;
}

@media (max-width: 767.98px) {
  .user-admin-summary {
    grid-template-columns: 1fr;
  }

  .user-admin-row summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .user-admin-badges {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }
}

/* User management tabs + account security */
.user-admin-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.summary-icon-amber {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #fff;
}

.user-management-tabs {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding: 0.45rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.user-management-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1rem;
  border-radius: 0.78rem;
  color: #506078;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.user-management-tab:hover {
  color: #174ea6;
  background: #eef6ff;
  transform: translateY(-1px);
}

.user-management-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, #1d64d6, #2aa5ec);
  box-shadow: 0 10px 24px rgba(29, 100, 214, 0.22);
}

.user-management-panel {
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.user-filter {
  position: relative;
  width: min(100%, 320px);
}

.user-filter > i {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  z-index: 2;
  color: #7a889e;
  transform: translateY(-50%);
}

.user-filter .form-control {
  padding-left: 2.35rem;
}

.user-directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.user-directory-card {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.user-directory-card.is-filtered-out {
  display: none;
}

.user-directory-main {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  min-width: 0;
}

.user-directory-meta {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  color: #74839a;
  font-size: 0.78rem;
}

.user-directory-meta span {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.user-subtabs .nav-link {
  border-radius: 0.75rem;
  color: #5b6980;
  font-weight: 800;
}

.user-subtabs .nav-link.active {
  background: #1d64d6;
}

.permission-picker-roomy {
  max-height: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  overflow: visible;
}

.security-option-row {
  display: flex;
  min-height: 3rem;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.85rem;
  background: #f8fbff;
}

.security-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid rgba(16, 185, 129, 0.18);
  border-radius: 1rem;
  color: #1f513e;
  background: rgba(236, 253, 245, 0.82);
}

.security-callout > i {
  font-size: 1.35rem;
  color: #10b981;
}

.security-callout div {
  display: grid;
  gap: 0.2rem;
}

.security-callout span {
  color: #577168;
  font-size: 0.86rem;
}

.security-policy-card {
  border: 1px solid rgba(37, 99, 235, 0.12);
  background: linear-gradient(145deg, #ffffff, #f5faff);
}

.security-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.security-status-item {
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 0.9rem;
  background: #fff;
}

.security-status-item > span {
  color: #728198;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.security-status-item > strong {
  color: #172033;
}

.security-status-item > small {
  color: #718096;
  line-height: 1.35;
}

.security-recommendations {
  position: sticky;
  top: 6.5rem;
}

.security-checklist {
  display: grid;
  gap: 0.8rem;
  padding: 0;
  margin: 1rem 0 0;
  list-style: none;
}

.security-checklist li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  padding: 0.8rem;
  border-radius: 0.85rem;
  background: #f8fafc;
}

.security-checklist li > i {
  margin-top: 0.08rem;
}

.security-checklist li.is-good > i { color: #10b981; }
.security-checklist li.is-warning > i { color: #f59e0b; }

.security-checklist li span {
  display: grid;
  gap: 0.1rem;
}

.security-checklist li small {
  color: #718096;
  line-height: 1.35;
}

.manage-user-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.user-avatar-admin-lg {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 1rem;
  font-size: 1.15rem;
}

.manage-user-subtabs {
  display: flex;
  gap: 0.45rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  overflow-x: auto;
}

.manage-user-subtabs a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  padding: 0.68rem 0.9rem;
  border-radius: 0.75rem;
  color: #64748b;
  font-weight: 800;
  text-decoration: none;
}

.manage-user-subtabs a.is-active {
  color: #174ea6;
  background: #eaf3ff;
}

.user-manage-section {
  max-width: 1040px;
}

.user-security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.security-pane-card {
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1rem;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.security-pane-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  margin-bottom: 1rem;
}

.security-pane-icon {
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border-radius: 0.85rem;
  color: #fff;
  background: linear-gradient(135deg, #1d64d6, #38bdf8);
}

.security-status-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  font-size: 0.9rem;
}

.security-status-line span {
  color: #718096;
}

.security-empty-state {
  min-height: 160px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.35rem;
  text-align: center;
  color: #6b7a90;
}

.security-empty-state > i {
  font-size: 2rem;
  color: #38bdf8;
}

/* First-login password and administrator MFA pages */
.security-auth-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 15%, rgba(56, 189, 248, 0.16), transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(37, 99, 235, 0.12), transparent 28%),
    #eef4fb;
}

.security-auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.security-auth-shell-wide .security-auth-card {
  width: min(100%, 780px);
}

.security-auth-card {
  width: min(100%, 520px);
  padding: clamp(1.5rem, 4vw, 2.2rem);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.14);
}

.security-auth-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, #1d64d6, #38bdf8);
  box-shadow: 0 12px 28px rgba(29, 100, 214, 0.25);
  font-size: 1.35rem;
}

.security-auth-icon.success { background: linear-gradient(135deg, #059669, #34d399); }
.security-auth-icon.warning { background: linear-gradient(135deg, #d97706, #fbbf24); }

.mfa-enrollment-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 1.3rem;
  align-items: center;
}

.mfa-qr-card {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1.2rem;
  background: #fff;
}

.mfa-qr-card img {
  width: min(100%, 240px);
  height: auto;
}

.mfa-qr-fallback {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  color: #718096;
}

.mfa-qr-fallback i { font-size: 4rem; }

.mfa-secret-key {
  padding: 0.8rem;
  border-radius: 0.75rem;
  background: #eef4fb;
  color: #172033;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  word-break: break-all;
}

.mfa-code-input {
  letter-spacing: 0.18em;
  font-weight: 800;
}

.recovery-code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.recovery-code-grid code {
  padding: 0.7rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.7rem;
  background: #f8fbff;
  color: #172033;
  text-align: center;
  font-weight: 800;
}

@media (max-width: 991.98px) {
  .user-admin-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-directory-grid,
  .permission-picker-roomy,
  .user-security-grid,
  .security-status-grid {
    grid-template-columns: 1fr;
  }

  .security-recommendations {
    position: static;
  }

  .mfa-enrollment-layout {
    grid-template-columns: 1fr;
  }

  .mfa-qr-card {
    min-height: 0;
  }
}

@media (max-width: 575.98px) {
  .user-admin-summary,
  .recovery-code-grid {
    grid-template-columns: 1fr;
  }

  .user-management-tab {
    flex: 1 1 100%;
  }
}

/* Fluid user-management workspace */
.user-management-workspace {
    position: relative;
    min-height: 280px;
    transition: opacity 160ms ease, transform 160ms ease;
}

.user-management-workspace::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 30;
    border-radius: 1.1rem;
    background: rgba(248, 250, 252, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.user-management-workspace.is-loading {
    opacity: 0.82;
}

.user-management-workspace.is-loading::after {
    opacity: 1;
    pointer-events: auto;
}

.user-management-workspace.is-loading::before {
    content: "";
    position: absolute;
    z-index: 31;
    top: 1rem;
    right: 1rem;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid rgba(37, 99, 235, 0.18);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: userManagementSpin 650ms linear infinite;
}

.user-management-live-status {
    position: fixed;
    z-index: 1085;
    right: 1.25rem;
    bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    max-width: min(420px, calc(100vw - 2.5rem));
    padding: 0.85rem 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    color: #0f172a;
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.user-management-live-status.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.user-management-live-status.is-success i { color: #10b981; }
.user-management-live-status.is-warning i { color: #f59e0b; }
.user-management-live-status.is-danger i { color: #dc2626; }
.user-management-live-status.is-info i { color: #2563eb; }

.user-management-workspace button.is-submitting {
    position: relative;
    opacity: 0.72;
}

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

@media (prefers-reduced-motion: reduce) {
    .user-management-workspace,
    .user-management-workspace::after,
    .user-management-live-status {
        transition: none;
    }

    .user-management-workspace.is-loading::before {
        animation: none;
        border-top-color: #2563eb;
    }
}