@font-face { font-family: "Status Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Status Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Status Jakarta"; font-style: normal; font-weight: 700 800; font-display: swap; src: url(../fonts/jakarta-latin-ext.woff2) format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Status Jakarta"; font-style: normal; font-weight: 700 800; font-display: swap; src: url(../fonts/jakarta-latin.woff2) format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root { --canvas:#f5f7fc; --surface:#fff; --surface-soft:#f8faff; --ink:#13243c; --muted:#53647d; --line:#dbe3f0; --brand:#0065d6; --series:#4058d6; --positive:#117747; --warning:#a65405; --negative:#c62c42; --maintenance:#096dba; --positive-bg:#eaf8f0; --warning-bg:#fff4e4; --negative-bg:#fff0f2; --maintenance-bg:#eaf4ff; --empty:#d3dcea; --body-font:"Status Inter",system-ui,sans-serif; --heading-font:"Status Jakarta","Status Inter",sans-serif; color-scheme:light; }
:root[data-tema="koyu"] { --canvas:#0c1423; --surface:#131f32; --surface-soft:#19273c; --ink:#edf3fc; --muted:#a5b6ce; --line:#2d3e57; --brand:#75b1ff; --series:#a0adff; --positive:#62d8a0; --warning:#ffc274; --negative:#ff97a7; --maintenance:#86c4ff; --positive-bg:#14372c; --warning-bg:#3e301d; --negative-bg:#3e2330; --maintenance-bg:#18334e; --empty:#34445e; color-scheme:dark; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font:400 14px/1.55 var(--body-font); -webkit-font-smoothing:antialiased; }
button,a,summary,[role=button] { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
a { color:var(--brand); }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid var(--brand); outline-offset:4px; }
.status-app { --r:var(--positive); --r-bg:var(--positive-bg); }
h1,h2,h3,p { margin:0; }
h1,h2 { font-family:var(--heading-font); letter-spacing:-.04em; }
.page-shell { max-width:1184px; margin:auto; padding:0 28px; }
.brand-row { height:104px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; border-bottom:1px solid var(--line); }
.brand-identity { display:flex; align-items:center; gap:22px; }
.brand-identity img { display:block; width:138px; height:auto; }
.brand-dark { display:none!important; }
[data-tema=koyu] .brand-light { display:none; }
[data-tema=koyu] .brand-dark { display:block!important; }
.brand-divider { width:1px; height:24px; background:var(--line); }
.brand-label { font-weight:600; font-size:12px; color:var(--muted); }
.theme-toggle { width:40px; height:40px; padding:9px; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:var(--surface); }
.theme-toggle svg { width:20px; height:20px; }
.status-band { --tone:var(--positive); --tone-bg:var(--positive-bg); display:flex; align-items:center; gap:20px; padding:30px; border:1px solid var(--line); border-left:4px solid var(--tone); border-radius:20px; background:var(--surface); }
.status-band[data-state=partial] { --tone:var(--warning); --tone-bg:var(--warning-bg); }
.status-band[data-state=major] { --tone:var(--negative); --tone-bg:var(--negative-bg); }
.status-band[data-state=maintenance] { --tone:var(--maintenance); --tone-bg:var(--maintenance-bg); }
.status-band[data-state=unknown] { --tone:var(--muted); --tone-bg:var(--surface-soft); }
.signal-icon { display:grid; place-items:center; flex:none; width:56px; height:56px; border-radius:17px; color:var(--tone); background:var(--tone-bg); font:600 34px/1 var(--body-font); }
.band-copy { flex:1; }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:.15em; color:var(--muted); margin-bottom:7px; }
.band-copy h1 { font-size:clamp(24px,3vw,32px); line-height:1.25; font-weight:800; }
.band-copy>p:last-child { margin-top:10px; color:var(--muted); font-size:12px; max-width:550px; }
.live-stamp { align-self:flex-start; display:flex; flex-direction:column; align-items:flex-end; gap:7px; font-size:11px; color:var(--muted); min-width:72px; }
.live-label { display:flex; align-items:center; gap:6px; color:var(--tone); font-weight:700; font-size:10px; letter-spacing:.1em; }
.live-label i { width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.4; } }
.overview-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:18px 0 32px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px 0; }
.overview-strip>div { padding:0 25px; border-right:1px solid var(--line); }
.overview-strip>div:last-child { border:0; }
.overview-strip span { display:block; color:var(--muted); font-size:11px; }
.overview-strip strong { display:block; margin-top:5px; font:800 25px/1.4 var(--heading-font); letter-spacing:-.04em; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.section-heading h2 { font-size:21px; font-weight:800; }
.section-heading>span { color:var(--muted); font-size:11px; }
.section-description { color:var(--muted); font-size:11px; margin-top:7px; }
.panel-tag { border:1px solid var(--line); border-radius:7px; padding:5px 9px; font-weight:600; white-space:nowrap; }
.performance-section { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:25px; }
.detail-tabs { display:flex; gap:4px; width:fit-content; padding:4px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); margin-bottom:20px; }
.detail-tabs button { background:none; border:0; border-radius:6px; padding:7px 16px; color:var(--muted); font-size:11px; font-weight:600; }
.detail-tabs button[aria-selected=true] { background:var(--surface); color:var(--brand); box-shadow:0 1px 5px #12233d12; }
#perf-panel,#detail-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.detail-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; grid-column:1/-1; }
.detail-kpis>div { min-width:0; background:var(--surface-soft); border:1px solid var(--line); border-radius:12px; padding:14px; }
.detail-kpis span,.detail-kpis small { display:block; color:var(--muted); font-size:10px; }
.detail-kpis strong { display:block; color:var(--ink); font:800 25px/1.3 var(--heading-font); margin:5px 0; letter-spacing:-.04em; overflow-wrap:anywhere; }
.detail-kpis small { font-size:9px; }
.detail-chart-card { border:1px solid var(--line); border-radius:12px; padding:14px 12px 10px; min-width:0; }
.detail-chart-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.detail-chart-heading h3,.detail-recent h3 { font-size:12px; font-weight:600; }
.detail-chart-heading>span { color:var(--muted); font-size:9px; }
.detail-chart { min-width:0; width:100%; }
.detail-chart svg { display:block; width:100%; height:180px; }
.detail-grid { stroke:var(--line); stroke-width:1; stroke-dasharray:3 5; }
.detail-axis { fill:var(--muted); font:10px var(--body-font); }
.detail-chart-band { fill:var(--series); fill-opacity:.16; }
.detail-chart-line { stroke:var(--series); stroke-width:2; stroke-linejoin:round; }
.detail-chart-dot { fill:var(--series); }
.detail-marker { stroke:var(--series); stroke-dasharray:3 3; }
.detail-legend { display:flex; align-items:center; justify-content:center; gap:16px; color:var(--muted); font-size:9px; }
.detail-legend span { display:inline-flex; align-items:center; gap:6px; }
.detail-line-key { width:17px; height:2px; background:var(--series); }
.detail-band-key { width:17px; height:9px; background:var(--series); opacity:.25; }
.detail-table { grid-column:1/-1; margin-top:2px; border-top:1px solid var(--line); padding-top:13px; }
.detail-table summary { color:var(--brand); cursor:pointer; font-size:11px; font-weight:600; }
.detail-table-scroll { max-height:260px; overflow:auto; margin-top:12px; }
.detail-table table { width:100%; text-align:left; border-collapse:collapse; white-space:nowrap; font-size:10px; }
.detail-table th,.detail-table td { padding:9px; border-bottom:1px solid var(--line); }
.detail-table th { position:sticky; top:0; background:var(--surface-soft); color:var(--muted); }
.detail-tooltip,.day-tooltip { position:fixed; z-index:120; max-width:min(360px,calc(100vw - 16px)); background:var(--ink); color:var(--surface); border-radius:9px; padding:8px 11px; font-size:11px; pointer-events:none; box-shadow:0 5px 25px #0002; }
.detail-message,.detail-empty { color:var(--muted); text-align:center; padding:40px 10px; font-size:12px; }
.detail-message { background:var(--surface-soft); border-radius:12px; }
.day-legend { display:flex; flex-wrap:wrap; gap:16px; justify-content:flex-end; margin:25px 0 4px; font-size:10px; color:var(--muted); }
.day-legend span { display:inline-flex; align-items:center; gap:6px; }
.day-legend i { width:7px; height:7px; border-radius:2px; }
.service-group { margin-top:25px; }
.service-group .section-heading h2 { font:700 12px var(--body-font); text-transform:uppercase; letter-spacing:.14em; }
.group-count { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:3px 8px; }
.service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.service-card { --tone:var(--positive); --tone-bg:var(--positive-bg); background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; cursor:pointer; transition:border-color .18s,box-shadow .18s; min-width:0; }
.service-card:hover { border-color:var(--brand); box-shadow:0 3px 14px #162b4a08; }
.service-card[data-state=checking] { --tone:var(--warning); --tone-bg:var(--warning-bg); }
.service-card[data-state=down] { --tone:var(--negative); --tone-bg:var(--negative-bg); }
.service-card[data-state=maint] { --tone:var(--maintenance); --tone-bg:var(--maintenance-bg); }
.service-top { display:flex; align-items:center; gap:9px; }
.state-dot { width:7px; height:7px; border-radius:50%; flex:none; background:var(--tone); }
.service-top h3 { font-weight:600; font-size:12px; flex:1; min-width:0; overflow-wrap:anywhere; }
.service-latency { color:var(--muted); font-size:10px; white-space:nowrap; }
.state-badge { flex:none; padding:3px 7px; border-radius:5px; background:var(--tone-bg); color:var(--tone); font-size:8px; font-weight:700; letter-spacing:.06em; }
.day-strip { display:flex; gap:2px; margin-top:18px; height:25px; }
.day { flex:1 1 0; min-width:0; border-radius:2px; transition:opacity .1s; }
.day:hover { opacity:.6; }
.day-good { background:var(--positive); }
.day-partial { background:var(--warning); }
.day-major { background:var(--negative); }
.day-none { background:var(--empty); }
.day-caption { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:9px; color:var(--muted); margin-top:7px; }
.day-caption strong { color:var(--ink); font-weight:500; }
.card-recent { display:flex; align-items:center; gap:12px; padding-top:13px; margin-top:13px; border-top:1px solid var(--line); }
.card-recent>span { color:var(--muted); font-size:9px; white-space:nowrap; }
.heartbeat { display:flex; gap:3px; flex:1; }
.beat { display:block; flex:1; min-width:0; height:6px; border-radius:2px; background:var(--empty); }
.beat-up { background:var(--positive); }
.beat-down { background:var(--negative); }
.beat-maint { background:var(--maintenance); }
.incidents-section { margin-top:36px; }
.incidents-section .section-heading h2 { font-size:20px; }
.incident-list { padding:0; margin:0; list-style:none; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
.incident-list:empty { display:none; }
.incident { display:flex; align-items:center; gap:16px; padding:19px 21px; }
.incident+.incident { border-top:1px solid var(--line); }
.incident-mark { width:8px; height:8px; border:2px solid var(--positive); border-radius:50%; flex:none; }
.incident>div { flex:1; min-width:0; }
.incident-head { display:flex; align-items:center; gap:12px; }
.incident h3 { font-size:12px; font-weight:600; }
.incident-badge { color:var(--positive); font-size:8px; font-weight:700; letter-spacing:.06em; }
.incident-badge[data-ongoing=true] { color:var(--negative); }
.incident p { margin-top:5px; font-size:10px; color:var(--muted); }
.incident-duration { color:var(--muted); font-size:10px; white-space:nowrap; }
.text-button { border:0; background:none; color:var(--brand); font-size:11px; font-weight:600; padding:12px 0; }
.empty-note { border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:25px; color:var(--muted); font-size:12px; }
.system-note { text-align:center; color:var(--muted); font-size:10px; padding:35px 0; }
.detail-dialog { width:min(1040px,calc(100vw - 48px)); max-width:none; max-height:calc(100dvh - 48px); padding:28px; border:1px solid var(--line); border-radius:20px; background:var(--surface); color:var(--ink); font:400 13px/1.55 var(--body-font); overflow:auto; overscroll-behavior:contain; }
.detail-dialog::backdrop { background:#08132599; backdrop-filter:blur(5px); }
.detail-top { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; }
.detail-eyebrow { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.14em; font-weight:700; }
.detail-top h2 { font-size:25px; margin:6px 0 9px; }
#detail-meta { color:var(--muted); font-size:11px; }
.detail-actions { display:flex; align-items:center; gap:12px; }
.detail-close { display:grid; place-items:center; width:36px; height:36px; background:var(--surface-soft); color:var(--ink); border:1px solid var(--line); border-radius:10px; font-size:24px; }
#detail-badge { color:var(--positive); background:var(--positive-bg); padding:4px 8px; border-radius:6px; font-size:10px; white-space:nowrap; }
#detail-badge:empty { display:none; }
#detail-badge[data-state=down] { color:var(--negative); background:var(--negative-bg); }
#detail-badge[data-state=checking] { color:var(--warning); background:var(--warning-bg); }
#detail-badge[data-state=maint] { color:var(--maintenance); background:var(--maintenance-bg); }
.detail-recent { grid-column:1/-1; padding-top:10px; }
.detail-beats { display:flex; gap:4px; margin-top:12px; }
.detail-beat { height:20px; border-radius:3px; flex:1; min-width:0; }
.detail-beat-up { background:var(--positive); }
.detail-beat-down { background:var(--negative); }
.detail-beat-maint { background:var(--maintenance); }
#detail-recent-note { color:var(--muted); font-size:10px; margin-top:7px; }
@media(max-width:760px) {
 .page-shell { padding:0 18px; }
 .brand-row { height:84px; margin-bottom:20px; }
 .brand-identity { gap:12px; }
 .brand-identity img { width:112px; }
 .brand-label { font-size:10px; }
 .brand-divider { height:20px; }
 .status-band { padding:22px 18px; gap:12px; flex-wrap:wrap; }
 .signal-icon { width:42px; height:42px; border-radius:12px; font-size:26px; }
 .band-copy { flex:1; min-width:210px; }
 .band-copy h1 { font-size:23px; }
 .band-copy>p:last-child { font-size:11px; }
 .live-stamp { flex-direction:row; align-items:center; gap:12px; width:100%; margin-left:54px; }
 .overview-strip { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0; margin-bottom:24px; }
 .overview-strip>div { padding:16px; }
 .overview-strip>div:nth-child(2) { border-right:0; }
 .overview-strip>div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
 .overview-strip strong { font-size:23px; }
 .overview-strip span { font-size:10px; }
 .performance-section { padding:18px 14px; }
 .section-heading { gap:10px; }
 .section-heading h2 { font-size:20px; }
 .panel-tag { display:none; }
 .detail-tabs { width:100%; gap:2px; }
 .detail-tabs button { flex:1; padding:8px 10px; font-size:10px; }
 .detail-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .detail-kpis>div { padding:12px 10px; }
 .detail-kpis strong { font-size:23px; }
 #perf-panel,#detail-panel { grid-template-columns:minmax(0,1fr); gap:10px; }
 .detail-chart-card { padding:12px 7px; }
 .detail-chart svg { height:180px; }
 .day-legend { justify-content:flex-start; gap:11px; font-size:9px; margin-top:22px; }
 .service-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
 .service-card { padding:18px 14px; }
 .service-top { gap:7px; }
 .service-top h3 { font-size:12px; }
 .service-latency { font-size:9px; }
 .day-strip { gap:1px; }
 .incident { gap:10px; padding:16px 12px; }
 .incident-head { flex-wrap:wrap; gap:4px 10px; }
 .incident p { font-size:9px; }
 .incident-duration { font-size:9px; }
 .system-note { font-size:9px; max-width:310px; margin:auto; }
 .detail-dialog { width:100%; height:100dvh; max-height:100dvh; margin:0; padding:20px 14px; border:0; border-radius:0; }
 .detail-top { gap:10px; }
 .detail-top h2 { font-size:21px; }
 .detail-actions { flex-direction:column-reverse; align-items:flex-end; gap:6px; }
 #detail-meta { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }