body { background: #f6f6f6; padding-bottom: env(safe-area-inset-bottom); }
.vapp { max-width: 480px; margin: 0 auto; padding: 0 16px 24px; }
.vapp-head { display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 0 12px; }
.vview[hidden], [hidden] { display: none !important; }
.req::after { content: " *"; color: #dc3545; }
.offline-bar { background: #fff3cd; color: #664d03; font-size: 13px; padding: 6px 12px; text-align: center; }
.purpose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.purpose-item { border: 1px solid #dee2e6; border-radius: 8px; padding: 10px 8px; text-align: center; font-size: 14px; background: #fff; cursor: pointer; user-select: none; }
.purpose-item.on { border-color: rgb(72,190,206); background: rgba(72,190,206,.12); color: #1c7f8d; font-weight: 600; }
.app-timeline-box { list-style: none; padding: 0; margin: 12px 0; }
.app-timeline-box .timeline-section { display: flex; gap: 10px; margin-bottom: 10px; }
.app-timeline-box .timeline-content { flex: 1; border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.app-timeline-box .timeline-content.is-off { background: #f0f0f0; border: 1px dashed #ced4da; color: #6c757d; }
.pass-card .pass-code { font-size: 44px; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: #1c7f8d; margin: 4px 0; word-break: break-all; }
.pass-bar { height: 6px; background: #e9ecef; border-radius: 3px; overflow: hidden; margin: 6px 0; }
.pass-bar > div { height: 100%; width: 100%; background: rgb(72,190,206); transition: width .9s linear; }
.pass-bar.warn > div { background: #dc3545; }
.qr { max-width: 100%; height: auto; image-rendering: pixelated; }
.push-box { margin: 8px 0; }