.EnchiOnline {
    position: relative;
    margin: 18px 0;
    padding: 0 16px 16px;

    background: #15151b;
    border: 1px solid #2e2e36;
    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 2px 10px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.02);
}

/* Pomarańczowy akcent */

.EnchiOnline__accent {
    position: absolute;
    top: 0;
    left: 16px;

    width: 90px;
    height: 3px;

    background: #ff7200;
    border-radius: 0 0 4px 4px;
}

/* Nagłówek */

.EnchiOnline__header {
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.EnchiOnline__heading {
    margin: 0;

    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

/* Przycisk */

.EnchiOnline__button {
    padding: 6px 12px;

    background: #202026;
    border: 1px solid #31313a;
    border-radius: 4px;

    color: #d8d8dd !important;
    text-decoration: none !important;

    font-size: 11px;
    font-weight: 600;

    transition: all .2s ease;
}

.EnchiOnline__button:hover {
    background: #292932;
    border-color: #ff7200;
    color: #fff !important;
}

/* Główna zawartość */

.EnchiOnline__body {
    display: flex;
    align-items: center;
    gap: 20px;

    padding: 18px 24px;

    background: #0c0c0f;
    border-radius: 10px;
}

/* Ikona */

.EnchiOnline__icon {
    width: 60px;
    min-width: 60px;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Duża zielona kropka */

.EnchiOnline__status {
    position: relative;

    width: 14px;
    height: 14px;

    border-radius: 50%;
    background: #3ddc65;

    box-shadow:
        0 0 10px rgba(61,220,101,.8),
        0 0 18px rgba(61,220,101,.5);
}

.EnchiOnline__status::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 14px;
    height: 14px;

    border-radius: 50%;
    background: rgba(61,220,101,.45);

    transform: translate(-50%, -50%);

    animation: EnchiOnlinePulse 2s infinite;
}

@keyframes EnchiOnlinePulse {

    0% {
        width: 14px;
        height: 14px;
        opacity: .8;
    }

    70% {
        width: 34px;
        height: 34px;
        opacity: 0;
    }

    100% {
        width: 34px;
        height: 34px;
        opacity: 0;
    }

}

/* Treść */

.EnchiOnline__content {
    flex: 1;
    min-width: 0;
}

.EnchiOnline__title {
    display: flex;
    align-items: center;

    margin-bottom: 6px;

    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

/* Mała zielona kropka przy liczniku */

.EnchiOnline__statusMini {
    width: 8px;
    height: 8px;

    margin-right: 8px;

    border-radius: 50%;
    background: #3ddc65;

    box-shadow: 0 0 8px rgba(61,220,101,.8);
}

.EnchiOnline__note {
    margin-bottom: 12px;

    color: #a7a7af;
    font-size: 11px;
    line-height: 1.6;
}

/* Lista użytkowników */

.EnchiOnline__users {
    position: relative;

    padding-left: 18px;

    color: #9f9fa7;
    font-size: 15px;
    line-height: 1.8;

    word-break: break-word;
}

.EnchiOnline__users::before {
    content: "↳";

    position: absolute;
    left: 0;
    top: -1px;

    color: #ff7200;

    font-size: 15px;
    font-weight: 700;
}

.EnchiOnline__users a {
    font-weight: 700;
    text-decoration: none;

    transition: all .2s ease;
}

.EnchiOnline__users a:hover {
    color: #ff7200 !important;
    text-shadow: 0 0 8px rgba(255,114,0,.4);
}

/* Mobile */

@media (max-width: 768px) {

    .EnchiOnline__body {
        padding: 16px;
        gap: 14px;
    }

    .EnchiOnline__icon {
        width: 40px;
        min-width: 40px;
    }

    .EnchiOnline__title {
        font-size: 13px;
    }

}