:root {
    --lx-bg: #f6f9fc;
    --lx-bg-soft: #eef5fb;
    --lx-panel: #ffffff;
    --lx-panel-2: #f8fbfe;
    --lx-line: #dbe7f2;
    --lx-text: #102033;
    --lx-muted: #6f8297;
    --lx-blue: #1477c9;
    --lx-blue-dark: #0f5f9f;
    --lx-cyan: #2a9fe8;
    --lx-green: #24a36a;
    --lx-orange: #e58a2a;
}

body {
    background:
        radial-gradient(circle at 80% 0%, rgba(20,119,201,.08), transparent 31rem),
        radial-gradient(circle at 8% 17%, rgba(42,159,232,.06), transparent 27rem),
        #f6f9fc;
    color: var(--lx-text);
}

main {
    overflow: hidden;
}

.lx-front {
    color: var(--lx-text);
}

.lx-front * {
    box-sizing: border-box;
}

.lx-hero,
.lx-section,
.lx-latest-member {
    width: min(1180px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

.lx-hero {
    padding: 72px 0 42px;
}

.lx-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
    gap: 58px;
    align-items: center;
}

.lx-eyebrow,
.lx-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--lx-blue);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .14em;
}

.lx-live-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    background: var(--lx-green);
    box-shadow: 0 0 0 5px rgba(36,163,106,.09), 0 0 13px rgba(36,163,106,.35);
}

.lx-hero h1 {
    margin: 17px 0 18px;
    max-width: 760px;
    font-size: clamp(3.2rem, 7vw, 6.2rem);
    line-height: .93;
    letter-spacing: -.06em;
    color: #102033;
}

.lx-hero h1 span {
    color: var(--lx-blue);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

.lx-hero-lead {
    max-width: 700px;
    margin: 0;
    color: #667b90;
    font-size: clamp(1rem, 1.7vw, 1.17rem);
    line-height: 1.7;
}

.lx-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 28px;
}

.lx-btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 0 20px;
    border-radius: 13px;
    text-decoration: none !important;
    font-weight: 900;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.lx-btn:hover {
    transform: translateY(-2px);
}

.lx-btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg, #1477c9, #2997df);
    box-shadow: 0 14px 30px rgba(20,119,201,.18);
}

.lx-btn-ghost {
    color: #174f7d !important;
    border: 1px solid #c9ddec;
    background: #ffffff;
}

.lx-hero-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
    color: #7b8da0;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .07em;
}

.lx-hero-terminal {
    overflow: hidden;
    border: 1px solid #d6e4ef;
    border-radius: 22px;
    background: #ffffff;
    box-shadow:
        0 24px 60px rgba(29,74,115,.12),
        inset 0 1px 0 rgba(255,255,255,.8);
}

.lx-terminal-bar {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    border-bottom: 1px solid #e5edf4;
    background: #f7fafc;
}

.lx-terminal-bar > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cad5df;
}

.lx-terminal-bar > span:first-child {
    background: #ff6b6b;
}

.lx-terminal-bar > span:nth-child(2) {
    background: #ffd166;
}

.lx-terminal-bar > span:nth-child(3) {
    background: #50c995;
}

.lx-terminal-bar b {
    margin-left: auto;
    color: #8295a8;
    font-size: .65rem;
    letter-spacing: .15em;
}

.lx-terminal-body {
    padding: 26px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #fff;
}

.lx-terminal-line {
    display: grid;
    grid-template-columns: 18px 105px 1fr;
    gap: 9px;
    padding: 7px 0;
    color: #7b8fa3;
    font-size: .82rem;
}

.lx-terminal-line strong {
    color: #18334c;
    font-weight: 700;
}

.lx-prompt {
    color: var(--lx-blue);
}

.lx-terminal-separator {
    height: 1px;
    margin: 18px 0;
    background: linear-gradient(90deg, rgba(20,119,201,.26), transparent);
}

.lx-terminal-room {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.lx-terminal-room div {
    padding: 12px;
    border: 1px solid #e1ebf3;
    border-radius: 11px;
    background: #f8fbfe;
}

.lx-terminal-room small,
.lx-terminal-room strong {
    display: block;
}

.lx-terminal-room small {
    margin-bottom: 4px;
    color: #8495a6;
    font-size: .59rem;
}

.lx-terminal-room strong {
    color: #17354e;
    font-size: .79rem;
}

.lx-terminal-cursor {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: #1c3b55;
    font-size: .84rem;
}

.lx-terminal-cursor i {
    width: 8px;
    height: 16px;
    display: inline-block;
    background: var(--lx-blue);
    animation: lxBlink 1s steps(1) infinite;
}

@keyframes lxBlink {
    50% { opacity: 0; }
}

.lx-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 62px;
    overflow: hidden;
    border: 1px solid #dbe7f2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(29,74,115,.07);
}

.lx-stats-strip article {
    padding: 20px 22px;
    border-right: 1px solid #e6eef5;
}

.lx-stats-strip article:last-child {
    border-right: 0;
}

.lx-stat-value {
    display: block;
    color: #0f5f9f;
    font-size: clamp(1.8rem, 4vw, 2.45rem);
    font-weight: 950;
    letter-spacing: -.04em;
}

.lx-stats-strip small {
    display: block;
    margin-top: 2px;
    color: #73869a;
    font-size: .74rem;
}

.lx-stats-note {
    margin: 9px 3px 0;
    color: #8b9cac;
    font-size: .68rem;
}

.lx-section {
    padding: 72px 0;
}

.lx-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.lx-section h2 {
    margin: 7px 0 0;
    color: #102033;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.lx-text-link {
    color: #1477c9 !important;
    text-decoration: none !important;
    font-size: .82rem;
    font-weight: 850;
}

.lx-channel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.lx-channel-card {
    position: relative;
    overflow: hidden;
    min-height: 275px;
    padding: 20px;
    border: 1px solid #dbe7f2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(29,74,115,.055);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.lx-channel-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -60px;
    top: -70px;
    border-radius: 50%;
    background: rgba(20,119,201,.055);
}

.lx-channel-card:hover {
    transform: translateY(-4px);
    border-color: #b7d5e9;
    box-shadow: 0 18px 40px rgba(29,74,115,.10);
}

.lx-channel-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lx-channel-hash {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #1477c9;
    background: #edf6fd;
    font-weight: 950;
}

.lx-channel-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7c8fa3;
    font-size: .58rem;
    font-weight: 950;
    letter-spacing: .1em;
}

.lx-channel-state i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lx-green);
}

.lx-channel-card h3 {
    margin: 23px 0 2px;
    color: #102033;
    font-size: 1.55rem;
    letter-spacing: -.03em;
}

.lx-channel-card > strong {
    color: #1477c9;
    font-size: .75rem;
}

.lx-channel-card p {
    min-height: 56px;
    margin: 14px 0 18px;
    color: #72869a;
    font-size: .82rem;
    line-height: 1.5;
}

.lx-channel-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.lx-channel-meta span {
    padding: 5px 8px;
    border-radius: 999px;
    color: #25825d;
    background: #eefaf5;
    font-size: .58rem;
    font-weight: 900;
}

.lx-channel-card > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid #e8eff5;
    color: #174f7d !important;
    text-decoration: none !important;
    font-size: .78rem;
    font-weight: 850;
}

.lx-webcam-section {
    width: min(100%, 100%);
    padding-left: max(16px, calc((100vw - 1180px) / 2));
    padding-right: max(16px, calc((100vw - 1180px) / 2));
    background:
        radial-gradient(circle at 80% 50%, rgba(20,119,201,.07), transparent 31rem),
        #edf5fb;
    border-top: 1px solid #dbe7f2;
    border-bottom: 1px solid #dbe7f2;
}

.lx-webcam-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr);
    gap: 65px;
    align-items: center;
}

.lx-webcam-copy > p {
    max-width: 620px;
    color: #6e8297;
    line-height: 1.65;
}

.lx-feature-list {
    display: grid;
    gap: 11px;
    margin-top: 25px;
}

.lx-feature-list div {
    display: grid;
    grid-template-columns: 43px 1fr;
    gap: 12px;
    align-items: start;
}

.lx-feature-list div > span {
    width: 37px;
    height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e8f4fc;
    color: #1477c9;
    font-size: .7rem;
    font-weight: 950;
}

.lx-feature-list p {
    margin: 6px 0 0;
    color: #708499;
    font-size: .84rem;
}

.lx-feature-list strong {
    color: #102033;
}

.lx-cam-stage {
    position: relative;
    min-height: 410px;
}

.lx-cam-window {
    position: absolute;
    border: 1px solid #cfe0ec;
    border-radius: 19px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 24px 55px rgba(29,74,115,.14);
}

.lx-cam-main {
    width: 78%;
    right: 0;
    top: 0;
}

.lx-cam-video {
    position: relative;
    min-height: 285px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(20,119,201,.13), transparent 10rem),
        linear-gradient(135deg, #edf6fd, #dfeef9);
}

.lx-cam-avatar {
    position: relative;
    z-index: 2;
    width: 108px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    color: #1477c9;
    border: 1px solid #bcd9ec;
    background: rgba(255,255,255,.78);
    font-size: 2.25rem;
    font-weight: 950;
    letter-spacing: -.06em;
}

.lx-cam-scan {
    position: absolute;
    inset: 0;
    opacity: .18;
    background: repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 3px,
        rgba(20,119,201,.035) 4px
    );
}

.lx-cam-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 15px;
    color: #71869a;
    font-size: .72rem;
    background: #fff;
}

.lx-cam-footer span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.lx-cam-footer i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lx-green);
}

.lx-cam-footer b {
    color: #d45656;
    font-size: .64rem;
}

.lx-cam-request {
    position: absolute;
    width: 55%;
    left: 0;
    bottom: 8px;
    z-index: 3;
    padding: 18px;
    border: 1px solid #d8e5ef;
    border-radius: 17px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 20px 45px rgba(29,74,115,.15);
}

.lx-cam-request small {
    color: #8496a7;
    font-size: .59rem;
    letter-spacing: .13em;
}

.lx-cam-request strong {
    display: block;
    margin-top: 7px;
    color: #17354e;
    font-size: .85rem;
    line-height: 1.4;
}

.lx-cam-request > div {
    display: flex;
    gap: 7px;
    margin-top: 14px;
}

.lx-cam-request span {
    flex: 1;
    padding: 8px 9px;
    border-radius: 9px;
    text-align: center;
    color: #6f8297;
    background: #eef3f7;
    font-size: .65rem;
    font-weight: 850;
}

.lx-cam-request .allow {
    color: #fff;
    background: #1477c9;
}

.lx-how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.lx-how-grid article {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 15px;
    padding: 22px;
    border: 1px solid #e0eaf2;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(29,74,115,.045);
}

.lx-how-grid article > span {
    color: #1477c9;
    font-size: .74rem;
    font-weight: 950;
}

.lx-how-grid h3 {
    margin: 0 0 7px;
    color: #102033;
    font-size: 1.1rem;
}

.lx-how-grid p {
    margin: 0;
    color: #74889c;
    font-size: .82rem;
    line-height: 1.55;
}

.lx-stats-teaser {
    border: 1px solid #cfe0ec;
    border-radius: 24px;
    padding: 38px;
    background:
        radial-gradient(circle at 90% 20%, rgba(20,119,201,.07), transparent 26rem),
        #ffffff;
    box-shadow: 0 16px 36px rgba(29,74,115,.07);
}

.lx-stats-teaser-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 50px;
    align-items: center;
}

.lx-stats-teaser p {
    max-width: 560px;
    color: #72869a;
    line-height: 1.6;
}

.lx-stats-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

.lx-stats-tags span {
    padding: 7px 9px;
    border: 1px solid #cfe0ec;
    border-radius: 8px;
    color: #1477c9;
    background: #f1f8fd;
    font-size: .59rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.lx-chart-demo {
    padding: 18px;
    border: 1px solid #d8e5ef;
    border-radius: 17px;
    background: #f8fbfe;
}

.lx-chart-head,
.lx-chart-footer {
    display: flex;
    justify-content: space-between;
    color: #7a8da0;
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .08em;
}

.lx-chart-head b {
    color: #1477c9;
}

.lx-chart-bars {
    height: 190px;
    display: flex;
    align-items: end;
    gap: 5px;
    margin: 25px 0 10px;
    padding-top: 10px;
    border-bottom: 1px solid #dce7ef;
    background:
        repeating-linear-gradient(
            180deg,
            #e9f0f6 0,
            #e9f0f6 1px,
            transparent 1px,
            transparent 48px
        );
}

.lx-chart-bars i {
    flex: 1;
    min-width: 4px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #55b6ed, #1477c9);
    opacity: .78;
    transform-origin: bottom;
}

.lx-chart-footer span:nth-child(2) {
    margin-left: auto;
    margin-right: auto;
}

.lx-final-cta {
    margin-top: 75px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 38px;
    border-radius: 22px;
    background: linear-gradient(135deg, #edf6fd, #f7fbfe);
    border: 1px solid #cfe0ec;
}

.lx-final-cta h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
}

.lx-final-cta p {
    margin: 9px 0 0;
    color: #73869a;
}

.lx-latest-member {
    margin-top: 25px;
    margin-bottom: 55px;
    text-align: center;
    color: #7e90a2;
    font-size: .74rem;
}

.lx-latest-member strong {
    color: #1477c9;
}

.lx-empty {
    grid-column: 1 / -1;
    padding: 30px;
    border: 1px solid #dbe7f2;
    border-radius: 17px;
    color: #74889c;
    text-align: center;
    background: #fff;
}

/* Existing global header/footer compatibility */
.top {
    border-bottom-color: #dbe7f2 !important;
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: blur(16px);
    box-shadow: 0 5px 18px rgba(29,74,115,.045);
}

.top .logo,
.top nav a {
    color: #17354e !important;
}

.top nav .pill {
    color: #fff !important;
    background: linear-gradient(135deg, #1477c9, #2997df) !important;
}

footer {
    color: #7c8ea0 !important;
    border-top-color: #dbe7f2 !important;
    background: #ffffff !important;
}

@media (max-width: 920px) {
    .lx-hero-grid,
    .lx-webcam-grid,
    .lx-stats-teaser-grid {
        grid-template-columns: 1fr;
    }

    .lx-hero-terminal {
        max-width: 620px;
    }

    .lx-channel-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .lx-cam-stage {
        max-width: 650px;
    }
}

@media (max-width: 680px) {
    .lx-hero,
    .lx-section,
    .lx-latest-member {
        width: min(100% - 20px, 1180px);
    }

    .lx-hero {
        padding-top: 48px;
    }

    .lx-hero h1 {
        font-size: clamp(2.8rem, 15vw, 4.6rem);
    }

    .lx-hero-grid {
        gap: 34px;
    }

    .lx-stats-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .lx-stats-strip article {
        border-right: 1px solid #e6eef5;
        border-bottom: 1px solid #e6eef5;
    }

    .lx-stats-strip article:nth-child(2n) {
        border-right: 0;
    }

    .lx-stats-strip article:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .lx-channel-grid,
    .lx-how-grid {
        grid-template-columns: 1fr;
    }

    .lx-section-head {
        align-items: start;
        flex-direction: column;
    }

    .lx-webcam-section {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .lx-cam-stage {
        min-height: 360px;
    }

    .lx-cam-main {
        width: 88%;
    }

    .lx-cam-request {
        width: 68%;
    }

    .lx-stats-teaser {
        padding: 24px 18px;
    }

    .lx-chart-bars {
        height: 145px;
    }

    .lx-final-cta {
        margin-top: 45px;
        flex-direction: column;
        align-items: stretch;
        padding: 27px 20px;
    }

    .lx-final-cta .lx-btn {
        width: 100%;
    }

    .lx-terminal-body {
        padding: 18px;
    }

    .lx-terminal-line {
        grid-template-columns: 16px 80px 1fr;
        font-size: .7rem;
    }
}

/* ================================================================
 * LXBG 7.3 - LxbgSTATS FRONT PAGE
 * ================================================================ */

.lx-stats-strip-live {
    grid-template-columns: repeat(6, 1fr);
}

.lx-stats-strip-live article:nth-child(6) {
    border-right: 0;
}

.lx-stat-network-peak {
    background: linear-gradient(145deg,#eff6ff,#fff);
}

.lx-stat-network-peak .lx-stat-value {
    color: #168cff;
}

.lx-front-service-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.lx-front-service-row > span,
.lx-front-service-row > a {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid #dbe7f2;
    border-radius: 999px;
    background: #fff;
    color: #65788b;
    font-size: .65rem;
    font-weight: 850;
}

.lx-front-service-row i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
}

.lx-front-service-row .is-good i {
    background: #22c55e;
}

.lx-front-service-row .is-good {
    color: #178548;
}

.lx-front-service-row .is-warn {
    color: #a16207;
}

.lx-front-service-row > a {
    margin-left: auto;
    color: #1477c9;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.lx-stats-is-live .lx-stats-open {
    margin-top: 22px;
}

.lx-stats-live-card {
    overflow: hidden;
    border: 1px solid #d8e5ef;
    border-radius: 18px;
    background: #f8fbfe;
}

.lx-stats-live-card > header,
.lx-stats-live-card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    color: #71869a;
    font-size: .66rem;
}

.lx-stats-live-card > header {
    border-bottom: 1px solid #e5edf5;
}

.lx-stats-live-card > footer {
    border-top: 1px solid #e5edf5;
}

.lx-stats-live-card > header > div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1477c9;
}

.lx-stats-live-rows {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

.lx-stats-live-rows > div {
    padding: 15px;
    border-right: 1px solid #e5edf5;
    border-bottom: 1px solid #e5edf5;
}

.lx-stats-live-rows > div:nth-child(2n) {
    border-right: 0;
}

.lx-stats-live-rows > div:nth-last-child(-n+2) {
    border-bottom: 0;
}

.lx-stats-live-rows span,
.lx-stats-live-rows strong {
    display: block;
}

.lx-stats-live-rows span {
    color: #8090a1;
    font-size: .67rem;
}

.lx-stats-live-rows strong {
    margin-top: 4px;
    color: #102033;
    font-size: 1.45rem;
    letter-spacing: -.04em;
}

@media (max-width: 1050px) {
    .lx-stats-strip-live {
        grid-template-columns: repeat(3, 1fr);
    }

    .lx-stats-strip-live article:nth-child(3) {
        border-right: 0;
    }

    .lx-stats-strip-live article:nth-child(-n+3) {
        border-bottom: 1px solid #e6eef5;
    }
}

@media (max-width: 620px) {
    .lx-stats-strip-live {
        grid-template-columns: repeat(2, 1fr);
    }

    .lx-stats-strip-live article {
        border-right: 1px solid #e6eef5;
        border-bottom: 1px solid #e6eef5;
    }

    .lx-stats-strip-live article:nth-child(2n) {
        border-right: 0;
    }

    .lx-stats-strip-live article:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .lx-front-service-row > a {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
}

/* ================================================================
 * LXBG 7.3.1 - LxbgSTATS PRO FRONT
 * ================================================================ */

.lx-front-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    margin-bottom: 6px;
}

.lx-front-stat-head small {
    margin: 0;
}

.lx-front-trend {
    min-height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .57rem;
    font-style: normal;
    font-weight: 950;
    white-space: nowrap;
}

.lx-front-trend.is-up {
    background: #ecfdf3;
    color: #178548;
}

.lx-front-trend.is-down {
    background: #fff1f2;
    color: #be123c;
}

.lx-front-trend.is-flat {
    background: #f1f5f9;
    color: #64748b;
}

.lx-front-trend.is-blue {
    background: #eff6ff;
    color: #0b69c7;
}

.lx-stats-pulse-line {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #e5edf5;
    background: #fff;
}

.lx-stats-pulse-line > span {
    min-width: 0;
    padding: 10px 9px;
    border-right: 1px solid #edf2f7;
    color: #8090a1;
    text-align: center;
    font-size: .59rem;
}

.lx-stats-pulse-line > span:last-child {
    border-right: 0;
}

.lx-stats-pulse-line b {
    display: block;
    margin-bottom: 2px;
    overflow: hidden;
    color: #334155;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lx-stats-live-card > footer b {
    color: #1477c9;
}

@media (max-width: 620px) {
    .lx-front-stat-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .lx-stats-pulse-line {
        grid-template-columns: 1fr;
    }

    .lx-stats-pulse-line > span {
        border-right: 0;
        border-bottom: 1px solid #edf2f7;
    }

    .lx-stats-pulse-line > span:last-child {
        border-bottom: 0;
    }
}

/* ================================================================
 * LXBG 8.3.0 — FRONTPAGE CLEANOUT
 * Align front page with navigation 8.2.3
 * ================================================================ */

.lx-hero {
    padding-top: 54px;
    padding-bottom: 32px;
}

.lx-hero-grid {
    gap: 42px;
}

.lx-hero h1 {
    margin-top: 14px;
    margin-bottom: 16px;
    font-size: clamp(3rem, 6.2vw, 5.45rem);
    line-height: .95;
}

.lx-hero-lead {
    max-width: 640px;
}

.lx-hero-terminal {
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(29,74,115,.10);
}

.lx-terminal-body {
    padding: 22px;
}

.lx-stats-strip {
    margin-top: 28px;
    border-radius: 17px;
    overflow: hidden;
}

.lx-front-service-row {
    margin-top: 8px;
}

.lx-section {
    margin-top: 58px;
}

.lx-section-head {
    margin-bottom: 20px;
}

.lx-channel-card,
.lx-how-grid article,
.lx-stats-live-card {
    border-radius: 14px;
}

.lx-channel-card {
    min-height: 0;
    padding: 19px;
}

.lx-channel-card p {
    min-height: 0;
}

.lx-webcam-section {
    padding-top: 34px;
    padding-bottom: 34px;
    border-radius: 22px;
}

.lx-webcam-grid {
    gap: 34px;
}

.lx-cam-stage {
    min-height: 360px;
}

.lx-cam-video {
    min-height: 245px;
}

.lx-cam-avatar {
    width: 92px;
    height: 92px;
    border-radius: 27px;
    font-size: 1.9rem;
}

.lx-cam-request {
    bottom: 0;
    padding: 16px;
}

.lx-how-grid article {
    padding: 19px;
}

.lx-stats-teaser {
    padding: 32px;
    border-radius: 20px;
}

.lx-stats-teaser-grid {
    gap: 38px;
}

.lx-final-cta {
    margin-top: 58px;
    padding: 31px;
    border-radius: 19px;
}

@media (max-width: 920px) {
    .lx-hero {
        padding-top: 42px;
    }

    .lx-hero-grid {
        gap: 30px;
    }

    .lx-section {
        margin-top: 46px;
    }

    .lx-stats-teaser-grid {
        gap: 28px;
    }
}

@media (max-width: 680px) {
    .lx-hero,
    .lx-section,
    .lx-latest-member {
        width: min(100% - 18px, 1180px);
    }

    .lx-hero {
        padding-top: 28px;
        padding-bottom: 22px;
    }

    .lx-eyebrow,
    .lx-section-kicker {
        font-size: .63rem;
        letter-spacing: .11em;
    }

    .lx-hero h1 {
        margin-top: 12px;
        font-size: clamp(2.5rem, 13.5vw, 3.9rem);
        line-height: .97;
    }

    .lx-hero-lead {
        font-size: .96rem;
        line-height: 1.58;
    }

    .lx-hero-actions {
        margin-top: 21px;
        gap: 8px;
    }

    .lx-hero-actions .lx-btn {
        width: 100%;
        min-height: 48px;
    }

    .lx-hero-mini {
        gap: 8px 11px;
        margin-top: 17px;
        font-size: .61rem;
    }

    .lx-hero-terminal {
        border-radius: 15px;
    }

    .lx-terminal-bar {
        min-height: 42px;
        padding: 0 13px;
    }

    .lx-terminal-body {
        padding: 15px;
    }

    .lx-terminal-line {
        grid-template-columns: 14px 68px 1fr;
        gap: 6px;
        font-size: .64rem;
    }

    .lx-terminal-room {
        gap: 6px;
    }

    .lx-terminal-room div {
        padding: 9px 7px;
    }

    .lx-stats-strip-live {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lx-front-service-row {
        gap: 5px;
    }

    .lx-front-service-row > span,
    .lx-front-service-row > a {
        min-height: 28px;
        padding: 0 8px;
        font-size: .59rem;
    }

    .lx-front-service-row > a {
        margin-left: 0;
    }

    .lx-section {
        margin-top: 39px;
    }

    .lx-section-head {
        margin-bottom: 14px;
    }

    .lx-channel-card {
        padding: 17px;
    }

    .lx-webcam-section {
        width: min(100% - 18px, 1180px);
        padding: 24px 14px;
        border-radius: 17px;
    }

    .lx-cam-stage {
        min-height: 300px;
    }

    .lx-cam-main {
        width: 94%;
    }

    .lx-cam-video {
        min-height: 205px;
    }

    .lx-cam-request {
        width: 76%;
        padding: 13px;
    }

    .lx-how-grid article {
        padding: 16px;
    }

    .lx-stats-teaser {
        padding: 21px 15px;
        border-radius: 17px;
    }

    .lx-stats-live-rows > div {
        padding: 12px;
    }

    .lx-final-cta {
        margin-top: 39px;
        padding: 23px 17px;
        border-radius: 17px;
    }

    .lx-latest-member {
        margin-bottom: 35px;
    }
}

/* LXBG 11.1 - frontpage live channel presence */
.lx-online-channels{margin-top:24px;padding:22px;border:1px solid #dcebf5;border-radius:24px;background:linear-gradient(135deg,#fff,#f2f9ff);box-shadow:0 14px 38px rgba(22,91,139,.08)}
.lx-online-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.lx-online-head h3{margin:.25rem 0 0;font-size:clamp(1.45rem,3vw,2rem)}
.lx-online-live{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#eefaf3;color:#16834a;font-size:.78rem;font-weight:900;letter-spacing:.08em}
.lx-online-live i,.lx-online-user i{width:8px;height:8px;border-radius:50%;background:#20b968;box-shadow:0 0 0 4px rgba(32,185,104,.12);flex:0 0 auto}
.lx-online-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lx-online-room{min-width:0;padding:16px;border:1px solid #e2edf5;border-radius:18px;background:#fff}
.lx-online-room header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:11px;margin-bottom:9px;border-bottom:1px solid #edf2f6}
.lx-online-room header strong{font-size:1.08rem;color:#087fc7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lx-online-room header span{font-size:.78rem;color:#71818e;white-space:nowrap}
.lx-online-users{display:flex;flex-wrap:wrap;gap:8px}
.lx-online-user{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:8px 10px;border-radius:12px;background:#f5f9fc;color:#172331;text-decoration:none;font-weight:800;font-size:.88rem}
.lx-online-user span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lx-online-user b{font-size:.85rem}
.lx-online-empty{padding:18px;border-radius:16px;background:#f6f9fb;color:#71818e;text-align:center}
@media(max-width:800px){.lx-online-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lx-online-channels{padding:17px 14px;border-radius:20px}.lx-online-head{align-items:center}.lx-online-grid{grid-template-columns:1fr}.lx-online-room{padding:14px}.lx-online-user{font-size:.84rem}}

/* QuizServ V2 frontpage */
.lx-quiz-front{position:relative;overflow:hidden}.lx-quiz-front:before{content:"";position:absolute;inset:auto -120px -160px auto;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(71,112,255,.16),transparent 68%);pointer-events:none}.lx-quiz-front .lx-section-head p{max-width:720px}.lx-quiz-front-grid{display:grid;grid-template-columns:.85fr 1.15fr 1fr;gap:16px;margin-top:22px}.lx-quiz-panel{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:20px;min-width:0}.lx-quiz-lead{display:flex;gap:16px;align-items:center}.lx-quiz-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;background:rgba(96,122,255,.15);font-size:29px;flex:0 0 auto}.lx-quiz-lead small{display:block;opacity:.62;font-size:.72rem;letter-spacing:.12em}.lx-quiz-lead strong{display:block;font-size:2.25rem;line-height:1.05;margin:5px 0}.lx-quiz-lead p,.lx-quiz-last,.lx-quiz-empty{margin:6px 0 0;opacity:.72}.lx-quiz-panel-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}.lx-quiz-panel-head span{font-size:.76rem;opacity:.58}.lx-quiz-ranking{list-style:none;padding:0;margin:0;display:grid;gap:8px}.lx-quiz-ranking li{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.04)}.lx-quiz-ranking b{white-space:nowrap}.lx-quiz-rank{text-align:center}.lx-quiz-command-cloud{display:flex;flex-wrap:wrap;gap:8px}.lx-quiz-command-cloud code{padding:8px 10px;border-radius:10px;background:rgba(78,113,255,.13);border:1px solid rgba(105,135,255,.18);font-size:.82rem}.lx-quiz-last{margin-top:14px;font-size:.88rem}@media(max-width:900px){.lx-quiz-front-grid{grid-template-columns:1fr 1fr}.lx-quiz-lead{grid-column:1/-1}}@media(max-width:620px){.lx-quiz-front-grid{grid-template-columns:1fr}.lx-quiz-lead{grid-column:auto}.lx-quiz-front .lx-section-head{align-items:flex-start}.lx-quiz-front .lx-btn{width:100%;justify-content:center}.lx-quiz-panel{padding:16px}}