.smartsys-pwa-connection {
    position: fixed;
    inset: auto 1rem max(1rem, env(safe-area-inset-bottom)) 1rem;
    z-index: 10000;
    width: fit-content;
    max-width: calc(100% - 2rem);
    margin-inline: auto;
    padding: .5rem .875rem;
    border-radius: .5rem;
    background: #171719;
    color: #fff;
    border: 1px solid #767676;
    text-align: center;
    pointer-events: none;
}
.smartsys-pwa-connection[hidden] { display: none; }

.smartsys-pwa-install {
    position: relative;
    margin-block: 1rem .75rem;
    padding: .875rem 2.625rem;
    border: 1px solid var(--border, #767676);
    border-radius: .75rem;
    background: var(--bg, transparent);
    text-align: center;
    font-size: .875rem;
}
.smartsys-pwa-install-heading {
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.smartsys-pwa-install p { margin: .375rem 0 0; line-height: 1.5; }
.smartsys-pwa-install button {
    border: 1px solid var(--border, #767676);
    border-radius: .35rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.smartsys-pwa-install [data-pwa-install-close] {
    position: absolute;
    inset-block-start: .375rem;
    inset-inline-end: .375rem;
    min-width: 2rem;
    min-height: 2rem;
    font-size: 1.2rem;
}
.smartsys-pwa-install [data-pwa-install-button] { margin-top: .625rem; padding: .45rem .875rem; min-height: 40px; }
.smartsys-pwa-install[hidden], .smartsys-pwa-install [hidden] { display: none; }

.smartsys-launch[hidden], .smartsys-update[hidden] { display: none; }
.smartsys-launch:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: #ebe9e6;
    color: #272629;
    font-family: Inter, system-ui, sans-serif;
    direction: ltr;
}
.smartsys-launch-title {
    display: flex;
    font-size: clamp(2rem, 11vw, 3.75rem);
    font-weight: 650;
    line-height: 1.1;
}
.smartsys-launch-title span {
    animation: smartsys-letter .55s cubic-bezier(.2,.7,.25,1) both;
    animation-delay: calc(.1s + var(--letter) * 65ms);
}
.smartsys-launch-title span:nth-child(n+6) { color: #c71b24; }
.smartsys-launch-motion { position: relative; height: 24px; margin-top: 12px; }
.smartsys-launch-motion::before {
    content: "";
    position: absolute;
    inset: 7px 12% auto;
    height: 3px;
    border-radius: 2px;
    background: #c71b24;
    animation: smartsys-underline .81s ease-in-out .46s 2 both;
}
.smartsys-launch-dots { display: flex; justify-content: center; gap: 8px; padding-top: 4px; }
.smartsys-launch-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c71b24;
    animation: smartsys-letter .28s ease-out both;
    animation-delay: calc(2.08s + var(--dot) * 60ms);
}
.smartsys-launch-footer {
    position: absolute;
    inset-inline: 0;
    inset-block-end: max(2rem, env(safe-area-inset-bottom));
    display: grid;
    justify-items: center;
    gap: 8px;
    color: #5c595a;
    font-size: .875rem;
}
.smartsys-launch-footer img { width: 104px; height: auto; color-scheme: light; }
@keyframes smartsys-letter { from { opacity: 0; transform: translateY(14px); } }
@keyframes smartsys-underline {
    0%, 100% { transform: scaleX(0); }
    50% { transform: scaleX(1); }
}
.smartsys-update {
    position: fixed;
    inset: auto .75rem max(.75rem, env(safe-area-inset-bottom)) .75rem;
    z-index: 10001;
    margin-inline: auto;
    max-width: 28rem;
    padding: .75rem 1rem;
    border: 1px solid var(--border, #767676);
    border-radius: .75rem;
    background: var(--panel, #202023);
    color: var(--text, #fff);
    text-align: center;
}
.smartsys-update button {
    margin-inline-start: .5rem;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: .35rem;
    padding: .2rem .6rem;
}
@media (prefers-reduced-motion: reduce) {
    .smartsys-launch-title span, .smartsys-launch-dots i { animation: none; }
    .smartsys-launch-motion::before { display: none; }
}
.portal-submit[aria-busy="true"] { cursor: wait; }
.portal-submit[aria-busy="true"]::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-inline-end: .5em;
    vertical-align: -.12em;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: smartsys-spin .8s linear infinite;
}
@keyframes smartsys-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .portal-submit[aria-busy="true"]::before { animation: none; }
}