:root {
    --th-primary: #5a54d6;
    --th-primary-dark: #423cae;
    --th-ink: #17142f;
    --th-text: #2d2a44;
    --th-muted: #77748c;
    --th-border: #e7e7f1;
    --th-soft: #f8f8fd;
    --th-panel: #ffffff;
    --th-results: #17142f;
    --th-shadow: 0 12px 38px rgba(34, 29, 87, .07);
    --th-radius: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-width: 0;
    color: var(--th-text);
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    overflow-x: hidden;
}
a { color: var(--th-primary); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.th-page-width {
    width: min(100% - 36px, 1160px);
    margin-inline: auto;
}

/* Header */
.th-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.97);
    border-top: 2px solid var(--th-ink);
    border-bottom: 1px solid #ececf4;
    box-shadow: 0 1px 4px rgba(22, 20, 48, .035);
    backdrop-filter: blur(10px);
}
.th-nav-shell {
    width: min(100% - 36px, 1160px);
    min-height: 74px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 24px;
}
.th-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.th-brand img { display: block; width: 86px; height: auto; }
.th-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
}
.th-nav > a {
    color: #3d3955;
    text-decoration: none;
    padding: 11px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.th-nav > a:hover { color: var(--th-primary-dark); background: #f8f8fd; }
.th-login { display: inline-flex; align-items: center; gap: 6px; margin-left: 5px; }
.th-signup {
    color: #fff !important;
    background: var(--th-primary);
    padding: 10px 18px !important;
    box-shadow: 0 3px 10px rgba(90,84,214,.18);
}
.th-signup:hover { background: var(--th-primary-dark) !important; }
.th-menu-toggle {
    display: none;
    margin-left: auto;
    width: 40px;
    height: 38px;
    border: 1px solid var(--th-border);
    border-radius: 8px;
    background: #fff;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}
.th-menu-toggle span { width: 17px; height: 2px; border-radius: 2px; background: var(--th-ink); }

/* Hero */
.th-hero { padding: 72px 0 42px; text-align: center; }
.th-hero h1 {
    margin: 0 0 14px;
    color: var(--th-ink);
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.04;
    letter-spacing: -.04em;
    font-weight: 800;
}
.th-hero h1 span { color: var(--th-primary); }
.th-hero p {
    margin: 0 auto;
    max-width: 710px;
    color: #77748c;
    font-size: 16px;
}

/* Main card */
.th-page-main { padding-bottom: 54px; }
.th-lg-card {
    background: var(--th-panel);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius);
    box-shadow: var(--th-shadow);
    overflow: hidden;
}

/* Datacenter tabs */
.th-dc-tabs {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    padding: 28px 38px 0;
    border-bottom: 1px solid var(--th-border);
    overflow-x: auto;
    scrollbar-width: thin;
}
.th-dc-tab {
    position: relative;
    min-width: 170px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #9693a7;
    text-decoration: none;
    padding: 0 8px 20px;
    flex: 0 0 auto;
}
.th-dc-tab::after {
    content: "";
    position: absolute;
    height: 2px;
    left: 0;
    right: 0;
    bottom: -1px;
    border-radius: 2px 2px 0 0;
    background: transparent;
}
.th-dc-tab:hover { color: var(--th-primary); }
.th-dc-tab.is-active { color: var(--th-primary); }
.th-dc-tab.is-active::after { background: var(--th-primary); }
.th-pin { display: inline-flex; margin-top: 2px; }
.th-dc-text { display: flex; flex-direction: column; min-width: 0; }
.th-dc-text strong { font-size: 24px; line-height: 1.05; letter-spacing: -.015em; }
.th-dc-text small { margin-top: 3px; color: #8c899b; font-size: 14px; white-space: nowrap; }

/* Nodes: only nodes belonging to selected/active DC are rendered */
.th-node-area { padding: 28px 38px 30px; }
.th-node-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.th-node {
    min-width: 0;
    min-height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--th-border);
    border-radius: 11px;
    background: #fff;
    color: var(--th-ink);
    text-decoration: none;
    padding: 14px 14px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.th-node:hover { border-color: #c9c6f3; background: #fbfbff; }
.th-node.is-active {
    border-color: var(--th-primary);
    box-shadow: inset 0 0 0 1px rgba(90,84,214,.15), 0 2px 10px rgba(90,84,214,.08);
    background: #fbfbff;
}
.th-node-title { display: flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 750; min-width: 0; }
.th-node-title em {
    color: #4ab26a;
    font-size: 13px;
    font-style: normal;
    font-weight: 650;
    white-space: nowrap;
}
.th-node small {
    display: block;
    margin-top: 4px;
    color: #9290a0;
    font-size: 13px;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.35;
}
.th-card-divider { height: 1px; margin: 0 38px; background: var(--th-border); }

/* Network info + tests */
.th-workspace {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
    gap: 56px;
    padding: 38px 38px 26px;
}
.th-workspace h2 {
    margin: 0 0 4px;
    color: var(--th-ink);
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -.015em;
}
.th-run-from { margin: 0 0 18px; color: #868394; font-size: 14px; }
.th-info-table { margin-top: 18px; }
.th-info-row {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    align-items: center;
    min-height: 54px;
    border-bottom: 1px solid #f0f0f6;
    gap: 12px;
}
.th-info-row:last-child { border-bottom: 0; }
.th-info-label { color: #7c798d; font-size: 14px; }
.th-info-value { min-width: 0; color: #4a465e; font-size: 14px; overflow-wrap: anywhere; }
.th-info-value strong { color: #433f58; }
.th-info-value a { text-decoration: none; font-weight: 650; margin-left: 7px; }
.th-info-value code {
    color: #4d4861;
    background: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 14px;
}
.th-copy {
    margin-left: 5px;
    border: 0;
    border-radius: 5px;
    background: #f0efff;
    color: var(--th-primary);
    padding: 5px 10px;
    font-size: 15px;
    cursor: pointer;
}
.th-test-files { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.th-test-files a { margin-left: 0; }
.th-iperf { display: grid; gap: 10px; margin-top: 16px; }
.th-iperf > div { display: grid; gap: 5px; }
.th-iperf small { color: var(--th-muted); }
.th-iperf code { display: block; overflow-x: auto; padding: 8px 10px; border-radius: 6px; background: var(--th-soft); }

.th-test-form-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 150px auto;
    gap: 12px;
    align-items: end;
}
.th-field { display: grid; gap: 6px; min-width: 0; color: #6f6c80; font-size: 13px; }
.th-field input,
.th-field select {
    width: 100%;
    min-width: 0;
    height: 50px;
    border: 1px solid #dedde9;
    border-radius: 8px;
    background: #fff;
    color: #363249;
    outline: 0;
    padding: 0 12px;
    font-size: 15px;
}
.th-field input:focus,
.th-field select:focus { border-color: #aca8ed; box-shadow: 0 0 0 3px rgba(90,84,214,.08); }
.th-run-button {
    height: 50px;
    border: 0;
    border-radius: 8px;
    background: var(--th-primary);
    color: #fff;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(90,84,214,.16);
}
.th-run-button:hover { background: var(--th-primary-dark); }
.th-run-button:disabled { opacity: .65; cursor: wait; }
.th-terms {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: #77748b;
    font-size: 13px;
    cursor: pointer;
}
.th-terms input { margin: 0; width: 16px; height: 16px; }
.th-terms a { text-decoration: underline; }
.th-alert {
    margin-top: 13px;
    padding: 12px 14px;
    border: 1px solid #f3b9c0;
    border-radius: 8px;
    background: #fff5f6;
    color: #9e3140;
    font-size: 14px;
}

/* Results */
.th-results {
    margin: 0 38px 38px;
    border-radius: 8px;
    background: var(--th-results);
    color: #d9d7eb;
    overflow: hidden;
}
.th-results-title {
    padding: 14px 18px 10px;
    color: #a8a4ca;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
}
.th-results pre {
    margin: 0;
    min-height: 76px;
    max-height: 520px;
    overflow: auto;
    padding: 12px 18px 18px;
    color: #c9c6e5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre;
}

.th-footer { padding: 28px 0 38px; color: #8b889a; font-size: 14px; }
.th-footer .th-page-width { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.th-footer a { color: #77748c; text-decoration: none; }

/* Tablet */
@media (max-width: 980px) {
    .th-node-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .th-workspace { gap: 30px; }
    .th-test-form-grid { grid-template-columns: minmax(150px, 1fr) 110px; }
    .th-run-button { grid-column: 1 / -1; width: max-content; min-width: 110px; justify-self: end; }
}

/* Mobile navigation + stacked content */
@media (max-width: 760px) {
    .th-page-width, .th-nav-shell { width: min(100% - 24px, 1160px); }
    .th-nav-shell { min-height: 58px; }
    .th-brand img { width: 66px; }
    .th-menu-toggle { display: inline-flex; }
    .th-nav {
        display: none;
        position: absolute;
        left: 12px;
        right: 12px;
        top: calc(100% + 1px);
        margin: 0;
        padding: 10px;
        border: 1px solid var(--th-border);
        border-radius: 0 0 10px 10px;
        background: #fff;
        box-shadow: 0 14px 28px rgba(23,20,47,.1);
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    .th-nav.is-open { display: flex; }
    .th-nav > a { padding: 11px 12px; }
    .th-login { margin-left: 0; }
    .th-signup { text-align: center; margin-top: 3px; }

    .th-hero { padding: 42px 0 28px; }
    .th-hero h1 { font-size: clamp(34px, 10vw, 44px); }
    .th-hero p { font-size: 13px; }
    .th-desktop-break { display: none; }

    .th-dc-tabs {
        justify-content: flex-start;
        padding: 20px 18px 0;
        gap: 4px;
        overscroll-behavior-inline: contain;
    }
    .th-dc-tab { min-width: 138px; padding-left: 5px; padding-right: 5px; }
    .th-dc-text strong { font-size: 17px; }

    .th-node-area { padding: 18px; }
    .th-node-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .th-node { min-height: 62px; padding: 9px 10px; }
    .th-card-divider { margin: 0 18px; }

    .th-workspace { grid-template-columns: 1fr; gap: 32px; padding: 25px 18px 18px; }
    .th-workspace h2 { font-size: 24px; }
    .th-results { margin: 0 18px 22px; }
    .th-footer .th-page-width { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 460px) {
    .th-page-width, .th-nav-shell { width: min(100% - 20px, 1160px); }
    .th-hero { padding-top: 35px; }
    .th-dc-tab { min-width: 126px; }
    .th-node-title { font-size: 15px; }
    .th-info-row { grid-template-columns: 105px minmax(0, 1fr); gap: 8px; }
    .th-test-form-grid { grid-template-columns: 1fr 105px; gap: 9px; }
    .th-run-button { grid-column: 1 / -1; width: 100%; }
    .th-results pre { max-height: 330px; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; }
}


/* V3.2 readability overrides */
.th-node small{min-height: 2.6em;}
.th-info-value .th-file-links a{display:inline-block;margin-right:10px;}
@media (max-width: 980px){.th-node-grid{grid-template-columns:repeat(4,minmax(0,1fr));}.th-workspace{gap:34px;}.th-test-form-grid{grid-template-columns:minmax(150px,1fr) 130px;}.th-run-button{grid-column:1 / -1;width:max-content;min-width:126px;justify-self:end;}}
@media (max-width: 760px){body{font-size:15px;}.th-brand img{width:76px;}.th-hero p{font-size:15px;}.th-dc-text strong{font-size:20px;}.th-node-title{font-size:18px;}.th-node small{font-size:13px;}.th-workspace h2{font-size:21px;}.th-info-row{grid-template-columns:120px minmax(0,1fr);}.th-field input,.th-field select,.th-run-button{height:48px;}.th-results pre{font-size:13px;}}
@media (max-width:460px){.th-info-row{grid-template-columns:112px minmax(0,1fr);} .th-node-title{font-size:16px;} .th-node small{font-size:12px;} .th-results pre{font-size:12px;}}

/* =========================================================
   V3.3 — compact Looking Glass node cards + new TOTHOST logo
   Datacenter tab dimensions intentionally remain unchanged.
   ========================================================= */
.th-brand img {
    width: 96px;
    height: 56px;
    object-fit: contain;
}

@media (min-width: 981px) {
    .th-node-area {
        padding: 24px 38px 26px;
    }
    .th-node-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
    }
    .th-node {
        min-height: 70px;
        padding: 10px 12px;
        border-radius: 9px;
    }
    .th-node-title {
        gap: 5px;
        font-size: 16px;
        line-height: 1.2;
    }
    .th-node-title em {
        font-size: 10px;
    }
    .th-node small {
        min-height: 0;
        margin-top: 5px;
        font-size: 11px;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (min-width: 761px) and (max-width: 980px) {
    .th-node-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }
    .th-node {
        min-height: 68px;
        padding: 10px 11px;
    }
    .th-node-title { font-size: 15px; }
    .th-node-title em { font-size: 10px; }
    .th-node small {
        min-height: 0;
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 760px) {
    .th-brand img {
        width: 82px;
        height: 46px;
    }
    .th-node {
        min-height: 64px;
        padding: 9px 10px;
    }
    .th-node-title { font-size: 15px; }
    .th-node-title em { font-size: 9px; }
    .th-node small {
        min-height: 0;
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}