:root {
    --bg:#0f0f17;
    --panel:#181825;
    --panel2:#1e1e2e;
    --text:#cdd6f4;
    --muted:#a6adc8;
    --stroke:rgba(205,214,244,.14);
    --accent:#cba6f7;
    --accent2:#f5c2e7;
    --warm:#fab387;
    --green:#a6e3a1;
    --red:#f38ba8;
    --yellow:#f9e2af;
    --blue:#89b4fa;
    --shadow:0 24px 60px rgba(0,0,0,.42);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }

/* Dashboard-native scrollbars ------------------------------------------------
   Apply consistently to the browser viewport and every internal scroll area.
   Firefox uses scrollbar-*; Chromium/WebKit uses ::-webkit-scrollbar.
*/
html,
body,
* {
    scrollbar-width:thin;
    scrollbar-color:rgba(203,166,247,.58) rgba(17,17,27,.72);
}

*::-webkit-scrollbar {
    width:10px;
    height:10px;
}

*::-webkit-scrollbar-track {
    background:rgba(17,17,27,.72);
    border-left:1px solid rgba(205,214,244,.055);
}

*::-webkit-scrollbar-corner {
    background:rgba(17,17,27,.82);
}

*::-webkit-scrollbar-thumb {
    min-height:34px;
    border:2px solid rgba(17,17,27,.92);
    border-radius:999px;
    background:
        linear-gradient(
            180deg,
            rgba(203,166,247,.78),
            rgba(137,180,250,.54)
        );
    background-clip:padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            rgba(203,166,247,.96),
            rgba(137,180,250,.76)
        );
    background-clip:padding-box;
}

*::-webkit-scrollbar-thumb:active {
    background:
        linear-gradient(
            180deg,
            rgba(245,194,231,.98),
            rgba(203,166,247,.86)
        );
    background-clip:padding-box;
}

body {
    margin:0;
    min-height:100vh;
    color:var(--text);
    font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(900px 520px at 12% -8%, rgba(203,166,247,.18), transparent 58%),
        radial-gradient(760px 520px at 92% 8%, rgba(250,179,135,.10), transparent 55%),
        radial-gradient(900px 600px at 50% 108%, rgba(166,227,161,.06), transparent 60%),
        linear-gradient(180deg, #11111b 0%, #0f0f17 45%, #0a0a11 100%);
}
body::before {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(205,214,244,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(205,214,244,.022) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 82%);
}

.navbar {
    position:sticky;
    top:0;
    z-index:100;
    backdrop-filter:blur(22px);
    background:rgba(17,17,27,.78);
    border-bottom:1px solid rgba(205,214,244,.08);
}
.navinner {
    width:100%;
    max-width:none;
    margin:0;
    padding:15px clamp(14px, 2vw, 48px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.brand {
    color:#fff;
    text-decoration:none;
    font-weight:950;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:13px;
}
.brand span { color:var(--accent); }
.navmeta, .backLink {
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:8px;
}
.backLink:hover { color:#fff; }
.liveDot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 14px rgba(166,227,161,.55);
}
.navmetaError .liveDot { background:var(--red); box-shadow:0 0 14px rgba(243,139,168,.55); }

.wrap {
    position:relative;
    width:min(1240px, 100%);
    margin:0 auto;
    padding:38px 18px 70px;
}
.dashboardWrap {
    width:100%;
    max-width:none;
    margin:0;
    padding:clamp(24px, 2vw, 42px) clamp(14px, 2vw, 48px) 70px;
}
.dashboardLayout {
    display:grid;
    grid-template-columns:minmax(0, 1fr) clamp(360px, 22vw, 480px);
    gap:clamp(18px, 1.5vw, 32px);
    align-items:start;
}
.dashboardMain { min-width:0; }
.dashboardHero { margin-top:10px; }
.statusSidebar {
    position:sticky;
    top:82px;
    min-width:0;
    max-height:calc(100dvh - 96px);
}
.statusPanel {
    border:1px solid var(--stroke);
    background:
        linear-gradient(180deg, rgba(49,50,68,.50), rgba(24,24,37,.84)),
        linear-gradient(135deg, rgba(203,166,247,.04), rgba(250,179,135,.025));
    box-shadow:var(--shadow);
    padding:16px;
    max-height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
}
.statusPanelHeader {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}
.statusPanelHeader h2 { font-size:22px; }
.statusCount {
    display:grid;
    place-items:center;
    min-width:34px;
    height:34px;
    padding:0 9px;
    border:1px solid rgba(203,166,247,.26);
    background:rgba(17,17,27,.58);
    color:var(--accent);
    font-size:12px;
    font-weight:950;
}
.sidebarSearch {
    width:100%;
    margin-top:16px;
}
.sidebarSearch input { padding:10px 11px; font-size:12px; }
.sidebarNote {
    margin:9px 0 12px;
    color:var(--muted);
    font-size:8px;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.dashboardPanel { margin-top:34px; }
.hero {
    margin:20px 0 26px;
    padding-left:19px;
    border-left:3px solid rgba(203,166,247,.78);
}
.eyebrow {
    color:var(--warm);
    font-size:11px;
    font-weight:950;
    letter-spacing:.18em;
    text-transform:uppercase;
    margin-bottom:9px;
}
h1, h2, h3 { color:#fff; }
h1 {
    margin:0;
    font-size:clamp(38px, 6vw, 66px);
    letter-spacing:-.055em;
    line-height:.95;
}
h2 { margin:0; letter-spacing:-.03em; }
.sub {
    margin:14px 0 0;
    color:var(--muted);
    max-width:1000px;
    line-height:1.55;
}
.summaryRow { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.summaryPill {
    display:inline-flex;
    align-items:center;
    padding:7px 10px;
    border:1px solid var(--stroke);
    background:rgba(17,17,27,.56);
    color:var(--muted);
    font-size:12px;
    font-weight:850;
}
.summaryHealthy { color:var(--green); border-color:rgba(166,227,161,.25); }
.summaryDegraded { color:var(--yellow); border-color:rgba(249,226,175,.25); }
.summaryOffline { color:var(--red); border-color:rgba(243,139,168,.25); }
.summaryUnknown { color:var(--blue); border-color:rgba(137,180,250,.25); }
.summaryRetention { color:var(--accent); }

.toolbar {
    margin:26px 0 16px;
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:18px;
}
.searchBox { display:grid; gap:7px; width:min(440px, 100%); }
.searchBox span, .toolbarNote {
    color:var(--muted);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.11em;
}
.searchBox input, select {
    width:100%;
    border:1px solid var(--stroke);
    background:rgba(24,24,37,.82);
    color:#fff;
    outline:none;
    padding:12px 13px;
    font:inherit;
    box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
.searchBox input:focus, select:focus { border-color:rgba(203,166,247,.7); box-shadow:0 0 0 3px rgba(203,166,247,.08); }

.serviceGrid {
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
}
.serviceCard, .loadingCard, .detailPanel, .highlightCard, .sectionBlock {
    border:1px solid var(--stroke);
    background:
        linear-gradient(180deg, rgba(49,50,68,.55), rgba(24,24,37,.80)),
        linear-gradient(135deg, rgba(203,166,247,.04), rgba(250,179,135,.025));
    box-shadow:var(--shadow);
}
.serviceCard {
    color:var(--text);
    text-decoration:none;
    padding:11px 11px 9px 13px;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:7px;
    position:relative;
    overflow:hidden;
    box-shadow:none;
    transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.serviceCard::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:2px;
    background:var(--blue);
}
.healthCard-healthy::before { background:var(--green); }
.healthCard-degraded::before { background:var(--yellow); }
.healthCard-offline::before { background:var(--red); }
.serviceCard:hover {
    transform:translateX(-2px);
    border-color:rgba(203,166,247,.48);
    background:
        linear-gradient(180deg, rgba(55,56,76,.62), rgba(28,28,43,.88)),
        linear-gradient(135deg, rgba(203,166,247,.06), rgba(250,179,135,.03));
}
.serviceTop { display:flex; justify-content:space-between; gap:9px; align-items:center; }
.serviceIdentity { display:flex; min-width:0; align-items:center; gap:9px; }
.serviceText { min-width:0; }
.serviceGlyph {
    flex:0 0 auto;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid var(--stroke);
    background:rgba(17,17,27,.64);
    color:var(--accent);
    font-size:14px;
    font-weight:950;
}
.serviceNameRow { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
.serviceNameRow h2 {
    font-size:14px;
    line-height:1.2;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.envTag {
    padding:3px 5px;
    border:1px solid rgba(137,180,250,.22);
    color:var(--blue);
    font-size:9px;
    font-weight:950;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.serviceId {
    color:var(--muted);
    font-size:9px;
    margin-top:3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.healthBadge {
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    padding:5px 6px;
    border:1px solid var(--stroke);
    background:rgba(17,17,27,.62);
    color:var(--blue);
    font-size:8px;
    font-weight:950;
    letter-spacing:.09em;
    text-transform:uppercase;
}
.healthDot { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 12px currentColor; }
.health-healthy { color:var(--green); border-color:rgba(166,227,161,.24); }
.health-degraded { color:var(--yellow); border-color:rgba(249,226,175,.24); }
.health-offline { color:var(--red); border-color:rgba(243,139,168,.24); }
.health-unknown { color:var(--blue); border-color:rgba(137,180,250,.24); }
.serviceReason {
    color:var(--muted);
    font-size:10px;
    line-height:1.35;
    padding-left:43px;
}
.detailHealthReason {
    margin-top:10px;
    max-width:760px;
    padding:9px 11px;
    border-left:3px solid var(--yellow);
    background:rgba(249,226,175,.07);
    color:var(--text);
    font-size:12px;
    line-height:1.45;
}
.detailHealthReason-degraded {
    border-left-color:var(--yellow);
    background:rgba(249,226,175,.07);
}
.detailHealthReason-offline {
    border-left-color:var(--red);
    background:rgba(243,139,168,.07);
}
.metricMiniGrid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:9px; margin-top:auto; }
.metricMini {
    min-width:0;
    padding:10px 11px;
    border:1px solid rgba(205,214,244,.09);
    background:rgba(17,17,27,.40);
}
.metricMini span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.metricMini strong { display:block; color:#fff; margin-top:5px; font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.metricMiniEmpty { grid-column:1 / -1; }
.serviceFooter {
    border-top:1px solid rgba(205,214,244,.07);
    padding-top:7px;
    display:flex;
    justify-content:space-between;
    gap:8px;
    color:var(--muted);
    font-size:8px;
}
.loadingCard { grid-column:1/-1; padding:18px 12px; color:var(--muted); text-align:center; font-size:11px; }
.errorCard { color:var(--red); }

.sectionBlock { margin-top:34px; padding:22px; }
.dashboardMain .sectionBlock { width:100%; }
.sectionHeading { display:flex; justify-content:space-between; margin-bottom:16px; }
.sectionHeading h2 { font-size:24px; }
.quickLinksHeading { align-items:flex-end; gap:18px; }
.quickLinksSummary { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; }
.quickSummaryOnline { color:var(--green); border-color:rgba(166,227,161,.25); }
.quickSummaryChecking { color:var(--yellow); border-color:rgba(249,226,175,.25); }
.quickSummaryOffline { color:var(--red); border-color:rgba(243,139,168,.25); }
.linkGroup + .linkGroup { margin-top:20px; }
.linkGroup h3 { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
.linkGrid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.quickLink {
    min-width:0;
    padding:13px 14px 13px 16px;
    border:1px solid var(--stroke);
    background:
        linear-gradient(180deg, rgba(49,50,68,.55), rgba(24,24,37,.80)),
        linear-gradient(135deg, rgba(203,166,247,.04), rgba(250,179,135,.025));
    color:var(--text);
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    position:relative;
    overflow:hidden;
    box-shadow:none;
    transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.quickLink::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:2px;
    background:var(--blue);
}
.quickLinkHealth-online::before { background:var(--green); }
.quickLinkHealth-offline::before { background:var(--red); }
.quickLinkHealth-checking::before { background:var(--blue); }
.quickLinkText { min-width:0; display:grid; gap:3px; }
.quickLinkText strong { color:inherit; font-size:13px; font-weight:850; }
.quickLinkText small { color:var(--muted); font-size:9px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quickLinkArrow { flex:0 0 auto; color:var(--muted); font-weight:900; }
.quickLink:hover {
    color:#fff;
    transform:translateY(-1px);
    border-color:rgba(203,166,247,.48);
    background:
        linear-gradient(180deg, rgba(55,56,76,.62), rgba(28,28,43,.88)),
        linear-gradient(135deg, rgba(203,166,247,.06), rgba(250,179,135,.03));
}
.quickLink:hover .quickLinkArrow { color:var(--accent); }

/* Detail view */
.detailWrap { width:min(1240px, 100%); }
.detailHero {
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:flex-end;
    margin:20px 0 22px;
    padding:22px 0 22px 19px;
    border-left:3px solid rgba(203,166,247,.78);
}
.detailTitleRow { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.detailTitleRow h1 { font-size:clamp(34px, 5vw, 58px); }
.detailTitleRow .healthBadge { padding:7px 9px; font-size:10px; }
.detailUpdated { text-align:right; display:grid; gap:5px; }
.detailUpdated span { color:var(--muted); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
.detailUpdated strong { color:#fff; font-size:12px; }
.highlightGrid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.highlightCard { padding:16px; }
.highlightCard span { color:var(--muted); text-transform:uppercase; letter-spacing:.09em; font-size:10px; font-weight:850; }
.highlightCard strong { display:block; color:#fff; font-size:24px; margin-top:7px; }
.detailPanel { padding:20px; margin-bottom:16px; }
.panelHeader { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.panelHeader h2 { font-size:24px; }
.graphControls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.graphControls select { width:auto; min-width:260px; padding:9px 10px; font-size:12px; }
.rangeButtons { display:flex; border:1px solid var(--stroke); }
.rangeButtons button {
    border:0;
    border-right:1px solid var(--stroke);
    background:rgba(17,17,27,.5);
    color:var(--muted);
    padding:9px 10px;
    font-weight:850;
    cursor:pointer;
}
.rangeButtons button:last-child { border-right:0; }
.rangeButtons button:hover, .rangeButtons button.active { background:rgba(203,166,247,.12); color:#fff; }
.chartShell {
    min-height:360px;
    border:1px solid rgba(205,214,244,.09);
    background:rgba(10,10,17,.42);
    position:relative;
}
#historyChart { width:100%; height:auto; display:none; overflow:visible; }
.chartEmpty { min-height:360px; display:grid; place-items:center; color:var(--muted); font-size:13px; }
.chartGridLine { stroke:rgba(205,214,244,.08); stroke-width:1; }
.chartAxisText { fill:#a6adc8; font-size:12px; font-family:ui-sans-serif, system-ui; }
.chartLine { fill:none; stroke:#cba6f7; stroke-width:3; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 6px rgba(203,166,247,.35)); }
.chartPoint { fill:#f5c2e7; stroke:#11111b; stroke-width:2; vector-effect:non-scaling-stroke; }
.chartLegend { color:var(--muted); font-size:11px; margin-top:10px; }
.detailColumns { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(340px, .85fr); gap:16px; }
.statusTree { font-size:12px; }
.treeChildren { display:grid; gap:6px; }
.treeRow { display:grid; grid-template-columns:minmax(150px, .7fr) minmax(0, 1.3fr); gap:14px; align-items:start; padding:7px 8px; border-bottom:1px solid rgba(205,214,244,.055); }
.treeKey { color:var(--muted); }
.treeValue { color:#fff; overflow-wrap:anywhere; }
.treeValue.muted { color:var(--muted); }
.treeBranch { border:1px solid rgba(205,214,244,.08); background:rgba(17,17,27,.26); }
.treeBranch > summary { cursor:pointer; color:var(--accent); padding:9px 10px; font-weight:850; }
.treeBranch > .treeChildren { padding:0 7px 7px; }
.eventList { display:grid; gap:8px; max-height:750px; overflow:auto; padding-right:3px; }
.eventItem { border:1px solid rgba(205,214,244,.09); background:rgba(17,17,27,.36); }
.eventItem summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:9px; padding:11px; }
.eventItem summary::-webkit-details-marker { display:none; }
.eventDot { width:7px; height:7px; border-radius:50%; background:var(--blue); }
.severity-warning, .severity-warn { background:var(--yellow); }
.severity-error, .severity-critical { background:var(--red); }
.severity-info { background:var(--blue); }
.eventName { color:#fff; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eventItem time { color:var(--muted); font-size:10px; }
.eventItem pre { margin:0; padding:12px; border-top:1px solid rgba(205,214,244,.07); color:var(--text); background:rgba(10,10,17,.5); overflow:auto; font-size:10px; line-height:1.45; }
.emptyState { color:var(--muted); padding:18px; border:1px solid rgba(205,214,244,.08); background:rgba(17,17,27,.3); }

@media (min-width:2200px) {
    .dashboardLayout { grid-template-columns:minmax(0, 1fr) clamp(420px, 18vw, 560px); }
    .statusPanel { padding:18px; }
    .serviceCard { padding:12px 12px 10px 14px; }
    .serviceNameRow h2 { font-size:15px; }
}
@media (max-width:1100px) {
    .dashboardLayout { grid-template-columns:1fr; }
    .statusSidebar { position:static; max-height:none !important; }
    .statusPanel {
        padding:18px;
        max-height:none !important;
        overflow:visible;
        scrollbar-gutter:auto;
    }
    .serviceGrid { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:900px) {
    .highlightGrid { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .detailColumns { grid-template-columns:1fr; }
    .linkGrid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .panelHeader { align-items:flex-start; flex-direction:column; }
    .graphControls { justify-content:flex-start; width:100%; }
}
@media (max-width:640px) {
    .wrap { padding-left:12px; padding-right:12px; }
    .dashboardWrap { padding-top:22px; }
    .navinner { padding-left:12px; padding-right:12px; gap:12px; }
    .brand { font-size:11px; }
    .navmeta { font-size:9px; gap:6px; white-space:nowrap; }
    .liveDot { width:6px; height:6px; }
    .dashboardLayout { gap:18px; }
    .dashboardHero { margin-top:4px; }
    .statusPanel { padding:12px; }
    .serviceGrid { grid-template-columns:1fr; }
    .toolbar { align-items:stretch; flex-direction:column; }
    .toolbarNote { display:none; }
    .serviceTop { align-items:flex-start; }
    .serviceIdentity { align-items:flex-start; }
    .serviceNameRow { display:block; }
    .envTag { display:inline-block; margin-top:5px; }
    .metricMiniGrid, .highlightGrid { grid-template-columns:1fr 1fr; }
    .serviceFooter { flex-direction:column; }
    .linkGrid { grid-template-columns:1fr; }
    .detailHero { align-items:flex-start; flex-direction:column; }
    .detailUpdated { text-align:left; }
    .graphControls { display:grid; }
    .graphControls select { width:100%; min-width:0; }
    .rangeButtons { overflow-x:auto; }
    .rangeButtons button { flex:1 0 auto; }
    .treeRow { grid-template-columns:1fr; gap:4px; }
    .eventItem summary { grid-template-columns:auto minmax(0,1fr); }
    .eventItem time { grid-column:2; }
}

/* Quick-link background health checks */
.quickLinkRight {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
}
.linkHealth {
    white-space:nowrap;
}
.linkHealth.linkHealth-checking { color:var(--blue); border-color:rgba(137,180,250,.24); }

/* Explicit endpoint monitors are health-checked but are intentionally not links. */
.endpointMonitorSection {
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid rgba(205,214,244,.08);
}
.sidebarSubheading {
    margin:0 0 8px;
    color:var(--muted);
    font-size:9px;
    font-weight:950;
    letter-spacing:.11em;
    text-transform:uppercase;
}
.endpointMonitorCard {
    cursor:default;
}
.endpointMonitorCard:hover {
    transform:none;
}

/* Desktop service selection / overview graph */
.overviewGraphPanel {
    margin-top:34px;
    margin-bottom:0;
}
.overviewGraphMeta {
    margin-top:5px;
    color:var(--muted);
    font-size:10px;
}
.overviewGraphFooter {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:10px;
}
.overviewGraphFooter .chartLegend { margin-top:0; }
.seeAllMetricsButton {
    flex:0 0 auto;
    padding:8px 11px;
    border:1px solid rgba(203,166,247,.28);
    background:rgba(17,17,27,.58);
    color:var(--accent);
    text-decoration:none;
    font-size:10px;
    font-weight:900;
    letter-spacing:.04em;
    transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.seeAllMetricsButton:hover {
    color:#fff;
    border-color:rgba(203,166,247,.62);
    background:rgba(203,166,247,.12);
}
.serviceCard.is-selected {
    border-color:rgba(203,166,247,.72);
    background:
        linear-gradient(180deg, rgba(64,58,86,.72), rgba(30,29,47,.92)),
        linear-gradient(135deg, rgba(203,166,247,.10), rgba(250,179,135,.035));
    box-shadow:0 0 0 1px rgba(203,166,247,.10) inset, 0 0 20px rgba(203,166,247,.08);
    transform:translateX(-2px);
}
.serviceCard.is-selected::after {
    content:"";
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:2px;
    background:var(--accent);
}
#overviewHistoryChart { width:100%; height:auto; display:none; overflow:visible; }

@media (max-width:1100px) {
    .overviewGraphPanel { display:none !important; }
}
@media (max-width:640px) {
    .overviewGraphFooter { align-items:stretch; flex-direction:column; }
    .seeAllMetricsButton { text-align:center; }
}

/* Multi-service comparison on the desktop overview graph. */
.overviewGraphFooter .chartLegend {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 14px;
}
.overviewLegendMetric {
    color:var(--muted);
}
.overviewLegendItem {
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--text);
    white-space:nowrap;
}
.overviewLegendSwatch {
    width:18px;
    height:3px;
    border-radius:999px;
    background:var(--accent);
    box-shadow:0 0 8px currentColor;
}
.chartLine.chartSeries0 { stroke:var(--accent); }
.chartLine.chartSeries1 { stroke:var(--blue); }
.chartLine.chartSeries2 { stroke:var(--green); }
.chartLine.chartSeries3 { stroke:var(--warm); }
.chartLine.chartSeries4 { stroke:var(--yellow); }
.chartLine.chartSeries5 { stroke:var(--red); }
.chartPoint.chartSeries0 { fill:var(--accent2); }
.chartPoint.chartSeries1 { fill:var(--blue); }
.chartPoint.chartSeries2 { fill:var(--green); }
.chartPoint.chartSeries3 { fill:var(--warm); }
.chartPoint.chartSeries4 { fill:var(--yellow); }
.chartPoint.chartSeries5 { fill:var(--red); }
.overviewLegendSwatch.chartSeries0 { background:var(--accent); color:var(--accent); }
.overviewLegendSwatch.chartSeries1 { background:var(--blue); color:var(--blue); }
.overviewLegendSwatch.chartSeries2 { background:var(--green); color:var(--green); }
.overviewLegendSwatch.chartSeries3 { background:var(--warm); color:var(--warm); }
.overviewLegendSwatch.chartSeries4 { background:var(--yellow); color:var(--yellow); }
.overviewLegendSwatch.chartSeries5 { background:var(--red); color:var(--red); }

@media (min-width:1101px) {
    .serviceCard.is-incompatible {
        opacity:.48;
        filter:saturate(.62);
        cursor:not-allowed;
        border-color:rgba(205,214,244,.08);
    }
    .serviceCard.is-incompatible:hover {
        transform:none;
        border-color:rgba(205,214,244,.08);
        background:
            linear-gradient(180deg, rgba(49,50,68,.55), rgba(24,24,37,.80)),
            linear-gradient(135deg, rgba(203,166,247,.04), rgba(250,179,135,.025));
    }
}

@media (max-width: 760px) {
    .quickLinksHeading { align-items:flex-start; flex-direction:column; }
    .quickLinksSummary { justify-content:flex-start; }
}


/* Graph sample density + CloudWatch-style inspection */
.chartSamplePoint {
    opacity:.72;
    stroke-width:1;
}
.chartLatestPoint {
    opacity:1;
}
.chartHoverOverlay {
    fill:transparent;
    pointer-events:all;
    cursor:crosshair;
}
.chartHoverLayer,
.chartHoverLayer * {
    pointer-events:none;
}
.chartHoverLine {
    stroke:rgba(205,214,244,.52);
    stroke-width:1;
    stroke-dasharray:4 4;
    vector-effect:non-scaling-stroke;
}
.chartHoverPoint {
    fill:#fff;
    stroke:var(--accent);
    stroke-width:2.5;
    vector-effect:non-scaling-stroke;
}
.chartHoverPoint.chartSeries0,
.chartTooltipSeriesDot.chartSeries0 { stroke:var(--accent); fill:var(--accent); }
.chartHoverPoint.chartSeries1,
.chartTooltipSeriesDot.chartSeries1 { stroke:var(--blue); fill:var(--blue); }
.chartHoverPoint.chartSeries2,
.chartTooltipSeriesDot.chartSeries2 { stroke:var(--green); fill:var(--green); }
.chartHoverPoint.chartSeries3,
.chartTooltipSeriesDot.chartSeries3 { stroke:var(--warm); fill:var(--warm); }
.chartHoverPoint.chartSeries4,
.chartTooltipSeriesDot.chartSeries4 { stroke:var(--yellow); fill:var(--yellow); }
.chartHoverPoint.chartSeries5,
.chartTooltipSeriesDot.chartSeries5 { stroke:var(--red); fill:var(--red); }
.chartTooltipBox {
    fill:rgba(17,17,27,.97);
    stroke:rgba(205,214,244,.22);
    stroke-width:1;
    vector-effect:non-scaling-stroke;
}
.chartTooltipTime {
    fill:var(--muted);
    font-size:12px;
    font-weight:800;
}
.chartTooltipText,
.chartTooltipValue {
    fill:var(--text);
    font-size:12px;
    font-weight:800;
}
.detailTelemetryMeta {
    margin-top:7px;
    color:var(--muted);
    font-size:11px;
    font-weight:750;
}
.serviceFooterCompact {
    justify-content:flex-start;
}

/* Authentication ----------------------------------------------------------- */
.navActions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    min-width:0;
}
.navUser {
    color:#fff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.06em;
}
.logoutForm { margin:0; }
.logoutButton,
.authSubmit {
    border:1px solid rgba(203,166,247,.28);
    background:rgba(17,17,27,.58);
    color:var(--accent);
    font:inherit;
    font-size:10px;
    font-weight:900;
    letter-spacing:.05em;
    cursor:pointer;
    transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.logoutButton { padding:8px 11px; }
.logoutButton:hover,
.authSubmit:hover {
    color:#fff;
    border-color:rgba(203,166,247,.62);
    background:rgba(203,166,247,.12);
}
.authBody {
    min-height:100dvh;
    display:flex;
    flex-direction:column;
}
.authWrap {
    position:relative;
    flex:1;
    width:min(520px, 100%);
    margin:0 auto;
    padding:clamp(54px, 10vh, 120px) 18px 70px;
}
.authCard {
    border:1px solid var(--stroke);
    border-left:3px solid rgba(203,166,247,.78);
    background:
        linear-gradient(180deg, rgba(49,50,68,.58), rgba(24,24,37,.88)),
        linear-gradient(135deg, rgba(203,166,247,.06), rgba(250,179,135,.03));
    box-shadow:var(--shadow);
    padding:clamp(26px, 5vw, 42px);
}
.authCard h1 {
    font-size:clamp(38px, 9vw, 56px);
}
.authIntro {
    margin:14px 0 26px;
    color:var(--muted);
    line-height:1.65;
    font-size:13px;
}
.authForm {
    display:grid;
    gap:16px;
}
.authField {
    display:grid;
    gap:7px;
}
.authField span {
    color:var(--muted);
    font-size:10px;
    font-weight:900;
    letter-spacing:.11em;
    text-transform:uppercase;
}
.authField input {
    width:100%;
    border:1px solid var(--stroke);
    background:rgba(17,17,27,.70);
    color:#fff;
    outline:none;
    padding:13px 14px;
    font:inherit;
    box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
.authField input:focus {
    border-color:rgba(203,166,247,.7);
    box-shadow:0 0 0 3px rgba(203,166,247,.08);
}
.authSubmit {
    margin-top:4px;
    padding:13px 16px;
}
.authError {
    margin:0 0 18px;
    padding:11px 12px;
    border:1px solid rgba(243,139,168,.28);
    background:rgba(243,139,168,.08);
    color:var(--red);
    font-size:12px;
    font-weight:800;
}
.authLockDot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 14px rgba(203,166,247,.45);
}

@media (max-width: 700px) {
    .dashboardNavInner { align-items:flex-start; }
    .dashboardNavInner .navActions { flex-wrap:wrap; }
    .dashboardNavInner .navmeta { width:100%; justify-content:flex-end; }
    .navUser { display:none; }
}

/* Dashboard notification test ---------------------------------------------- */
.heroActions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}
.dashboardActionButton {
    border:1px solid rgba(203,166,247,.34);
    background:rgba(203,166,247,.09);
    color:var(--accent);
    padding:9px 13px;
    font:inherit;
    font-size:10px;
    font-weight:950;
    letter-spacing:.06em;
    text-transform:uppercase;
    cursor:pointer;
    transition:border-color .16s ease, background .16s ease, color .16s ease, opacity .16s ease;
}
.dashboardActionButton:hover:not(:disabled) {
    color:#fff;
    border-color:rgba(203,166,247,.68);
    background:rgba(203,166,247,.16);
}
.dashboardActionButton:disabled {
    cursor:not-allowed;
    opacity:.48;
}
.notificationActionStatus {
    color:var(--muted);
    font-size:11px;
    font-weight:800;
}
.notificationActionStatus[data-state="success"] { color:var(--green); }
.notificationActionStatus[data-state="error"] { color:var(--red); }
.notificationActionStatus[data-state="pending"] { color:var(--yellow); }

/* Docker log viewer --------------------------------------------------------- */
.navSectionLink {
    color:var(--muted);
    text-decoration:none;
    font-size:11px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.navSectionLink:hover, .navSectionLink.active { color:#fff; }
.logsPage {
    height:100dvh;
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}
.logsPage .navbar { flex:0 0 auto; }
.logsWrap {
    width:100%;
    max-width:none;
    margin:0;
    padding:clamp(16px,1.5vw,26px) clamp(14px,2vw,48px) clamp(14px,1.5vw,24px);
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
}
.logsLayout {
    height:100%;
    min-height:0;
    display:grid;
    grid-template-columns:clamp(260px,19vw,340px) minmax(0,1fr);
    gap:clamp(18px,1.5vw,32px);
    align-items:stretch;
}
.logSidebar { position:static; height:100%; min-height:0; min-width:0; }
.logSidebarPanel { height:100%; max-height:none; }
.logContainerList { display:grid; gap:5px; }
.logContainerButton {
    width:100%; min-width:0; border:1px solid rgba(205,214,244,.09); background:rgba(17,17,27,.40);
    color:var(--text); padding:10px 11px; display:flex; align-items:center; justify-content:space-between;
    gap:10px; cursor:pointer; text-align:left; font:inherit; transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.logContainerButton:hover { border-color:rgba(203,166,247,.40); background:rgba(203,166,247,.08); transform:translateX(2px); }
.logContainerButton.is-selected { border-color:rgba(203,166,247,.68); background:rgba(203,166,247,.13); color:#fff; }
.logContainerName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:850; }
.logContainerState { flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--muted); }
.logContainerState-running { background:var(--green); box-shadow:0 0 10px rgba(166,227,161,.45); }
.logContainerState-stopped { background:var(--red); box-shadow:0 0 10px rgba(243,139,168,.35); }
.logsMain { min-width:0; min-height:0; display:flex; flex-direction:column; }
.logsHero { flex:0 0 auto; margin:4px 0 18px; }
.logPanel {
    margin-bottom:0;
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.logToolbar { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:12px; }
.logSearchBox { flex:1 1 420px; max-width:none; }
.logToolbarRight { display:flex; align-items:end; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.logControlLabel { display:grid; gap:7px; color:var(--muted); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
.logControlLabel select { min-width:86px; padding:9px 10px; font-size:11px; }
.liveToggle { height:38px; padding:0 11px; display:flex; align-items:center; gap:7px; border:1px solid var(--stroke); background:rgba(17,17,27,.5); color:var(--muted); font-size:11px; font-weight:850; }
.liveToggle input { accent-color:var(--accent); }
.logMeta { min-height:20px; margin-bottom:8px; color:var(--muted); font-size:10px; }
.logViewer {
    flex:1 1 auto;
    min-height:0;
    height:auto;
    overflow:auto;
    overscroll-behavior:contain;
    border:1px solid rgba(205,214,244,.09); background:rgba(6,6,12,.72); font-family:"Cascadia Code","SFMono-Regular",Consolas,monospace;
}
.logLine { display:grid; grid-template-columns:165px 54px minmax(0,1fr); gap:9px; padding:3px 8px; border-bottom:1px solid rgba(205,214,244,.035); font-size:10px; line-height:1.45; }
.logLine:hover { background:rgba(203,166,247,.045); }
.logLine time { color:var(--muted); white-space:nowrap; }
.logStream { color:var(--blue); text-transform:uppercase; font-size:8px; font-weight:950; padding-top:2px; }
.logLine-stderr .logStream { color:var(--red); }
.logLine pre { margin:0; color:var(--text); font:inherit; white-space:pre-wrap; overflow-wrap:anywhere; }
.logLine-stderr pre { color:#ffd1dc; }
.logEmpty { min-height:240px; display:grid; place-items:center; color:var(--muted); padding:24px; text-align:center; }
@media (max-width:1000px) {
    .logsPage { height:auto; min-height:100vh; overflow:auto; display:block; }
    .logsWrap { overflow:visible; padding-bottom:50px; }
    .logsLayout { height:auto; grid-template-columns:1fr; }
    .logSidebar { height:auto; max-height:none; }
    .logSidebarPanel { height:auto; max-height:320px; }
    .logsMain { display:block; }
    .logPanel { display:block; overflow:visible; }
    .logToolbar { align-items:stretch; flex-direction:column; }
    .logToolbarRight { justify-content:flex-start; }
    .logViewer { height:65dvh; min-height:420px; }
}
@media (max-width:640px) {
    .logLine { grid-template-columns:1fr; gap:2px; padding:7px 8px; }
    .logStream { display:none; }
    .logToolbarRight { display:grid; grid-template-columns:1fr 1fr; width:100%; }
    .logToolbarRight .dashboardActionButton, .liveToggle { width:100%; justify-content:center; }
}

/* Docker lifecycle history -------------------------------------------------- */
.logViewTabs {
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:14px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(205,214,244,.08);
}
.logViewTab {
    border:1px solid rgba(205,214,244,.10);
    background:rgba(17,17,27,.45);
    color:var(--muted);
    padding:8px 13px;
    font:inherit;
    font-size:10px;
    font-weight:950;
    letter-spacing:.06em;
    text-transform:uppercase;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.logViewTab:hover {
    border-color:rgba(203,166,247,.40);
    color:#fff;
}
.logViewTab.is-active {
    border-color:rgba(203,166,247,.68);
    background:rgba(203,166,247,.13);
    color:#fff;
}
.lifecycleLine {
    display:grid;
    grid-template-columns:165px 110px minmax(0,1fr);
    gap:9px;
    align-items:start;
    padding:5px 8px;
    border-bottom:1px solid rgba(205,214,244,.035);
    font-size:10px;
    line-height:1.45;
    position:relative;
}
.lifecycleLine::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:2px;
    background:var(--blue);
}
.lifecycleLine:hover { background:rgba(203,166,247,.045); }
.lifecycleLine time { color:var(--muted); white-space:nowrap; }
.lifecycleAction {
    color:var(--blue);
    text-transform:uppercase;
    font-size:9px;
    font-weight:950;
    letter-spacing:.04em;
}
.lifecycleDetail { color:var(--text); overflow-wrap:anywhere; }
.lifecycleLine-good::before { background:var(--green); }
.lifecycleLine-good .lifecycleAction { color:var(--green); }
.lifecycleLine-warn::before { background:var(--yellow); }
.lifecycleLine-warn .lifecycleAction { color:var(--yellow); }
.lifecycleLine-danger::before { background:var(--red); }
.lifecycleLine-danger .lifecycleAction { color:var(--red); }
@media (max-width:640px) {
    .lifecycleLine { grid-template-columns:1fr; gap:2px; padding:8px 9px; }
}

/* TODO backlog */
.todoWrap { max-width:1200px; margin:0 auto; padding-bottom:60px; }
.todoHero { margin-bottom:24px; }
.todoPanel,.todoArchivePanel { margin-top:22px; padding:22px; }
.todoList { display:grid; gap:10px; margin-top:18px; }
.todoCard { display:grid; grid-template-columns:42px 36px minmax(0,1fr) auto; gap:12px; align-items:start; padding:15px; border:1px solid var(--border); border-radius:14px; background:rgba(17,17,27,.58); }
.todoCard.archived { grid-template-columns:42px minmax(0,1fr); opacity:.9; }
.todoPriority { font-size:18px; font-weight:950; color:var(--accent); text-align:center; padding-top:7px; }
.todoCheck,.todoMove,.todoDiscard { border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text); border-radius:10px; cursor:pointer; font-weight:900; }
.todoCheck { width:38px; height:38px; font-size:18px; }
.todoCheck:hover,.todoCheck.done { border-color:var(--accent); color:var(--accent); }
.todoBody h3 { margin:4px 0 6px; font-size:17px; }
.todoBody p { margin:0; color:var(--muted); line-height:1.55; white-space:pre-wrap; }
.todoMeta { display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.todoControls { display:flex; gap:6px; }
.todoMove,.todoDiscard { width:32px; height:32px; }
.todoEditor { margin:18px 0; padding:16px; border:1px solid var(--border); border-radius:14px; background:rgba(17,17,27,.58); }
.todoEditor input,.todoEditor textarea { width:100%; box-sizing:border-box; margin-bottom:10px; padding:11px 12px; border:1px solid var(--border); border-radius:10px; background:rgba(0,0,0,.18); color:var(--text); font:inherit; }
.todoEditor textarea { min-height:110px; resize:vertical; }
.todoEditorActions { display:flex; gap:10px; }
.todoArchivePanel > button { margin-bottom:4px; }
@media (max-width:700px) { .todoCard { grid-template-columns:38px 30px minmax(0,1fr); } .todoControls { grid-column:3; } }