.web-app-header,.web-app-nav{display:none}
body.web-app #bulk-detail-button{display:none}
.web-app-offline{position:fixed;z-index:10;top:0;left:0;right:0;padding:10px 16px;background:#fff3d6;color:#704b10;font-size:13px;line-height:1.5;text-align:center}
.web-app-help{width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 40px);overflow:auto;padding:24px;border:1px solid #dce5e2;border-radius:24px;color:#203b37;background:#fff;box-shadow:0 24px 80px #102e3540;overscroll-behavior:contain}
.web-app-help::backdrop{background:#102e3570;backdrop-filter:blur(3px)}
.web-app-help header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.web-app-label{font-size:12px;font-weight:700;color:#0f766e;letter-spacing:.06em}
.web-app-help .icon-button{flex-shrink:0}
.web-app-icon{border-radius:16px;margin-bottom:20px}
.web-app-help h2{font-size:28px;line-height:1.4;letter-spacing:-.03em}
.web-app-intro{margin-top:10px;color:#687b75;line-height:1.7;font-size:13px}
#web-app-install-guide{margin:24px 0}
#web-app-install-guide ol{list-style:none;counter-reset:step;padding:0;margin:0;display:grid;gap:19px}
#web-app-install-guide li{counter-increment:step;position:relative;padding-left:39px;line-height:1.5;font-size:14px}
#web-app-install-guide li::before{content:counter(step);position:absolute;left:0;top:-2px;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#e6f4ee;color:#0f766e;font-size:13px;font-weight:700}
#web-app-install-guide li span{display:block;margin-top:4px;font-size:12px;color:#687b75;line-height:1.7}
#web-app-install-guide>p{font-size:14px;line-height:1.8;margin:12px 0}
#web-app-install{width:100%;min-height:48px;margin:20px 0;border-radius:12px}
.web-app-installed{margin:20px 0;padding:14px;border-radius:12px;background:#e6f4ee;color:#0f766e}
.web-app-capabilities{margin-top:24px;padding-top:22px;border-top:1px solid #e3e9e6}
.web-app-capabilities h3{margin:0 0 8px;font-size:13px}
.web-app-capabilities p,.web-app-monitor-note{font-size:12px;color:#687b75;line-height:1.8;margin-top:8px}
.web-app-monitor-note{padding:12px;margin-top:16px;background:#f4f7f5;border-radius:10px}

body.web-monitor-app{--native-head:calc(68px + env(safe-area-inset-top,0px));--native-nav:calc(64px + env(safe-area-inset-bottom,0px))}
body.web-monitor-app .native-header{padding-top:calc(10px + env(safe-area-inset-top,0px))}
body.web-monitor-app .native-nav{padding-bottom:env(safe-area-inset-bottom,0px)}
body.web-monitor-app #bulk-detail-button{display:none}
body.web-monitor-app .web-app-offline{top:var(--native-head)}
.web-monitor-notice{margin:14px 0;padding:12px 14px;border-radius:12px;background:#edf6f2;font-size:12px;line-height:1.8;color:#416159}
.web-monitor-notice button{display:block;border:0;background:none;color:#0f766e;font-weight:700;padding:4px 0;cursor:pointer}
.web-monitor-settings h2{font-size:20px}
.web-monitor-settings h3{font-size:15px;margin:22px 0 10px}
.web-monitor-settings p,.web-monitor-settings li{font-size:13px;line-height:1.8}
.web-monitor-settings ol{padding-left:20px;display:grid;gap:10px;margin:16px 0}
.web-monitor-settings .primary-button{display:flex;justify-content:center;width:100%;min-height:44px;text-decoration:none;margin:12px 0}
.web-monitor-settings textarea{width:100%;height:150px;font-size:11px}
#web-monitor-pair-form{margin-top:20px;font-size:13px}
#web-monitor-pair-link{display:block;width:100%;min-height:42px;border:1px solid #cbd8d1;border-radius:8px;padding:8px;margin-top:8px}
.web-monitor-history p{font-size:12px;line-height:1.8;padding:12px 0;border-bottom:1px solid #e3e9e6}
#web-monitor-setup-message{color:#0f766e;margin-top:12px;overflow-wrap:anywhere}
@media(max-width:760px){.web-app-help{padding:22px;max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}}
@media(prefers-reduced-motion:reduce){.web-app-help::backdrop{backdrop-filter:none}}
