* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    /* 1. Global background & fonts */
    html, 
    body {
        width: 100%;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIHNsaWNlIj48ZGVmcz48cmFkaWFsR3JhZGllbnQgaWQ9Im5nIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI1MCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiNmZmY7c3RvcC1vcGFjaXR5OjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiNmZmY7c3RvcC1vcGFjaXR5OjAuMyIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxnIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIwLjIiPjxsaW5lIHgxPSIyMDAiIHkxPSIxNTAiIHgyPSI0NTAiIHkyPSIyODAiLz48bGluZSB4MT0iNDUwIiB5MT0iMjgwIiB4Mj0iNzAwIiB5Mj0iMjAwIi8+PGxpbmUgeDE9IjcwMCIgeTE9IjIwMCIgeDI9Ijk1MCIgeTI9IjM1MCIvPjxsaW5lIHgxPSI5NTAiIHkxPSIzNTAiIHgyPSIxMjAwIiB5Mj0iMjUwIi8+PGxpbmUgeDE9IjEyMDAiIHkxPSIyNTAiIHgyPSIxNDUwIiB5Mj0iMzgwIi8+PGxpbmUgeDE9IjE0NTAiIHkxPSIzODAiIHgyPSIxNzAwIiB5Mj0iMzAwIi8+PGxpbmUgeDE9IjIwMCIgeTE9IjE1MCIgeDI9IjM1MCIgeTI9IjQ1MCIvPjxsaW5lIHgxPSIzNTAiIHkxPSI0NTAiIHgyPSI2MDAiIHkyPSI1MDAiLz48bGluZSB4MT0iNjAwIiB5MT0iNTAwIiB4Mj0iODUwIiB5Mj0iNDIwIi8+PGxpbmUgeDE9Ijg1MCIgeTE9IjQyMCIgeDI9IjExMDAiIHkyPSI1NTAiLz48bGluZSB4MT0iMTEwMCIgeTE9IjU1MCIgeDI9IjEzNTAiIHkyPSI0ODAiLz48bGluZSB4MT0iMTM1MCIgeTE9IjQ4MCIgeDI9IjE2MDAiIHkyPSI2MDAiLz48bGluZSB4MT0iMzAwIiB5MT0iNzAwIiB4Mj0iNTUwIiB5Mj0iNjUwIi8+PGxpbmUgeDE9IjU1MCIgeTE9IjY1MCIgeDI9IjgwMCIgeTI9IjcyMCIvPjxsaW5lIHgxPSI4MDAiIHkxPSI3MjAiIHgyPSIxMDUwIiB5Mj0iNjgwIi8+PGxpbmUgeDE9IjEwNTAiIHkxPSI2ODAiIHgyPSIxMzAwIiB5Mj0iNzUwIi8+PGxpbmUgeDE9IjEzMDAiIHkxPSI3NTAiIHgyPSIxNTUwIiB5Mj0iNzAwIi8+PGxpbmUgeDE9IjE1NTAiIHkxPSI3MDAiIHgyPSIxNzUwIiB5Mj0iODAwIi8+PGxpbmUgeDE9IjE1MCIgeTE9IjkwMCIgeDI9IjQwMCIgeTI9Ijg1MCIvPjxsaW5lIHgxPSI0MDAiIHkxPSI4NTAiIHgyPSI2NTAiIHkyPSI5MjAiLz48bGluZSB4MT0iNjUwIiB5MT0iOTIwIiB4Mj0iOTAwIiB5Mj0iODcwIi8+PGxpbmUgeDE9IjkwMCIgeTE9Ijg3MCIgeDI9IjExNTAiIHkyPSI5NTAiLz48bGluZSB4MT0iMTE1MCIgeTE9Ijk1MCIgeDI9IjE0MDAiIHkyPSI4ODAiLz48bGluZSB4MT0iMTQwMCIgeTE9Ijg4MCIgeDI9IjE2NTAiIHkyPSI5NTAiLz48bGluZSB4MT0iNDUwIiB5MT0iMjgwIiB4Mj0iNjAwIiB5Mj0iNTAwIi8+PGxpbmUgeDE9IjcwMCIgeTE9IjIwMCIgeDI9Ijg1MCIgeTI9IjQyMCIvPjxsaW5lIHgxPSI5NTAiIHkxPSIzNTAiIHgyPSIxMTAwIiB5Mj0iNTUwIi8+PGxpbmUgeDE9IjEyMDAiIHkxPSIyNTAiIHgyPSIxMzUwIiB5Mj0iNDgwIi8+PGxpbmUgeDE9IjE0NTAiIHkxPSIzODAiIHgyPSIxNjAwIiB5Mj0iNjAwIi8+PGxpbmUgeDE9IjM1MCIgeTE9IjQ1MCIgeDI9IjU1MCIgeTI9IjY1MCIvPjxsaW5lIHgxPSI2MDAiIHkxPSI1MDAiIHgyPSI4MDAiIHkyPSI3MjAiLz48bGluZSB4MT0iODUwIiB5MT0iNDIwIiB4Mj0iMTA1MCIgeTI9IjY4MCIvPjxsaW5lIHgxPSIxMTAwIiB5MT0iNTUwIiB4Mj0iMTMwMCIgeTI9Ijc1MCIvPjxsaW5lIHgxPSIxMzUwIiB5MT0iNDgwIiB4Mj0iMTU1MCIgeTI9IjcwMCIvPjwvZz48ZyBmaWxsPSJ1cmwoI25nKSI+PGNpcmNsZSBjeD0iMjAwIiBjeT0iMTUwIiByPSI2Ii8+PGNpcmNsZSBjeD0iNDUwIiBjeT0iMjgwIiByPSI4Ii8+PGNpcmNsZSBjeD0iNzAwIiBjeT0iMjAwIiByPSI2Ii8+PGNpcmNsZSBjeD0iOTUwIiBjeT0iMzUwIiByPSI3Ii8+PGNpcmNsZSBjeD0iMTIwMCIgY3k9IjI1MCIgcj0iNiIvPjxjaXJjbGUgY3g9IjE0NTAiIGN5PSIzODAiIHI9IjgiLz48Y2lyY2xlIGN4PSIxNzAwIiBjeT0iMzAwIiByPSI2Ii8+PGNpcmNsZSBjeD0iMzUwIiBjeT0iNDUwIiByPSI3Ii8+PGNpcmNsZSBjeD0iNjAwIiBjeT0iNTAwIiByPSI2Ii8+PGNpcmNsZSBjeD0iODUwIiBjeT0iNDIwIiByPSI4Ii8+PGNpcmNsZSBjeD0iMTEwMCIgY3k9IjU1MCIgcj0iNiIvPjxjaXJjbGUgY3g9IjEzNTAiIGN5PSI0ODAiIHI9IjciLz48Y2lyY2xlIGN4PSIxNjAwIiBjeT0iNjAwIiByPSI2Ii8+PGNpcmNsZSBjeD0iMzAwIiBjeT0iNzAwIiByPSI2Ii8+PGNpcmNsZSBjeD0iNTUwIiBjeT0iNjUwIiByPSI4Ii8+PGNpcmNsZSBjeD0iODAwIiBjeT0iNzIwIiByPSI2Ii8+PGNpcmNsZSBjeD0iMTA1MCIgY3k9IjY4MCIgcj0iNyIvPjxjaXJjbGUgY3g9IjEzMDAiIGN5PSI3NTAiIHI9IjYiLz48Y2lyY2xlIGN4PSIxNTUwIiBjeT0iNzAwIiByPSI4Ii8+PGNpcmNsZSBjeD0iMTc1MCIgY3k9IjgwMCIgcj0iNiIvPjxjaXJjbGUgY3g9IjE1MCIgY3k9IjkwMCIgcj0iNyIvPjxjaXJjbGUgY3g9IjQwMCIgY3k9Ijg1MCIgcj0iNiIvPjxjaXJjbGUgY3g9IjY1MCIgY3k9IjkyMCIgcj0iOCIvPjxjaXJjbGUgY3g9IjkwMCIgY3k9Ijg3MCIgcj0iNiIvPjxjaXJjbGUgY3g9IjExNTAiIGN5PSI5NTAiIHI9IjciLz48Y2lyY2xlIGN4PSIxNDAwIiBjeT0iODgwIiByPSI2Ii8+PGNpcmNsZSBjeD0iMTY1MCIgY3k9Ijk1MCIgcj0iOCIvPjwvZz48ZyBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjQiPjxjaXJjbGUgY3g9IjMyMCIgY3k9IjIyMCIgcj0iMyIvPjxjaXJjbGUgY3g9IjUyMCIgY3k9IjM1MCIgcj0iMyIvPjxjaXJjbGUgY3g9Ijc4MCIgY3k9IjI4MCIgcj0iMyIvPjxjaXJjbGUgY3g9IjEwMjAiIGN5PSI0MjAiIHI9IjMiLz48Y2lyY2xlIGN4PSIxMjgwIiBjeT0iMzIwIiByPSIzIi8+PGNpcmNsZSBjeD0iMTUyMCIgY3k9IjQ1MCIgcj0iMyIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjU1MCIgcj0iMyIvPjxjaXJjbGUgY3g9IjQ4MCIgY3k9IjU4MCIgcj0iMyIvPjxjaXJjbGUgY3g9IjcyMCIgY3k9IjYyMCIgcj0iMyIvPjxjaXJjbGUgY3g9Ijk4MCIgY3k9IjUwMCIgcj0iMyIvPjxjaXJjbGUgY3g9IjEyMjAiIGN5PSI2MjAiIHI9IjMiLz48Y2lyY2xlIGN4PSIxNDgwIiBjeT0iNTUwIiByPSIzIi8+PGNpcmNsZSBjeD0iMjAwIiBjeT0iNzgwIiByPSIzIi8+PGNpcmNsZSBjeD0iNDUwIiBjeT0iNzUwIiByPSIzIi8+PGNpcmNsZSBjeD0iNzAwIiBjeT0iODIwIiByPSIzIi8+PGNpcmNsZSBjeD0iOTUwIiBjeT0iNzgwIiByPSIzIi8+PGNpcmNsZSBjeD0iMTIwMCIgY3k9IjgyMCIgcj0iMyIvPjxjaXJjbGUgY3g9IjE0NTAiIGN5PSI3ODAiIHI9IjMiLz48Y2lyY2xlIGN4PSIxNzAwIiBjeT0iODUwIiByPSIzIi8+PC9nPjwvc3ZnPg==');
        background-color: #0B0C10; 
        font-family: 'Inter', sans-serif; 
    }
    
    body {
        max-width: 1200px; 
        margin: 50px auto;
        background-color: #535a75c2; 
        color: #E4E6ED;
    }

    /* ================= HEADER (portfolio write-up lives here) ============ */
    
    .header {
        background-color: #ebe8e8;
        color: #1d1c1cc2;
        font-family: 'Courier New', Courier, monospace;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: left;
        align-items: left;
        text-align: left;
        padding: 40px 0 40px 20px;
    }

    .header h2 {
        color: var(--titleheader);
        padding: 0 20px;
        font-size: 1.5rem;
        font-weight: bold;
        letter-spacing: .02em;
    }

    .header h3 {
        color: var(--titleheader);
        padding: 0 20px 10px;
        font-size: 1.2rem;
        font-weight: bold;
        letter-spacing: .02em;
    }

    .header p {
        padding: 0 20px;
        color: var(--text);
        font-weight: 400;
        font-size: 1.2rem;
    }

    .container {
        padding: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .container h1 {
        color: var(--title);
        font-size: 2.5rem;
        font-weight: 400;
        letter-spacing: .05em;
        margin-bottom: 1rem;
    }

    .container h2 {
        color: var(--title);
        font-size: 1rem;
        font-weight: 400;
        margin-bottom: 1.5rem;
    }

    /* ================= Controls bar ====================================== */
    .controls {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }
    .segmented {
        display: flex;
        background-color: #12131C;
        border: 1px solid #222533;
        border-radius: 10px;
        overflow: hidden;
    }
    .segmented button {
        appearance: none;
        border: 0;
        background: transparent;
        color: #A0A5B5;
        font-family: 'Inter', sans-serif;
        font-size: 0.85rem;
        padding: 10px 18px;
        cursor: pointer;
    }
    .segmented button.active {
        background-color: #00B0FF;
        color: #0B0C10;
        font-weight: 600;
    }
    .controls-right {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
    }
    #search {
        background-color: #12131C;
        border: 1px solid #222533;
        color: #E4E6ED;
        border-radius: 10px;
        padding: 10px 14px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.85rem;
        width: 230px;
        outline: none;
    }
    #search:focus { border-color: #00B0FF; }
    .ghost {
        background-color: #12131C;
        border: 1px solid #222533;
        color: #A0A5B5;
        border-radius: 10px;
        padding: 10px 14px;
        font-family: 'Inter', sans-serif;
        font-size: 0.85rem;
        cursor: pointer;
        white-space: nowrap;
    }
    .ghost:hover { color: #00B0FF; border-color: #00B0FF; }

    /* 2. Table container (your deep dark grey) */
    .table-container {
        width: 100%;
        background-color: #12131C;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
        border: 1px solid #222533;
    }
    .table-scroll { overflow-x: auto; }

    table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
    }

    th {
        background-color: #0A0B10; /* Darker header for hierarchy */
        color: #00B0FF;
        padding: 16px 20px;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
        border-bottom: 2px solid #222533;
        white-space: nowrap;
    }
    th.sortable { cursor: pointer; user-select: none; }
    th.sortable:hover { color: #E4E6ED; }
    th .arrow { font-size: 0.7rem; margin-left: 4px; }

    td {
        padding: 16px 20px;
        border-bottom: 1px solid #222533;
        font-size: 0.95rem;
    }

    /* 3. Subtle zebra striping */
    tr:nth-child(even) { background-color: #1A1C29; }

    /* Interactive hover effect */
    tr:hover { background-color: #212435; }

    /* Offline rows stay visible but dimmed */
    tr.offline td { opacity: 0.5; }

    /* 4. Modern mono typography (avoiding Courier) */
    a {
        color: #E4E6ED;
        text-decoration: none;
        font-family: 'JetBrains Mono', monospace; /* Modern mono for URLs */
        font-size: 0.9rem;
    }
    a:hover {
        color: #00B0FF;
        text-decoration: underline;
    }

    .label { font-weight: 600; }
    .badge-leaving {
        display: inline-block;
        margin-left: 8px;
        padding: 2px 8px;
        border-radius: 999px;
        background-color: #222533;
        color: #A0A5B5;
        font-size: 0.62rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        vertical-align: middle;
    }

    .latency {
        font-family: 'JetBrains Mono', monospace; /* Mono for numbers/ms */
        color: #A0A5B5;
        font-size: 0.9rem;
    }
    .num {
        font-family: 'JetBrains Mono', monospace;
        color: #A0A5B5;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    /* Wi-Fi style signal bars: 4 bars, lit count follows measured latency.
       (Replaces the old text-based .status-online::before trick.) */
    .cell-signal { display: inline-flex; align-items: center; gap: 10px; }
    .signal {
        display: inline-flex;
        align-items: flex-end;
        gap: 2px;
        height: 14px;
        flex: 0 0 auto;
    }
    .signal i { width: 4px; border-radius: 1px; background-color: #222533; display: block; }
    .signal i:nth-child(1) { height: 4px; }
    .signal i:nth-child(2) { height: 7px; }
    .signal i:nth-child(3) { height: 10px; }
    .signal i:nth-child(4) { height: 13px; }
    .signal i.on { background-color: #00B0FF; }

    /* Meta line + empty/error states */
    .meta-line {
        color: #A0A5B5;
        font-size: 0.8rem;
        margin: 0 0 16px;
        min-height: 1em;
    }
    .meta-line b { color: #E4E6ED; font-weight: 600; }
    .empty {
        padding: 48px 20px;
        text-align: center;
        color: #A0A5B5;
        font-size: 0.9rem;
    }

    /* Footer */
    .footer {
        padding: 20px;
        margin-top: 24px;
        color: #A0A5B5;
        font-size: 1rem;
        text-align: center;
        line-height: 1.6;
    }

    @media (max-width: 720px) {
        body { padding: 20px 10px; }
        th, td { padding: 12px; }
        .controls { flex-direction: column; align-items: stretch; }
        .controls-right { justify-content: space-between; }
        #search { width: 100%; flex: 1; }
    }