/* ── Reset & base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #0f1123;
    color: #c9d1d9;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
}

/* ── Header ─────────────────────────────────────────────────────── */
.header {
    text-align: center;
    margin-bottom: 30px;
}
.header h1 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #e6edf3;
    margin-bottom: 6px;
}
.header .meta {
    font-size: .8rem;
    color: #6e7681;
}
#last-checked { font-weight: 500; }
#countdown { color: #6e7681; }

/* ── Tree layout ────────────────────────────────────────────────── */
.tree ul {
    display: flex;
    justify-content: center;
    padding-top: 28px;
    position: relative;
    list-style: none;
}
.tree li {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0 10px;
}

/* Vertical line from horizontal bar down to node */
.tree li::before {
    content: '';
    position: absolute;
    top: 0;
    width: 4px;
    height: 28px;
    background: #30363d;
}

/* Horizontal bar spanning siblings */
.tree ul::before {
    content: '';
    position: absolute;
    top: 0;
    height: 4px;
    background: #30363d;
    left: 50%;
    right: 50%;
}
/* Expand horizontal bar to cover all children */
.tree li:first-child ~ li ~ li {} /* just a specificity anchor */
.tree ul > li:first-child::before { border-radius: 2px 0 0 0; }
.tree ul > li:last-child::before  { border-radius: 0 2px 0 0; }

/* Calculate horizontal connector from first child center to last child center */
.tree ul {
    --connector: #30363d;
}
.tree li:first-child::after,
.tree li:last-child::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 4px;
    background: #30363d;
}
.tree li:first-child::after { right: 0; left: 50%; }
.tree li:last-child::after  { left: 0; right: 50%; }
.tree li:only-child::after  { display: none; }
/* Middle children get full width connector */
.tree li:not(:first-child):not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #30363d;
}

/* Root node: no top connector */
.tree > ul > li::before,
.tree > ul > li::after,
.tree > ul::before {
    display: none;
}

/* Vertical stem from parent node down to horizontal bar */
.tree li > ul {
    margin-top: 14px;
}
.tree ul::after {
    content: '';
    position: absolute;
    top: -14px;
    left: 50%;
    margin-left: -2px;
    width: 4px;
    height: 14px;
    background: #30363d;
}
.tree > ul::after {
    display: none;
}

/* ── Node card ──────────────────────────────────────────────────── */
.node {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 10px;
    padding: 12px 16px;
    min-width: 140px;
    text-align: center;
    position: relative;
}
.node-icon {
    font-size: 1.4rem;
    margin-bottom: 4px;
    opacity: .7;
}
.node-name {
    font-weight: 600;
    font-size: .95rem;
    color: #e6edf3;
    margin-bottom: 6px;
}

/* Type-specific accents */
.node-cloud  { border-color: #1f6feb44; background: linear-gradient(135deg, #161b22, #0d1b30); }
.node-router { border-color: #f0883e44; }
.node-switch { border-color: #a371f744; }
.node-server { border-color: #388bfd44; }
.node-vm     { border-color: #3fb95044; }

/* ── Status items ───────────────────────────────────────────────── */
.services-list {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.service-separator {
    font-size: .65rem;
    color: #6e7681;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 4px 8px 1px;
    border-top: 1px solid #30363d;
    margin-top: 2px;
}
.status-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    padding: 3px 8px;
    border-radius: 6px;
    background: #0d1117;
    white-space: nowrap;
}
.status-label {
    color: #8b949e;
}

/* ── Dots ───────────────────────────────────────────────────────── */
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background .3s;
}
.dot-pending { background: #484f58; }
.dot-online  { background: #3fb950; box-shadow: 0 0 6px #3fb95088; }
.dot-offline { background: #f85149; box-shadow: 0 0 6px #f8514988; }

/* ── Refresh button ─────────────────────────────────────────────── */
.refresh-btn {
    background: #21262d;
    border: 1px solid #30363d;
    color: #c9d1d9;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: .8rem;
    margin-top: 8px;
    transition: background .2s;
}
.refresh-btn:hover { background: #30363d; }
.refresh-btn:disabled { opacity: .5; cursor: default; }

/* ── Tooltip for response time ──────────────────────────────────── */
.status-item[data-time]::after {
    content: attr(data-time) 'ms';
    font-size: .7rem;
    color: #6e7681;
    margin-left: auto;
    padding-left: 6px;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .tree ul { flex-wrap: wrap; gap: 10px; }
    .tree li::before,
    .tree li::after,
    .tree ul::before { display: none !important; }
    .tree ul { padding-top: 14px; }
    .node { min-width: 120px; }
}