:root { --ink:#142025; --muted:#65737a; --line:#dce5e2; --paper:#f8fbf9; --card:#fff; --green:#1d9a69; --green-soft:#e4f6ed; --amber:#c77900; --amber-soft:#fff2d8; --orange:#c85615; --red:#c33b45; --blue:#1f5d65; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.site-header, main, footer { max-width:1180px; margin:auto; padding-left:28px; padding-right:28px; }
.site-header { height:76px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); text-decoration:none; font:700 20px/1 Georgia, serif; letter-spacing:-.04em; }.brand em { font-style:normal; font-weight:400; color:var(--muted); }.brand-mark { display:inline-block; width:11px; height:11px; margin-right:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px #ddf4e8; }
nav { display:flex; gap:22px; } nav a { color:var(--muted); text-decoration:none; font-size:14px; } nav a:hover { color:var(--ink); }
.hero { padding:70px 0 56px; max-width:700px; }.eyebrow { margin:0 0 10px; color:#6c7a7a; font-size:11px; font-weight:800; letter-spacing:.14em; }.hero h1, .admin-heading h1 { margin:0; font:500 clamp(42px,6vw,72px)/.99 Georgia, serif; letter-spacing:-.055em; }.hero h1 span { color:#4e6567; }.hero-copy { max-width:510px; margin:25px 0 0; color:var(--muted); font-size:18px; }
.status-area { padding-bottom:76px; }.overall-card { display:flex; align-items:center; gap:18px; padding:22px 26px; border:1px solid #bdebd1; border-radius:12px; background:var(--green-soft); }.overall-card.degraded { border-color:#f5d491; background:var(--amber-soft); }.overall-card.partial-outage, .overall-card.major-outage { border-color:#efb7bb; background:#fff0f1; }.overall-card p { margin:0 0 2px; color:#3d6756; font-size:13px; }.overall-card.degraded p { color:#805604; }.overall-card h2 { margin:0; font:600 18px/1.2 Georgia, serif; }.overall-card time { margin-left:auto; color:#567066; font-size:13px; }.pulse { width:12px; height:12px; flex:0 0 auto; border-radius:50%; background:var(--green); box-shadow:0 0 0 6px rgba(29,154,105,.14); }.degraded .pulse { background:var(--amber); box-shadow:0 0 0 6px rgba(199,121,0,.14); }.partial-outage .pulse,.major-outage .pulse { background:var(--red); box-shadow:0 0 0 6px rgba(195,59,69,.13); }
.incident-section,.services-section { margin-top:48px; }.section-heading,.panel-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:15px; }.section-heading h2,.panel-heading h2 { margin:0; font:500 25px/1.1 Georgia,serif; letter-spacing:-.025em; }.incident-card { margin-bottom:12px; padding:20px 22px; border-left:4px solid var(--amber); border-radius:8px; background:#fffaf0; }.incident-topline { display:flex; align-items:center; gap:9px; color:#866e47; font-size:12px; }.incident-topline time { margin-left:auto; }.severity { display:inline-flex; padding:2px 7px; border-radius:99px; background:#fff1d3; color:#8d5b00; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }.severity.major { background:#ffeadb; color:#9d4715; }.severity.critical { background:#ffe0e2; color:#a22d38; }.incident-state { font-weight:700; }.incident-card h3 { margin:10px 0 5px; font:600 18px Georgia,serif; }.incident-card p { margin:0; color:#5f5a50; }
.service-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }.service-card,.admin-panel { background:var(--card); border:1px solid var(--line); border-radius:12px; }.service-card { padding:21px; }.service-heading { display:flex; gap:16px; justify-content:space-between; }.service-heading h3 { margin:0; font:600 18px Georgia,serif; }.service-heading p { margin:4px 0 0; color:var(--muted); font-size:13px; }.service-status { height:max-content; padding:4px 8px; border-radius:99px; background:var(--green-soft); color:#19734f; font-size:11px; font-weight:800; white-space:nowrap; }.service-status.degraded { background:var(--amber-soft); color:#8b5d00; }.service-status.partial-outage,.service-status.major-outage { color:#a02d39; background:#ffe7e9; }.component-list { margin-top:21px; border-top:1px solid var(--line); }.component { display:grid; grid-template-columns:12px 1fr auto auto; gap:8px; align-items:center; padding:12px 0 0; font-size:13px; }.component-dot { width:8px; height:8px; border-radius:50%; background:var(--green); }.component-dot.degraded { background:var(--amber); }.component-dot.partial-outage,.component-dot.major-outage { background:var(--red); }.metric { color:var(--muted); font-variant-numeric:tabular-nums; }.latency { min-width:45px; text-align:right; }.uptime-history { margin-top:19px; padding-top:17px; border-top:1px solid var(--line); }.uptime-heading { display:flex; justify-content:space-between; gap:10px; margin-bottom:10px; color:var(--muted); font-size:11px; }.uptime-heading strong { color:#5a6c6c; font-size:11px; font-variant-numeric:tabular-nums; }.uptime-bars { display:grid; grid-template-columns:repeat(90,minmax(2px,1fr)); gap:3px; height:35px; }.uptime-day { min-width:0; border-radius:1px; background:#38a663; }.uptime-day.degraded { background:#d29422; }.uptime-day.partial-outage { background:#da6b32; }.uptime-day.major-outage { background:#e0525a; }.uptime-day.unknown { background:#d9e2df; }.uptime-scale { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; margin-top:7px; color:#7b8989; font-size:10px; }.uptime-scale i { display:block; height:1px; background:#ccd8d4; }
.admin-heading { padding:52px 0 36px; }.admin-heading h1 { font-size:52px; }.admin-heading > p:last-child { color:var(--muted); font-size:17px; }.admin-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr); gap:18px; padding-bottom:70px; }.admin-panel { padding:22px; }.count { padding:5px 8px; border-radius:99px; background:#eff5f2; color:#547068; font-size:12px; }.add-component { margin:0 0 18px; border:1px solid #dbe6e1; border-radius:8px; background:#f8fbf9; }.add-component summary { cursor:pointer; padding:10px 12px; color:#286957; font-size:12px; font-weight:800; list-style:none; }.add-component summary::-webkit-details-marker { display:none; }.add-component summary span { display:inline-flex; width:18px; height:18px; margin-right:5px; align-items:center; justify-content:center; border-radius:50%; background:#dff0e7; font-size:15px; line-height:1; }.component-form { display:grid; grid-template-columns:1fr 1fr; gap:11px; padding:0 12px 13px; }.component-form label { display:grid; gap:5px; color:#536762; font-size:11px; font-weight:800; }.component-form input,.component-form select { width:100%; min-width:0; border:1px solid #d6e1dd; border-radius:6px; background:#fff; padding:8px; color:var(--ink); font:13px inherit; }.component-endpoint { grid-column:span 2; }.component-form .primary-button { align-self:end; margin:0; }.table-wrap { overflow:auto; } table { width:100%; min-width:760px; border-collapse:collapse; font-size:13px; } th { padding:10px 8px; color:var(--muted); border-bottom:1px solid var(--line); text-align:left; font-size:10px; letter-spacing:.08em; text-transform:uppercase; } td { padding:14px 8px; border-bottom:1px solid #edf1ef; color:#425255; } td strong,td span { display:block; } td span { color:var(--muted); font-size:11px; }.endpoint { min-width:205px; }.endpoint-form,.status-form { display:flex; gap:5px; }.endpoint-form input { width:100%; min-width:120px; border:1px solid #d6e1dd; border-radius:6px; padding:6px 7px; color:#536762; font:11px inherit; }.status-select { max-width:125px; border:1px solid #cfe0d8; border-radius:6px; background:#f5fbf7; color:#217353; padding:6px; font:600 11px inherit; }.status-select.degraded { background:#fff7e6; border-color:#f3dfac; color:#8d6206; }.status-select.partial-outage,.status-select.major-outage { background:#fff0f1; border-color:#f0c4c8; color:#a33a45; } button { cursor:pointer; border:1px solid #d6e1dd; border-radius:6px; background:#fff; color:#37504c; padding:6px 8px; font:600 11px inherit; } button:hover { border-color:#9cb9ae; }.incident-form { display:grid; gap:13px; }.incident-form label { display:grid; gap:6px; color:#536762; font-size:12px; font-weight:700; }.incident-form input,.incident-form textarea,.incident-form select { width:100%; border:1px solid #d6e1dd; border-radius:7px; background:#fff; padding:9px; color:var(--ink); font:14px inherit; }.incident-form textarea { resize:vertical; }.primary-button { margin-top:2px; border-color:var(--blue); background:var(--blue); color:#fff; padding:10px 12px; font-size:13px; }.admin-incident-list { margin-top:28px; border-top:1px solid var(--line); }.admin-incident-list h3 { margin:17px 0 10px; font:600 15px Georgia,serif; }.admin-incident-list article { display:flex; justify-content:space-between; gap:10px; padding:12px 0; border-top:1px solid #edf1ef; }.admin-incident-list article:first-of-type { border-top:0; }.admin-incident-list strong { display:block; margin-top:5px; font-size:13px; }.admin-incident-list p { margin:3px 0 0; color:var(--muted); font-size:11px; }.admin-incident-list button { height:max-content; }.empty-state { color:var(--muted); font-size:13px; }
footer { display:flex; justify-content:space-between; padding-top:24px!important; padding-bottom:28px!important; border-top:1px solid var(--line); color:#7a8988; font-size:12px; }
.overall-card.unknown { border-color:#d9e3df; background:#f1f5f3; }.overall-card.unknown p { color:#60736e; }.overall-card.unknown .pulse { background:#84928e; box-shadow:0 0 0 6px rgba(132,146,142,.12); }.empty-service-list { padding:25px; border:1px dashed #ccd9d4; border-radius:10px; background:#fbfcfb; color:#72817e; }.add-service { margin:0 0 10px; border:1px solid #dbe6e1; border-radius:8px; background:#f8fbf9; }.add-service summary { cursor:pointer; padding:10px 12px; color:#286957; font-size:12px; font-weight:800; list-style:none; }.add-service summary::-webkit-details-marker { display:none; }.add-service summary span { display:inline-flex; width:18px; height:18px; margin-right:5px; align-items:center; justify-content:center; border-radius:50%; background:#dff0e7; font-size:15px; line-height:1; }.service-form { display:grid; grid-template-columns:1fr 1fr auto; gap:11px; padding:0 12px 13px; }.service-form label { display:grid; gap:5px; color:#536762; font-size:11px; font-weight:800; }.service-form input { width:100%; min-width:0; border:1px solid #d6e1dd; border-radius:6px; background:#fff; padding:8px; color:var(--ink); font:13px inherit; }.service-form .primary-button { align-self:end; margin:0; }.form-hint { margin:0; padding:0 12px 13px; color:#6f807c; font-size:12px; }
@media (max-width:760px) { .site-header,main,footer { padding-left:18px; padding-right:18px; }.site-header { height:64px; }.hero { padding:43px 0; }.overall-card { align-items:flex-start; padding:18px; }.overall-card time { display:none; }.service-list,.admin-grid { grid-template-columns:1fr; }.component { grid-template-columns:12px 1fr auto; }.latency { display:none; }.admin-heading { padding:35px 0 27px; }.admin-heading h1 { font-size:42px; } footer { gap:10px; flex-direction:column; } }
.projects-panel { margin-bottom:18px; }.project { display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,2fr) auto auto; gap:14px; align-items:center; padding:13px 0; border-top:1px solid #edf1ef; font-size:13px; }.project-name strong,.project-name span { display:block; }.project-name span { color:var(--muted); font-size:11px; }.members { display:flex; flex-wrap:wrap; gap:6px; }.member { display:inline-flex; align-items:center; gap:2px; padding:3px 3px 3px 9px; border-radius:99px; background:#eff5f2; color:#37504c; font-size:12px; }.member button { border:0; background:none; padding:0 6px; font-size:14px; line-height:1; }.members .empty-state { margin:0; font-size:12px; }.join-form { display:flex; gap:5px; }.join-form select { max-width:170px; border:1px solid #d6e1dd; border-radius:6px; background:#fff; padding:6px; color:var(--ink); font:11px inherit; }.spec-link { color:var(--blue); font-size:12px; font-weight:700; white-space:nowrap; }
.settings-form { display:grid; gap:16px; max-width:820px; margin-bottom:70px; }.settings-form fieldset { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin:0; padding:12px 14px 14px; border:1px solid var(--line); border-radius:8px; }.settings-form legend { padding:0 6px; color:#286957; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.settings-form label { display:grid; gap:5px; color:#536762; font-size:11px; font-weight:800; }.settings-form label span { color:var(--muted); font-weight:400; }.settings-form input,.settings-form textarea { width:100%; min-width:0; border:1px solid #d6e1dd; border-radius:6px; background:#fff; padding:8px; color:var(--ink); font:13px inherit; }.settings-form textarea { resize:vertical; font:12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }.settings-form .primary-button { justify-self:start; }.form-error,.form-saved { margin:0; padding:10px 12px; border-radius:7px; font-size:13px; }.form-error { background:#fff0f1; color:#a33a45; }.form-saved { background:var(--green-soft); color:#19734f; }
@media (max-width:760px) { .project,.settings-form fieldset { grid-template-columns:1fr; } }