* {
    box-sizing: border-box;
}

:root {
    --terminal-border-width: 0.0625rem;
    --terminal-space-2xs: 0.125rem;
    --terminal-space-xs: 0.25rem;
    --terminal-space-sm: 0.3125rem;
    --terminal-space-md: 0.375rem;
    --terminal-space-lg: 0.5rem;
    --terminal-space-xl: 0.625rem;
    --terminal-space-2xl: 0.75rem;
    --terminal-space-3xl: 0.875rem;
    --terminal-space-4xl: 0.9375rem;
    --terminal-space-4xl-half: 0.46875rem;
    --terminal-space-5xl: 1.125rem;
    --terminal-space-6xl: 1.25rem;
    --terminal-space-7xl: 1.5rem;
    --terminal-font-xs: 0.625rem;
    --terminal-font-sm: 0.6875rem;
    --terminal-font-md: 0.75rem;
    --terminal-font-lg: 0.875rem;
    --terminal-font-base: 1rem;
    --terminal-title-offset-negative: -0.75rem;
    --terminal-title-offset-compact-negative: -0.625rem;
    --terminal-header-min-height: 4rem;
    --terminal-header-bar-offset-negative: -1.6875rem;
    --terminal-header-bar-offset-compact-negative: -1.5625rem;
    --terminal-form-max-width: 26.25rem;
    --terminal-content-max-width: 47.5rem;
    --terminal-textarea-min-height: 8.125rem;
    --terminal-captcha-min-width: 7.5rem;
    --terminal-captcha-max-width: 11.25rem;
    --terminal-dashboard-panel-min-width: 17.5rem;
    --terminal-project-image-min-width: 7rem;
    --terminal-project-image-max-width: 11.25rem;
    --terminal-project-image-mobile-max-width: 15rem;
    --terminal-muted-color: var(--border-color);
}

html {
    min-height: 100%;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: "Courier New", Courier, monospace;
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--terminal-space-6xl);
}

body,
button,
input,
select,
textarea {
    font-family: "Courier New", Courier, monospace;
}

a {
    color: inherit;
    overflow-wrap: anywhere;
}

.terminal-box {
    border: var(--terminal-border-width) solid var(--border-color);
    margin-bottom: var(--terminal-space-4xl);
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: var(--terminal-space-4xl) var(--terminal-space-xl) var(--terminal-space-xl);
    position: relative;
}

.box-title {
    background: var(--bg-color);
    color: var(--highlight-color);
    font-size: var(--terminal-font-lg);
    font-weight: bold;
    left: var(--terminal-space-xl);
    margin: 0;
    max-width: calc(100% - var(--terminal-space-6xl));
    overflow-wrap: anywhere;
    padding: 0 var(--terminal-space-sm);
    position: absolute;
    top: var(--terminal-title-offset-negative);
    white-space: normal;
}

.box-title a {
    color: inherit;
    text-decoration: none;
}

.box-title a:hover,
.box-title a:focus-visible {
    color: var(--text-color);
}

.ascii-art {
    font-size: var(--terminal-font-lg);
    line-height: 1.25;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: break-word;
}

.terminal-header {
    min-height: var(--terminal-header-min-height);
}

.terminal-header-bar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--terminal-space-lg) var(--terminal-space-3xl);
    justify-content: space-between;
    margin: var(--terminal-header-bar-offset-negative) 0 var(--terminal-space-3xl);
}

.terminal-header > .terminal-header-bar > .box-title {
    flex: 0 1 auto;
    left: auto;
    max-width: 100%;
    position: static;
    top: auto;
}

.terminal-header-actions {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: var(--terminal-space-md) var(--terminal-space-xl);
    justify-content: flex-end;
    margin-left: auto;
    max-width: 100%;
    min-width: 0;
    padding: 0 var(--terminal-space-xs);
}

.terminal-section-bar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--terminal-space-lg) var(--terminal-space-3xl);
    justify-content: space-between;
    margin: var(--terminal-header-bar-offset-negative) 0 var(--terminal-space-3xl);
}

.terminal-main > .terminal-section-bar > .box-title,
.terminal-section-actions > .box-title {
    flex: 0 1 auto;
    left: auto;
    max-width: 100%;
    position: static;
    top: auto;
}

.terminal-section-link {
    margin-left: auto;
    text-decoration: none;
}

.terminal-section-actions {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: var(--terminal-space-md) var(--terminal-space-xl);
    justify-content: flex-end;
    margin-left: auto;
    max-width: 100%;
    min-width: 0;
}

.terminal-section-actions .terminal-section-link {
    margin-left: 0;
}

.terminal-section-link:hover,
.terminal-section-link:focus-visible {
    color: var(--text-color);
}

.terminal-main {
    min-height: 35vh;
}

.terminal-footer {
    color: var(--footer-text-color);
}

.contact-footer-layout {
    display: grid;
    gap: var(--terminal-space-5xl);
    grid-template-columns: minmax(0, 1fr);
}

.contact-footer-content {
    margin-bottom: var(--terminal-space-3xl);
    min-width: 0;
}

.contact-footer-content p {
    color: var(--text-color);
    line-height: 1.45;
    margin: 0 0 var(--terminal-space-5xl);
    white-space: normal;
}

.contact-footer-content pre {
    line-height: 1.1;
    margin: 0 auto;
    max-width: 100%;
    overflow-wrap: normal;
    white-space: pre;
    width: fit-content;
}

.terminal-scroll {
    max-height: none;
    overflow-y: visible;
}

.terminal-scroll [data-layout="home-panels"] {
    align-items: stretch;
    display: grid;
    gap: var(--terminal-space-2xl);
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: var(--terminal-space-sm);
    white-space: normal;
}

.terminal-scroll [data-layout="home-panels"] > div {
    border: var(--terminal-border-width) solid var(--border-color);
    align-content: center;
    display: grid;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: var(--terminal-space-4xl) var(--terminal-space-xl) var(--terminal-space-xl);
    position: relative;
}

.terminal-scroll [data-layout="home-panels"] > div > p {
    line-height: 1.45;
    margin: 0 0 var(--terminal-space-xl);
    white-space: normal;
}

.terminal-scroll [data-layout="home-panels"] > div > p:first-child {
    background: var(--bg-color);
    color: var(--highlight-color);
    font-size: var(--terminal-font-lg);
    font-weight: bold;
    left: var(--terminal-space-xl);
    margin: 0;
    max-width: calc(100% - var(--terminal-space-6xl));
    overflow-wrap: anywhere;
    padding: 0 var(--terminal-space-sm);
    position: absolute;
    top: var(--terminal-title-offset-negative);
}

.terminal-scroll [data-layout="home-panels"] pre {
    font-family: inherit;
    line-height: 1.1;
    margin: 0 auto;
    max-width: 100%;
    overflow-wrap: normal;
    white-space: pre;
    width: fit-content;
    word-break: normal;
}

.terminal-scroll [data-layout="home-panel-content"] {
    align-items: center;
    display: grid;
    gap: var(--terminal-space-xl);
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    min-width: 0;
}

.terminal-scroll [data-layout="home-panel-content"] pre {
    justify-self: center;
    margin: 0;
}

.terminal-scroll [data-layout="home-panel-content"] > p {
    line-height: 1.45;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.lang-switch {
    background: var(--bg-color);
    display: flex;
    flex-wrap: wrap;
    gap: var(--terminal-space-sm);
    margin: 0;
    max-width: 100%;
    padding: 0;
}

.lang-btn {
    background: none;
    border: 0;
    color: var(--highlight-color);
    cursor: pointer;
    font-size: var(--terminal-font-lg);
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    padding: 0 var(--terminal-space-sm);
    white-space: nowrap;
}

.lang-btn:hover,
.lang-btn:focus-visible,
.lang-btn.active {
    color: var(--text-color);
}

.header-link {
    background: var(--bg-color);
    color: var(--highlight-color);
    display: inline-flex;
    font-size: var(--terminal-font-lg);
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    max-width: 100%;
    padding: var(--terminal-space-2xs) var(--terminal-space-sm);
    text-decoration: none;
    white-space: nowrap;
    width: fit-content;
}

.header-link:hover,
.header-link:focus-visible {
    color: var(--text-color);
}

.header-form {
    background: var(--bg-color);
    display: inline-flex;
    margin: 0;
    max-width: 100%;
}

.header-button {
    border: 0;
    cursor: pointer;
}

.terminal-form {
    display: flex;
    flex-direction: column;
    gap: var(--terminal-space-3xl);
    max-width: var(--terminal-form-max-width);
    padding-top: var(--terminal-space-sm);
}

.terminal-form-row {
    display: flex;
    flex-direction: column;
    gap: var(--terminal-space-sm);
    min-width: 0;
}

.terminal-label,
.dashboard-data dt {
    color: var(--highlight-color);
    font-size: var(--terminal-font-lg);
    font-weight: bold;
}

.terminal-input {
    background: var(--bg-color);
    border: var(--terminal-border-width) solid var(--border-color);
    color: var(--text-color);
    font-size: var(--terminal-font-base);
    line-height: 1.4;
    max-width: 100%;
    min-width: 0;
    padding: var(--terminal-space-lg);
    width: 100%;
}

.terminal-textarea {
    min-height: var(--terminal-textarea-min-height);
    resize: vertical;
}

.terminal-input:focus-visible {
    border-color: var(--highlight-color);
    outline: var(--terminal-border-width) solid var(--highlight-color);
}

.terminal-button,
.terminal-action-link {
    background: none;
    border: 0;
    color: var(--highlight-color);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--terminal-font-lg);
    font-weight: bold;
    line-height: 1.2;
    max-width: 100%;
    padding: 0;
    text-decoration: none;
    width: fit-content;
}

.terminal-button:hover,
.terminal-button:focus-visible,
.terminal-action-link:hover,
.terminal-action-link:focus-visible {
    color: var(--text-color);
}

.terminal-form-errors,
.terminal-field-error {
    color: var(--footer-text-color);
    line-height: 1.4;
    margin: 0;
    overflow-wrap: anywhere;
}

.terminal-form-errors p {
    margin: 0;
}

.contact-form {
    max-width: var(--terminal-content-max-width);
    min-width: 0;
    width: 100%;
}

.contact-form .terminal-button {
    margin-bottom: var(--terminal-space-4xl-half);
}

.contact-form-grid {
    display: grid;
    gap: var(--terminal-space-3xl);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-captcha {
    width: 100%;
}

.contact-captcha-line {
    align-items: start;
    display: grid;
    gap: var(--terminal-space-3xl);
    grid-template-columns: minmax(0, 1fr) minmax(var(--terminal-captcha-min-width), var(--terminal-captcha-max-width));
    width: 100%;
}

.contact-captcha-challenge {
    color: var(--text-color);
    line-height: 1.4;
    overflow-wrap: anywhere;
    padding: var(--terminal-space-lg) 0;
}

.contact-prompt {
    color: var(--highlight-color);
    font-weight: bold;
}

.contact-captcha-answer {
    gap: var(--terminal-space-sm);
    justify-self: end;
    width: min(100%, var(--terminal-captcha-max-width));
}

.contact-captcha-answer .terminal-input {
    width: 100%;
}

.contact-feedback-success {
    color: var(--highlight-color);
}

.contact-honeypot {
    height: var(--terminal-border-width);
    left: -100vw;
    opacity: 0.01;
    position: absolute;
    width: var(--terminal-border-width);
}

.dashboard-grid {
    display: grid;
    gap: var(--terminal-space-2xl);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--terminal-dashboard-panel-min-width)), 1fr));
    padding-top: var(--terminal-space-sm);
}

.dashboard-panel {
    margin-bottom: 0;
}

.dashboard-column {
    display: flex;
    flex-direction: column;
    gap: var(--terminal-space-2xl);
    min-width: 0;
}

.dashboard-data {
    display: grid;
    gap: var(--terminal-space-lg) var(--terminal-space-3xl);
    grid-template-columns: minmax(var(--terminal-captcha-min-width), max-content) minmax(0, 1fr);
    line-height: 1.45;
    margin: 0;
}

.dashboard-data dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dashboard-actions {
    display: flex;
    flex-direction: column;
    gap: var(--terminal-space-xl);
}

.dashboard-client-list {
    display: flex;
    flex-direction: column;
    gap: var(--terminal-space-lg);
    list-style: none;
    margin: 0 0 var(--terminal-space-3xl);
    padding: 0;
}

.dashboard-client-item {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--terminal-space-md) var(--terminal-space-xl);
    min-width: 0;
}

.dashboard-client-link {
    overflow-wrap: anywhere;
}

.dashboard-client-status,
.dashboard-empty {
    color: var(--footer-text-color);
    line-height: 1.4;
    margin: 0;
    overflow-wrap: anywhere;
}

.service-status-list {
    display: flex;
    flex-direction: column;
    gap: var(--terminal-space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.service-status-item {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--terminal-space-md) var(--terminal-space-xl);
    justify-content: space-between;
    min-width: 0;
}

.service-status-name {
    color: var(--highlight-color);
    min-width: 0;
    overflow-wrap: anywhere;
}

.service-status-state {
    font-weight: bold;
    overflow-wrap: anywhere;
}

.service-status-active {
    color: lime;
}

.service-status-stopped {
    color: red;
}

.client-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--terminal-space-xl);
    margin-bottom: var(--terminal-space-3xl);
    padding-top: var(--terminal-space-sm);
}

.client-form {
    max-width: var(--terminal-content-max-width);
    width: 100%;
}

.client-form-grid {
    display: grid;
    gap: var(--terminal-space-3xl);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-form {
    max-width: 50%;
    width: 100%;
}

.service-form-grid {
    display: grid;
    gap: var(--terminal-space-3xl);
    grid-template-columns: minmax(0, 1fr);
}

.client-form-wide,
.service-form-wide {
    grid-column: 1 / -1;
}

.service-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--terminal-space-xl) var(--terminal-space-3xl);
}

.terminal-checkbox-row {
    align-items: center;
    display: flex;
    gap: var(--terminal-space-lg);
}

.terminal-checkbox {
    accent-color: var(--highlight-color);
    min-height: var(--terminal-space-5xl);
    min-width: var(--terminal-space-5xl);
}

.project-list {
    display: flex;
    flex-direction: column;
    gap: var(--terminal-space-lg);
    padding-top: var(--terminal-space-sm);
}

.project-item {
    align-items: flex-start;
    display: grid;
    gap: var(--terminal-space-4xl);
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 0;
    white-space: normal;
}

.project-item.has-image {
    grid-template-columns: minmax(var(--terminal-project-image-min-width), var(--terminal-project-image-max-width)) minmax(0, 1fr);
}

.project-media {
    border: var(--terminal-border-width) solid var(--border-color);
    margin: 0;
    width: 100%;
}

.project-media img {
    display: block;
    height: auto;
    object-fit: contain;
    width: 100%;
}

.project-content {
    min-width: 0;
}

.project-title {
    color: var(--highlight-color);
    font-size: var(--terminal-font-base);
    margin: 0 0 var(--terminal-space-lg);
    overflow-wrap: anywhere;
}

.project-description {
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
}

.project-description p,
.project-description ul,
.project-description ol,
.project-description pre {
    margin: 0 0 var(--terminal-space-lg);
}

.project-description p:last-child,
.project-description ul:last-child,
.project-description ol:last-child,
.project-description pre:last-child {
    margin-bottom: 0;
}

.project-description ul,
.project-description ol {
    padding-left: var(--terminal-space-7xl);
}

.project-description pre {
    font-family: inherit;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.project-description code,
.project-description a,
.ascii-art code,
.ascii-art a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.error-link {
    color: var(--highlight-color);
    display: inline-block;
    font-weight: bold;
    margin-top: var(--terminal-space-2xl);
    text-decoration: none;
}

.error-link:hover,
.error-link:focus-visible {
    color: var(--text-color);
}

.version-tag {
    color: var(--terminal-muted-color);
    font-size: var(--terminal-font-xs);
    padding-bottom: var(--terminal-space-sm);
    text-align: center;
}

@media (min-width: 48.0625rem) {
    body {
        display: flex;
        flex-direction: column;
    }

    .terminal-main {
        flex: 1 1 auto;
    }

    .contact-footer-layout {
        align-items: start;
        gap: var(--terminal-space-7xl);
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .contact-footer-content {
        margin-bottom: 0;
    }

    .contact-form {
        justify-self: stretch;
        max-width: none;
    }
}

@media (max-width: 48rem) {
    body {
        padding: var(--terminal-space-xl);
    }

    .terminal-box {
        margin-bottom: var(--terminal-space-6xl);
    }

    .ascii-art {
        font-size: var(--terminal-font-md);
    }

    .box-title {
        top: var(--terminal-title-offset-compact-negative);
    }

    .box-title,
    .lang-btn,
    .header-link,
    .terminal-section-link,
    .terminal-button,
    .terminal-action-link {
        font-size: var(--terminal-font-md);
    }

    .terminal-scroll {
        overflow-y: visible;
    }

    .terminal-scroll [data-layout="home-panels"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .terminal-scroll [data-layout="home-panels"] > div > p:first-child {
        font-size: var(--terminal-font-md);
        top: var(--terminal-title-offset-compact-negative);
    }

    .terminal-scroll [data-layout="home-panel-content"] {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .terminal-scroll [data-layout="home-panel-content"] pre {
        margin: 0 auto;
    }

    .terminal-scroll [data-layout="home-panel-content"] > p {
        width: 100%;
    }

    .project-item.has-image {
        grid-template-columns: minmax(0, 1fr);
    }

    .project-media {
        max-width: var(--terminal-project-image-mobile-max-width);
    }

    .dashboard-data {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .client-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .service-form {
        max-width: 100%;
    }

    .contact-captcha-line {
        align-items: stretch;
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-captcha-answer {
        justify-self: stretch;
        width: 100%;
    }
}

@media (max-width: 35rem) {
    .box-title {
        left: var(--terminal-space-sm);
        max-width: calc(100% - var(--terminal-space-xl));
    }

    .terminal-header-bar {
        align-items: flex-start;
        gap: var(--terminal-space-md);
        margin-top: var(--terminal-header-bar-offset-compact-negative);
    }

    .terminal-header-actions {
        justify-content: flex-start;
        margin-left: 0;
        padding: 0;
        width: 100%;
    }

    .terminal-header > .terminal-header-bar > .box-title {
        max-width: 100%;
    }

    .terminal-section-bar {
        gap: var(--terminal-space-md);
        margin-top: var(--terminal-header-bar-offset-compact-negative);
    }
}

@media (max-width: 26.25rem) {
    .ascii-art {
        font-size: var(--terminal-font-sm);
    }

    .decor {
        display: none;
    }
}