.about-system {
    &__title {
        font-size: var(--h3);
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: var(--text);
    }

    &__description {
        color: var(--text-400);
        margin-bottom: 1.5rem;
        font-size: var(--p);
    }

    &__support-banner {
        background: linear-gradient(to right, var(--accent), var(--primary));
        border-radius: var(--border1);
        padding: 1.25rem 1.5rem;
        margin-bottom: 1.5rem;
        color: var(--accent-900);
        position: relative;
        overflow: hidden;

        h2 {
            font-size: var(--h4);
            font-weight: 600;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        p {
            margin-bottom: 1rem;
            max-width: 800px;
            opacity: 0.9;
        }
    }

    &__support-actions {
        display: flex;
        gap: 0.75rem;

        @media (max-width: 576px) {
            flex-direction: column;
        }
    }

    &__btn {
        @extend .btn;

        .icon {
            margin-right: 0.5rem;
        }

        &--primary {
            background-color: var(--primary-900);
            color: var(--accent);
        }
    }

    &__panels {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 1.5rem;

        @media (max-width: 767px) {
            grid-template-columns: 1fr;
        }
    }

    &__panel {
        @extend .card;
        padding: 1.25rem;
        border: 1px solid var(--transp-05);

        &--full {
            grid-column: 1 / -1;
        }

        &-title {
            display: flex;
            align-items: center;
            font-size: var(--h6);
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--text);
            gap: 0.5rem;
        }
    }

    &__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 0.75rem;

        &--server {
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        }

        &-item {
            padding: 0.7rem 0.75rem;
            background-color: var(--transp-1);
            border-radius: var(--border05);
            border-left: 2px solid transparent;

            &--warning {
                .about-system__grid-label {
                    color: var(--warning);
                }
            }
        }

        &-label {
            font-size: var(--small);
            color: var(--text-400);
            margin-bottom: 0.25rem;
            display: flex;
            align-items: center;

            .icon {
                margin-left: 0.25rem;
                color: var(--warning);
                font-size: var(--p);
                flex-shrink: 0;
                cursor: help;
            }
        }

        &-value {
            font-weight: 500;
            font-size: var(--p-small);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            a {
                color: var(--accent);

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

    &__requirements {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 0.75rem;

        &-item {
            display: flex;
            align-items: flex-start;
            padding: 0.75rem;
            background-color: var(--transp-1);
            border-radius: var(--border05);
            border-left: 2px solid transparent;

            &--loaded,
            &-icon {
                color: var(--success);
            }

            &--not-loaded {
                border-left: 2px solid var(--error);

                &.about-system__requirements-item--required {
                    background-color: var(--error-light);
                }

                .about-system__requirements-icon {
                    color: var(--error);
                }
            }

            &--warning {
                border-left: 2px solid var(--warning);

                .about-system__requirements-icon {
                    color: var(--warning);
                }
            }
        }

        &-icon {
            margin-right: 0.75rem;
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        &-content {
            flex: 1;
            min-width: 0;
        }

        &-name {
            font-weight: 500;
            margin-bottom: 0.25rem;
            font-size: var(--p-small);
            display: flex;
            align-items: center;

            .icon {
                margin-left: 0.25rem;
                color: var(--info);
                font-size: 0.85em;
                cursor: help;
            }
        }

        &-description {
            font-size: var(--small);
            color: var(--text-400);
            line-height: 1.4;
        }

        &-required {
            display: inline-flex;
            margin-left: 0.25rem;
        }
    }

    &__health {
        display: grid;
        gap: 1rem;

        @media (max-width: 767px) {
            grid-template-columns: 1fr;
        }

        &-item {
            background-color: var(--transp-1);
            border-radius: var(--border05);
            padding: 1rem;
        }

        &-label {
            font-size: var(--p-small);
            font-weight: 500;
            margin-bottom: 0.75rem;
            color: var(--text);
        }

        &-bar {
            height: 8px;
            background-color: var(--transp-1);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 0.5rem;
        }

        &-bar-fill {
            height: 100%;
            background-color: var(--primary);
            border-radius: 4px;

            &--success {
                background-color: var(--success);
            }

            &--warning {
                background-color: var(--warning);
            }

            &--error {
                background-color: var(--error);
            }
        }

        &-value {
            font-size: var(--small);
            color: var(--text-400);
            text-align: right;
        }
    }

    &__badge {
        @extend .badge;

        &--success {
            background-color: var(--success-light);
            color: var(--success);
        }

        &--warning {
            background-color: var(--warning-light);
            color: var(--warning);
        }
    }
}