/* PWA 安装、更新与网络状态组件 · 2026-07-15 */
[data-pwa-install][hidden], .pwa-hidden { display: none !important; }

.nav-pwa-install-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #aac0cd;
    border-radius: 8px;
    background: #e7f0f5;
    color: #19465f;
    font: inherit;
    font-size: 12.5px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .18s, background .18s, color .18s;
}

.nav-pwa-install-button:hover {
    border-color: #245b78;
    background: #dce9f0;
    color: #17212b;
}

.nav-pwa-install-button i { font-size: 16px; }

.nav-drawer .nav-pwa-install-link {
    width: 100%;
    min-height: 44px;
    gap: 10px;
    margin-bottom: 4px;
    color: #19465f;
    background: #e7f0f5;
    font-weight: 700;
    text-align: left;
}

.nav-drawer .nav-pwa-install-link:hover { background: #dce9f0; color: #17212b; }

.pwa-footer-install {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pwa-footer-install svg { width: 15px; height: 15px; flex: 0 0 auto; }

.pwa-card-stack {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 415;
    width: min(390px, calc(100vw - 48px));
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.pwa-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    padding: 16px 50px 16px 16px;
    border: 1px solid #bdcbd4;
    border-radius: 12px;
    background: #fff;
    color: #3d4a57;
    box-shadow: 0 18px 44px -28px rgba(23, 33, 43, .65);
    pointer-events: auto;
    animation: pwa-card-in .22s ease-out both;
}

.pwa-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
}

.pwa-card-copy { min-width: 0; }
.pwa-card-title { margin: 1px 0 4px; color: #17212b; font-size: 14px; font-weight: 750; line-height: 1.35; }
.pwa-card-text { margin: 0; color: #53616e; font-size: 12.5px; line-height: 1.6; }
.pwa-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.pwa-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid #bdcbd4;
    border-radius: 8px;
    background: #fff;
    color: #17212b;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.pwa-button:hover { border-color: #899ba8; background: #f3f6f8; }
.pwa-button-primary { border-color: #245b78; background: #245b78; color: #fff; }
.pwa-button-primary:hover { border-color: #19465f; background: #19465f; }
.pwa-button:focus-visible, .pwa-close:focus-visible, .pwa-dialog-close:focus-visible {
    outline: 3px solid rgba(36, 91, 120, .3);
    outline-offset: 2px;
}

.pwa-close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #667482;
    font: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.pwa-close:hover { background: #edf2f5; color: #17212b; }

.pwa-network-status {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 416;
    max-width: calc(100vw - 40px);
    transform: translateX(-50%);
    padding: 11px 15px;
    border: 1px solid #bdcbd4;
    border-radius: 9px;
    background: #17212b;
    color: #fff;
    box-shadow: 0 12px 32px -22px rgba(23, 33, 43, .8);
    font-size: 13px;
    line-height: 1.5;
}

.pwa-network-status[data-state="offline"] { border-color: #d9bd87; background: #6f4b12; }

.pwa-install-dialog {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 1px solid #bdcbd4;
    border-radius: 16px;
    background: #fff;
    color: #3d4a57;
    box-shadow: 0 28px 90px -40px rgba(23, 33, 43, .8);
}

.pwa-install-dialog::backdrop { background: rgba(23, 33, 43, .56); backdrop-filter: blur(2px); }
.pwa-install-dialog[open] { animation: pwa-dialog-in .18s ease-out both; }
.pwa-dialog-body { position: relative; padding: 28px; }
.pwa-dialog-kicker { margin: 0 0 9px; color: #245b78; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pwa-dialog-title { margin: 0 44px 12px 0; color: #17212b; font-size: 23px; line-height: 1.3; }
.pwa-dialog-copy { margin: 0; color: #53616e; font-size: 14px; line-height: 1.75; }
.pwa-dialog-steps { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: pwa-step; }
.pwa-dialog-steps li {
    position: relative;
    min-height: 38px;
    padding: 8px 0 13px 46px;
    border-bottom: 1px solid #e7edf1;
    color: #24313d;
    font-size: 14px;
    line-height: 1.65;
    counter-increment: pwa-step;
}
.pwa-dialog-steps li::before {
    position: absolute;
    top: 7px;
    left: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e7f0f5;
    color: #19465f;
    content: counter(pwa-step);
    font-size: 12px;
    font-weight: 800;
}
.pwa-dialog-note { margin: 18px 0 0; padding: 12px 14px; border-left: 3px solid #a76f18; background: #fbf2df; color: #59421d; font-size: 13px; line-height: 1.65; }
.pwa-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.pwa-dialog-close {
    position: absolute;
    top: 17px;
    right: 17px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #667482;
    font: inherit;
    font-size: 24px;
    cursor: pointer;
}
.pwa-dialog-close:hover { background: #edf2f5; color: #17212b; }

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

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

@media (max-width: 600px) {
    .pwa-card-stack { left: 16px; right: 16px; bottom: 82px; width: auto; }
    .pwa-card { padding: 14px 48px 14px 14px; }
    .pwa-inline-install-host { margin-top: 18px !important; }
    .pwa-card.pwa-card-inline { width: 100%; max-width: none; margin: 0; box-shadow: none; animation: pwa-card-in .22s ease both; }
    .pwa-card-icon { width: 40px; height: 40px; }
    .pwa-network-status { bottom: 82px; width: calc(100vw - 32px); text-align: center; }
    .pwa-dialog-body { padding: 24px 20px 20px; }
    .pwa-dialog-close { top: 11px; right: 10px; }
}

@media (max-width: 720px) {
    .nav-pwa-install-button { display: none !important; }
}

@media (min-width: 1161px) and (max-width: 1240px) {
    .nav-pwa-install-button { width: 44px; padding: 0; }
    .nav-pwa-install-button span { display: none; }
}

/* ===== Installed mobile app shell · 2026-08-01 ===== */
.pwa-app-tabbar,
.pwa-app-home,
.pwa-task-dialog { display: none; }

html.pwa-install-visible .assistant-launcher { display: none !important; }

@media (max-width: 1080px) {
    html.pwa-app-mode {
        min-height: 100%;
        background: #17212b;
        overscroll-behavior-y: none;
    }

    html.pwa-app-mode body {
        min-height: 100dvh;
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
        background: #f3f6f8;
        overscroll-behavior-y: contain;
        -webkit-tap-highlight-color: transparent;
    }

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

    html.pwa-app-mode :is(a, button, input, select, textarea, [role="button"]) {
        touch-action: manipulation;
    }

    html.pwa-app-mode :is(input, select, textarea) { font-size: 16px; }
    html.pwa-app-mode body > #main-footer,
    html.pwa-app-mode .site-footer { display: none !important; }

    /* Compact, safe-area-aware app bar. */
    html.pwa-app-mode .site-header {
        padding-top: env(safe-area-inset-top);
        border-bottom: 0;
        background: rgba(23, 33, 43, .97);
        box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 8px 24px -20px rgba(0,0,0,.7);
        backdrop-filter: saturate(120%) blur(18px);
        -webkit-backdrop-filter: saturate(120%) blur(18px);
        transition: background .18s ease, box-shadow .18s ease;
    }

    html.pwa-app-mode.pwa-app-scrolled .site-header {
        background: rgba(23, 33, 43, .985);
        box-shadow: 0 1px 0 rgba(255,255,255,.09), 0 12px 28px -22px rgba(0,0,0,.9);
    }

    html.pwa-app-mode .site-header-inner {
        height: 54px;
        padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
        gap: 10px;
    }

    html.pwa-app-mode .site-logo { min-width: 0; gap: 10px; }
    html.pwa-app-mode .site-logo-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: #b64235;
        box-shadow: none;
    }
    html.pwa-app-mode .site-logo-icon i { font-size: 15px !important; }
    html.pwa-app-mode .site-logo-icon svg { width: 18px; height: 18px; color: #fff; }
    html.pwa-app-mode .site-logo-text { display: block !important; min-width: 0; }
    html.pwa-app-mode .site-logo-text strong {
        overflow: hidden;
        color: #fff;
        font-family: var(--font-sans, system-ui, sans-serif);
        font-size: 15px;
        font-weight: 760;
        line-height: 1.2;
        letter-spacing: -.01em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    html.pwa-app-mode .site-logo-text span,
    html.pwa-app-mode .site-nav,
    html.pwa-app-mode .nav-pwa-install-button,
    html.pwa-app-mode .nav-hamburger,
    html.pwa-app-mode .nav-user-tool,
    html.pwa-app-mode .nav-user-area .hm,
    html.pwa-app-mode .nav-user-area .admin-badge,
    html.pwa-app-mode .nav-user-area .btn-login,
    html.pwa-app-mode .auth-area > .btn-register { display: none !important; }
    html.pwa-app-mode.pwa-app-secondary .site-logo { gap: 0; }
    html.pwa-app-mode.pwa-app-secondary .site-logo-icon { display: none; }
    html.pwa-app-mode .pwa-app-back {
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        margin-left: -8px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: #fff;
        cursor: pointer;
    }
    html.pwa-app-mode .pwa-app-back:active { background: rgba(255,255,255,.1); }
    html.pwa-app-mode .pwa-app-back:focus-visible { outline: 3px solid rgba(255,255,255,.38); outline-offset: -2px; }
    html.pwa-app-mode .pwa-app-back svg { width: 22px; height: 22px; }
    html.pwa-app-mode .pwa-app-offline-badge {
        min-height: 28px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-left: auto;
        padding: 0 8px;
        border: 1px solid rgba(255,220,157,.34);
        border-radius: 999px;
        background: rgba(167,111,24,.24);
        color: #ffe0a6;
        font-size: 10.5px;
        font-weight: 750;
        white-space: nowrap;
    }
    html.pwa-app-mode .pwa-app-offline-badge[hidden] { display: none; }
    html.pwa-app-mode .pwa-app-offline-badge svg { width: 14px; height: 14px; }
    html.pwa-app-mode .pwa-app-offline-badge:not([hidden]) + .auth-area { margin-left: 0; }
    html.pwa-app-mode .auth-area { margin-left: auto; gap: 6px; }
    html.pwa-app-mode .auth-area > .btn-login {
        min-height: 38px;
        padding: 0 13px;
        border-color: rgba(255,255,255,.28);
        background: rgba(255,255,255,.08);
        color: #fff;
    }
    html.pwa-app-mode .user-avatar {
        width: 34px;
        height: 34px;
        border: 1px solid rgba(255,255,255,.22);
        background: #fff;
        color: #17212b;
        cursor: pointer;
    }
    html.pwa-app-mode .user-avatar:focus-visible {
        outline: 3px solid rgba(255,255,255,.38);
        outline-offset: 2px;
    }

    /* Persistent task tabs. The red center action is the shell's signature. */
    .pwa-app-tabbar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 390;
        min-height: calc(66px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: start;
        padding: 5px max(7px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
        border-top: 1px solid #d4dde3;
        background: rgba(255,255,255,.96);
        box-shadow: 0 -12px 30px -26px rgba(23,33,43,.7);
        backdrop-filter: saturate(145%) blur(18px);
        -webkit-backdrop-filter: saturate(145%) blur(18px);
    }

    .pwa-app-tab {
        min-width: 0;
        min-height: 54px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 2px 3px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #6b7884;
        font: inherit;
        font-size: 10.5px;
        font-weight: 650;
        line-height: 1.15;
        text-decoration: none;
        cursor: pointer;
        transition: color .15s, background .15s, transform .12s;
    }
    .pwa-app-tab-icon {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 8px;
    }
    .pwa-app-tab svg { width: 21px; height: 21px; }
    .pwa-app-tab.active { color: #19465f; }
    .pwa-app-tab.active:not(.pwa-app-tab-primary) .pwa-app-tab-icon { background: #e7f0f5; }
    .pwa-app-tab:active { transform: scale(.94); }
    .pwa-app-tab:focus-visible { outline: 3px solid rgba(36,91,120,.28); outline-offset: 0; }
    .pwa-app-tab-primary { color: #8d3b32; }
    .pwa-app-tab-primary .pwa-app-tab-icon {
        width: 38px;
        height: 38px;
        margin-top: -11px;
        border: 4px solid #fff;
        border-radius: 12px;
        background: #b64235;
        color: #fff;
        box-shadow: 0 5px 14px -8px rgba(143,49,41,.75);
    }
    .pwa-app-tab-primary svg { width: 20px; height: 20px; stroke-width: 1.9; }
    .pwa-app-tab-primary.active .pwa-app-tab-icon { background: #8f3129; }

    /* The center action opens a task launcher instead of behaving like another page tab. */
    .pwa-task-dialog[open] {
        position: fixed;
        inset: auto 0 0;
        z-index: 430;
        width: 100%;
        max-width: none;
        max-height: calc(94dvh - env(safe-area-inset-top));
        display: block;
        margin: 0;
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        color: #3d4a57;
    }
    .pwa-task-dialog::backdrop {
        background: rgba(10,17,24,.62);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    .pwa-task-sheet {
        width: min(100%, 680px);
        max-height: calc(94dvh - env(safe-area-inset-top));
        margin: 0 auto;
        padding: 10px max(18px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
        overflow: auto;
        overscroll-behavior: contain;
        border-radius: 24px 24px 0 0;
        background: #f8fafb;
        box-shadow: 0 -24px 70px -36px rgba(0,0,0,.78);
        animation: pwa-sheet-up .22s cubic-bezier(.2,.72,.24,1) both;
    }
    .pwa-sheet-handle {
        width: 42px;
        height: 4px;
        margin: 0 auto 12px;
        border-radius: 999px;
        background: #c4cfd6;
    }
    .pwa-task-sheet-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 0 2px 17px;
    }
    .pwa-task-sheet-head p { margin: 0 0 4px; color: #245b78; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; }
    .pwa-task-sheet-head h2 { margin: 0; color: #17212b; font-size: 23px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
    .pwa-sheet-close {
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        margin: -4px -6px 0 0;
        padding: 0;
        border: 0;
        border-radius: 13px;
        background: #e8eef2;
        color: #53616e;
        cursor: pointer;
    }
    .pwa-sheet-close:active { background: #dce5ea; color: #17212b; }
    .pwa-sheet-close:focus-visible { outline: 3px solid rgba(36,91,120,.28); outline-offset: 1px; }
    .pwa-sheet-close svg { width: 20px; height: 20px; }
    .pwa-task-resume {
        min-height: 70px;
        display: grid;
        grid-template-columns: auto minmax(0,1fr) auto;
        align-items: center;
        gap: 11px;
        margin-bottom: 12px;
        padding: 11px 12px;
        border: 1px solid #a9c3d1;
        border-radius: 15px;
        background: #e7f0f5;
        color: #17212b;
    }
    .pwa-task-resume[hidden] { display: none; }
    .pwa-task-resume-icon {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 11px;
        background: #245b78;
        color: #fff;
    }
    .pwa-task-resume-icon svg { width: 21px; height: 21px; }
    .pwa-task-resume-copy { min-width: 0; }
    .pwa-task-resume-copy small,
    .pwa-task-resume-copy b,
    .pwa-task-resume-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pwa-task-resume-copy small { color: #245b78; font-size: 10px; font-weight: 800; }
    .pwa-task-resume-copy b { margin-top: 3px; font-size: 13.5px; }
    .pwa-task-resume-copy span { margin-top: 2px; color: #53616e; font-size: 10.5px; }
    .pwa-task-resume-arrow svg { width: 18px; height: 18px; }
    .pwa-launch-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
    .pwa-launch-grid a {
        min-width: 0;
        min-height: 108px;
        display: grid;
        grid-template-columns: 36px minmax(0,1fr);
        grid-template-rows: auto auto;
        align-content: center;
        column-gap: 10px;
        padding: 13px;
        border: 1px solid #d7e0e6;
        border-radius: 15px;
        background: #fff;
        color: #17212b;
    }
    .pwa-launch-grid a > span {
        grid-row: 1 / 3;
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: #e7f0f5;
        color: #245b78;
    }
    .pwa-launch-grid a:nth-child(2) > span { background: #e5f2ef; color: #287a68; }
    .pwa-launch-grid a:nth-child(3) > span { background: #f7eae8; color: #a24b45; }
    .pwa-launch-grid a:nth-child(4) > span { background: #fbf2df; color: #9a681d; }
    .pwa-launch-grid svg { width: 20px; height: 20px; }
    .pwa-launch-grid b { align-self: end; overflow: hidden; font-size: 13px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
    .pwa-launch-grid small { align-self: start; overflow: hidden; color: #667482; font-size: 10.5px; line-height: 1.35; }
    .pwa-launch-all {
        min-height: 62px;
        display: grid;
        grid-template-columns: auto minmax(0,1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 10px;
        margin-top: 10px;
        padding: 10px 12px;
        border: 1px solid #d7e0e6;
        border-radius: 15px;
        background: #fff;
        color: #17212b;
    }
    .pwa-launch-all > span { grid-row: 1 / 3; width: 36px; height: 36px; display: grid; place-items: center; color: #b64235; }
    .pwa-launch-all > span svg { width: 21px; height: 21px; }
    .pwa-launch-all b { align-self: end; font-size: 13px; }
    .pwa-launch-all small { align-self: start; color: #667482; font-size: 10.5px; }
    .pwa-launch-all i { grid-column: 3; grid-row: 1 / 3; color: #667482; }
    .pwa-launch-all i svg { width: 18px; height: 18px; }
    .pwa-task-sheet a:active { transform: scale(.985); background-color: #f1f5f7; }
    .pwa-task-sheet a:focus-visible { outline: 3px solid rgba(36,91,120,.28); outline-offset: 1px; }

    @keyframes pwa-sheet-up {
        from { opacity: .72; transform: translateY(24px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* The website side drawer becomes an app-style bottom sheet. */
    html.pwa-app-mode .nav-drawer {
        display: block;
        background: rgba(10,17,24,.58);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    html.pwa-app-mode .nav-drawer-panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: calc(88dvh - env(safe-area-inset-top));
        padding: 12px max(18px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
        border-radius: 22px 22px 0 0;
        background: #f8fafb;
        box-shadow: 0 -24px 70px -36px rgba(0,0,0,.72);
        transform: translateY(105%);
    }
    html.pwa-app-mode .nav-drawer-panel::before {
        width: 42px;
        height: 4px;
        display: block;
        flex: 0 0 auto;
        align-self: center;
        margin: 0 auto 7px;
        border-radius: 999px;
        background: #c4cfd6;
        content: '';
    }
    html.pwa-app-mode .nav-drawer.open .nav-drawer-panel { transform: translateY(0); }
    html.pwa-app-mode .nav-drawer-head { padding: 4px 2px 12px; margin-bottom: 6px; }
    html.pwa-app-mode .nav-drawer-brand .site-logo-icon { width: 30px; height: 30px; }
    html.pwa-app-mode .nav-drawer-close {
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 12px;
        background: #e8eef2;
    }
    html.pwa-app-mode .nav-drawer-close svg { width: 20px; height: 20px; }
    html.pwa-app-mode .nav-drawer-kicker { margin: 13px 12px 5px; }
    html.pwa-app-mode .nav-drawer .nav-link {
        min-height: 46px;
        margin-bottom: 2px;
        padding: 11px 12px;
        border-radius: 12px;
        font-size: 14.5px;
    }
    html.pwa-app-mode .nav-drawer .nav-link > svg {
        width: 19px;
        height: 19px;
        flex: 0 0 auto;
        color: currentColor;
    }
    html.pwa-app-mode .nav-drawer-account {
        display: grid;
        grid-template-columns: auto minmax(0,1fr) auto;
        align-items: center;
        gap: 11px;
        margin: 2px 0 5px;
        padding: 11px 12px;
        border: 1px solid #d7e0e6;
        border-radius: 14px;
        background: #fff;
    }
    html.pwa-app-mode .nav-drawer-account .user-avatar { width: 36px; height: 36px; }
    html.pwa-app-mode .nav-drawer-account-copy { min-width: 0; }
    html.pwa-app-mode .nav-drawer-account-copy b,
    html.pwa-app-mode .nav-drawer-account-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    html.pwa-app-mode .nav-drawer-account-copy b { color: #17212b; font-size: 13.5px; }
    html.pwa-app-mode .nav-drawer-account-copy small { margin-top: 2px; color: #667482; font-size: 11px; }
    html.pwa-app-mode .nav-drawer-account button {
        min-height: 38px;
        padding: 0 10px;
        border: 0;
        border-radius: 9px;
        background: #eef3f6;
        color: #53616e;
        font: inherit;
        font-size: 12px;
        font-weight: 700;
    }

    /* App pages use content density closer to a native workbench. */
    html.pwa-app-mode body > main,
    html.pwa-app-mode #view-home,
    html.pwa-app-mode .wb-wrap,
    html.pwa-app-mode .ct-page,
    html.pwa-app-mode .mm-wrap,
    html.pwa-app-mode .tt-shell,
    html.pwa-app-mode .resource-page {
        padding-top: 26px !important;
        padding-right: max(18px, env(safe-area-inset-right)) !important;
        padding-bottom: calc(94px + env(safe-area-inset-bottom)) !important;
        padding-left: max(18px, env(safe-area-inset-left)) !important;
    }
    html.pwa-app-mode #view-workspace .ws-wrap { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
    html.pwa-app-mode #view-workspace .ws-back > svg { width: 20px; height: 20px; }
    html.pwa-app-mode #view-workspace .ws-ico > svg { width: 27px; height: 27px; }
    html.pwa-app-mode #view-workspace :is(.ws-mini-btn, .ws-model-badge, .ws-project-action) > svg { width: 16px; height: 16px; flex: 0 0 auto; }
    html.pwa-app-mode #view-workspace .ws-project-icon > svg { width: 19px; height: 19px; }
    html.pwa-app-mode .breadcrumb { display: none; }
    html.pwa-app-mode :is(.page-kicker, .wb-kicker, .ct-kicker, .mm-kicker, .tt-kicker, .paths-page-kicker) { display: none; }
    html.pwa-app-mode :is(.page-title, .wb-head h1, .ct-title, .mm-title, .tt-title, .paths-page-title) {
        font-size: clamp(28px, 8vw, 34px) !important;
        line-height: 1.12 !important;
    }
    html.pwa-app-mode :is(.filter-bar, .wb-filter-row) {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    html.pwa-app-mode :is(.filter-bar, .wb-filter-row)::-webkit-scrollbar { display: none; }
    html.pwa-app-mode .filter-pill { flex: 0 0 auto; }

    /* Mobile-native bottom sheets for the most common dialogs. */
    html.pwa-app-mode :is(.modal-overlay, .contact-modal, .project-modal, .workflow-modal, .work-title-modal, .wb-modal) {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    html.pwa-app-mode :is(.modal-box, .contact-box, .project-box, .workflow-box, .work-title-box, .wb-modal-box) {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(91dvh - env(safe-area-inset-top)) !important;
        padding-bottom: env(safe-area-inset-bottom);
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 22px 22px 0 0 !important;
    }
    html.pwa-app-mode .assistant-launcher { right: 14px; bottom: calc(78px + env(safe-area-inset-bottom)); }
    html.pwa-app-mode .assistant-panel { bottom: calc(76px + env(safe-area-inset-bottom)); }
    html.pwa-app-mode .assistant-launcher { display: none !important; }
    html.pwa-app-mode .toast { bottom: calc(82px + env(safe-area-inset-bottom)); }
    html.pwa-app-mode .pwa-card-stack,
    html.pwa-app-mode .pwa-network-status { bottom: calc(82px + env(safe-area-inset-bottom)); }

    /* Installed launch screen: a task dashboard, not a marketing homepage. */
    html.pwa-app-home-page.pwa-app-home-ready #main-content > :not(.pwa-app-home) { display: none !important; }
    html.pwa-app-home-page.pwa-app-home-ready body > main { padding: 0 !important; }
    .pwa-app-home {
        width: min(100%, 680px);
        display: block;
        margin: 0 auto;
        padding: 28px max(16px, env(safe-area-inset-right)) calc(98px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
        color: #3d4a57;
    }
    .pwa-app-home-heading { padding: 4px 2px 21px; }
    .pwa-app-today {
        margin: 0 0 8px;
        color: #245b78;
        font-family: var(--font-mono, ui-monospace, monospace);
        font-size: 11.5px;
        font-weight: 750;
        letter-spacing: .06em;
    }
    .pwa-app-home-heading h1 {
        margin: 0;
        color: #17212b;
        font-size: clamp(28px, 8.4vw, 36px);
        font-weight: 800;
        line-height: 1.16;
        letter-spacing: -.035em;
    }
    .pwa-app-home-heading > p:last-child { margin: 10px 0 0; color: #667482; font-size: 14px; line-height: 1.65; }
    .pwa-app-resume {
        display: grid;
        grid-template-columns: auto minmax(0,1fr) auto;
        align-items: center;
        gap: 12px;
        margin-bottom: 25px;
        padding: 14px;
        border: 1px solid #a9c3d1;
        border-radius: 15px;
        background: #e7f0f5;
        color: #17212b;
        box-shadow: 0 10px 24px -22px rgba(23,33,43,.55);
    }
    .pwa-app-resume[hidden] { display: none; }
    .pwa-app-resume-icon {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: #245b78;
        color: #fff;
    }
    .pwa-app-resume-icon svg { width: 22px; height: 22px; }
    .pwa-app-resume-copy { min-width: 0; }
    .pwa-app-resume-copy small,
    .pwa-app-resume-copy b,
    .pwa-app-resume-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pwa-app-resume-copy small { color: #245b78; font-size: 10.5px; font-weight: 750; }
    .pwa-app-resume-copy b { margin-top: 3px; font-size: 14px; }
    .pwa-app-resume-copy span { margin-top: 3px; color: #53616e; font-size: 11.5px; }
    .pwa-app-resume-arrow svg { width: 19px; height: 19px; }
    .pwa-app-section { margin-top: 26px; }
    .pwa-app-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
    .pwa-app-section-head h2 { margin: 0; color: #17212b; font-size: 17px; font-weight: 780; letter-spacing: -.015em; }
    .pwa-app-section-head a { display: inline-flex; align-items: center; gap: 2px; color: #245b78; font-size: 12px; font-weight: 700; }
    .pwa-app-section-head a svg { width: 15px; height: 15px; }
    .pwa-app-task-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
    .pwa-app-task {
        min-width: 0;
        min-height: 142px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
        border: 1px solid #d7e0e6;
        border-radius: 16px;
        background: #fff;
        color: #17212b;
        box-shadow: 0 1px 2px rgba(23,33,43,.04);
        transition: transform .15s, border-color .15s, background .15s;
    }
    .pwa-app-task:active { transform: scale(.975); background: #f8fafb; }
    .pwa-app-task-icon {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        margin-bottom: 15px;
        border-radius: 11px;
        background: #e7f0f5;
        color: #245b78;
    }
    .pwa-app-task:nth-child(2) .pwa-app-task-icon { background: #e5f2ef; color: #287a68; }
    .pwa-app-task:nth-child(3) .pwa-app-task-icon { background: #f7eae8; color: #a24b45; }
    .pwa-app-task:nth-child(4) .pwa-app-task-icon { background: #fbf2df; color: #9a681d; }
    .pwa-app-task-icon svg { width: 21px; height: 21px; }
    .pwa-app-task b { font-size: 15px; font-weight: 780; }
    .pwa-app-task small { margin-top: 5px; color: #667482; font-size: 11.5px; line-height: 1.45; }
    .pwa-app-quick-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        overflow: hidden;
        border: 1px solid #d7e0e6;
        border-radius: 16px;
        background: #fff;
    }
    .pwa-app-quick-grid a {
        min-width: 0;
        min-height: 78px;
        display: grid;
        grid-template-columns: auto minmax(0,1fr);
        grid-template-rows: auto auto;
        column-gap: 9px;
        align-content: center;
        padding: 13px;
        color: #17212b;
    }
    .pwa-app-quick-grid a:nth-child(odd) { border-right: 1px solid #e7edf1; }
    .pwa-app-quick-grid a:nth-child(-n+2) { border-bottom: 1px solid #e7edf1; }
    .pwa-app-quick-grid a > span { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; color: #245b78; }
    .pwa-app-quick-grid svg { width: 20px; height: 20px; }
    .pwa-app-quick-grid b { overflow: hidden; font-size: 12.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
    .pwa-app-quick-grid small { overflow: hidden; margin-top: 2px; color: #667482; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
    .pwa-app-principle {
        display: grid;
        grid-template-columns: auto minmax(0,1fr);
        gap: 10px;
        align-items: start;
        margin-top: 24px;
        padding: 13px 14px;
        border-left: 3px solid #b64235;
        background: #fff;
        color: #53616e;
    }
    .pwa-app-principle > span { color: #b64235; }
    .pwa-app-principle svg { width: 20px; height: 20px; }
    .pwa-app-principle p { margin: 0; }
    .pwa-app-principle b,
    .pwa-app-principle small { display: block; }
    .pwa-app-principle b { color: #17212b; font-size: 12.5px; }
    .pwa-app-principle small { margin-top: 3px; font-size: 11px; line-height: 1.55; }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-card, .pwa-install-dialog[open] { animation: none; }
    .pwa-app-tab, .pwa-app-task { transition: none; }
    .pwa-task-sheet { animation: none; }
}

@media (forced-colors: active) {
    .pwa-card, .pwa-install-dialog, .pwa-network-status, .pwa-app-tabbar, .pwa-task-sheet { border: 1px solid CanvasText; }
}