.tui-header .tui-NavHeader.simulated-online-header {
    --home-header-unit: clamp(0.5px, 0.1333333333vw, 0.8px);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo online language";
    align-items: center;
    gap: calc(16 * var(--home-header-unit));
    height: auto;
    min-height: calc(100 * var(--home-header-unit));
    padding: calc(16 * var(--home-header-unit)) calc(36 * var(--home-header-unit));
}
.tui-header .tui-NavHeader.simulated-online-header .tui-img {
    grid-area: logo;
    width: calc(188 * var(--home-header-unit)) !important;
    height: calc(54 * var(--home-header-unit)) !important;
    flex-shrink: 0;
}
.tui-header .tui-NavHeader.simulated-online-header .tui-img uni-image {
    width: 100%;
    height: 100%;
}
.tui-header .tui-NavHeader.simulated-online-header .tui-img uni-image > div {
    background-size: 100% 100% !important;
}
.tui-header .tui-NavHeader.simulated-online-header .online-num {
    grid-area: online;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(4 * var(--home-header-unit)) calc(8 * var(--home-header-unit));
    min-width: 0;
    color: #555;
    font-size: calc(24 * var(--home-header-unit));
    line-height: calc(36 * var(--home-header-unit));
}
.tui-header .tui-NavHeader.simulated-online-header .online-main {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.tui-header .tui-NavHeader.simulated-online-header .online-dot {
    width: calc(14 * var(--home-header-unit));
    height: calc(14 * var(--home-header-unit));
    margin-right: calc(8 * var(--home-header-unit));
    border-radius: 50%;
    background: #b4bcc7;
    flex: 0 0 calc(14 * var(--home-header-unit));
}
.tui-header .tui-NavHeader.simulated-online-header .online-ready .online-dot {
    background: #00c853;
}
.tui-header .tui-NavHeader.simulated-online-header .online-value {
    display: inline-block;
    min-width: 6ch;
    font-variant-numeric: tabular-nums;
    animation: simulated-online-fade 200ms ease-out;
}
.tui-header .tui-NavHeader.simulated-online-header .online-note {
    display: none;
    color: #6b7280;
    font-size: calc(20 * var(--home-header-unit));
    white-space: nowrap;
}
.tui-header .tui-NavHeader.simulated-online-header .tui-right {
    grid-area: language;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: calc(80 * var(--home-header-unit));
    padding: 8px;
    max-width: clamp(120px, 30vw, 240px);
}
.tui-header .tui-NavHeader.simulated-online-header .tui-right uni-image {
    width: calc(40 * var(--home-header-unit));
    height: calc(40 * var(--home-header-unit));
    flex: 0 0 calc(40 * var(--home-header-unit));
}
.tui-header .tui-NavHeader.simulated-online-header .tui-right uni-text {
    padding-left: 0;
    min-width: 0;
    font-size: calc(32 * var(--home-header-unit));
    line-height: 1.4;
    overflow-wrap: anywhere;
}
@media (max-width: 479px) {
    .tui-header .tui-NavHeader.simulated-online-header {
        --home-header-unit: clamp(0.4266666667px, 0.1333333333vw, 0.64px);
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "logo online language";
        gap: 6px;
        padding: 8px clamp(10px, 2.7vw, 13px);
    }
    .tui-header .tui-NavHeader.simulated-online-header .online-num {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        font-size: max(12px, calc(24 * var(--home-header-unit)));
        line-height: 1.4;
    }
    .tui-header .tui-NavHeader.simulated-online-header .online-main {
        display: block;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .tui-header .tui-NavHeader.simulated-online-header .online-dot {
        display: inline-block;
        vertical-align: middle;
    }
    .tui-header .tui-NavHeader.simulated-online-header .online-value {
        min-width: 0;
        white-space: nowrap;
    }
    .tui-header .tui-NavHeader.simulated-online-header .online-note {
        font-size: max(10px, calc(20 * var(--home-header-unit)));
        line-height: 1.4;
    }
    .tui-header .tui-NavHeader.simulated-online-header .tui-right {
        width: clamp(100px, 31vw, 150px);
        max-width: none;
        min-width: 0;
        min-height: 44px;
        padding: 4px;
        gap: 4px;
    }
}
@keyframes simulated-online-fade {
    from { opacity: 0.55; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .tui-header .tui-NavHeader.simulated-online-header .online-value { animation: none; }
}
