:root {
    --sp-brand: #5865f2;
    --bg: #f4f6fa;
    --card: #ffffff;
    --card-2: #f8f9fc;
    --line: #e4e7ee;
    --text: #3b4252;
    --muted: #7a8293;
    --heading: #151925;
    --c-operational: #2fb36d;
    --c-degraded: #e8b522;
    --c-partial: #ef8a2b;
    --c-major: #e5484d;
    --c-maintenance: #4c8dff;
    --c-unknown: #cfd4dd;
    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .12);
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0d1017;
        --card: #151a24;
        --card-2: #1a2030;
        --line: #252d3d;
        --text: #c4cad6;
        --muted: #838c9e;
        --heading: #f2f4f8;
        --c-unknown: #333b4c;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg: #0d1017;
    --card: #151a24;
    --card-2: #1a2030;
    --line: #252d3d;
    --text: #c4cad6;
    --muted: #838c9e;
    --heading: #f2f4f8;
    --c-unknown: #333b4c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6);
    color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.sp { margin: 0; background: var(--bg); color: var(--text); font: 500 14.5px/1.55 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--sp-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--heading); margin: 0; letter-spacing: -.01em; }
.sp-wrap { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 18px; }
.sp-muted { color: var(--muted); }

.sp-hero { position: relative; overflow: hidden; background: var(--sp-brand); background: linear-gradient(135deg, var(--sp-brand), color-mix(in srgb, var(--sp-brand) 70%, #0b0f1a)); color: #fff; padding: 34px 0 86px; }
.sp-hero-glow { position: absolute; inset: 0; background: radial-gradient(600px 200px at 15% 0%, rgba(255,255,255,.22), transparent 70%), radial-gradient(500px 220px at 90% 120%, rgba(255,255,255,.14), transparent 70%); pointer-events: none; }
.sp-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(180deg, #000, transparent 85%); pointer-events: none; }
.sp-hero-in { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sp-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 21px; letter-spacing: -.02em; }
.sp-brand:hover { text-decoration: none; }
.sp-brand img { height: 38px; width: auto; border-radius: 10px; }
.sp-mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.18); font-size: 21px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.sp-brand small { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.18); }
.sp-hero-act { display: flex; align-items: center; gap: 8px; }
.sp-btn { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 10px; padding: 9px 14px; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--sp-brand); background: #fff; cursor: pointer; box-shadow: 0 6px 20px -8px rgba(0,0,0,.4); transition: transform .15s; }
.sp-btn:hover { transform: translateY(-1px); }
.sp-theme { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; }
.sp-sub { position: relative; }
.sp-sub-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 270px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px -15px rgba(0,0,0,.35); padding: 6px; z-index: 20; }
.sp-sub-menu a { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; color: var(--text); }
.sp-sub-menu a:hover { background: var(--card-2); text-decoration: none; }
.sp-sub-menu i { font-size: 22px; color: var(--sp-brand); }
.sp-sub-menu b { display: block; color: var(--heading); font-size: 13.5px; }
.sp-sub-menu small { color: var(--muted); font-size: 12px; }

.sp-main { position: relative; z-index: 2; margin-top: -58px; padding-bottom: 40px; }
.sp-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }

.sp-overall { --c: var(--c-operational); position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 16px; color: #fff; background: var(--c); box-shadow: 0 18px 40px -18px var(--c); }
.sp-overall.s-degraded { --c: var(--c-degraded); }
.sp-overall.s-partial { --c: var(--c-partial); }
.sp-overall.s-major { --c: var(--c-major); }
.sp-overall.s-maintenance { --c: var(--c-maintenance); }
.sp-overall-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: rgba(255,255,255,.2); flex: none; }
.sp-overall b { display: block; font-size: 18px; font-weight: 800; }
.sp-overall small { opacity: .85; font-size: 12.5px; }
.sp-overall-pulse { position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: spPulse 2s infinite; }
@keyframes spPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.65); } 70% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

.sp-inc { --c: var(--c-degraded); margin-top: 16px; padding: 18px 20px; border-left: 4px solid var(--c); }
.imp-major { --c: var(--c-partial); }
.imp-critical { --c: var(--c-major); }
.imp-maintenance { --c: var(--c-maintenance); }
.imp-minor { --c: var(--c-degraded); }
.sp-inc-head { display: flex; align-items: center; gap: 12px; }
.sp-inc-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); flex: none; }
.sp-inc-head > div { flex: 1; min-width: 0; }
.sp-inc-head a { display: block; font-weight: 800; font-size: 16px; color: var(--heading); }
.sp-inc-head small { color: var(--muted); font-size: 12.5px; }
.sp-inc-text { margin: 12px 0 0; }
.sp-inc-comps, .sp-detail-comps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; align-items: center; }
.sp-detail-comps > span:first-child { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.sp-chip { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); color: var(--text); }
.sp-countdown { font-size: 12.5px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.sp-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-weight: 700; font-size: 13px; }

.sp-timeline { margin-top: 14px; display: grid; gap: 0; }
.sp-upd { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.sp-upd:first-child { border-top: 0; }
.sp-upd-s { font-weight: 800; color: var(--heading); font-size: 13.5px; }
.sp-upd-s.s-resolved, .sp-upd-s.s-completed { color: var(--c-operational); }
.sp-upd-s.s-investigating { color: var(--c-major); }
.sp-upd-s.s-identified { color: var(--c-partial); }
.sp-upd-s.s-monitoring { color: var(--c-maintenance); }
.sp-upd-s.s-scheduled, .sp-upd-s.s-in_progress { color: var(--c-maintenance); }
.sp-upd-b p { margin: 0 0 4px; color: var(--text); }
.sp-upd-b time { font-size: 12px; color: var(--muted); }
.sp-timeline.compact .sp-upd { grid-template-columns: 130px minmax(0, 1fr); padding: 9px 0; }

.sp-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 34px 2px 12px; flex-wrap: wrap; }
.sp-sec-head h2 { font-size: 17px; font-weight: 800; }
.sp-range { font-size: 12.5px; }
.r30 { display: none; }
.sp-link { font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 2px; }

.sp-comps { padding: 4px 0; overflow: visible; }
.sp-group + .sp-group { border-top: 1px solid var(--line); }
.sp-group-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 14px 20px; background: none; border: 0; font: inherit; color: var(--heading); cursor: pointer; text-align: left; }
.sp-group-head b { font-size: 14.5px; font-weight: 800; }
.sp-group-head .sp-muted { font-size: 12px; font-weight: 600; }
.sp-caret { font-size: 20px; color: var(--muted); transition: transform .2s; }
.sp-group.closed .sp-caret { transform: rotate(-90deg); }
.sp-group.closed .sp-group-body { display: none; }
.sp-group-head .sp-st { margin-left: auto; }
.sp-comp { padding: 14px 20px 16px 48px; border-top: 1px dashed var(--line); }
.sp-comp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.sp-comp-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--heading); }
.sp-help { color: var(--muted); font-size: 16px; cursor: help; }
.sp-st { --c: var(--c-operational); display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--c); white-space: nowrap; }
.sp-st i { font-size: 16px; }
.sp-st.s-degraded { --c: #c99610; }
.sp-st.s-partial { --c: var(--c-partial); }
.sp-st.s-major { --c: var(--c-major); }
.sp-st.s-maintenance { --c: var(--c-maintenance); }
.sp-st.s-unknown { --c: var(--muted); }
.sp-bars { display: flex; gap: 2px; height: 34px; }
.sp-bars span { flex: 1; min-width: 0; border-radius: 3px; background: var(--c-operational); cursor: pointer; transition: transform .12s, opacity .12s; transform-origin: bottom; }
.sp-bars:hover span { opacity: .55; }
.sp-bars span:hover { opacity: 1; transform: scaleY(1.12); }
.d-operational { background: var(--c-operational) !important; }
.d-degraded { background: var(--c-degraded) !important; }
.d-partial { background: var(--c-partial) !important; }
.d-major { background: var(--c-major) !important; }
.d-maintenance { background: var(--c-maintenance) !important; }
.d-unknown { background: var(--c-unknown) !important; }
.sp-bar-foot { display: flex; align-items: center; gap: 10px; margin-top: 7px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.sp-bar-foot i { flex: 1; height: 1px; background: var(--line); }
.sp-up { color: var(--text); }
.sp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 20px 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.sp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sp-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.sp-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.sp-seg button { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 5px 12px; border-radius: 7px; cursor: pointer; }
.sp-seg button.active { background: var(--sp-brand); color: #fff; }
.sp-metrics { display: grid; gap: 12px; }
.sp-chart { padding: 16px 18px 10px; }
.sp-chart-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.sp-chart-h b { color: var(--heading); font-size: 14px; }
.sp-chart-h span { font-size: 18px; font-weight: 800; color: var(--heading); font-variant-numeric: tabular-nums; }
.sp-chart-h span small { font-size: 12px; color: var(--muted); font-weight: 700; margin-left: 2px; }
.sp-chart-b { position: relative; height: 140px; }
.sp-chart-b svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sp-chart-b .grid { stroke: var(--line); stroke-width: 1; }
.sp-chart-b .ax { fill: var(--muted); font-size: 10.5px; font-family: inherit; font-weight: 600; }
.sp-chart-b .cursor { stroke: var(--muted); stroke-dasharray: 3 3; }
.sp-chart-empty { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 13px; }

.sp-past { display: grid; gap: 0; }
.sp-day { padding: 16px 2px; border-bottom: 1px solid var(--line); }
.sp-day h3 { font-size: 14.5px; font-weight: 800; margin-bottom: 8px; }
.sp-day > p { margin: 0; font-size: 13.5px; }
.sp-past-i { --c: var(--c-degraded); padding: 10px 14px; margin-top: 8px; border-left: 3px solid var(--c); background: var(--card); border-radius: 0 10px 10px 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sp-past-i a { font-weight: 800; color: var(--c); font-size: 15px; }
.sp-past-i p { margin: 4px 0; font-size: 13.5px; }
.sp-past-i small { color: var(--muted); font-size: 12px; }

.sp-back { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; margin-bottom: 14px; }
.sp-detail { --c: var(--c-degraded); padding: 24px; border-top: 4px solid var(--c); }
.sp-detail h1 { font-size: 24px; margin: 12px 0 8px; }
.sp-detail-head { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-pill { --c: var(--muted); font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.sp-pill.st-resolved, .sp-pill.st-completed { --c: var(--c-operational); }
.sp-pill.st-investigating { --c: var(--c-major); }
.sp-pill.st-identified { --c: var(--c-partial); }
.sp-pill.st-monitoring, .sp-pill.st-scheduled, .sp-pill.st-in_progress { --c: var(--c-maintenance); }
.sp-detail-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 13px; }
.sp-detail-meta span { display: inline-flex; align-items: center; gap: 5px; }
.sp-h1 { color: #fff; font-size: 26px; }
.sp-h1 + .sp-muted { color: rgba(255,255,255,.8); margin: 4px 0 18px; }
.sp-month { margin-bottom: 22px; }
.sp-month h2 { font-size: 15px; font-weight: 800; margin: 0 2px 10px; }
.sp-month:first-of-type h2 { color: var(--heading); }
.sp-hist { --c: var(--c-degraded); display: block; padding: 14px 16px; margin-bottom: 8px; border-left: 4px solid var(--c); color: var(--text); }
.sp-hist:hover { text-decoration: none; border-color: var(--c); transform: translateX(2px); }
.sp-hist b { display: block; color: var(--heading); }
.sp-hist span { font-size: 12.5px; }
.sp-empty { padding: 14px 16px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.sp-empty i { color: var(--c-operational); font-size: 18px; }

.sp-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 34px; font-size: 12.5px; color: var(--muted); }
.sp-foot a { color: var(--muted); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }

.sp-tip { position: fixed; z-index: 100; max-width: 280px; padding: 10px 12px; border-radius: 10px; background: #12161f; color: #e9ecf2; font-size: 12.5px; line-height: 1.45; box-shadow: 0 14px 40px -10px rgba(0,0,0,.5); pointer-events: none; }
.sp-tip.interactive { pointer-events: auto; }
.sp-tip b { display: block; color: #fff; font-size: 13px; }
.sp-tip .t-l { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-weight: 700; }
.sp-tip .t-l i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sp-tip .t-m { color: #b6bdca; white-space: pre-line; margin-top: 3px; }
.sp-tip a { display: block; color: #9fb0ff; margin-top: 5px; font-weight: 700; }

@media (max-width: 700px) {
    .sp-hero { padding: 22px 0 76px; }
    .sp-btn span, .sp-btn { font-size: 12.5px; padding: 8px 11px; }
    .sp-bars span:nth-child(-n+60) { display: none; }
    .r90 { display: none; }
    .r30 { display: inline; }
    .sp-comp { padding: 12px 16px 14px; }
    .sp-group-head { padding: 13px 16px; }
    .sp-group-head .sp-muted { display: none; }
    .sp-upd, .sp-timeline.compact .sp-upd { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .sp-overall { padding: 16px; }
    .sp-overall-pulse { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-overall-pulse { animation: none; }
}
.imp-none { --c: var(--sp-brand); }