.yourcolor-pwa-install-root {
    --yc-install-size: 58px;
    --yc-install-side: 18px;
    --yc-install-bottom: 18px;
    --yc-install-bg: #6d5dfc;
    --yc-install-color: #fff;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: none !important;
    filter: none !important;
    contain: none !important;
}

.yourcolor-pwa-install-button {
    position: fixed !important;
    bottom: max(var(--yc-install-bottom), env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    width: var(--yc-install-size);
    height: var(--yc-install-size);
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    background: var(--yc-install-bg);
    color: var(--yc-install-color);
    box-shadow: 0 10px 28px rgb(15 23 42 / 28%), 0 2px 8px rgb(15 23 42 / 18%);
    cursor: pointer;
    pointer-events: auto !important;
    isolation: isolate;
    transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.yourcolor-pwa-install-root.is-left .yourcolor-pwa-install-button {
    right: auto !important;
    left: max(var(--yc-install-side), env(safe-area-inset-left));
}

.yourcolor-pwa-install-root.is-right .yourcolor-pwa-install-button {
    left: auto !important;
    right: max(var(--yc-install-side), env(safe-area-inset-right));
}

.yourcolor-pwa-install-button:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 34px rgb(15 23 42 / 32%), 0 3px 10px rgb(15 23 42 / 20%);
}

.yourcolor-pwa-install-button:active {
    transform: translateY(0) scale(.96);
}

.yourcolor-pwa-install-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--yc-install-bg) 50%, transparent), 0 12px 30px rgb(15 23 42 / 28%);
}

.yourcolor-pwa-install-icon {
    display: grid;
    place-items: center;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: inherit !important;
}

.yourcolor-pwa-install-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit !important;
}

.yourcolor-pwa-install-icon > svg {
    width: 47%;
    height: 47%;
    fill: currentColor;
}

.yourcolor-pwa-install-badge {
    position: absolute;
    right: 3px;
    bottom: 3px;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--yc-install-color);
    color: var(--yc-install-bg);
    box-sizing: border-box;
}

.yourcolor-pwa-install-badge svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.yourcolor-pwa-install-root.has-pulse .yourcolor-pwa-install-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--yc-install-bg);
    animation: yourcolor-pwa-install-pulse 2.4s ease-out infinite;
}

.yourcolor-pwa-install-tooltip {
    position: absolute;
    top: 50%;
    width: max-content;
    max-width: 220px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity 150ms ease, transform 150ms ease;
    white-space: nowrap;
}

.is-left .yourcolor-pwa-install-tooltip {
    left: calc(100% + 12px);
}

.is-right .yourcolor-pwa-install-tooltip {
    right: calc(100% + 12px);
}

.yourcolor-pwa-install-button:hover .yourcolor-pwa-install-tooltip,
.yourcolor-pwa-install-button:focus-visible .yourcolor-pwa-install-tooltip {
    opacity: 1;
}

.is-left .yourcolor-pwa-install-button:hover .yourcolor-pwa-install-tooltip,
.is-left .yourcolor-pwa-install-button:focus-visible .yourcolor-pwa-install-tooltip {
    transform: translate(2px, -50%);
}

.is-right .yourcolor-pwa-install-button:hover .yourcolor-pwa-install-tooltip,
.is-right .yourcolor-pwa-install-button:focus-visible .yourcolor-pwa-install-tooltip {
    transform: translate(-2px, -50%);
}

.yourcolor-pwa-install-modal[hidden],
.yourcolor-pwa-install-button[hidden] {
    display: none !important;
}

.yourcolor-pwa-install-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483646 !important;
    pointer-events: auto !important;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.yourcolor-pwa-install-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgb(15 23 42 / 66%);
    backdrop-filter: blur(4px);
    cursor: default;
}

.yourcolor-pwa-install-dialog {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(430px, 100%);
    max-height: calc(100dvh - 36px);
    padding: 30px 24px 24px;
    overflow-y: auto;
    border-radius: 24px;
    background: #fff;
    color: #0f172a;
    text-align: center;
    box-shadow: 0 24px 80px rgb(15 23 42 / 34%);
}

.yourcolor-pwa-install-close {
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #334155;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.yourcolor-pwa-install-dialog-icon {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    margin: 4px auto 18px;
    overflow: hidden;
    border-radius: 22px;
    background: var(--yc-install-bg);
    color: #fff;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--yc-install-bg) 32%, transparent);
}

.yourcolor-pwa-install-dialog-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yourcolor-pwa-install-dialog h2 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 24px;
    line-height: 1.3;
}

.yourcolor-pwa-install-dialog p {
    margin: 0 auto 22px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.8;
}

.yourcolor-pwa-install-steps {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px 12px;
    align-items: center;
    margin: 0 0 22px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
    text-align: start;
}

.yourcolor-pwa-install-steps span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--yc-install-bg);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.yourcolor-pwa-install-steps strong {
    color: #1e293b;
    font-size: 14px;
}

.yourcolor-pwa-install-done {
    width: 100%;
    min-height: 48px;
    padding: 11px 18px;
    border: 0;
    border-radius: 14px;
    background: var(--yc-install-bg);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

body.yourcolor-pwa-install-modal-open {
    overflow: hidden !important;
}

@keyframes yourcolor-pwa-install-pulse {
    0% { opacity: .5; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(1.48); }
}

@media (max-width: 480px) {
    .yourcolor-pwa-install-tooltip {
        display: none;
    }

    .yourcolor-pwa-install-dialog {
        padding: 28px 18px 18px;
        border-radius: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yourcolor-pwa-install-root.has-pulse .yourcolor-pwa-install-button::before {
        animation: none;
    }

    .yourcolor-pwa-install-button,
    .yourcolor-pwa-install-tooltip {
        transition: none;
    }
}


/* Keep the floating launcher circular when themes apply global button/image rules. */
html body .yourcolor-pwa-install-root .yourcolor-pwa-install-button {
    overflow: hidden !important;
    border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%);
}

html body .yourcolor-pwa-install-root .yourcolor-pwa-install-icon,
html body .yourcolor-pwa-install-root .yourcolor-pwa-install-icon img {
    overflow: hidden !important;
    border-radius: 50% !important;
}