:root {
    --z: #0e1420;
    --a: #162030;
    --b: #1b2739;
    --k: #101a28;
    --c: #22303f;
    --d: #2e4054;
    --t: #eaf2ef;
    --m: #8fa3b8;
    --n: #63788f;
    --e: #a5f36b;
    --f: #b9f78a;
    --g: rgba(165, 243, 107, 0.16);
    --i: #0e1420;
    --x: #f0616d;
    --u: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --o: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --r: 10px;
}

html,
body,
body.far-body {
    min-height: 100%;
    background: var(--z);
    color: var(--t);
    font-family: var(--u) !important;
    padding-bottom: 40px;
}

::selection {
    background: var(--e);
    color: var(--i);
}

a {
    color: var(--e);
    text-decoration: none;
}

a:hover {
    color: var(--f);
    text-decoration: underline;
}

p {
    color: var(--m);
    font-size: 1.05em !important;
    line-height: 1.6;
    overflow-wrap: break-word;
}

.left-aligned { text-align: left; }
.right-aligned { text-align: right; }
.center-aligned { text-align: center; }

.centered-column {
    max-width: 380px !important;
}

.close-link {
    color: var(--m) !important;
    position: absolute;
    right: 10px;
    top: 10px;
}

/* Nav */
.ui.menu,
.ui.inverted.menu,
.borderless.menu,
.borderless.ui.big.inverted.menu {
    background: var(--a) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--c) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--u) !important;
    min-height: 3.2em;
    margin: 0 0 1.8em !important;
}

.ui.menu .item,
.ui.inverted.menu .item {
    color: var(--m) !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

.ui.menu .item:hover,
.ui.inverted.menu .item:hover {
    background: transparent !important;
    color: var(--t) !important;
}

.ui.menu .item.active,
.ui.inverted.menu .item.active {
    background: transparent !important;
    color: var(--t) !important;
    font-weight: 600 !important;
    box-shadow: inset 0 -2px 0 var(--e) !important;
}

.ui.menu .dropdown.item .menu,
.ui.dropdown .menu {
    background: var(--b) !important;
    border: 1px solid var(--d) !important;
    border-radius: var(--r) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

.ui.menu .dropdown.item .menu .item,
.ui.dropdown .menu > .item {
    color: var(--m) !important;
}

.ui.menu .dropdown.item .menu .item:hover,
.ui.dropdown .menu > .item:hover {
    background: var(--a) !important;
    color: var(--t) !important;
}

/* Panels / cards */
.ui.segment,
.ui.padded.segment,
.ui.centered.segment,
.ui.card,
.ui.cards > .card,
.far-panel {
    background: var(--a) !important;
    color: var(--t) !important;
    border: 1px solid var(--c) !important;
    border-radius: var(--r) !important;
    box-shadow: none !important;
}

.far-panel {
    position: static;
    margin: 1.4em 0;
    padding: 1.4em 1.3em 1.2em;
}

.far-panel-title {
    position: static;
    display: block;
    margin: 0 0 1.1em;
    padding: 0;
    background: none;
    color: var(--n);
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.ui.header,
.ui.segment > .ui.header,
.ui.dividing.header,
.ui.huge.header,
.ui.large.header,
.ui.small.header,
.ui.card .header {
    color: var(--t) !important;
    background: transparent !important;
    font-family: var(--u) !important;
    font-weight: 600 !important;
}

.ui.dividing.header {
    border-bottom: 1px solid var(--c) !important;
    padding-bottom: 0.6em !important;
}

.ui.header .sub.header,
.ui.card .meta,
.ui.card .description,
.ui.list .description {
    color: var(--m) !important;
}

.ui.list .item,
.ui.list .header {
    color: var(--t) !important;
}

i.icon {
    color: inherit !important;
}

.far-status {
    margin: 0.2em 0 1.3em;
    color: var(--t);
    font-size: 1.05em;
    text-align: center;
    text-transform: none;
}

.far-status .far-lamp {
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    margin-right: 0.55em;
    border-radius: 50%;
    background: var(--e);
    box-shadow: 0 0 0 3px var(--g);
}

/* Forms */
.ui.form {
    font-family: var(--u) !important;
}

.ui.form .field > label,
.ui.form .ui.header {
    color: var(--t) !important;
}

.ui.form input,
.ui.form textarea,
.ui.form select,
.ui.input input,
.ui.selection.dropdown {
    background: var(--k) !important;
    color: var(--t) !important;
    border: 1px solid var(--d) !important;
    border-radius: var(--r) !important;
    font-family: var(--u) !important;
}

.ui.form input::placeholder,
.ui.input input::placeholder {
    color: var(--n) !important;
}

.ui.form input:focus,
.ui.form textarea:focus,
.ui.input input:focus,
.ui.selection.dropdown:focus {
    background: var(--k) !important;
    color: var(--t) !important;
    border-color: var(--e) !important;
    box-shadow: 0 0 0 3px var(--g) !important;
}

.ui.selection.dropdown .menu {
    background: var(--b) !important;
    border: 1px solid var(--d) !important;
    border-radius: var(--r) !important;
}

.ui.selection.dropdown .menu > .item {
    color: var(--m) !important;
    border-top: 1px solid var(--c) !important;
}

.ui.selection.dropdown .menu > .item:hover,
.ui.selection.dropdown .menu > .item.active,
.ui.dropdown .menu .selected.item {
    background: var(--a) !important;
    color: var(--t) !important;
}

.ui.icon.input > i.icon {
    color: var(--n) !important;
    opacity: 1 !important;
}

.ui.dropdown .text {
    color: var(--t) !important;
}

.ui.dropdown .default.text {
    color: var(--n) !important;
}

.readonly-input,
.copylink {
    background: var(--k) !important;
    color: var(--m) !important;
    font-family: var(--o) !important;
}

/* Buttons */
.ui.button {
    background: var(--e) !important;
    color: var(--i) !important;
    border: 1px solid var(--e) !important;
    border-radius: var(--r) !important;
    box-shadow: none !important;
    font-family: var(--u) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.ui.button:hover {
    background: var(--f) !important;
    border-color: var(--f) !important;
    color: var(--i) !important;
}

a.ui.button,
.ui.basic.button,
.ui.blue.button,
.client-actions .ui.button,
.far-modal-panel .ui.button {
    background: transparent !important;
    color: var(--t) !important;
    border: 1px solid var(--d) !important;
    box-shadow: none !important;
}

a.ui.button:hover,
.ui.basic.button:hover,
.ui.blue.button:hover,
.client-actions .ui.button:hover,
.far-modal-panel .ui.button:hover {
    background: var(--b) !important;
    color: var(--t) !important;
    border-color: var(--e) !important;
}

.ui.red.button,
.ui.button.confirm {
    background: transparent !important;
    color: var(--x) !important;
    border: 1px solid rgba(240, 97, 109, 0.45) !important;
}

.ui.red.button:hover,
.ui.button.confirm:hover {
    background: var(--x) !important;
    border-color: var(--x) !important;
    color: #1a0d10 !important;
}

.ui.buttons .button {
    border-radius: var(--r) !important;
}

/* Messages */
.ui.message,
.ui.info.message,
.ui.positive.message {
    background: var(--b) !important;
    color: var(--t) !important;
    border: 1px solid var(--d) !important;
    border-radius: var(--r) !important;
    box-shadow: none !important;
}

.ui.negative.message {
    background: rgba(240, 97, 109, 0.1) !important;
    color: #ffd9dc !important;
    border: 1px solid rgba(240, 97, 109, 0.45) !important;
}

.ui.message .header {
    color: var(--t) !important;
}

.ui.message code {
    background: var(--k) !important;
    color: var(--e) !important;
    border: 1px solid var(--c) !important;
    border-radius: 6px;
    padding: 0.1em 0.4em;
    font-family: var(--o) !important;
}

/* Settings checkbox */
.far-setting-checkbox .ui.checkbox label,
.far-setting-checkbox .ui.checkbox .box {
    color: var(--t) !important;
    font-size: 1em !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

.far-setting-checkbox .ui.checkbox label:hover,
.far-setting-checkbox .ui.checkbox input:focus ~ label,
.far-setting-checkbox .ui.checkbox input:checked ~ label {
    color: var(--t) !important;
}

.far-setting-checkbox .ui.checkbox label:before,
.far-setting-checkbox .ui.checkbox .box:before {
    background: var(--k) !important;
    border-color: var(--d) !important;
    border-radius: 5px !important;
}

.far-setting-checkbox .ui.checkbox input:checked ~ label:before,
.far-setting-checkbox .ui.checkbox input:checked ~ .box:before {
    background: var(--e) !important;
    border-color: var(--e) !important;
}

.far-setting-checkbox .ui.checkbox input:checked ~ label:after,
.far-setting-checkbox .ui.checkbox input:checked ~ .box:after {
    color: var(--i) !important;
}

.ui.card .extra.content,
.ui.cards > .card > .extra {
    border-top: 1px solid var(--c) !important;
    color: var(--m) !important;
}

.ui.corner.label {
    background-color: var(--x) !important;
    border-color: var(--x) !important;
}

.ui.corner.label .icon {
    color: #fff !important;
}

.ui.bottom.attached.label {
    background: var(--b) !important;
    color: var(--m) !important;
    border-radius: 0 0 var(--r) var(--r) !important;
}

.ui.horizontal.list .item,
.ui.horizontal.divided.list .item {
    color: var(--n) !important;
}

.site-footer {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.site-footer .item,
.site-footer a.item {
    color: var(--n) !important;
    font-size: 0.9em;
}

.site-footer a.item:hover {
    color: var(--e) !important;
}

/* Client list */
.client-list {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

.client-row {
    display: flex;
    align-items: stretch;
    gap: 1em;
    padding: 0.9em 1em;
    background: var(--b);
    border: 1px solid var(--c);
    border-radius: var(--r);
    color: var(--t);
}

.client-row.is-active {
    border-color: rgba(165, 243, 107, 0.45);
}

.client-row.is-offline {
    opacity: 1;
}

.client-avatar {
    flex: 0 0 auto;
    width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.25em;
}

.client-dot {
    width: 9px;
    height: 9px;
    margin-bottom: 0.6em;
    border-radius: 50%;
    background: var(--n);
}

.client-row.is-active .client-dot {
    background: var(--e);
    box-shadow: 0 0 0 3px var(--g);
}

.client-avatar i.icon {
    font-size: 1.6em !important;
    margin: 0 !important;
    color: var(--m) !important;
}

.client-main {
    flex: 1 1 auto;
    min-width: 0;
}

.client-name {
    color: var(--t);
    font-size: 1.15em;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.client-meta {
    margin-top: 0.15em;
    color: var(--n);
    font-size: 0.9em;
}

.client-stats {
    margin-top: 0.6em;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
}

.client-stats-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.4em;
    align-items: baseline;
}

.client-list[data-traffic-stats="0"] .client-stats-traffic {
    display: none;
}

.client-stat {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    min-width: 0;
}

.client-stat .label {
    flex: 0 0 auto;
    width: 9ch;
    margin-right: 0.55em;
    color: var(--n);
}

.client-stat-status .label,
.client-stat-endpoint .label {
    width: 8ch;
}

.client-stat .value {
    color: var(--t);
    font-family: var(--o);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-stat-status .value {
    width: 9ch;
    min-width: 9ch;
}

.client-stat-endpoint .value {
    width: 28ch;
    min-width: 28ch;
}

.client-stat-rate .value,
.client-stat-total .value {
    width: 12ch;
    min-width: 12ch;
    text-align: right;
}

.client-stat .value.up,
.client-stat .value.down {
    color: var(--m);
}

.client-status-text {
    font-weight: 600;
}

.client-row.is-active .client-status-text {
    color: var(--e);
}

.client-row.is-offline .client-status-text {
    color: var(--n);
}

.client-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    flex: 0 0 auto;
    min-width: 122px;
}

.client-actions .ui.button {
    margin: 0 !important;
    padding: 0.5em 0.8em !important;
    font-size: 0.85em !important;
}

.client-empty {
    padding: 1.6em 0.5em;
    text-align: center;
    color: var(--n);
}

@media (max-width: 700px) {
    .client-row {
        flex-wrap: wrap;
    }

    .client-actions {
        width: 100%;
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .client-actions .ui.button {
        flex: 1 1 45%;
    }

    .client-stats-row {
        flex-wrap: wrap;
        gap: 0.25em 1em;
    }

    .client-stat-endpoint .value {
        width: min(28ch, 55vw);
        min-width: 16ch;
    }
}

/* Modal */
.far-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1em;
    background: rgba(6, 10, 16, 0.72);
}

.far-modal.is-open {
    display: flex;
}

.far-modal-panel {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 1.4em;
    text-align: center;
    background: var(--a);
    border: 1px solid var(--d);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.far-modal-title {
    margin-bottom: 1em;
    color: var(--t);
    font-weight: 600;
    text-transform: none;
}

.far-modal-panel img {
    max-width: 100%;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
}