:root { color-scheme: light dark; --bg:#f5f7fb; --card:#fff; --ink:#172033; --muted:#56627a; --line:#cfd7e4; --accent:#2775e8; --warn:#965900; --bad:#b4233a; }
* { box-sizing:border-box } html,body { max-width:100%; overflow-x:hidden } body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 system-ui,sans-serif; }
.app { min-height:100vh; padding:max(14px,env(safe-area-inset-top)) 14px calc(22px + env(safe-area-inset-bottom)); max-width:430px; margin:auto; overflow-wrap:anywhere; }
.header { display:flex; align-items:center; justify-content:space-between; gap:10px; }.header h1 { font-size:18px; line-height:1.15; margin:0 }.header .focus { min-height:44px; flex-shrink:0 }.sub,.empty { display:block; color:var(--muted); margin:5px 0 12px }
.banner,.card,.detail { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px; margin:11px 0; box-shadow:0 1px 2px #00000009; }
.banner { display:block; width:100%; text-align:left; border-left:4px solid var(--accent) }.banner strong,.banner-hint,.group-label { display:block }.banner-hint { color:var(--muted); margin:7px 0 12px }.group-label { color:var(--ink); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-top:10px }.counts,.flags { display:flex; flex-wrap:wrap; gap:7px; margin-top:7px }.flags { padding-top:7px; border-top:1px dashed var(--line) }.chip { border:1px solid var(--line); border-radius:999px; padding:5px 9px; font-size:13px; line-height:1.3 }.flag { color:var(--muted) }.error { color:var(--bad) }.stale,.never_run,.paused { color:var(--warn) }.active { color:var(--accent) }
button { font:inherit; color:inherit; background:transparent; border:1px solid var(--line); border-radius:9px; min-height:44px; padding:8px 11px } button:focus-visible { outline:3px solid var(--accent) }.card { position:relative; width:100%; text-align:left; display:block; border-left-width:4px; padding-right:40px }.health-error { border-left-color:var(--bad) }.health-stale,.health-attention { border-left-color:var(--warn) }.health-paused { border-left-color:var(--muted) }.health-active { border-left-color:var(--accent) }.chevron { position:absolute; right:15px; top:50%; transform:translateY(-50%); font-size:24px; color:var(--muted) }.card h2,.detail h2 { font-size:16px; margin:0 0 4px }.row { display:flex; justify-content:space-between; gap:8px; align-items:center }.job { border-top:1px solid var(--line); padding:10px 0 }.job:first-child { border-top:0 }.job p { margin:3px 0; color:var(--muted); font-size:13px }.status { text-transform:capitalize; font-size:12px; font-weight:650 }.more { color:var(--accent); margin-top:8px }.notice { padding:12px; border-radius:12px; background:#fff0f0; color:#8b1930 }.offline { color:var(--warn) }.freshness { margin:4px 0 10px; color:var(--muted) }.offline-screen { padding:12px; border:1px solid var(--warn); border-radius:12px; margin:10px 0 }.offline-screen p { color:var(--muted); margin:5px 0 9px }
@media (max-width:360px) { .header { align-items:flex-start; flex-direction:column } .header .focus { width:100% } }