/**
 * styles.ts — All CSS for the install prompt UI.
 *
 * This runs INSIDE a Shadow DOM so it is 100% isolated.
 * It cannot be overridden by the host app's Bootstrap, Tailwind, or any other CSS.
 * It also cannot accidentally override the host app's styles.
 */
export declare const STYLES = "\n  /* \u2500\u2500\u2500 Reset \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  *, *::before, *::after {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* \u2500\u2500\u2500 Host element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  :host {\n    --kit-primary:      var(--pwa-kit-color, #6200ee);\n    --kit-primary-dark: color-mix(in srgb, var(--kit-primary) 80%, black);\n    --kit-text:         #1a1a2e;\n    --kit-subtext:      #64748b;\n    --kit-bg:           #ffffff;\n    --kit-border:       #e2e8f0;\n    --kit-shadow:       0 20px 60px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);\n    --kit-radius:       20px;\n    --kit-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    --kit-duration:     350ms;\n\n    display: block;\n    position: fixed;\n    z-index: 2147483647; /* max z-index \u2014 always on top */\n    pointer-events: none;\n    inset: 0;\n  }\n\n  /* \u2500\u2500\u2500 Backdrop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .backdrop {\n    position: absolute;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.45);\n    backdrop-filter: blur(2px);\n    -webkit-backdrop-filter: blur(2px);\n    opacity: 0;\n    transition: opacity var(--kit-duration) ease;\n    pointer-events: none;\n  }\n\n  /* \u2500\u2500\u2500 Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .card {\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%) translateY(calc(100% + 32px));\n    bottom: 20px;\n    width: min(420px, calc(100vw - 32px));\n    background: var(--kit-bg);\n    border-radius: var(--kit-radius);\n    box-shadow: var(--kit-shadow);\n    padding: 24px;\n    font-family: var(--kit-font);\n    color: var(--kit-text);\n    pointer-events: all;\n    transition: transform var(--kit-duration) cubic-bezier(0.34, 1.56, 0.64, 1),\n                opacity var(--kit-duration) ease;\n    opacity: 0;\n    border: 1px solid var(--kit-border);\n    will-change: transform;\n  }\n\n  /* \u2500\u2500\u2500 Position variants \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  :host([position=\"top\"]) .card {\n    top: 20px;\n    bottom: auto;\n    transform: translateX(-50%) translateY(calc(-100% - 32px));\n  }\n\n  :host([position=\"bottom-left\"]) .card {\n    left: 16px;\n    transform: translateX(0) translateY(calc(100% + 32px));\n  }\n\n  :host([position=\"bottom-right\"]) .card {\n    left: auto;\n    right: 16px;\n    transform: translateX(0) translateY(calc(100% + 32px));\n  }\n\n  /* \u2500\u2500\u2500 Visible state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  :host(.visible) .backdrop {\n    opacity: 1;\n    pointer-events: all;\n    cursor: pointer;\n  }\n\n  :host(.visible) .card {\n    transform: translateX(-50%) translateY(0);\n    opacity: 1;\n  }\n\n  :host(.visible[position=\"top\"]) .card {\n    transform: translateX(-50%) translateY(0);\n  }\n\n  :host(.visible[position=\"bottom-left\"]) .card,\n  :host(.visible[position=\"bottom-right\"]) .card {\n    transform: translateX(0) translateY(0);\n  }\n\n  /* \u2500\u2500\u2500 App header row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .header {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    margin-bottom: 18px;\n  }\n\n  .app-icon {\n    width: 60px;\n    height: 60px;\n    border-radius: 14px;\n    object-fit: cover;\n    flex-shrink: 0;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.12);\n    border: 1px solid var(--kit-border);\n    background: #f1f5f9;\n  }\n\n  .app-icon-placeholder {\n    width: 60px;\n    height: 60px;\n    border-radius: 14px;\n    background: linear-gradient(135deg, var(--kit-primary), var(--kit-primary-dark));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.12);\n  }\n\n  .app-icon-placeholder svg {\n    width: 30px;\n    height: 30px;\n    fill: white;\n    opacity: 0.9;\n  }\n\n  .header-text {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    background: color-mix(in srgb, var(--kit-primary) 12%, transparent);\n    color: var(--kit-primary);\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    padding: 3px 8px;\n    border-radius: 100px;\n    margin-bottom: 5px;\n  }\n\n  .app-name {\n    font-size: 18px;\n    font-weight: 700;\n    letter-spacing: -0.02em;\n    color: var(--kit-text);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .app-desc {\n    font-size: 13px;\n    color: var(--kit-subtext);\n    line-height: 1.5;\n    margin-top: 6px;\n  }\n\n  /* \u2500\u2500\u2500 Perks row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .perks {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 20px;\n    flex-wrap: wrap;\n  }\n\n  .perk {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 11.5px;\n    font-weight: 600;\n    color: var(--kit-subtext);\n    background: #f8fafc;\n    border: 1px solid var(--kit-border);\n    padding: 5px 10px;\n    border-radius: 100px;\n  }\n\n  .perk svg {\n    width: 12px;\n    height: 12px;\n    color: var(--kit-primary);\n  }\n\n  /* \u2500\u2500\u2500 Action buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .actions {\n    display: flex;\n    gap: 10px;\n  }\n\n  .btn-install {\n    flex: 1;\n    height: 46px;\n    background: var(--kit-primary);\n    color: white;\n    border: none;\n    border-radius: 12px;\n    font-size: 14px;\n    font-weight: 700;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;\n    box-shadow: 0 4px 14px color-mix(in srgb, var(--kit-primary) 40%, transparent);\n    letter-spacing: 0.01em;\n    font-family: var(--kit-font);\n  }\n\n  .btn-install:hover {\n    background: var(--kit-primary-dark);\n    transform: translateY(-1px);\n    box-shadow: 0 6px 20px color-mix(in srgb, var(--kit-primary) 50%, transparent);\n  }\n\n  .btn-install:active {\n    transform: translateY(0);\n  }\n\n  .btn-install svg {\n    width: 16px;\n    height: 16px;\n    fill: white;\n    flex-shrink: 0;\n  }\n\n  .btn-dismiss {\n    height: 46px;\n    padding: 0 18px;\n    background: transparent;\n    color: var(--kit-subtext);\n    border: 1.5px solid var(--kit-border);\n    border-radius: 12px;\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-family: var(--kit-font);\n    white-space: nowrap;\n  }\n\n  .btn-dismiss:hover {\n    background: #f8fafc;\n    color: var(--kit-text);\n    border-color: #cbd5e1;\n  }\n\n  /* \u2500\u2500\u2500 iOS Instructions panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .ios-steps {\n    margin-top: 16px;\n    display: none;\n    flex-direction: column;\n    gap: 12px;\n    padding-top: 16px;\n    border-top: 1px solid var(--kit-border);\n  }\n\n  .ios-steps.visible {\n    display: flex;\n  }\n\n  .ios-step {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-size: 13px;\n    color: var(--kit-text);\n    font-weight: 500;\n  }\n\n  .ios-step-num {\n    width: 26px;\n    height: 26px;\n    background: var(--kit-primary);\n    color: white;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    font-weight: 700;\n    flex-shrink: 0;\n  }\n\n  .ios-step-icon {\n    display: inline-flex;\n    background: #f1f5f9;\n    border-radius: 8px;\n    padding: 4px 8px;\n    font-size: 11px;\n    font-weight: 600;\n    color: #0ea5e9;\n    gap: 4px;\n    align-items: center;\n  }\n\n  /* \u2500\u2500\u2500 Close button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .btn-close {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    width: 28px;\n    height: 28px;\n    background: #f1f5f9;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.15s ease;\n    color: var(--kit-subtext);\n  }\n\n  .btn-close:hover {\n    background: #e2e8f0;\n  }\n\n  .btn-close svg {\n    width: 14px;\n    height: 14px;\n  }\n\n  /* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  @media (max-width: 460px) {\n    .card {\n      border-radius: 20px 20px 0 0;\n      bottom: 0;\n      width: 100%;\n      left: 0;\n      transform: translateX(0) translateY(calc(100% + 32px));\n    }\n\n    :host(.visible) .card {\n      transform: translateX(0) translateY(0);\n    }\n\n    .perks {\n      display: none;\n    }\n  }\n\n  /* \u2500\u2500\u2500 Reduced motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  @media (prefers-reduced-motion: reduce) {\n    .card, .backdrop {\n      transition: none;\n    }\n  }\n";