:root {
    color-scheme: dark;

    --bg: #0b0e13;
    --surface: #12161d;
    --surface-hover: #171c24;
    --border: #242a34;

    --text: #f1f3f5;
    --muted: #8b93a1;

    --green: #35d07f;
    --green-bg: rgba(53, 208, 127, 0.10);

    --red: #ff5c70;
    --red-bg: rgba(255, 92, 112, 0.10);

    --blue: #6ea8fe;
}


* {
    box-sizing: border-box;
}


body {
    margin: 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(70, 100, 160, 0.08),
            transparent 35%
        ),
        var(--bg);

    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* HEADER */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 28px 40px;

    border-bottom: 1px solid var(--border);

    background: rgba(11, 14, 19, 0.85);

    backdrop-filter: blur(10px);

    position: sticky;
    top: 0;

    z-index: 10;
}


.header h1 {
    margin: 0;

    font-size: 22px;
    font-weight: 650;

    letter-spacing: -0.02em;
}


.header p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 13px;
}


button {
    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 9px 14px;

    background: var(--surface);

    color: var(--text);

    font-size: 13px;

    cursor: pointer;

    transition:
        background 0.15s,
        border-color 0.15s;
}


button:hover {
    background: var(--surface-hover);
    border-color: #343c49;
}


button:disabled {
    opacity: 0.5;
    cursor: default;
}


/* MAIN */

main {
    width: min(1100px, calc(100% - 40px));

    margin: 35px auto 60px;
}


/* SUMMARY */

.summary {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 28px;
}


.stat {
    padding: 20px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 12px;
}


.stat-label {
    display: block;

    margin-bottom: 8px;

    color: var(--muted);

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.stat strong {
    font-size: 30px;

    font-weight: 650;

    letter-spacing: -0.03em;
}


#status {
    margin-bottom: 12px;

    color: var(--muted);

    font-size: 12px;
}


/* HOSTS */

.hosts {
    display: grid;

    gap: 12px;
}


.host-card {
    overflow: hidden;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 12px;

    transition:
        background 0.15s,
        border-color 0.15s;
}


.host-card:hover {
    background: var(--surface-hover);

    border-color: #303744;
}


.host-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding: 20px;
}


.domain-section {
    min-width: 0;
}


.domain-row {
    display: flex;

    align-items: center;

    gap: 10px;
}


.domain-row h2 {
    margin: 0;

    font-size: 17px;

    font-weight: 600;

    letter-spacing: -0.01em;

    word-break: break-all;
}


.status-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;
}


.status-dot.online {
    background: var(--green);

    box-shadow:
        0 0 0 4px var(--green-bg);
}


.status-dot.offline {
    background: var(--red);

    box-shadow:
        0 0 0 4px var(--red-bg);
}


.status {
    display: flex;

    align-items: center;

    gap: 7px;

    flex: 0 0 auto;

    padding: 5px 9px;

    border-radius: 6px;

    font-size: 11px;

    font-weight: 600;
}


.status span {
    width: 5px;
    height: 5px;

    border-radius: 50%;
}


.status.online {
    background: var(--green-bg);

    color: var(--green);
}


.status.online span {
    background: var(--green);
}


.status.offline {
    background: var(--red-bg);

    color: var(--red);
}


.status.offline span {
    background: var(--red);
}


.extra-domains {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 8px;

    padding-left: 18px;
}


.extra-domains span {
    padding: 3px 7px;

    background: #191e27;

    border: 1px solid var(--border);

    border-radius: 5px;

    color: var(--muted);

    font-family: monospace;

    font-size: 11px;
}


/* TARGET */

.main-target {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin: 0 20px;

    padding: 12px 14px;

    background: #0d1117;

    border: 1px solid var(--border);

    border-radius: 8px;
}


.target-label {
    color: var(--muted);

    font-size: 12px;
}


.target-value {
    color: #c7d0dc;

    font-family: monospace;

    font-size: 12px;
}


/* ROUTES */

.routes {
    margin: 12px 20px 0;

    border: 1px solid var(--border);

    border-radius: 8px;

    overflow: hidden;
}


.routes-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 9px 12px;

    background: #0d1117;

    color: var(--muted);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}


.route-count {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 20px;
    height: 20px;

    padding: 0 6px;

    background: #191e27;

    border-radius: 5px;

    color: var(--text);

    font-size: 10px;
}


.route {
    display: grid;

    grid-template-columns:
        minmax(120px, 1fr)
        30px
        minmax(150px, 1fr);

    align-items: center;

    gap: 10px;

    padding: 11px 12px;

    border-top: 1px solid var(--border);

    font-family: monospace;

    font-size: 12px;
}


.route-path {
    color: var(--blue);

    overflow: hidden;

    text-overflow: ellipsis;
}


.route-arrow {
    color: #555e6d;

    text-align: center;
}


.route-target {
    color: #c7d0dc;
}


/* FOOTER */

.host-footer {
    display: flex;

    justify-content: space-between;

    padding: 11px 20px;

    color: #606977;

    font-size: 10px;

    border-top: 1px solid var(--border);
}


/* EMPTY / ERROR */

.empty-card,
.error-card {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 140px;

    padding: 30px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 12px;
}


.empty-card {
    flex-direction: column;

    color: var(--muted);
}


.empty-card strong {
    color: var(--text);
}


.empty-icon {
    font-size: 30px;
}


.error-card {
    justify-content: flex-start;

    color: var(--red);
}


.error-card p {
    margin: 4px 0 0;

    color: var(--muted);

    font-size: 12px;
}


.error-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: var(--red-bg);

    font-weight: bold;
}


/* MOBILE */

@media (max-width: 700px) {

    .header {
        padding: 18px 20px;
    }


    main {
        width: min(
            100% - 24px,
            1100px
        );

        margin-top: 20px;
    }


    .summary {
        grid-template-columns: 1fr;
    }


    .host-top {
        padding: 16px;
    }


    .main-target {
        align-items: flex-start;

        flex-direction: column;

        margin: 0 16px;
    }


    .routes {
        margin-left: 16px;
        margin-right: 16px;
    }


    .route {
        grid-template-columns:
            1fr;

        gap: 4px;
    }


    .route-arrow {
        display: none;
    }


    .host-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

}