:root{font-family:system-ui,-apple-system,sans-serif;line-height:1.5;color:#1a1a1a;background:#f4f6f8}*{box-sizing:border-box}body{margin:0}.app{max-width:960px;margin:0 auto;padding:1.5rem}header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.5rem}.header-title{min-width:0}.metrics-last-updated{margin:.25rem 0 0;font-size:.85rem;color:#888}.metrics-last-updated time{font-variant-numeric:tabular-nums}h1{font-size:1.4rem;margin:0}.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.card{background:#fff;border-radius:10px;padding:1rem 1.25rem;box-shadow:0 1px 3px #00000014}.card h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:#666;margin:0 0 .75rem}.card-wide{grid-column:1 / -1}.collapsible{padding:0}.collapsible>summary{list-style:none;cursor:pointer;padding:1rem 1.25rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:#666;font-weight:600;-webkit-user-select:none;user-select:none}.collapsible>summary::-webkit-details-marker{display:none}.collapsible>summary:after{content:"▸";float:right;color:#999}.collapsible[open]>summary:after{content:"▾"}.collapsible>form{padding:0 1.25rem 1rem;border-top:1px solid #eee}.muted{color:#888;font-size:.9rem}.event-list{list-style:none;margin:0;padding:0;max-height:320px;overflow-y:auto}.event-item{display:grid;grid-template-columns:auto auto auto 1fr;gap:.5rem .75rem;align-items:baseline;padding:.45rem 0;border-bottom:1px solid #f0f0f0;font-size:.85rem}.event-item:last-child{border-bottom:none}.event-time{font-variant-numeric:tabular-nums;color:#666;white-space:nowrap}.event-level{font-size:.7rem;font-weight:600;text-transform:uppercase;padding:.1rem .4rem;border-radius:4px}.event-level-info{background:#e7f1ff;color:#1e5aa8}.event-level-warn{background:#fff3cd;color:#856404}.event-level-error{background:#f8d7da;color:#721c24}.event-source{font-size:.75rem;color:#999}.event-message{color:#333}@media(max-width:640px){.event-item{grid-template-columns:1fr;gap:.25rem}}.metric{display:flex;justify-content:space-between;padding:.25rem 0}.metric strong{font-variant-numeric:tabular-nums}.badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;font-size:.8rem;font-weight:600}.badge-active{background:#d4edda;color:#155724}.badge-paused{background:#fff3cd;color:#856404}.badge-error{background:#f8d7da;color:#721c24}.soc-bar{height:12px;background:#e9ecef;border-radius:6px;overflow:hidden;margin-top:.5rem}.soc-fill{height:100%;background:linear-gradient(90deg,#28a745,#20c997);transition:width .3s}form label{display:block;margin-bottom:.75rem;font-size:.9rem}form input,form select{width:100%;padding:.4rem .5rem;margin-top:.25rem;border:1px solid #ccc;border-radius:6px}button{padding:.5rem 1rem;border:none;border-radius:6px;background:#2563eb;color:#fff;cursor:pointer;font-size:.9rem}button.secondary{background:#6c757d}button:disabled{opacity:.6;cursor:not-allowed}.error{color:#c0392b;font-size:.85rem}.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}.schedule-fieldset{border:1px solid #e5e5e5;border-radius:8px;padding:.75rem 1rem;margin:0 0 .75rem}.schedule-fieldset legend{font-size:.85rem;color:#666;padding:0 .25rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.checkbox-label input[type=checkbox]{width:auto;margin:0}.setup-hint,.setup-note{font-size:.85rem;color:#666;margin:0 0 .75rem}.setup-note{margin-top:-.35rem;margin-bottom:.85rem}.setup-hint code,.setup-note code{font-size:.8rem}
