:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;color:#172033;background:#f4f7fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#f4f7fb}button{font:inherit}.shell{width:min(100%,720px);margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));min-height:100dvh}.topbar{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.eyebrow{margin:0 0 5px;color:#65728a;font-size:12px;letter-spacing:.04em}h1{margin:0;font-size:25px;letter-spacing:0;line-height:1.2}.connection{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid #d9e0ea;border-radius:999px;background:#fff;color:#3b4a61;font-size:13px;white-space:nowrap}.connection.online{color:#17734b;border-color:#b9e4cf}.connection.offline{color:#a13d3d;border-color:#efc2c2}.connection.syncing{color:#6b7280}.spin{animation:spin 1.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.offline-banner{display:flex;gap:8px;align-items:center;margin-top:14px;padding:10px 12px;border-radius:8px;color:#8d3939;background:#fff1f1;border:1px solid #f2d0d0;font-size:13px}.sync-meta{display:flex;justify-content:space-between;align-items:center;margin:19px 2px 12px;color:#65728a;font-size:12px}.sync-meta span{display:inline-flex;align-items:center;gap:5px}.server-mark{color:#8792a6}.indicators{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 20px}.indicator-wrap{min-width:0;border:0;background:transparent;color:inherit;padding:0;cursor:pointer;text-align:center}.indicator-light{position:relative;width:86px;height:86px;margin:0 auto 9px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor;transition:box-shadow .2s,border-color .2s}.indicator-wrap.error{color:#c75454}.indicator-wrap.running{color:#2e9d71}.indicator-wrap.succeeded{color:#3976c7}.indicator-wrap.is-active .indicator-light{border-width:3px}.indicator-wrap.is-active .indicator-light,.indicator-wrap.is-active .indicator-label{text-decoration:underline;text-underline-offset:4px}.indicator-wrap.is-active .indicator-light{box-shadow:0 0 0 5px color-mix(in srgb,currentColor 14%,transparent)}.indicator-wrap.is-active .indicator-light:after,.indicator-wrap.is-active .indicator-light:before{content:"";position:absolute;inset:-1px;border-radius:50%;opacity:.2;animation:breathe 2s ease-in-out infinite;box-shadow:0 0 0 7px currentColor}.indicator-wrap.is-active .indicator-light:before{animation-delay:-1s}.indicator-wrap:not(.is-active) .indicator-light:after,.indicator-wrap:not(.is-active) .indicator-light:before{display:none}.indicator-wrap.is-active .badge~*{position:relative}.indicator-wrap:not(.is-active) .indicator-light{opacity:.88}.badge{position:absolute;right:-4px;top:-4px;min-width:25px;height:25px;padding:0 6px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:12px;line-height:1;box-shadow:0 0 0 3px #f4f7fb}.indicator-wrap.error .badge{background:#c75454}.indicator-wrap.running .badge{background:#2e9d71}.indicator-wrap.succeeded .badge{background:#3976c7}.indicator-label{display:block;font-size:15px;font-weight:700}.indicator-detail{display:block;margin-top:3px;color:#78849a;font-size:11px;line-height:1.3}@keyframes breathe{0%,to{opacity:.08;transform:scale(.96)}50%{opacity:.28;transform:scale(1.04)}}.demo-bar{display:flex;align-items:center;gap:8px;padding:10px 11px;margin-bottom:16px;border:1px dashed #e4b86c;border-radius:8px;background:#fff9ec;color:#865e1e;font-size:13px}.demo-bar span{display:inline-flex;align-items:center;gap:5px;font-weight:700}.demo-bar button{min-height:36px;display:inline-flex;align-items:center;gap:5px;padding:0 9px;border:1px solid #e2bf7d;border-radius:6px;background:#fff;color:#765018;cursor:pointer}.demo-bar small{color:#a87e3a;margin-left:auto}.section-heading{display:flex;justify-content:space-between;align-items:baseline;margin:0 2px 9px}.section-heading h2{margin:0;font-size:18px}.section-heading span{color:#78849a;font-size:13px}.task-list{display:grid;gap:9px}.task-row{position:relative;display:flex;min-height:76px;border:1px solid #dfe5ee;border-radius:8px;background:#fff;overflow:hidden}.task-row.alert-active{border-left:4px solid currentColor}.task-row.error{color:#a64949}.task-row.running{color:#237a59}.task-row.succeeded{color:#2f65ac}.task-row.acknowledged{opacity:.72}.task-main{display:flex;align-items:center;min-width:0;flex:1;gap:10px;padding:12px;border:0;background:transparent;text-align:left;cursor:pointer;color:inherit}.task-icon{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,currentColor 11%,transparent)}.task-copy{min-width:0;flex:1}.task-copy strong{display:block;overflow:hidden;color:#172033;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.task-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px;color:#78849a;font-size:11px}.task-meta em{font-style:normal;color:currentColor;font-weight:700}.error-summary{display:block;overflow:hidden;margin-top:5px;color:#9c4e4e;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.chevron{flex:0 0 auto;color:#9ba6b7}.demo-actions{display:flex;gap:3px;align-items:center;padding-right:8px}.demo-actions button,.icon-button{width:40px;height:40px;display:grid;place-items:center;border:1px solid #dfe5ee;border-radius:6px;background:#fff;color:inherit;cursor:pointer}.demo-actions button:first-child{color:#237a59}.demo-actions button:last-child{color:#a64949}.no-tasks{display:grid;place-items:center;gap:6px;min-height:155px;border:1px dashed #ccd5e2;border-radius:8px;color:#718096}.no-tasks p{margin:0;font-size:14px}.bottom-space{height:80px}.bottom-action{position:fixed;z-index:5;bottom:0;left:50%;width:min(100%,720px);padding:10px 16px calc(10px + env(safe-area-inset-bottom));transform:translate(-50%);background:color-mix(in srgb,#f4f7fb 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.reset-button{width:100%;min-height:48px;display:flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:8px;background:#1f5ea8;color:#fff;font-weight:700;cursor:pointer;box-shadow:0 5px 18px #234a7626}.reset-button:disabled{opacity:.55;cursor:wait}.feedback{display:block;margin-top:6px;text-align:center;color:#357255;font-size:12px}.empty-state{display:grid;place-content:center;justify-items:center;min-height:100dvh;text-align:center}.empty-state h1{margin-top:12px}.empty-state p{margin:9px 0 0;color:#536176}.muted{color:#8290a5!important;font-size:13px}.modal-backdrop{position:fixed;inset:0;z-index:10;display:flex;align-items:flex-end;justify-content:center;background:#17203366}.details-panel{width:min(100%,720px);max-height:min(88dvh,700px);overflow:auto;padding:20px 16px calc(24px + env(safe-area-inset-bottom));border-radius:15px 15px 0 0;background:#fff;box-shadow:0 -10px 30px #17203330}.details-head{display:flex;justify-content:space-between;gap:12px}.details-head h2{margin:9px 0 0;color:#172033;font-size:20px}.pill{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:99px;font-size:12px;font-weight:700}.pill.error{color:#9a4040;background:#fff0f0}.pill.running{color:#176d4a;background:#eaf8f1}.pill.succeeded{color:#2e62a9;background:#edf4ff}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:21px 0}.detail-grid div.wide{grid-column:1 / -1}.detail-grid dt{color:#7b8799;font-size:11px}.detail-grid dd{overflow-wrap:anywhere;margin:4px 0 0;color:#253047;font-size:13px}.details-panel h3{margin:22px 0 8px;font-size:15px}.event-log{display:grid;gap:7px}.event-line{display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:8px 10px;border-radius:6px;background:#f4f7fb;color:#45536b;font-size:12px}.event-line time{color:#7d8a9f}.event-line small{grid-column:1 / -1;color:#a36f36}.privacy-note{display:flex;align-items:center;gap:5px;margin:18px 0 0;color:#7b8799;font-size:11px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.indicator-wrap.is-active .indicator-light{box-shadow:0 0 0 5px currentColor,0 0 0 8px color-mix(in srgb,currentColor 22%,transparent)}}@media(max-width:380px){.shell{padding-left:12px;padding-right:12px}.indicator-light{width:76px;height:76px}.indicator-detail{font-size:10px}.demo-bar small{display:none}}@media(max-width:360px){h1{font-size:22px}}.indicator-wrap.is-selected .indicator-light{border-width:3px;box-shadow:0 0 0 5px color-mix(in srgb,currentColor 14%,transparent)}.indicator-wrap.is-selected .indicator-label{text-decoration:underline;text-underline-offset:4px}.indicator-wrap.is-live .indicator-light:after,.indicator-wrap.is-live .indicator-light:before{content:"";display:block;position:absolute;inset:-1px;border-radius:50%;opacity:.2;animation:breathe 2s ease-in-out infinite;box-shadow:0 0 0 7px currentColor}.indicator-wrap.is-live .indicator-light:before{animation-delay:-1s}.indicator-wrap:not(.is-live) .indicator-light{opacity:.88}.demo-actions button,.icon-button{width:44px;height:44px}.demo-bar button{min-height:44px}@media(prefers-reduced-motion:reduce){.indicator-wrap.is-live .indicator-light{box-shadow:0 0 0 5px currentColor,0 0 0 8px color-mix(in srgb,currentColor 22%,transparent)}.indicator-wrap.is-live .indicator-light:before,.indicator-wrap.is-live .indicator-light:after{animation:none!important;opacity:.2}}
