/* Adds a browser language preference; existing business control styles stay intact. */
.eliteos-language-control[hidden] { display: none !important; }
.eliteos-language-control {
    display: grid; gap: .3rem; min-width: 10rem; max-width: 20rem;
    color: var(--es-text,#1c2736); font-size: .8rem;
}
.eliteos-language-control label { font-size:.73rem; font-weight:700; color:var(--es-muted,#5c697a); }
.eliteos-language-control select { min-height:2.5rem; width:100%; min-width:0; padding:.4rem 2rem .4rem .65rem; border:1px solid var(--es-input-border,#98a2b1); border-radius:5px; background:var(--es-input,#fff); color:var(--es-text,#1c2736); font-size:.82rem; }
.eliteos-language-help { font-size:.72rem; line-height:1.35; color:var(--es-muted,#5c697a); overflow-wrap:anywhere; }
.eliteos-preference-controls { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.eliteos-preference-controls > * { flex: 1 1 10rem; }
.eliteos-skin-auth .eliteos-preference-controls { justify-content: flex-end; }
.eliteos-preference-controls:not(:has(> :not([hidden]))) { display:none; }
.eliteos-skin-auth:not(:has(.eliteos-skin-control:not([hidden]),.eliteos-language-control:not([hidden]))) { display:none; }
.control-login-page .eliteos-skin-auth .eliteos-language-help { color:var(--es-muted,#dcecf6); }
html[lang="zh-CN"] body { font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
@media (max-width: 600px) {
    .eliteos-preference-controls { width: 100%; gap: .7rem; }
    .eliteos-language-control { max-width: none; }
}
@media print { .eliteos-language-control { display: none !important; } }

/* The existing controls become the first row below the mobile menu header.
 * Keep them in page flow, not in the sticky header: existing list/filter offsets
 * and navigation overlays must retain their height and behavior. */
@media screen and (max-width: 980px) {

    .app-page .page-header > .eliteos-preference-controls {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start; gap: .5rem; order: -1; flex: 0 0 100%; width: 100%;
        padding-bottom: .65rem; border-bottom: 1px solid var(--es-border, #d9e1eb);
    }
    .app-page .page-header .eliteos-preference-controls > :is(.eliteos-skin-control, .eliteos-language-control) {
        display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
        gap: 0 .25rem; width: auto; min-width: 0; max-width: none; margin: 0; position: relative;
    }
    .app-page .page-header .eliteos-preference-controls > .eliteos-language-control {
        padding-inline-start: .5rem; border-inline-start: 1px solid var(--es-border, #98a2b1);
    }
    .app-page .page-header .eliteos-preference-controls label {
        margin: 0; font-size: .75rem; line-height: 1.3; letter-spacing: 0; white-space: nowrap;
    }
    .app-page .page-header .eliteos-preference-controls label::after { content: ":"; }
    .app-page .page-header .eliteos-preference-controls select {
        width: 100%; min-width: 0; max-width: 100%; min-height: 2.75rem;
        padding: .35rem 1rem .35rem .25rem; font-size: .875rem;
        appearance: none; text-overflow: ellipsis;
    }
    .app-page .page-header .eliteos-preference-controls > :is(.eliteos-skin-control, .eliteos-language-control)::after {
        content: ""; position: absolute; pointer-events: none; top: 1.1rem; right: .4rem;
        width: .3rem; height: .3rem; border: solid var(--es-text, #1c2736);
        border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
    }
    .app-page .page-header .eliteos-preference-controls :is(.eliteos-skin-help, .eliteos-language-help):not([data-preference-error]) {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
    }
    .app-page .page-header .eliteos-preference-controls [data-preference-error] {
        grid-column: 1 / -1; margin-top: .4rem;
    }
    .app-page .page-header .eliteos-preference-controls > [hidden],
    .app-page .page-header > .eliteos-preference-controls:not(:has(> :not([hidden]))) { display: none; }
}
@media screen and (max-width: 900px) {

    .control-page .control-header > .eliteos-preference-controls {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start; gap: .5rem; order: -1; flex: 0 0 100%; width: 100%;
        padding-bottom: .65rem; border-bottom: 1px solid var(--es-border, #d9e1eb);
    }
    .control-page .control-header .eliteos-preference-controls > :is(.eliteos-skin-control, .eliteos-language-control) {
        display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
        gap: 0 .25rem; width: auto; min-width: 0; max-width: none; margin: 0; position: relative;
    }
    .control-page .control-header .eliteos-preference-controls > .eliteos-language-control {
        padding-inline-start: .5rem; border-inline-start: 1px solid var(--es-border, #98a2b1);
    }
    .control-page .control-header .eliteos-preference-controls label {
        margin: 0; font-size: .75rem; line-height: 1.3; letter-spacing: 0; white-space: nowrap;
    }
    .control-page .control-header .eliteos-preference-controls label::after { content: ":"; }
    .control-page .control-header .eliteos-preference-controls select {
        width: 100%; min-width: 0; max-width: 100%; min-height: 2.75rem;
        padding: .35rem 1rem .35rem .25rem; font-size: .875rem;
        appearance: none; text-overflow: ellipsis;
    }
    .control-page .control-header .eliteos-preference-controls > :is(.eliteos-skin-control, .eliteos-language-control)::after {
        content: ""; position: absolute; pointer-events: none; top: 1.1rem; right: .4rem;
        width: .3rem; height: .3rem; border: solid var(--es-text, #1c2736);
        border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
    }
    .control-page .control-header .eliteos-preference-controls :is(.eliteos-skin-help, .eliteos-language-help):not([data-preference-error]) {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
    }
    .control-page .control-header .eliteos-preference-controls [data-preference-error] {
        grid-column: 1 / -1; margin-top: .4rem;
    }
    .control-page .control-header .eliteos-preference-controls > [hidden],
    .control-page .control-header > .eliteos-preference-controls:not(:has(> :not([hidden]))) { display: none; }
}
@media screen and (max-width: 360px) {
    .app-page .page-header > .eliteos-preference-controls,
    .control-page .control-header > .eliteos-preference-controls {
        margin-inline: -.625rem; width: calc(100% + 1.25rem); flex-basis: calc(100% + 1.25rem);
    }
}