body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       background: #f8f9fa; color: #222; }
.sp-container { max-width: 900px; margin: 0 auto; background: white; min-height: 100vh; }
.sp-header { padding: 30px 24px; text-align: center;
             img { max-height: 40px; margin-bottom: 10px; }
             h1 { margin: 0; font-size: 24px; } }
.sp-overall { padding: 40px 24px; text-align: center; color: white;
              h2 { margin: 0; font-size: 28px; font-weight: 600; } }
.sp-operational { background: #2e7d32; }
.sp-degraded { background: #f57c00; }
.sp-partial_outage { background: #ef6c00; }
.sp-major_outage { background: #c62828; }

.sp-section { padding: 24px; border-top: 1px solid #eee;
              h3 { margin: 0 0 16px; font-size: 16px; text-transform: uppercase;
                   letter-spacing: 0.5px; color: #666; } }

.sp-components { display: grid; gap: 12px; }
.sp-component { display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
                align-items: center; padding: 12px; background: #fafafa;
                border-radius: 6px;
                .sp-comp-name strong { font-size: 15px; }
                .sp-comp-desc { color: #888; font-size: 12px; }
                .sp-comp-status { font-size: 12px; font-weight: 600;
                                  padding: 4px 10px; border-radius: 10px; color: white;
                                  &.sp-operational { background: #4caf50; }
                                  &.sp-degraded { background: #ff9800; }
                                  &.sp-partial_outage { background: #f57c00; }
                                  &.sp-major_outage { background: #c62828; }
                                  &.sp-under_maintenance { background: #607d8b; } }
                .sp-comp-uptime { color: #666; font-size: 12px; } }

.sp-incident { margin-bottom: 16px; padding: 16px; border-radius: 8px;
               background: #fff3e0; border-left: 4px solid #ff9800;
               .sp-inc-head { display: flex; gap: 8px; align-items: center;
                              margin-bottom: 10px; }
               .sp-badge { padding: 2px 10px; border-radius: 10px;
                           font-size: 11px; font-weight: 600; color: white; }
               .sp-minor { background: #2196f3; }
               .sp-major { background: #ff9800; }
               .sp-critical { background: #c62828; }
               .sp-state-investigating { background: #e53935; }
               .sp-state-identified { background: #fb8c00; }
               .sp-state-monitoring { background: #1e88e5; }
               .sp-state-resolved { background: #43a047; }
               .sp-inc-update { padding: 8px 0; border-bottom: 1px dashed #ddd;
                                &:last-child { border-bottom: none; }
                                .sp-inc-when { font-size: 11px; color: #888; } }
}

.sp-subscribe-form { display: flex; gap: 8px; max-width: 400px;
                     input { flex: 1; padding: 10px; border: 1px solid #ccc;
                             border-radius: 6px; font-size: 14px; }
                     button { padding: 10px 20px; background: #2196f3; color: white;
                              border: none; border-radius: 6px; cursor: pointer;
                              font-weight: 600; } }

.sp-incident-past { margin-bottom: 10px; padding: 10px;
                    background: #f5f5f5; border-radius: 6px;
                    .sp-past-head { display: flex; gap: 12px; align-items: center;
                                    flex-wrap: wrap; }
                    .sp-past-when, .sp-past-duration { font-size: 12px; color: #888; } }

.sp-footer { padding: 20px 24px; background: #fafafa; border-top: 1px solid #eee;
             text-align: center; font-size: 12px; color: #999;
             display: flex; justify-content: space-between; }

.sp-done { padding: 80px 24px; text-align: center; }