.bottom-controls.sip-active {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

/* SIP controls (Short Interest) */
/* SIP controls (Short Interest) */
.sip-controls-wrapper {
    display: flex;
    width: 100%;
    gap: 20px;
    margin: 0;
    padding-right: 16px;
    align-items: center;
}

.sip-control {
    background: #1f1f2600;
    border-radius: 10px;
    padding: 8px 10px;
    flex: 1;
    margin-bottom: 0;
}

.sip-control+.sip-control {
    margin-top: 0;
}

.sip-divider {
    width: 1px;
    height: 48px;
    background: #FFFFFF1A;
    flex-shrink: 0;
}

.sip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: var(--color-text-primary);
}

.sip-title {
    opacity: .8;
    font-size: 12px;
}

.sip-value {
    font-weight: 600;
    font-size: 12px
}

.sip-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
}

.sip-range {
    flex: 1;
    appearance: none;
    height: 4px;
    border-radius: 3px;
    background: var(--color-button-secondary);
}

/*body.light .sip-range {*/
/*    flex: 1;*/
/*    appearance: none;*/
/*    height: 4px;*/
/*    border-radius: 3px;*/
/*    background: #89898d;*/
/*}*/

.sip-range::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 20%;
    background: var(--color-icon-toggle-active);
    cursor: pointer;
    margin-top: -3px
}

/*body.light .sip-range::-webkit-slider-thumb {*/
/*    appearance: none;*/
/*    width: 12px;*/
/*    height: 12px;*/
/*    border-radius: 20%;*/
/*    background: var(--color-bg-ss-pill);*/
/*    cursor: pointer;*/
/*    margin-top: -3px*/
/*}*/

.sip-scale-row {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-primary);
    font-size: 10px
}

#main-block {
    width: calc(50% - 16px);
    height: 100%;
    border: 1px solid var(--color-border-primary);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    overflow: hidden;
}

#main-block .content-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}


#main-block .filters-container {
    width: 100%;
    height: 106px;
    padding: 16px calc(16px + 33px + 4px) 16px 16px;
    display: flex;
    gap: 8px 16px;
    flex-wrap: wrap;
    justify-content: flex-start;

}

#main-block .filters-container .item {
    padding: 0 12px;
    height: 33px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    transition: 250ms;
    cursor: pointer;
}

#main-block .filters-container .item:hover {
    background: var(--color-button-primary);
}

/*body.light #main-block .filters-container .item:hover {*/
/*    color: var(--color-text-main-white);*/
/*}*/

#main-block .filters-container .item.active {
    background-color: var(--color-button-accent);
    color: var(--color-text-button-accent);
}


#main-block .upper-buttons-container {
    width: 100%;
    height: 72px;
    /*padding: 0 16px 16px;*/
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    padding: 16px;
    position: absolute;
    left: 20px;
    top: 64px;
}

/* Hide container by default, but show when market map is active */
#main-block .upper-buttons-container:not(:has(.mmap-toggle-btn[style*="block"])) {
    display: none;
}

/* Show container when market map toggle button is visible */
#main-block .upper-buttons-container:has(.mmap-toggle-btn[style*="block"]) {
    display: flex;
}

#main-block .upper-buttons-container button {
    background: var(--color-bg-semi);
    width: 100px;
    height: 40px;
    border-radius: 8px;
    outline: none;
    border: none;
    cursor: pointer;
    display: flex;
    transition: 250ms;
    align-items: center;
    justify-content: center;
}

#main-block .upper-buttons-container .open-pop-up-segments-assets {
    display: none
}

#main-block .upper-buttons-container .open-pop-up-segments-assets.show {
    display: flex;
}

/* Market Map 2D/3D toggle button */
.mmap-toggle-btn {
    width: 100px;
    padding: 8px 16px;
    background: #222;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
    transition: background 0.2s;
    transform: translateZ(-3px);
    will-change: transform;
    transform-style: preserve-3d;
}

.mmap-toggle-btn:hover {
    background: #333;
}

/* Texture toggle button */
.texture-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.texture-toggle-btn .texture-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    /* Make icon white */
}

.mmap-toggle-btn:active {
    background: #444;
}

#main-block .upper-buttons-container button:hover {
    background: var(--color-bg-light);
}

#main-block .title-and-date {
    width: 100%;
    ;
    padding: 0 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    color: var(--color-text-primary);
}

#main-block .title-and-date h2 {
    font-size: 18px;
}

#main-block .title-and-date p {
    font-size: 12px;
}

@media (max-width: 1440px) {
    #main-block .title-and-date h2 {
        font-size: 14px
    }

    #main-block .title-and-date p {
        font-size: 10px
    }
}


#main-block-hover-pop-up {
    position: absolute;
    width: 165px;
    left: 16px;
    top: 240px;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-popup);
    border-radius: 8px;
    padding: 8px 0;
    display: none;
    pointer-events: none;
}

#main-block-hover-pop-up.show {
    display: block;
    z-index: 1000 !important;
}

#main-block-hover-pop-up.full {
    display: block
}
#main-block-hover-pop-up.loading-logo .full-name img {
    opacity: 0;
}

#main-block-hover-pop-up .short-form,
#main-block-hover-pop-up .full-form {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

#main-block-hover-pop-up .full-form {
    display: none;
}

#main-block-hover-pop-up.full .short-form {
    display: none;
}

#main-block-hover-pop-up.full .full-form {
    display: flex;
}

#main-block-hover-pop-up .row {
    width: 100%;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#main-block-hover-pop-up .row .item {
    width: calc(50% - 4px);
}

#main-block-hover-pop-up .row .item.name {
    text-align: right;
    color: var(--color-text-tertiary);
    font-size: 12px;
    font-weight: 400;
}

/*body.light #main-block-hover-pop-up .row .item.name {*/
/*    color: #11111180;*/
/*}*/

#main-block-hover-pop-up .row .item.value {
    text-align: left;
    color: var(--color-text-primary);
    font-size: 12px;
    font-weight: 400;
}

#main-block-hover-pop-up .row .item.value.no-data {
    color: var(--color-text-tertiary);
}

#main-block-hover-pop-up .tip {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 600;
}

#main-block-hover-pop-up .date {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-text-primary);
}


#main-block-hover-pop-up .full-name {
    width: 100%;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

#main-block-hover-pop-up .full-name img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

#main-block-hover-pop-up .full-name h4 {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-text-primary);
}



#main-block .chart-wrapper {
    width: 100%;
    /*height: calc(100% - 6px * 2 - 106px - 192px);*/
    height: 100%;
    position: relative;
    overflow: hidden;
    flex: 1;
    min-height: 350px;
    z-index: 1;
}

#main-block .fullscreen-toggle {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--color-button-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: background 0.2s ease, transform 0.3s ease;
}

#main-block .fullscreen-toggle img {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

body.cb-light #main-block .fullscreen-toggle img,
body.light #main-block .fullscreen-toggle img {
    filter: invert(1);
}

#main-block .fullscreen-toggle:hover {
    /*background: var(--color-bg-light);*/
    border: 1px solid var(--color-border-hover);
}

#main-block .fullscreen-toggle[aria-pressed="true"] {
    transform: scale(0.93);
}

#main-block .chart-wrapper a-scene {
    width: 100%;
    height: 100%;
    display: block;
}

.fullscreen-caption {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    display: none;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
    /*text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);*/
}

.fullscreen-caption h2 {
    font-size: 18px;
    line-height: 1.2;
    margin: 0;
    color: var(--color-text-primary);
}

/* Note: Caption text stays white because fullscreen mode background is overridden to dark or full screen content specific */

.fullscreen-caption p {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.04em;
    opacity: 0.8;
    color: var(--color-text-tertiary)
}

body.chart-fullscreen .fullscreen-caption,
body.chart-fullscreen-transition .fullscreen-caption {
    display: flex;
}

body.chart-fullscreen {
    overflow: hidden;
}

body.chart-fullscreen #main-block .chart-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    border: none;
    padding: 24px;
    z-index: 1100;
    /*box-shadow: 0 0 120px rgba(0, 0, 0, 0.75);*/
    background: var(--color-bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fullscreen close button mirrors the fullscreen toggle but only in fullscreen mode */
#main-block .fullscreen-close {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: var(--color-button-primary);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 12;
    /*box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);*/
    transition: background 0.2s ease, transform 0.3s ease;
}

#main-block .fullscreen-close img {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

body.cb-light #main-block .fullscreen-close img,
body.light #main-block .fullscreen-close img {
    filter: invert(1);
}

#main-block .fullscreen-close:hover {
    /*background: var(--color-bg-light);*/
    border: 1px solid var(--color-border-hover);
}

body.chart-fullscreen #main-block .fullscreen-close,
body.chart-fullscreen-transition #main-block .fullscreen-close {
    display: inline-flex;
    top: 12px;
    right: 16px;
}

body.chart-fullscreen .fullscreen-toggle {
    top: 12px;
    right: 24px;
}

body.chart-fullscreen #main-block .chart-wrapper a-scene {
    background: transparent;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

body.chart-fullscreen #top-header,
body.chart-fullscreen #main-header,
body.chart-fullscreen .left-wrapper,
body.chart-fullscreen .right-wrapper,
body.chart-fullscreen #news-links-screen,
body.chart-fullscreen .pop-up-container {
    display: none;
}

body.chart-fullscreen #main-container {
    top: 0;
    height: 100vh;
    width: 100vw;
    padding: 0;
    justify-content: center;
    align-items: stretch;
}

body.chart-fullscreen #main-block {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

body.mmap-buildings-active .mmap-additional-controls {
    display: none !important;
}

body.chart-fullscreen #main-block > :not(.content-row) {
    display: none;
}

body.chart-fullscreen #main-block .content-row {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body.chart-fullscreen #main-block .content-row > :not(.chart-wrapper) {
    display: none;
}

body.chart-fullscreen-transition #main-container {
    transition:
        top 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
        height 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
        width 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
        padding 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.chart-fullscreen-transition #main-block {
    transition:
        width 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
        height 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-radius 0.55s cubic-bezier(0.25, 0.1, 0.25, 1),
        box-shadow 0.55s ease;
}

body.chart-fullscreen-transition #main-block .chart-wrapper {
    transition:
        width 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
        height 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
        padding 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
        background 0.65s ease,
        border-radius 0.55s cubic-bezier(0.25, 0.1, 0.25, 1),
        box-shadow 0.55s ease;
}

body.mmap-graph #main-block .chart-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

body.mmap-graph #main-block .chart-wrapper a-scene {
    position: relative;
    z-index: 1;
}

body.mmap-graph:not(.mmap-3d) #main-block .rotation-container .items-row,
body.mmap-graph #main-block .side-container {
    opacity: 0.65;
}

/* In 2D mmap mode: disable view rotation items, but keep reset clickable */
body.mmap-graph:not(.mmap-3d) #main-block .rotation-container .items-row .item,
body.mmap-graph #main-block .side-container .item {
    pointer-events: none;
    cursor: not-allowed;
}








#main-block .bottom-player-area {
    width: 100%;
    padding: 0 0 16px 16px;
    /*background: var(--color-bg-main);*/
    z-index: 10;
}

#main-block .main-controls {
    width: 180px;
    min-width: 180px;
    /*background: var(--color-bg-main);*/
    padding-right: 10px;
    margin-right: 6px;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: visible;
    flex-shrink: 0;
    z-index: 5;
}

/* Sidebar Sections */
#main-block .main-controls .title {
    color: var(--color-text-primary);
    font-size: 12px;
    margin-bottom: 8px;
    font-weight: 500;
    text-align: center;
    /* Center align titles */
}

/* Rotation */
#main-block .main-controls .rotation-container {
    /* Reset old styles */
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

/* Rotation (Sidebar) using Side View styles */
#main-block .main-controls .rotation-container .items-row {
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

#main-block .main-controls .rotation-container .item {
    width: 32px;
    height: 32px;
    background: var(--color-button-secondary);
    border-radius: 4px;
    /* Restored from side-container */
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 250ms;
}

#main-block .main-controls .rotation-container .item:hover {
    border: 1px solid var(--color-border-hover);
}

/*#main-block .main-controls .rotation-container .item img {*/
/*    filter: none;*/
/*    opacity: 1;*/
/*}*/
body.cb-light #main-block .main-controls .rotation-container .item img,
body.light #main-block .main-controls .rotation-container .item img {
    filter: invert(1);
}

#main-block .main-controls .rotation-container .reset-wrapper {
    margin-top: 8px;
    width: 100%;
}

#main-block .main-controls .rotation-container .item.reset {
    width: 100%;
    height: 32px;
    /* Styles for reset button */
    background: var(--color-button-tertiary);
    border: 1px solid transparent;
    color: var(--color-text-primary);
    font-size: 12px;
    border-radius: 4px;
}

#main-block .main-controls .rotation-container .item.reset:hover {
    border: 1px solid var(--color-border-hover);
}


/* Settings */
#main-block .main-controls .chart-settings-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#main-block .main-controls .chart-settings-container button {
    width: 100%;
    height: 32px;
    background: var(--color-button-secondary);
    border: 1px solid transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: 250ms;
}
body.cb-light #main-block .main-controls .chart-settings-container button img,
body.light #main-block .main-controls .chart-settings-container button img {
    filter: invert(1);
}
#main-block .main-controls .chart-settings-container button:hover {
    border: 1px solid var(--color-border-hover);
}

/* Timeline */
#main-block .main-controls .timeline-container .time-range-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    padding: 0;
}

#main-block .main-controls .timeline-container .time-range-wrapper .item {
    width: 100%;
    height: 24px;
    /* Restored height */
    background: var(--color-button-tertiary);
    /* Restored bg */
    border: 1px solid transparent;
    border-radius: 8px;
    /* Restored radius */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--color-text-primary);
    /* Restored color */
    cursor: pointer;
    transition: 250ms;
}

#main-block .main-controls .timeline-container .time-range-wrapper .item.active {
    background: var(--color-button-primary);
    /*border: 1px solid var(--color-bg-btn-controls-active);*/
    /*color: var(--color-text-primary);*/
}

#main-block .main-controls .timeline-container .time-range-wrapper .item:hover {
    border: 1px solid var(--color-border-hover);
}

#main-block .main-controls .timeline-container .time-range-wrapper .item.disabled {
    opacity: 0.25;
    cursor: default;
}

#main-block .main-controls .timeline-container .time-range-wrapper .item[data-range="All"] {
    grid-column: span 2;
    /* Span full width */
}

.mmap-additional-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.mmap-additional-controls .btn-mmap-view {
    width: 100%;
    height: 32px;
    background: var(--color-button-secondary);
    border: 1px solid transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: 250ms;
}

.mmap-additional-controls .btn-mmap-view:hover {
    border: 1px solid var(--color-border-hover);
}

body.cb-light .mmap-additional-controls .btn-mmap-view img,
body.light .mmap-additional-controls .btn-mmap-view img {
    filter: invert(1);
}

/* Player Styles */
#main-block .player-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 5px;
}
#main-block .player-container.disabled {
    opacity: 0.5;
    pointer-events: none;
}
#main-block .player-container .player-left-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#main-block .player-container .player-right-column {
    display: flex;
    align-items: flex-end;
    width: 180px;
    justify-content: center;
}

/* Control Buttons Grid */
#main-block .player-container .controls-buttons-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    /* Center align the rows */
}

#main-block .player-container .controls-buttons-grid .row-1 {
    display: flex;
    gap: 8px;
}

#main-block .player-container .controls-buttons-grid .row-2 {
    display: flex;
    gap: 8px;
}

#main-block .player-container .controls-buttons-grid .item {
    width: 32px;
    height: 32px;
    background: var(--color-button-secondary);
    border-radius: 4px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 250ms;
}
body.cb-light #main-block .player-container .controls-buttons-grid .item img,
body.light #main-block .player-container .controls-buttons-grid .item img {
   filter: invert(1);
}

#main-block .player-container .controls-buttons-grid .item:hover {
    border: 1px solid var(--color-border-hover);
}

#main-block .player-container .progress-container {
    width: 100%;
    height: 8px;
    background: var(--color-button-secondary);
    /* Dark Grey background, distinct from main BG */
    opacity: 1;
    border-radius: 2px;
    position: relative;
    margin: 4px 0 4px;
}

#main-block .player-container .progress-container .line {
    /* The line element was creating the confusion.
       Let's hide it or make it transparent if the container is the track. */
    display: none;
}

#main-block .player-container .progress-container .marker {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-icon-primary);
    /* White marker */
    border-radius: 2px;
    left: 0%;
    top: 0;
    margin-left: 0;
    transform: translateX(-50%);
    cursor: pointer;
}

#main-block .player-container .legend {
    display: flex;
    justify-content: space-between;
    /* Span full width */
    color: var(--color-text-primary);
    font-size: 10px;
    width: 100%;
}

#main-block .player-container .legend .item:only-child {
    margin-left: auto;
}


/* Hide old bottom-controls wrapper styles if conflict */
/* #main-block .bottom-controls { ... } - we might just override or delete */
#center-chart-overlay .center-chart-close-button {
    border: 1px solid transparent;
}
#center-chart-overlay .center-chart-close-button:hover {
    border: 1px solid var(--color-border-hover);
}
body.cb-light #center-chart-overlay .center-chart-close-button img,
body.light #center-chart-overlay .center-chart-close-button img {
    filter: invert(1);
}

/* Market Map Controls container */
.mmap-controls-container {
    width: 100%;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 16px;
    background: var(--color-bg-page);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 80px;
    z-index: 10;
    gap: 16px;
    position: relative;
}

.mmap-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mmap-left-group {
    align-items: flex-start;
    flex: 1; /* Equal width */
}

.mmap-right-group {
    align-items: center; 
    flex: 1; /* Equal width */
    display: flex;
    flex-direction: column;
}

.mmap-header {
    color: var(--color-text-primary);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    opacity: 0.8;
}

.mmap-left-content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    /* Removed max-width constraint */
    gap: 8px; /* Add gap between buttons */
}

/* Specific styling for the buttons in this context */
/* Specific styling for the buttons in this context */
.mmap-left-content button {
    height: 32px; /* Matched to main-controls 32px */
    background: var(--color-button-secondary); /* Matched to main-controls settings buttons */
    border-radius: 8px;
    display: flex;
    border: 1px solid transparent; /* Added for hover effect match */
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    color: var(--color-text-primary); /* Ensure correct text color var */
    cursor: pointer;
    transition: 250ms;
    margin: 0 !important; 
    /* flex-grow handled individually below */
}

/* Row 1 elements */
.mmap-left-content #btn-2d-3d-toggle-desktop {
    flex: 1 1 calc(100% - 40px); /* Fill row minus texture button width + gap (was 48 now 40 if gap is 8) */
    width: auto;
    justify-content: center; /* Center text */
}
.mmap-left-content #btn-texture-toggle-desktop {
    flex: 0 0 32px; /* Fixed width matched height 32px? Or keep 40? Usually square. Let's make it 32px to match height */
    min-width: 0 !important;
    padding: 6px; /* Adjust padding for icon */
}

/* Row 2 elements - Force new line */
.mmap-left-content .open-pop-up-configure,
.mmap-left-content .open-info {
    flex: 1 1 calc(50% - 4px); /* Share width (50% - half gap) */
    margin-top: 0px; 
}

.mmap-left-content button:hover {
    border: 1px solid var(--color-border-hover);
    background: var(--color-button-secondary); /* Keep background same on hover */
}
/* Ensure icon inversion for light mode if consistent with main-controls */
body.cb-light .mmap-left-content button img,
body.light .mmap-left-content button img {
    filter: invert(1);
}

/* Divider */
.mmap-vertical-divider {
    width: 1px;
    background: var(--color-border-primary); /* Update to var(--color-border-primary) like main block border? Or #FFFFFF1A */
    margin: 0 16px;
    align-self: stretch;
}


/* Right Content - Timeline */
.mmap-right-content {
    display: flex;
    justify-content: center;
    width: 100%;
}
/* Timeline styling adjustments for Grid functionality */
.mmap-right-content .timeline-container .title {
    display: none; /* Hide internal title */
}

.mmap-right-content .timeline-container .time-range-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    min-width: 240px; /* Adjust as needed */
}
/*
   Screenshot shows:
   1D 1W 1M 6M
   1Y 5Y All
   
   Grid 4 columns.
   Row 1: 1D, 1W, 1M, 6M
   Row 2: 1Y, 5Y, All (spanning?)
   
   If we use grid-template-columns: repeat(4, 1fr).
   Items 5, 6, 7 will be on row 2.
   1Y (col 1), 5Y (col 2), All (col 3).
   Col 4 empty.
   
   If we want "All" to stretch or center, we can target nth-child.
*/

.mmap-right-content .timeline-container .time-range-wrapper .item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* padding 0 like main-controls */
    background: var(--color-button-tertiary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text-primary);
    transition: 250ms;
    height: 24px;
    border: 1px solid transparent;
    width: 100%;
}

.mmap-right-content .timeline-container .time-range-wrapper .item.active {
    background: var(--color-button-primary);
    /* color: var(--color-text-primary); inherited or default */
}

.mmap-right-content .timeline-container .time-range-wrapper .item:hover {
    border: 1px solid var(--color-border-hover);
    background: var(--color-button-tertiary); /* Ensure bg doesn't change if not supposed to */
}

.mmap-right-content .timeline-container .time-range-wrapper .item.disabled {
    opacity: 0.25;
    cursor: default;
    border: 1px solid transparent; /* Ensure no border on hover if disabled */
}

/* Prevent hover effect on disabled items */
.mmap-right-content .timeline-container .time-range-wrapper .item.disabled:hover {
    border: 1px solid transparent;
    background: var(--color-button-tertiary);
}