:root {
    --pwa-tabbar-h: 64px;
    --pwa-bottom: 0px;
    --pwa-glass: color-mix(in srgb, var(--ot-surface) 86%, transparent);
    --pwa-ease: cubic-bezier(.2, .7, .2, 1);
}

html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
}

.pwa-tabbar,
.pwa-sheet {
    display: none;
}

@media (max-width: 991.98px) {
    html.has-tabbar {
        --pwa-bottom: calc(var(--pwa-tabbar-h) + env(safe-area-inset-bottom));
    }

    html.has-tabbar.tabbar-hidden,
    html.has-tabbar.keyboard-open {
        --pwa-bottom: env(safe-area-inset-bottom);
    }

    html.has-tabbar body.app-shell {
        padding-bottom: calc(var(--pwa-tabbar-h) + env(safe-area-inset-bottom) + 12px);
    }

    .pwa-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        gap: 2px;
        padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        background: var(--pwa-glass);
        border-top: 1px solid color-mix(in srgb, var(--ot-border) 80%, transparent);
        box-shadow: 0 -12px 30px -22px rgba(9, 27, 45, .45);
        -webkit-backdrop-filter: saturate(160%) blur(14px);
        backdrop-filter: saturate(160%) blur(14px);
        transition: transform .28s var(--pwa-ease);
    }

    .pwa-tabbar.is-hidden,
    html.keyboard-open .pwa-tabbar {
        transform: translateY(calc(100% + 6px));
    }

    .pwa-tab {
        flex: 1 1 0;
        min-width: 0;
        min-height: 52px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 4px 2px;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: var(--ot-muted);
        text-decoration: none;
        font: inherit;
        -webkit-tap-highlight-color: transparent;
        transition: color .2s ease;
    }

    .pwa-tab__icon {
        position: relative;
        display: grid;
        place-items: center;
        width: min(48px, 100%);
        height: 30px;
        border-radius: 999px;
        transition: background-color .25s var(--pwa-ease), transform .25s var(--pwa-ease);
    }

    .pwa-tab__icon .ic {
        width: 22px;
        height: 22px;
    }

    .pwa-tab__title {
        max-width: 100%;
        overflow-wrap: anywhere;
        hyphens: auto;
        text-align: center;
        font-size: .7rem;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: .01em;
    }

    .pwa-tab:active .pwa-tab__icon {
        transform: scale(.92);
    }

    .pwa-tab.is-active {
        color: var(--ot-primary);
    }

    .pwa-tab.is-active .pwa-tab__icon {
        background: var(--ot-primary-soft);
    }

    .pwa-tab.is-locked {
        opacity: .62;
    }

    .pwa-tab:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--ot-primary) 55%, transparent);
        outline-offset: 1px;
    }

    .pwa-tab__badge,
    .pwa-quick__badge {
        position: absolute;
        top: -3px;
        right: 2px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: #D92D20;
        color: #FFFFFF;
        font-size: .66rem;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        box-shadow: 0 0 0 2px var(--ot-surface);
    }

    .pwa-sheet {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1100;
    }

    .pwa-sheet[hidden] {
        display: none;
    }

    .pwa-sheet__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(8, 18, 28, .42);
        opacity: 0;
        transition: opacity .24s ease;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    .pwa-sheet.is-open .pwa-sheet__backdrop {
        opacity: 1;
    }

    .pwa-sheet__panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        max-height: min(88vh, 100% - 24px);
        padding: 0 16px calc(14px + env(safe-area-inset-bottom));
        background: var(--ot-surface);
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -24px 60px -30px rgba(8, 22, 36, .6);
        transform: translateY(100%);
        transition: transform .3s var(--pwa-ease);
        outline: none;
    }

    .pwa-sheet.is-open .pwa-sheet__panel {
        transform: translateY(0);
    }

    .pwa-sheet__handle {
        display: grid;
        place-items: center;
        height: 26px;
        flex: none;
        touch-action: none;
    }

    .pwa-sheet__handle span {
        width: 44px;
        height: 5px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--ot-muted) 45%, transparent);
    }

    .pwa-sheet__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex: none;
        margin-bottom: 12px;
    }

    .pwa-sheet__title {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1.3;
    }

    .pwa-sheet__close {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 14px;
        background: var(--ot-surface-alt);
        color: var(--ot-text);
    }

    .pwa-sheet__search {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: none;
        min-height: 48px;
        margin-bottom: 14px;
        padding: 0 14px;
        border: 1px solid var(--ot-border);
        border-radius: 14px;
        background: var(--ot-surface-alt);
        color: var(--ot-muted);
    }

    .pwa-sheet__search:focus-within {
        border-color: color-mix(in srgb, var(--ot-primary) 55%, var(--ot-border));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--ot-primary) 16%, transparent);
    }

    .pwa-sheet__search input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        outline: none;
        background: transparent;
        color: var(--ot-text);
        font: inherit;
    }

    .pwa-sheet__quick {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        flex: none;
        margin-bottom: 14px;
    }

    .pwa-quick {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        min-height: 72px;
        padding: 10px 2px;
        border: 1px solid var(--ot-border);
        border-radius: 16px;
        background: var(--ot-surface);
        color: var(--ot-text);
        text-decoration: none;
        font: inherit;
    }

    .pwa-quick__icon {
        position: relative;
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 12px;
        background: var(--ot-primary-soft);
        color: var(--ot-primary);
    }

    .pwa-quick__badge {
        top: -6px;
        right: -8px;
    }

    .pwa-quick__title {
        max-width: 100%;
        min-width: 0;
        font-size: .7rem;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .pwa-quick__moon,
    [data-bs-theme="dark"] .pwa-quick__sun {
        display: none;
    }

    [data-bs-theme="dark"] .pwa-quick__moon {
        display: inline;
    }

    .pwa-sheet__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        margin: 0 -16px;
        padding: 2px 16px 8px;
    }

    .pwa-sheet__group + .pwa-sheet__group {
        margin-top: 18px;
    }

    .pwa-sheet__caption {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 10px;
        color: var(--ot-muted);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .pwa-sheet__dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: hsl(var(--hue) 70% 48%);
        box-shadow: 0 0 0 3px hsl(var(--hue) 70% 48% / .16);
    }

    .pwa-sheet__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .pwa-sheet__item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        min-height: 92px;
        padding: 12px 6px 10px;
        border: 1px solid var(--ot-border);
        border-radius: 16px;
        background: var(--ot-surface);
        color: var(--ot-text);
        text-decoration: none;
        text-align: center;
        transition: transform .18s ease, border-color .18s ease;
    }

    .pwa-sheet__item:active {
        transform: scale(.97);
    }

    .pwa-sheet__item[hidden] {
        display: none;
    }

    .pwa-sheet__icon {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 13px;
        background: hsl(var(--hue) 70% 48% / .12);
        color: hsl(var(--hue) 62% 38%);
    }

    [data-bs-theme="dark"] .pwa-sheet__icon {
        background: hsl(var(--hue) 60% 55% / .18);
        color: hsl(var(--hue) 72% 70%);
    }

    .pwa-sheet__name {
        display: block;
        max-width: 100%;
        min-width: 0;
        font-size: .76rem;
        font-weight: 600;
        line-height: 1.25;
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    .pwa-sheet__item.is-locked {
        opacity: .7;
    }

    .pwa-sheet__lock {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 13px;
        height: 13px;
        color: var(--ot-muted);
    }

    .pwa-sheet__new {
        position: absolute;
        top: 6px;
        right: 6px;
        padding: 1px 6px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--ot-new-from, #7C3AED), var(--ot-new-to, #DB2777));
        color: #FFFFFF;
        font-size: .58rem;
        font-weight: 700;
        line-height: 1.5;
        text-transform: uppercase;
    }

    .pwa-sheet__empty {
        margin: 20px 0;
        color: var(--ot-muted);
        text-align: center;
    }

    .pwa-sheet__foot {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 20px;
        padding-top: 14px;
        border-top: 1px solid var(--ot-border);
    }

    .pwa-sheet__logout {
        margin: 0;
    }

    .pwa-sheet__link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid var(--ot-border);
        border-radius: 12px;
        background: var(--ot-surface);
        color: var(--ot-text);
        text-decoration: none;
        font: inherit;
        font-size: .86rem;
        font-weight: 600;
    }

    html.pwa-sheet-open,
    html.pwa-sheet-open body {
        overflow: hidden;
    }

    @media (max-width: 359.98px) {
        .pwa-sheet__quick,
        .pwa-sheet__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    html.has-tabbar .toast-stack {
        bottom: calc(12px + var(--pwa-bottom));
    }

    html.has-tabbar .offline-banner {
        bottom: calc(12px + var(--pwa-bottom));
    }

    html.has-tabbar .sticky-actions,
    html.has-tabbar .mobile-summary,
    html.has-tabbar .sticky-bar,
    html.has-tabbar .p3-detail,
    html.has-tabbar .np-savebar {
        bottom: var(--pwa-bottom);
    }

    html.has-tabbar .autosave,
    html.has-tabbar .cookie {
        bottom: calc(1rem + var(--pwa-bottom));
    }

    html.has-tabbar .eq-selbar,
    html.has-tabbar .ins-selectbar,
    html.has-tabbar .siz-actbar,
    html.has-tabbar .vac-actionbar {
        bottom: calc(.75rem + var(--pwa-bottom));
    }

    html.has-tabbar .ins-savebar,
    html.has-tabbar .ts-import__bar {
        bottom: calc(.5rem + var(--pwa-bottom));
    }

    html.has-tabbar .notify-savebar,
    html.has-tabbar .ta-dock {
        bottom: calc(12px + var(--pwa-bottom));
    }

    html.has-tabbar .mi-sheet__bar {
        bottom: calc(1rem + var(--pwa-bottom));
    }

    html.has-tabbar .bear {
        bottom: calc(var(--bear-bottom, 16px) + var(--pwa-bottom));
    }

    html.has-tabbar :is(.toast-stack, .offline-banner, .sticky-actions, .mobile-summary, .sticky-bar, .p3-detail, .np-savebar,
        .autosave, .cookie, .eq-selbar, .ins-selectbar, .siz-actbar, .vac-actionbar, .ins-savebar, .ts-import__bar,
        .notify-savebar, .ta-dock, .mi-sheet__bar) {
        transition: bottom .28s var(--pwa-ease);
    }
}

.pwa-toasts {
    position: fixed;
    left: 50%;
    bottom: calc(16px + var(--pwa-bottom));
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(420px, calc(100vw - 32px));
    transform: translateX(-50%);
    pointer-events: none;
}

.pwa-toast {
    padding: 12px 16px;
    border: 1px solid var(--ot-border);
    border-left: 4px solid var(--ot-primary);
    border-radius: 14px;
    background: var(--ot-surface);
    color: var(--ot-text);
    box-shadow: 0 14px 34px -20px rgba(8, 22, 36, .55);
    font-size: .92rem;
    line-height: 1.45;
    animation: pwa-toast-in .24s var(--pwa-ease);
    transition: opacity .2s ease, transform .2s ease;
}

.pwa-toast--success { border-left-color: #1E8E5A; }
.pwa-toast--warning { border-left-color: #D97706; }
.pwa-toast--error { border-left-color: #D92D20; }

.pwa-toast.is-leaving {
    opacity: 0;
    transform: translateY(6px);
}

@keyframes pwa-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.pwa-live-banner {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    left: 50%;
    z-index: 1095;
    max-width: calc(100vw - 32px);
    padding: 8px 16px 8px 34px;
    border-radius: 999px;
    background: #92400E;
    color: #FFFFFF;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.35;
    transform: translateX(-50%);
    box-shadow: 0 10px 26px -16px rgba(0, 0, 0, .6);
}

.pwa-live-banner::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: pwa-spin .9s linear infinite;
}

.pwa-live-banner[hidden] {
    display: none;
}

@keyframes pwa-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-tabbar,
    .pwa-sheet__panel,
    .pwa-sheet__backdrop,
    .pwa-toast {
        transition: none;
        animation: none;
    }

    .pwa-live-banner::before {
        animation: none;
    }
}

.pwa-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ot-border);
    border-radius: 999px;
    background: var(--ot-surface);
    color: var(--ot-muted);
    font-size: .85rem;
    line-height: 1.3;
}

.pwa-save__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ot-muted) 60%, transparent);
}

.pwa-save[data-kind="busy"] .pwa-save__dot { background: #D97706; }
.pwa-save[data-kind="ok"] { color: #1E7A4F; border-color: color-mix(in srgb, #1E8E5A 40%, var(--ot-border)); }
.pwa-save[data-kind="ok"] .pwa-save__dot { background: #1E8E5A; }
.pwa-save[data-kind="error"] { color: #B42318; border-color: color-mix(in srgb, #D92D20 40%, var(--ot-border)); }
.pwa-save[data-kind="error"] .pwa-save__dot { background: #D92D20; }

.pwa-anchors {
    position: sticky;
    top: calc(var(--topbar-h, 0px) + 8px);
    z-index: 5;
    display: flex;
    gap: 8px;
    margin: 0 0 20px;
    padding: 6px;
    overflow-x: auto;
    border: 1px solid var(--ot-border);
    border-radius: 16px;
    background: var(--pwa-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    scrollbar-width: none;
}

.pwa-anchors::-webkit-scrollbar {
    display: none;
}

.pwa-anchors__item {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 11px;
    color: var(--ot-text);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pwa-anchors__item:hover,
.pwa-anchors__item:focus-visible {
    background: var(--ot-primary-soft);
    color: var(--ot-primary);
}

.pwa-layout {
    display: grid;
    gap: 20px;
    align-items: start;
}

.pwa-layout__main,
.pwa-layout__side {
    display: grid;
    gap: 20px;
    min-width: 0;
}

@media (min-width: 1200px) {
    .pwa-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .pwa-layout__side {
        position: sticky;
        top: 24px;
    }
}

.pwa-card {
    scroll-margin-top: 90px;
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--ot-border);
    border-radius: var(--ot-radius, 16px);
    background: var(--ot-surface);
    box-shadow: 0 10px 30px -26px rgba(9, 27, 45, .5);
}

.pwa-card--soft {
    background: color-mix(in srgb, var(--ot-primary-soft) 55%, var(--ot-surface));
    box-shadow: none;
}

.pwa-card__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.pwa-card__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--ot-primary-soft);
    color: var(--ot-primary);
}

.pwa-card__icon .ic {
    width: 22px;
    height: 22px;
}

.pwa-card__titles {
    min-width: 0;
}

.pwa-card__title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
}

.pwa-card__hint,
.pwa-card__text {
    margin: 6px 0 0;
    color: var(--ot-muted);
    font-size: .92rem;
    line-height: 1.5;
}

.pwa-howto {
    display: grid;
    gap: 12px;
    margin: 12px 0 0;
    padding-left: 20px;
    color: var(--ot-text);
    font-size: .92rem;
    line-height: 1.5;
}

.pwa-rows {
    display: grid;
}

.pwa-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--ot-border);
}

.pwa-row:first-child {
    padding-top: 4px;
    border-top: 0;
}

.pwa-row--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.pwa-row__text {
    display: grid;
    gap: 4px;
    min-width: 0;
    margin: 0;
}

.pwa-row__title {
    font-weight: 600;
    line-height: 1.35;
}

.pwa-row__hint {
    color: var(--ot-muted);
    font-size: .88rem;
    line-height: 1.5;
}

.pwa-row__action {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: 8px;
}

.pwa-row--times {
    justify-content: flex-start;
    gap: 12px;
    padding-top: 0;
    border-top: 0;
    transition: opacity .2s ease;
}

.pwa-row--times.is-off {
    opacity: .5;
}

.pwa-time {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.pwa-time__label {
    color: var(--ot-muted);
    font-size: .9rem;
}

.pwa-time .form-control {
    width: 124px;
    min-height: 44px;
}

.pwa-switch {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    min-width: 52px;
    min-height: 44px;
    margin: 0;
    cursor: pointer;
}

.pwa-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.pwa-switch__track {
    position: relative;
    width: 52px;
    height: 30px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ot-muted) 35%, var(--ot-surface-alt));
    transition: background-color .2s ease;
}

.pwa-switch__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    transition: transform .22s var(--pwa-ease);
}

.pwa-switch input:checked + .pwa-switch__track {
    background: var(--ot-primary);
}

.pwa-switch input:checked + .pwa-switch__track .pwa-switch__knob {
    transform: translateX(22px);
}

.pwa-switch input:focus-visible + .pwa-switch__track {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ot-primary) 30%, transparent);
}

.pwa-switch input:disabled + .pwa-switch__track {
    opacity: .5;
}

.pwa-seg {
    display: flex;
    gap: 6px;
    padding: 5px;
    overflow-x: auto;
    border: 1px solid var(--ot-border);
    border-radius: 14px;
    background: var(--ot-surface-alt);
    scrollbar-width: none;
}

.pwa-seg::-webkit-scrollbar {
    display: none;
}

.pwa-seg__item {
    position: relative;
    display: inline-flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ot-muted);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.pwa-seg__item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pwa-seg__item.is-active,
.pwa-seg__item:has(input:checked) {
    background: var(--ot-surface);
    color: var(--ot-primary);
    box-shadow: 0 2px 8px -4px rgba(9, 27, 45, .35);
}

.pwa-seg__item:has(input:focus-visible),
.pwa-seg__item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ot-primary) 50%, transparent);
    outline-offset: 1px;
}

.pwa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pwa-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--ot-surface-alt);
    color: var(--ot-muted);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
}

.pwa-chip--ok {
    background: color-mix(in srgb, #1E8E5A 14%, transparent);
    color: #1E7A4F;
}

.pwa-chip--off {
    background: color-mix(in srgb, #D92D20 12%, transparent);
    color: #B42318;
}

[data-bs-theme="dark"] .pwa-chip--ok { color: #6FD3A3; }
[data-bs-theme="dark"] .pwa-chip--off { color: #FF9C94; }

.pwa-chips--pick {
    gap: 8px;
}

.pwa-pick {
    position: relative;
    margin: 0;
}

.pwa-pick input {
    position: absolute;
    opacity: 0;
}

.pwa-pick span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--ot-border);
    border-radius: 12px;
    background: var(--ot-surface);
    color: var(--ot-text);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.pwa-pick input:checked + span {
    border-color: var(--ot-primary);
    background: var(--ot-primary-soft);
    color: var(--ot-primary);
}

.pwa-pick input:focus-visible + span {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ot-primary) 25%, transparent);
}

.pwa-kinds {
    display: grid;
    gap: 8px;
}

.pwa-kind {
    position: relative;
    margin: 0;
}

.pwa-kind input {
    position: absolute;
    opacity: 0;
}

.pwa-kind__box {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 14px;
    border: 1px solid var(--ot-border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}

.pwa-kind__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--ot-surface-alt);
    color: var(--ot-muted);
}

.pwa-kind__text {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

.pwa-kind__title {
    font-weight: 600;
    line-height: 1.3;
}

.pwa-kind__hint {
    color: var(--ot-muted);
    font-size: .84rem;
    line-height: 1.4;
}

.pwa-kind__check {
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 2px solid var(--ot-border);
    border-radius: 8px;
    color: transparent;
}

.pwa-kind input:checked + .pwa-kind__box {
    border-color: color-mix(in srgb, var(--ot-primary) 55%, var(--ot-border));
    background: color-mix(in srgb, var(--ot-primary-soft) 60%, transparent);
}

.pwa-kind input:checked + .pwa-kind__box .pwa-kind__icon {
    background: var(--ot-primary-soft);
    color: var(--ot-primary);
}

.pwa-kind input:checked + .pwa-kind__box .pwa-kind__check {
    border-color: var(--ot-primary);
    background: var(--ot-primary);
    color: #FFFFFF;
}

.pwa-kind input:focus-visible + .pwa-kind__box {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ot-primary) 25%, transparent);
}

.pwa-link-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
    padding: 14px 16px;
    border: 1px solid var(--ot-border);
    border-radius: 14px;
    color: var(--ot-text);
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}

.pwa-link-card:hover {
    border-color: color-mix(in srgb, var(--ot-primary) 45%, var(--ot-border));
    transform: translateY(-1px);
}

.pwa-link-card__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ot-primary-soft);
    color: var(--ot-primary);
}

.pwa-link-card__text {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

.pwa-link-card__title {
    font-weight: 600;
}

.pwa-link-card__hint {
    color: var(--ot-muted);
    font-size: .86rem;
    line-height: 1.45;
}

.pwa-link-card__arrow {
    flex: none;
    color: var(--ot-muted);
}

.pwa-test {
    margin-top: 6px;
    padding: 16px;
    border-radius: 16px;
    background: var(--ot-surface-alt);
}

.pwa-test__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pwa-test__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.pwa-test__hint {
    margin: 4px 0 0;
    color: var(--ot-muted);
    font-size: .88rem;
    line-height: 1.5;
}

.pwa-test__head .btn {
    flex: none;
    min-height: 44px;
}

.pwa-test__steps {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.pwa-test__step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--ot-surface);
    transition: background-color .2s ease;
}

.pwa-test__mark {
    position: relative;
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border: 2px solid var(--ot-border);
    border-radius: 50%;
}

.pwa-test__step.is-run .pwa-test__mark {
    border-color: color-mix(in srgb, var(--ot-primary) 30%, transparent);
    border-top-color: var(--ot-primary);
    animation: pwa-spin .8s linear infinite;
}

.pwa-test__step.is-ok .pwa-test__mark {
    border-color: #1E8E5A;
    background: #1E8E5A;
}

.pwa-test__step.is-ok .pwa-test__mark::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pwa-test__step.is-fail .pwa-test__mark {
    border-color: #D92D20;
    background: #D92D20;
}

.pwa-test__step.is-fail .pwa-test__mark::before,
.pwa-test__step.is-fail .pwa-test__mark::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 4px;
    width: 2px;
    height: 12px;
    background: #FFFFFF;
    transform: rotate(45deg);
}

.pwa-test__step.is-fail .pwa-test__mark::after {
    transform: rotate(-45deg);
}

.pwa-test__step.is-skip .pwa-test__mark {
    border-style: dashed;
}

.pwa-test__step.is-fail {
    background: color-mix(in srgb, #D92D20 8%, var(--ot-surface));
}

.pwa-test__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.pwa-test__name {
    font-weight: 600;
    line-height: 1.35;
}

.pwa-test__detail {
    color: var(--ot-muted);
    font-size: .86rem;
    line-height: 1.45;
}

.pwa-test__detail:empty {
    display: none;
}

.pwa-test__help {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, #D97706 40%, var(--ot-border));
    border-radius: 14px;
    background: color-mix(in srgb, #D97706 8%, var(--ot-surface));
}

.pwa-test__help-title {
    margin: 0 0 8px;
    font-size: .95rem;
    font-weight: 700;
}

.pwa-test__tips {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    font-size: .88rem;
    line-height: 1.5;
}

.pwa-devices {
    display: grid;
    gap: 12px;
}

.pwa-dev {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--ot-border);
    border-radius: 16px;
}

.pwa-dev.is-off {
    background: var(--ot-surface-alt);
}

.pwa-dev__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--ot-primary-soft);
    color: var(--ot-primary);
}

.pwa-dev.is-off .pwa-dev__icon {
    background: var(--ot-surface);
    color: var(--ot-muted);
}

.pwa-dev__body {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.pwa-dev__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.pwa-dev__meta,
.pwa-dev__reason {
    margin: 0;
    color: var(--ot-muted);
    font-size: .84rem;
    line-height: 1.5;
}

.pwa-dev__reason {
    color: #B45309;
}

.pwa-dev__result {
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--ot-surface-alt);
    font-size: .86rem;
    line-height: 1.45;
}

.pwa-dev__result.is-ok { background: color-mix(in srgb, #1E8E5A 12%, transparent); color: #1E7A4F; }
.pwa-dev__result.is-warn { background: color-mix(in srgb, #D97706 12%, transparent); color: #92400E; }
.pwa-dev__result.is-fail { background: color-mix(in srgb, #D92D20 10%, transparent); color: #B42318; }

.pwa-dev__actions {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2;
    gap: 8px;
}

.pwa-dev__actions .btn {
    min-height: 40px;
}

.pwa-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 24px 12px;
    text-align: center;
}

.pwa-empty__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 16px;
    background: var(--ot-primary-soft);
    color: var(--ot-primary);
}

.pwa-empty__title {
    margin: 0;
    font-weight: 700;
}

.pwa-empty__text {
    max-width: 420px;
    margin: 0;
    color: var(--ot-muted);
    font-size: .9rem;
    line-height: 1.5;
}

.pwa-tabs-editor {
    display: grid;
    gap: 20px;
    align-items: start;
}

@media (min-width: 768px) {
    .pwa-tabs-editor {
        grid-template-columns: 240px minmax(0, 1fr);
    }
}

.pwa-phone {
    justify-self: center;
    width: 220px;
    padding: 10px;
    border-radius: 34px;
    background: linear-gradient(160deg, #1F2A37, #0B1218);
    box-shadow: 0 30px 60px -36px rgba(8, 22, 36, .8), inset 0 0 0 2px rgba(255, 255, 255, .06);
    transform: perspective(900px) rotateY(-8deg) rotateX(4deg);
}

.pwa-phone__screen {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 360px;
    overflow: hidden;
    border-radius: 26px;
    background: var(--ot-bg);
}

.pwa-phone__lines {
    display: grid;
    gap: 10px;
    padding: 28px 16px;
}

.pwa-phone__lines span {
    height: 44px;
    border-radius: 12px;
    background: var(--ot-surface);
    box-shadow: 0 1px 0 var(--ot-border);
}

.pwa-phone__lines span:nth-child(2) {
    height: 72px;
}

.pwa-phone__bar {
    display: flex;
    gap: 2px;
    padding: 6px 6px 10px;
    border-top: 1px solid var(--ot-border);
    background: var(--ot-surface);
}

.pwa-phone__tab {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    color: var(--ot-muted);
    font-size: .56rem;
    font-weight: 600;
}

.pwa-phone__tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-phone__tab .ic {
    width: 16px;
    height: 16px;
}

.pwa-phone__tab.is-active {
    color: var(--ot-primary);
}

.pwa-tabs-editor__side {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.pwa-tabs-editor__side > .btn {
    justify-self: start;
    min-height: 40px;
}

.pwa-tabs-editor__count {
    margin: 0;
    color: var(--ot-muted);
    font-size: .9rem;
}

.pwa-tab-options {
    display: grid;
    gap: 6px;
    max-height: 420px;
    margin: 0;
    padding: 0 4px 0 0;
    overflow-y: auto;
    list-style: none;
}

.pwa-tab-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--ot-border);
    border-radius: 12px;
    background: var(--ot-surface);
}

.pwa-tab-option.is-on {
    border-color: color-mix(in srgb, var(--ot-primary) 45%, var(--ot-border));
    background: color-mix(in srgb, var(--ot-primary-soft) 55%, var(--ot-surface));
}

.pwa-tab-option__main {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    cursor: pointer;
}

.pwa-tab-option__main input {
    flex: none;
    width: 20px;
    height: 20px;
    accent-color: var(--ot-primary);
}

.pwa-tab-option__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--ot-surface-alt);
    color: var(--ot-primary);
}

.pwa-tab-option__text {
    display: grid;
    min-width: 0;
}

.pwa-tab-option__title {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: break-word;
    hyphens: manual;
}

.pwa-tab-option__group {
    color: var(--ot-muted);
    font-size: .78rem;
}

.pwa-tab-option__move {
    display: flex;
    flex: none;
    gap: 4px;
}

.pwa-icon-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--ot-border);
    border-radius: 10px;
    background: var(--ot-surface);
    color: var(--ot-text);
}

.pwa-icon-btn .ic {
    transform: rotate(-90deg);
}

.pwa-icon-btn--down .ic {
    transform: rotate(90deg);
}

.pwa-icon-btn:disabled {
    opacity: .4;
}

.pwa-hero {
    position: relative;
    display: grid;
    gap: 28px;
    align-items: center;
    margin-bottom: 28px;
    padding: 32px 28px;
    overflow: hidden;
    border: 1px solid var(--ot-border);
    border-radius: 24px;
    background:
        radial-gradient(ellipse at 85% 10%, color-mix(in srgb, var(--ot-primary) 20%, transparent), transparent 60%),
        radial-gradient(ellipse at 10% 100%, color-mix(in srgb, #12B5A6 14%, transparent), transparent 55%),
        var(--ot-surface);
}

@media (min-width: 992px) {
    .pwa-hero {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        padding: 44px 40px;
    }
}

.pwa-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--ot-primary) 30%, var(--ot-border));
    border-radius: 999px;
    color: var(--ot-primary);
    font-size: .82rem;
    font-weight: 700;
}

.pwa-hero__title {
    margin: 16px 0 12px;
    font-size: clamp(1.7rem, 4.6vw, 2.6rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.pwa-hero__lead {
    max-width: 560px;
    margin: 0 0 22px;
    color: var(--ot-muted);
    font-size: 1.04rem;
    line-height: 1.6;
}

.pwa-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pwa-hero__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
}

.pwa-hero__install.is-done {
    background: #1E8E5A;
    border-color: #1E8E5A;
    opacity: 1;
}

.pwa-hero__status {
    max-width: 560px;
    margin: 14px 0 0;
    color: var(--ot-muted);
    font-size: .92rem;
    line-height: 1.5;
}

.pwa-hero__status:empty,
.pwa-hero__status[hidden] {
    display: none;
}

.pwa-scene {
    position: relative;
    height: 340px;
    perspective: 1200px;
}

.pwa-scene__glow {
    position: absolute;
    inset: 12% 8%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ot-primary) 28%, transparent), transparent 70%);
    filter: blur(20px);
}

.pwa-laptop {
    position: absolute;
    top: 30px;
    left: 4%;
    width: 72%;
    transform: rotateY(18deg) rotateX(8deg);
    transform-style: preserve-3d;
    animation: pwa-float 7s ease-in-out infinite;
}

.pwa-laptop__screen {
    padding: 10px;
    border-radius: 14px 14px 4px 4px;
    background: linear-gradient(160deg, #233243, #0E1621);
    box-shadow: 0 30px 60px -30px rgba(8, 22, 36, .75);
}

.pwa-laptop__base {
    height: 12px;
    margin: 0 -6%;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, #C9D3DE, #8C9AAA);
}

.pwa-mock {
    display: flex;
    gap: 8px;
    height: 170px;
    padding: 10px;
    border-radius: 6px;
    background: var(--ot-bg);
}

.pwa-mock__side {
    display: grid;
    align-content: start;
    gap: 8px;
    width: 26px;
}

.pwa-mock__side span {
    height: 14px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--ot-primary) 25%, var(--ot-surface));
}

.pwa-mock__main {
    display: flex;
    flex: 1;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    background: var(--ot-surface);
}

.pwa-mock__ring {
    display: grid;
    flex: none;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: conic-gradient(#D92D20 0 54%, color-mix(in srgb, var(--ot-muted) 20%, transparent) 0);
    color: var(--ot-text);
    font-weight: 800;
}

.pwa-mock__ring span {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--ot-surface);
}

.pwa-mock__bars {
    display: grid;
    flex: 1;
    gap: 9px;
}

.pwa-mock__bars span {
    width: var(--w);
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ot-primary), color-mix(in srgb, var(--ot-primary) 45%, #12B5A6));
}

.pwa-device-3d {
    position: absolute;
    right: 4%;
    bottom: 6px;
    width: 156px;
    padding: 8px;
    border-radius: 30px;
    background: linear-gradient(160deg, #263445, #0B1218);
    box-shadow: 0 34px 60px -26px rgba(8, 22, 36, .8), inset 0 0 0 2px rgba(255, 255, 255, .08);
    transform: rotateY(-20deg) rotateX(6deg) rotateZ(2deg);
    animation: pwa-float 6s ease-in-out infinite reverse;
}

.pwa-device-3d__screen {
    position: relative;
    height: 290px;
    overflow: hidden;
    border-radius: 23px;
    background: linear-gradient(180deg, #1B5E8C, #0F3554);
}

.pwa-device-3d__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px 0;
    color: rgba(255, 255, 255, .9);
    font-size: .55rem;
    font-weight: 700;
}

.pwa-device-3d__notch {
    width: 46px;
    height: 12px;
    border-radius: 999px;
    background: #0B1218;
}

.pwa-device-3d__icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 10px;
    padding: 96px 14px 0;
}

.pwa-device-3d__app {
    aspect-ratio: 1;
    border-radius: 9px;
    background: rgba(255, 255, 255, .22);
}

.pwa-device-3d__app.is-ursot {
    background: url("../img/icon-192.ce4a91b673f6.png") center / cover;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}

.pwa-push-mock {
    position: absolute;
    top: 26px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    color: #16202B;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55);
    animation: pwa-push 6s ease-in-out infinite;
}

.pwa-push-mock__icon {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: url("../img/icon-192.ce4a91b673f6.png") center / cover;
}

.pwa-push-mock__text {
    display: grid;
    gap: 1px;
    font-size: .5rem;
    line-height: 1.3;
}

.pwa-push-mock__text strong {
    font-size: .52rem;
}

@keyframes pwa-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

@keyframes pwa-push {
    0%, 8% { opacity: 0; transform: translateY(-14px) scale(.96); }
    16%, 78% { opacity: 1; transform: translateY(0) scale(1); }
    90%, 100% { opacity: 0; transform: translateY(-10px) scale(.98); }
}

@media (max-width: 575.98px) {
    .pwa-hero {
        padding: 24px 18px;
    }

    .pwa-scene {
        height: 280px;
    }

    .pwa-laptop {
        left: 0;
        width: 78%;
    }

    .pwa-mock {
        height: 130px;
    }

    .pwa-device-3d {
        right: 0;
        width: 128px;
    }

    .pwa-device-3d__screen {
        height: 236px;
    }

    .pwa-device-3d__icons {
        padding-top: 80px;
    }

    .pwa-hero__actions .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

.pwa-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.pwa-benefit {
    padding: 20px;
    border: 1px solid var(--ot-border);
    border-radius: 18px;
    background: var(--ot-surface);
    transition: transform .2s ease, box-shadow .2s ease;
}

.pwa-benefit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -26px rgba(9, 27, 45, .55);
}

.pwa-benefit__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: var(--ot-primary-soft);
    color: var(--ot-primary);
}

.pwa-benefit__title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.pwa-benefit__text {
    margin: 0;
    color: var(--ot-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.pwa-install-grid {
    display: grid;
    gap: 20px;
    align-items: start;
    margin-bottom: 28px;
}

@media (min-width: 1100px) {
    .pwa-install-grid {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

.pwa-section-head {
    margin-bottom: 14px;
}

.pwa-section-head__title {
    margin: 0 0 6px;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
}

.pwa-section-head__hint {
    margin: 0;
    color: var(--ot-muted);
    line-height: 1.55;
}

.pwa-steps {
    scroll-margin-top: 90px;
    padding: 24px;
    border: 1px solid var(--ot-border);
    border-radius: 20px;
    background: var(--ot-surface);
}

.pwa-steps.is-flash {
    animation: pwa-flash 1.2s ease;
}

@keyframes pwa-flash {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ot-primary) 45%, transparent); }
    100% { box-shadow: 0 0 0 14px transparent; }
}

.pwa-steps .pwa-seg {
    margin-bottom: 18px;
}

.pwa-step-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pwa-step {
    display: flex;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--ot-border);
    border-radius: 16px;
}

.pwa-step__num {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ot-primary);
    color: #FFFFFF;
    font-weight: 800;
}

.pwa-step__body {
    min-width: 0;
}

.pwa-step__title {
    margin: 4px 0 6px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.pwa-step__text {
    margin: 0;
    color: var(--ot-muted);
    font-size: .92rem;
    line-height: 1.55;
}

.pwa-key {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: 0 2px;
    border: 1px solid var(--ot-border);
    border-radius: 8px;
    background: var(--ot-surface-alt);
    color: var(--ot-primary);
    vertical-align: middle;
}

.pwa-key .ic {
    width: 15px;
    height: 15px;
}

.pwa-qr {
    padding: 22px;
    border: 1px solid var(--ot-border);
    border-radius: 20px;
    background: var(--ot-surface);
    text-align: center;
}

.pwa-qr__title {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 700;
}

.pwa-qr__text {
    margin: 0 0 14px;
    color: var(--ot-muted);
    font-size: .9rem;
    line-height: 1.5;
}

.pwa-qr__code {
    display: inline-block;
    padding: 12px;
    border-radius: 16px;
    background: #FFFFFF;
}

.pwa-qr__svg {
    display: block;
    width: 180px;
    height: 180px;
}

.pwa-qr__url {
    margin: 12px 0 0;
    color: var(--ot-muted);
    font-size: .8rem;
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .pwa-qr {
        display: none;
    }
}

.pwa-faq {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.pwa-faq > .pwa-section-head__title {
    margin-bottom: 4px;
}

.pwa-faq__item {
    padding: 0 18px;
    border: 1px solid var(--ot-border);
    border-radius: 16px;
    background: var(--ot-surface);
}

.pwa-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 12px 0;
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

.pwa-faq__item summary::-webkit-details-marker {
    display: none;
}

.pwa-faq__item summary::after {
    content: "+";
    flex: none;
    color: var(--ot-primary);
    font-size: 1.4rem;
    line-height: 1;
    transition: transform .2s ease;
}

.pwa-faq__item[open] summary::after {
    transform: rotate(45deg);
}

.pwa-faq__item p {
    margin: 0 0 16px;
    color: var(--ot-muted);
    line-height: 1.6;
}

@media (max-width: 575.98px) {
    .pwa-card {
        padding: 18px 16px;
    }

    .pwa-row:not(.pwa-row--stack):not(.pwa-row--times) {
        align-items: flex-start;
    }

    .pwa-test__head {
        flex-direction: column;
        align-items: stretch;
    }

    .pwa-dev {
        grid-template-columns: minmax(0, 1fr);
    }

    .pwa-dev__icon {
        display: none;
    }

    .pwa-dev__actions {
        grid-column: 1;
    }

    .pwa-dev__actions .btn {
        flex: 1 1 auto;
    }

    .pwa-steps {
        padding: 18px 14px;
    }

    .pwa-step {
        padding: 14px 12px;
    }

    .pwa-time .form-control {
        width: 110px;
    }
}

@media (max-width: 399.98px) {
    .pwa-row--times {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pwa-time {
        min-width: 0;
    }

    .pwa-time__label {
        flex: none;
        min-width: 1.6rem;
    }

    .pwa-time .form-control {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 359.98px) {
    .pwa-row--times {
        grid-template-columns: minmax(0, 1fr);
    }

    .pwa-steps .pwa-seg {
        flex-wrap: wrap;
    }

    .pwa-steps .pwa-seg__item {
        flex: 1 1 40%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-laptop,
    .pwa-device-3d,
    .pwa-push-mock,
    .pwa-test__step.is-run .pwa-test__mark {
        animation: none;
    }
}

.pwa-rows > *,
.pwa-install-grid > *,
.pwa-layout__main > *,
.pwa-row__text,
.pwa-seg,
.pwa-tabs-editor > * {
    min-width: 0;
}

.pwa-seg--fill .pwa-seg__item {
    flex: 1 1 0;
}

@media (max-width: 520px) {
    .pwa-seg__item {
        flex: 1 1 0;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
        min-height: 56px;
        padding: 6px 6px;
        font-size: .8rem;
        line-height: 1.25;
        white-space: normal;
        text-align: center;
    }
}

:is(.pwa-layout, .page-head__actions, .pwa-steps, .pwa-hero, .pwa-me) .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

:is(.pwa-layout, .page-head__actions, .pwa-hero, .pwa-me) .btn .ic {
    flex: none;
}

@media (max-width: 575.98px) {
    .pwa-benefits {
        gap: 12px;
    }

    .pwa-benefit {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 14px;
        padding: 16px;
    }

    .pwa-benefit__icon {
        grid-row: span 2;
        margin-bottom: 0;
    }

    .pwa-hero__actions .btn {
        font-size: 1rem;
    }
}

.me-tabbar {
    transition: transform .28s var(--pwa-ease);
}

.me-tabbar.is-hidden,
html.keyboard-open .me-tabbar {
    transform: translateY(calc(100% + 6px));
}

.me-bell {
    position: relative;
    text-decoration: none;
}

.me-bell__count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #D92D20;
    color: #FFFFFF;
    font-size: .66rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--ot-surface);
}

.me-bell__count[hidden] {
    display: none;
}

.pwa-sounds {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 10px;
}

.pwa-sound {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
    border: 1px solid var(--ot-border);
    border-radius: 14px;
    background: var(--ot-surface);
    transition: border-color .18s ease, background-color .18s ease;
}

.pwa-sound:has(input:checked) {
    border-color: var(--ot-primary);
    background: color-mix(in srgb, var(--ot-primary-soft) 60%, var(--ot-surface));
}

.pwa-sound__pick {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.pwa-sound__pick input {
    position: absolute;
    opacity: 0;
}

.pwa-sound__box {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 12px 8px 12px 44px;
}

.pwa-sound__box::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border: 2px solid var(--ot-border);
    border-radius: 50%;
    background: var(--ot-surface);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.pwa-sound__pick input:checked + .pwa-sound__box::before {
    border-color: var(--ot-primary);
    box-shadow: inset 0 0 0 4px var(--ot-surface), inset 0 0 0 10px var(--ot-primary);
}

.pwa-sound__pick input:focus-visible + .pwa-sound__box::before {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ot-primary) 30%, transparent);
}

.pwa-sound__title {
    font-weight: 600;
    line-height: 1.3;
}

.pwa-sound__default {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ot-surface-alt);
    color: var(--ot-muted);
    font-size: .7rem;
    font-weight: 600;
    vertical-align: middle;
}

.pwa-sound__hint {
    color: var(--ot-muted);
    font-size: .8rem;
    line-height: 1.35;
}

.pwa-sound__tools {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding-right: 8px;
}

.pwa-sound__tools .pwa-icon-btn .ic {
    transform: none;
}

.pwa-sound__play.is-playing {
    border-color: var(--ot-primary);
    background: var(--ot-primary);
    color: #FFFFFF;
}

.pwa-sound-help {
    margin-top: 14px;
    border: 1px solid var(--ot-border);
    border-radius: 14px;
}

.pwa-sound-help summary {
    min-height: 48px;
    padding: 13px 16px;
    font-weight: 600;
    cursor: pointer;
}

.pwa-sound-help__body {
    display: grid;
    gap: 10px;
    padding: 0 16px 16px;
    color: var(--ot-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.pwa-sound-help__body p {
    margin: 0;
}

.pwa-me .me-head {
    display: grid;
    gap: 10px;
}

.pwa-me .pwa-save {
    justify-self: start;
}

.pwa-me .pwa-anchors {
    top: calc(var(--me-bar-h, 64px) + 8px);
}

.pwa-me-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.pwa-me-actions form {
    margin: 0;
}

.pwa-me-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.pwa-notices {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pwa-notice__link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--ot-border);
    border-radius: 16px;
    background: var(--ot-surface);
    color: var(--ot-text);
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}

.pwa-notice__link:hover {
    border-color: color-mix(in srgb, var(--ot-primary) 45%, var(--ot-border));
    transform: translateY(-1px);
}

.pwa-notice__dot {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: transparent;
}

.pwa-notice.is-unread .pwa-notice__dot { background: var(--ot-primary); }
.pwa-notice--warning.is-unread .pwa-notice__dot { background: #D97706; }
.pwa-notice--danger.is-unread .pwa-notice__dot { background: #D92D20; }
.pwa-notice--success.is-unread .pwa-notice__dot { background: #1E8E5A; }

.pwa-notice__body {
    display: grid;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
}

.pwa-notice__title {
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.pwa-notice.is-unread .pwa-notice__title {
    font-weight: 700;
}

.pwa-notice__text {
    color: var(--ot-text);
    font-size: .92rem;
    line-height: 1.5;
}

.pwa-notice__meta {
    color: var(--ot-muted);
    font-size: .8rem;
}

.pwa-notice__arrow {
    flex: none;
    margin-top: 4px;
    color: var(--ot-muted);
}

.pwa-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.pwa-pager__info {
    color: var(--ot-muted);
    font-size: .9rem;
}

.pwa-me-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.3rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    font-size: .76rem;
    font-weight: 700;
}

.pwa-notice.is-fresh .pwa-notice__link {
    border-color: color-mix(in srgb, var(--ot-primary) 40%, var(--ot-border));
    background: linear-gradient(100deg, var(--ot-primary-soft), var(--ot-surface) 65%);
}

.pwa-notice__new {
    justify-self: start;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ot-primary);
    color: var(--ot-on-primary);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
}

.pwa-pager__pages {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pwa-pager__page,
.pwa-pager__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    border-radius: 12px;
    font-weight: 600;
}

.pwa-pager__page {
    color: var(--ot-text);
    text-decoration: none;
}

.pwa-pager__page:hover {
    background: var(--ot-surface-alt);
    color: var(--ot-primary);
}

.pwa-pager__page.is-current {
    background: var(--ot-primary);
    color: var(--ot-on-primary);
}

.pwa-pager__gap {
    min-width: 20px;
    color: var(--ot-muted);
}

.pwa-pager__step {
    min-height: 44px;
}

.pwa-pager .pwa-pager__info {
    display: none;
}

@media (max-width: 575.98px) {
    .pwa-pager {
        justify-content: space-between;
    }

    .pwa-pager__pages {
        display: none;
    }

    .pwa-pager .pwa-pager__info {
        display: inline;
    }
}

@media (max-width: 359.98px) {
    .pwa-tabbar {
        gap: 0;
        padding-left: max(4px, env(safe-area-inset-left));
        padding-right: max(4px, env(safe-area-inset-right));
    }

    .pwa-tab {
        padding: 4px 1px;
    }

    .pwa-tab__title {
        font-size: .62rem;
        letter-spacing: -.01em;
    }
}

@media (max-width: 400px) {
    .pwa-tab-option {
        flex-wrap: wrap;
    }

    .pwa-tab-option__move {
        margin-left: auto;
    }
}