/* Service Status Monitor — all selectors are scoped to .ss-page */
.ss-page { width: min(100%, 980px); }
.ss-page .intro { margin-bottom: 28px; }
.ss-panel,.ss-card,.ss-metric,.ss-service-card,.ss-incident-row {
  border: 1px solid rgba(220,230,255,.09);
  background: linear-gradient(145deg,rgba(29,37,52,.74),rgba(16,21,30,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025),0 12px 32px rgba(0,0,0,.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.ss-panel { padding: 17px 19px 0; border-radius: 17px; margin-bottom: 18px; }
.ss-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:34px; }
.ss-live-indicator,.ss-top-actions { display:flex; align-items:center; gap:9px; min-width:0; }
.ss-live-indicator { color:#b8c2d2; font-size:11px; font-weight:700; }
.ss-live-dot { width:8px;height:8px;border-radius:50%;background:#788496;box-shadow:0 0 10px rgba(120,132,150,.25); }
.ss-live-dot.is-live { background:#82d9ad;box-shadow:0 0 12px rgba(130,217,173,.55); }
.ss-live-dot.is-error { background:#ef858b;box-shadow:0 0 12px rgba(239,133,139,.45); }
.ss-updated { color:#7d899a;font:10px var(--mono);white-space:nowrap; }
.ss-icon-button { display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;color:#aebcff;background:rgba(255,255,255,.035);cursor:pointer;transition:background .16s,border-color .16s; }
.ss-icon-button:hover { background:rgba(145,164,255,.12);border-color:rgba(169,184,255,.25); }
.ss-icon-button svg { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.ss-connection-note { margin:13px 0 14px;padding:10px 12px;border:1px solid rgba(168,185,255,.13);border-radius:10px;color:#aeb9cb;background:rgba(133,153,226,.06);font-size:11px;line-height:1.6; }
.ss-connection-note.is-error { border-color:rgba(238,135,143,.2);background:rgba(188,76,87,.07); }
.ss-connection-note.is-ok { border-color:rgba(112,208,162,.17);background:rgba(80,164,126,.06); }
.ss-tabs { display:flex;gap:4px;overflow-x:auto;margin:0 -4px;padding:0 4px;scrollbar-width:thin; }
.ss-tab { position:relative;flex:0 0 auto;min-height:43px;padding:0 13px;border:0;border-bottom:2px solid transparent;color:#8793a5;background:transparent;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;transition:color .16s,border-color .16s; }
.ss-tab:hover { color:#dce3f1; }
.ss-tab.is-active { color:#e3e8fb;border-bottom-color:#aabaff; }
.ss-tab-panel { display:none;animation:ss-fade-in .18s ease; }
.ss-tab-panel.is-active { display:block; }
@keyframes ss-fade-in { from{opacity:.6;transform:translateY(3px)}to{opacity:1;transform:none} }
.ss-metric-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:29px; }
.ss-metric { min-width:0;padding:16px 15px 14px;border-radius:14px; }
.ss-metric span,.ss-metric small { display:block;color:#8f9bad;font-size:10px;line-height:1.45; }
.ss-metric strong { display:block;margin:9px 0 6px;color:#edf1fb;font:600 clamp(23px,3vw,31px) var(--mono);letter-spacing:-.06em;overflow-wrap:anywhere; }
.ss-metric small { color:#697688;font-size:9px; }
.ss-section-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:25px 0 13px; }
.ss-section-heading h2,.ss-card-heading h2,.ss-card-heading h3 { margin:0;color:#e7ebf5;font-size:16px;font-weight:750;letter-spacing:-.035em; }
.ss-section-heading p,.ss-card-heading p { margin:5px 0 0;color:#8290a3;font-size:11px;line-height:1.5; }
.ss-text-button { flex:0 0 auto;padding:7px 0;border:0;color:#b4c1ff;background:transparent;font-size:10px;font-weight:700;cursor:pointer; }
.ss-text-button:hover { color:#e3e8ff; }
.ss-count { color:#8190a4;font:10px var(--mono);white-space:nowrap; }
.ss-service-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:24px; }
.ss-service-grid-large { grid-template-columns:repeat(2,minmax(0,1fr));margin-top:13px; }
.ss-service-card { position:relative;display:flex;flex-direction:column;gap:11px;min-width:0;padding:14px 15px;border-radius:13px;color:inherit;text-align:left;transition:transform .16s,border-color .16s,background .16s; }
.ss-service-card:hover { transform:translateY(-2px);border-color:rgba(173,190,255,.22);background:linear-gradient(145deg,rgba(38,48,68,.82),rgba(19,25,36,.76)); }
.ss-service-top { display:flex;align-items:center;justify-content:space-between;gap:9px; }
.ss-service-name-wrap { display:flex;align-items:center;gap:9px;min-width:0; }
.ss-service-symbol { display:grid;place-items:center;width:29px;height:29px;flex:0 0 auto;border:1px solid rgba(210,222,255,.11);border-radius:9px;color:#c7d1ff;background:rgba(145,164,255,.08);font:700 9px var(--mono); }
.ss-service-name { overflow:hidden;color:#dce3f1;font-size:12px;font-weight:800;text-overflow:ellipsis;white-space:nowrap; }
.ss-status { display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:4px 7px;border:1px solid transparent;border-radius:7px;font-size:9px;font-weight:750;white-space:nowrap; }
.ss-status::before { content:"";width:6px;height:6px;border-radius:50%;background:currentColor; }
.ss-status.operational { color:#8bd8b1;border-color:rgba(120,208,164,.16);background:rgba(89,177,130,.08); }
.ss-status.degraded { color:#e4be7c;border-color:rgba(228,190,124,.16);background:rgba(200,156,75,.08); }
.ss-status.outage { color:#f08b91;border-color:rgba(240,139,145,.18);background:rgba(194,75,86,.09); }
.ss-status.maintenance { color:#c1adff;border-color:rgba(193,173,255,.18);background:rgba(140,112,210,.09); }
.ss-status.unknown { color:#9aa5b6;border-color:rgba(180,190,210,.12);background:rgba(180,190,210,.05); }
.ss-service-description { min-height:29px;color:#8995a6;font-size:10px;line-height:1.5; }
.ss-service-metrics { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding-top:10px;border-top:1px solid rgba(220,230,255,.065); }
.ss-service-metrics span { display:block;min-width:0;color:#728095;font-size:9px; }
.ss-service-metrics strong { display:block;margin-top:4px;color:#ccd5e4;font:600 11px var(--mono);overflow-wrap:anywhere; }
.ss-service-meta { display:flex;align-items:center;justify-content:space-between;gap:8px;color:#718096;font-size:9px; }
.ss-service-incidents { color:#e7b97a; }
.ss-card { min-width:0;padding:17px;border-radius:15px; }
.ss-chart-card { margin:20px 0 25px; }
.ss-card-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:13px; }
.ss-card-heading>div:first-child { min-width:0; }
.ss-card-heading h2 { font-size:15px; }
.ss-card-heading h3 { font-size:14px; }
.ss-chart-controls { display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px; }
.ss-chart-controls select,.ss-filters select,.ss-section-heading>select { max-width:190px;min-width:100px;height:34px;padding:0 10px;border:1px solid rgba(220,230,255,.1);border-radius:9px;outline:none;color:#cbd4e3;background:#151c28;font-size:10px; }
.ss-chart-controls select:focus,.ss-filters select:focus,.ss-input:focus { border-color:rgba(169,184,255,.4);box-shadow:0 0 0 3px rgba(145,164,255,.08); }
.ss-chart-controls option,.ss-filters option,.ss-input option { color:#edf0f7;background:#171d29; }
.ss-range-group { display:inline-flex;gap:2px;padding:3px;border:1px solid rgba(220,230,255,.085);border-radius:9px;background:rgba(0,0,0,.12); }
.ss-range-group button { min-height:26px;padding:0 9px;border:0;border-radius:6px;color:#8290a3;background:transparent;font:10px var(--mono);cursor:pointer; }
.ss-range-group button:hover { color:#e4eaff; }
.ss-range-group button.is-active { color:#e4eaff;background:rgba(151,169,255,.15); }
.ss-range-group-wide { display:flex;width:fit-content;margin:7px 0 16px; }
.ss-range-group-wide button { min-height:30px;padding:0 14px; }
.ss-chart-legend { display:flex;flex-wrap:wrap;gap:16px;margin:5px 0 4px;color:#9aa6b8;font-size:9px; }
.ss-chart-legend span { display:inline-flex;align-items:center;gap:7px; }
.ss-chart-legend i { display:inline-block;width:17px;height:3px;border-radius:2px; }
.ss-legend-latency { background:#aabaff; }
.ss-legend-uptime { background:#7ddbb0; }
.ss-chart { min-height:245px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden; }
.ss-chart-tall { min-height:355px; }
.ss-chart svg { display:block;width:100%;height:auto;overflow:visible; }
.ss-empty-state { display:grid;min-height:190px;place-items:center;padding:23px;color:#788699;font-size:11px;line-height:1.6;text-align:center; }
.ss-chart-foot { margin-top:7px;color:#718095;font-size:9px;line-height:1.6; }
.ss-history-summary { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:17px 0 10px; }
.ss-history-summary>div { padding:11px;border:1px solid rgba(220,230,255,.07);border-radius:10px;background:rgba(0,0,0,.1); }
.ss-history-summary span { display:block;color:#788699;font-size:9px; }
.ss-history-summary strong { display:block;margin-top:5px;color:#dce3f1;font:600 14px var(--mono); }
.ss-filters { display:flex;gap:9px;align-items:center;margin:15px 0 11px; }
.ss-search { display:flex;align-items:center;gap:8px;flex:1;min-width:140px;height:36px;padding:0 10px;border:1px solid rgba(220,230,255,.1);border-radius:9px;color:#8190a4;background:rgba(17,23,33,.72); }
.ss-search svg { width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round; }
.ss-search input { width:100%;min-width:0;border:0;outline:0;color:#e1e7f2;background:transparent;font-size:10px; }
.ss-search input::placeholder { color:#687688; }
.ss-filters select { max-width:170px;min-width:130px; }
.ss-incident-list { display:grid;gap:9px;margin:10px 0 24px; }
.ss-incident-row { display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:start;gap:11px;padding:13px 14px;border-radius:12px; }
.ss-incident-mark { width:8px;height:8px;margin-top:4px;border-radius:50%;background:#e7b96f;box-shadow:0 0 10px rgba(231,185,111,.25); }
.ss-incident-mark.major { background:#ed818b;box-shadow:0 0 10px rgba(237,129,139,.25); }
.ss-incident-mark.resolved { background:#7fd6aa;box-shadow:0 0 10px rgba(127,214,170,.2); }
.ss-incident-main { min-width:0; }
.ss-incident-main strong { display:block;color:#e1e7f2;font-size:11px; }
.ss-incident-main p { margin:4px 0 0;color:#8793a5;font-size:10px;line-height:1.5; }
.ss-incident-times { display:flex;flex-direction:column;align-items:flex-end;gap:5px;color:#8491a4;font:9px var(--mono);text-align:right; }
.ss-incident-duration { color:#b9c4d5; }
.ss-incident-summary { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:16px 0; }
.ss-incident-summary>div { padding:12px;border:1px solid rgba(220,230,255,.08);border-radius:11px;background:rgba(18,24,35,.55); }
.ss-incident-summary span { display:block;color:#7f8b9d;font-size:9px; }
.ss-incident-summary strong { display:block;margin-top:6px;color:#e2e8f3;font:600 18px var(--mono); }
.ss-info-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0; }
.ss-info-grid h3,.ss-method-card h3,.ss-setup-card h3 { margin:10px 0 7px;color:#e0e6f2;font-size:12px; }
.ss-info-icon { display:grid;place-items:center;width:37px;height:32px;border:1px solid rgba(174,190,255,.15);border-radius:9px;color:#c5ceff;background:rgba(150,168,255,.08);font:700 10px var(--mono); }
.ss-info-grid p,.ss-method-card p,.ss-setup-card p { margin:0;color:#909bad;font-size:10px;line-height:1.7; }
.ss-method-card { margin-bottom:24px; }
.ss-method-card h3:not(:first-child) { margin-top:19px; }
.ss-settings-card { margin:15px 0; }
.ss-field-label { display:block;margin-bottom:8px;color:#d7deec;font-size:11px;font-weight:750; }
.ss-input { display:block;width:100%;height:43px;padding:0 12px;border:1px solid rgba(220,230,255,.11);border-radius:10px;outline:none;color:#eef1f7;background:rgba(8,12,19,.4);font-size:11px; }
.ss-field-help { margin:8px 0 13px;color:#8190a4;font-size:9px;line-height:1.6; }
.ss-settings-actions { display:flex;flex-wrap:wrap;gap:8px; }
.ss-primary-button,.ss-secondary-button { min-height:36px;padding:0 13px;border:1px solid rgba(174,190,255,.2);border-radius:9px;color:#e3e9fa;background:rgba(143,162,255,.14);font-size:10px;font-weight:750;cursor:pointer; }
.ss-primary-button:hover { background:rgba(143,162,255,.22); }
.ss-secondary-button { border-color:rgba(220,230,255,.1);color:#aeb9ca;background:rgba(255,255,255,.04); }
.ss-secondary-button:hover { background:rgba(255,255,255,.075); }
.ss-settings-message { min-height:16px;margin:10px 0 0;color:#8bd8b1;font-size:10px; }
.ss-settings-message.is-error { color:#ef969b; }
.ss-settings-divider { height:1px;margin:14px 0;border-top:1px solid rgba(220,230,255,.07); }
.ss-config-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }
.ss-config-grid span { display:block;color:#7d899a;font-size:9px; }
.ss-config-grid strong { display:block;margin-top:5px;color:#d4dceb;font:600 11px var(--mono); }
.ss-setup-card { margin:13px 0 26px; }
.ss-setup-card ol { display:grid;gap:7px;margin:13px 0;padding-left:18px;color:#a9b4c6;font-size:10px;line-height:1.55; }
.ss-setup-card a { display:inline-block;margin-top:5px;color:#b8c5ff;font-size:10px;font-weight:700; }
.ss-setup-card a:hover { color:#eef1ff; }
.ss-no-results { grid-column:1/-1; }
.ss-page button:focus-visible,.ss-page input:focus-visible,.ss-page select:focus-visible,.ss-page a:focus-visible { outline:2px solid rgba(169,184,255,.7);outline-offset:3px; }
@media (max-width:850px) {
 .ss-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ss-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ss-card-heading { flex-direction:column; }
 .ss-chart-controls { justify-content:flex-start; }
 .ss-config-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
 .ss-page .intro { margin-bottom:22px; }
 .ss-panel { padding:13px 12px 0; }
 .ss-topline { align-items:flex-start; }
 .ss-updated { max-width:120px;overflow:hidden;text-overflow:ellipsis; }
 .ss-tab { padding:0 10px;font-size:10px; }
 .ss-metric { padding:13px 12px; }
 .ss-metric strong { font-size:25px; }
 .ss-service-grid,.ss-service-grid-large,.ss-info-grid { grid-template-columns:1fr; }
 .ss-section-heading { align-items:flex-start; }
 .ss-section-heading h2 { font-size:14px; }
 .ss-filters { flex-wrap:wrap; }
 .ss-search { flex-basis:100%; }
 .ss-filters select { flex:1;min-width:0;max-width:none; }
 .ss-chart-card { padding:13px 10px; }
 .ss-chart { min-height:195px; }
 .ss-chart-tall { min-height:260px; }
 .ss-range-group-wide { display:flex;width:100%; }
 .ss-range-group-wide button { flex:1;padding:0 5px;font-size:9px; }
 .ss-history-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ss-incident-row { grid-template-columns:9px minmax(0,1fr); }
 .ss-incident-times { grid-column:2;align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap; }
 .ss-incident-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .ss-incident-summary strong { font-size:15px; }
 .ss-config-grid { gap:12px 8px; }
}
@media (prefers-reduced-motion:reduce) {
 .ss-tab-panel { animation:none; }
 .ss-service-card,.ss-tab,.ss-icon-button { transition:none; }
}

.ss-service-official { display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:9px;border-top:1px solid rgba(220,230,255,.055);color:#8794a8;font-size:9px; }
.ss-service-official strong { color:#bac6d8;font:600 9px var(--mono);text-transform:uppercase;letter-spacing:.025em; }
.ss-service-official.is-muted { opacity:.55; }

.ss-service-actions { display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:10px;border-top:1px solid rgba(220,230,255,.06); }
.ss-service-open { padding:0;border:0;color:#c0cbff;background:transparent;font-size:9px;font-weight:750;cursor:pointer; }
.ss-service-open:hover { color:#fff; }
.ss-service-outlink { color:#8192aa;font-size:9px;font-weight:650; }
.ss-service-outlink:hover { color:#d6dfff; }
.ss-method-card a { color:#b8c5ff;font-weight:700;text-decoration:none; }
.ss-method-card a:hover { color:#fff;text-decoration:underline; }