/* Layout widths are based on CSS pixels, so browser/OS scaling remains effective. */
:root { --site-content-width: 1200px; }
body.site-layout { background: #181211; }
.site-content-with-footer { width:100%; max-width:var(--site-content-width); min-width:0; margin:0 auto; display:flex; flex-direction:column; }
.site-layout .site-content-with-footer > .page-content { margin-top:0; padding-top:0; }
.site-layout .page-content .dcs-index-container { margin:0; }
.site-layout .site-content-with-footer > #local-text-workbench { margin-top:0; }
.site-layout #local-text-workbench:has(+ #site-icp-record),
.site-layout .page-content:has(+ #site-icp-record) { margin-bottom: 0; }
@media (min-width: 2200px) { :root { --site-content-width: 1440px; } }
@media (min-width: 3200px) { :root { --site-content-width: 1760px; } }

body.site-layout > .relative {
    min-height: 0;
    height: auto;
}
.site-layout .layout-content-container,
.site-layout .nav-bar,
.site-layout .user-activity-container,
.site-layout .main-content,
.site-layout .store-page {
    width: 100%;
    max-width: var(--site-content-width) !important;
    min-width: 0;
}
.site-layout .page-content { min-width: 0; }
.site-layout .nav-bar button { flex-shrink: 0; }
.site-layout .nav-right { flex-shrink: 0; }
.site-layout .modal-content,
.site-layout .merchandise-detail-content,
.site-layout .compile-modal-content {
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}
.site-layout .user-activity-container { overflow: hidden; }
.site-layout .activity-display { min-width: 0; }
.site-layout #current-activity { min-width: 0; overflow: hidden; }

/* One shared navigation-to-content rhythm on all five workbench/store pages. */
.site-layout .user-activity-container {
    height: 32px;
    min-height: 32px;
    margin: 0 auto 12px !important;
    box-sizing: border-box;
    background: #1c1d1e;
    border: 0;
    border-bottom: 1px solid #ffffff12;
}
.site-layout .user-activity-container + .page-content { padding-top: 0; margin-top: 0; }
.site-layout .page-content #local-text-workbench,
.site-layout .page-content > h1,
.site-layout .page-content > .step-content.active > .content-section { margin-top: 0; }
/* Match audio and kneeboard section headings to the text workbench. */
.site-layout .page-content .content-section > .section-header > h2,
.site-layout .store-page > h1 {
    font-family: "Microsoft YaHei", "Microsoft YaHei UI", sans-serif !important;
    font-size: 15px;
    font-weight: 600 !important;
    line-height: 1.5;
    letter-spacing: normal;
    margin: 0;
}
/* Store titles sit inside the same compact workbench shell. */
.site-layout .page-content.store-page {
    box-sizing: border-box;
    padding: 12px;
    margin-bottom: 24px;
    color: #ebebeb;
    background: #1c1d1e;
    border: 1px solid #ffffff0f;
    border-radius: 4px;
}
.site-layout .store-page > h1 { padding: 0 2px 12px; color: #ebebeb; }
.site-layout .store-page > .dcs-location-panel {
    padding: 10px;
    margin: 0;
    background: #222425;
    border: 0;
    border-radius: 6px;
    backdrop-filter: none;
}
.site-layout .store-page .merchandise-grid { padding: 0; gap: 12px; }
.site-layout .store-page .merchandise-item {
    min-width: 0;
    background: #2b2d2e;
    border-color: #ffffff0f;
    border-radius: 6px;
}
.site-layout .store-page .merchandise-item:hover {
    transform: translateY(-2px);
    border-color: #e5341966;
    box-shadow: 0 4px 12px #0003;
}
.site-layout .store-page .campaign-table-header { background: #2b2d2e; color: #b8bdc4; }
.site-layout .store-page .campaign-table-body { background: #222425; }
.campaign-pager { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 2px 2px; font-size:12px; color:#a3a5a7; }
.campaign-pager span { margin-right:auto; }
.campaign-pager button { background:#303234; color:#ebebeb; border:1px solid #ffffff0f; border-radius:4px; padding:5px 12px; cursor:pointer; }
.campaign-pager button:disabled { opacity:.4; cursor:default; }
.site-layout #campaign-store-list .campaign-table-body { max-height: max(192px, calc(100dvh - 330px)); overflow-y:auto; scrollbar-width:thin; }
@media (min-width: 769px) {
    .site-layout .store-page .campaign-table-header {
        align-items: center;
        min-height: 40px;
        padding: 5px 12px;
        box-sizing: border-box;
    }
    .site-layout .store-page .campaign-table-header > div {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-width: 0;
    }
    .site-layout .store-page .header-dropdown {
        height: 28px;
        padding: 2px 8px;
        font-size: 12px;
        text-align: center;
        max-width: 100%;
        box-sizing: border-box;
    }
    .site-layout .store-page .campaign-table-row {
        min-height: 64px;
        padding: 6px 12px;
        box-sizing: border-box;
    }
    .site-layout .store-page .campaign-thumbnail { width: 50px; height: 50px; }
    .site-layout .store-page .row-name { min-height: 0; min-width: 0; }
    .site-layout .store-page .row-aircraft,
    .site-layout .store-page .row-localization,
    .site-layout .store-page .row-type { text-align: center; }
    .site-layout .store-page .row-price { justify-content: center; padding-left: 0; }
}
.site-layout .activity-display { display: block !important; background: transparent; }
.site-layout .activity-display .activity-item {
    position: static;
    display: block;
    height: 32px;
    padding: 0 12px 0 25px;
    line-height: 32px;
    font-size: 12px;
    color: #9d9fa2;
    transform: none;
    transition: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    animation: site-activity-enter 450ms ease-out;
}
@keyframes site-activity-enter {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .site-layout .activity-display .activity-item { animation: none; }
}
.site-layout .activity-display::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 14px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #bd5141;
}
.site-layout .activity-display:focus-visible { outline: 1px solid #bd5141; outline-offset: -1px; }

/* Keep every existing navigation button reachable at browser zoom / narrow widths. */
@media (max-width: 1100px) {
    .site-layout .nav-bar {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        min-height: 54px;
    }
    .site-layout .nav-left,
    .site-layout .nav-right { flex-shrink: 0; }
    .site-layout .nav-center { min-width: 12px; }
    .site-layout header > div { padding-left: 16px !important; padding-right: 16px !important; }
    .site-layout header .layout-content-container { flex-wrap: wrap; gap: 12px; }
}