.container { width: 100%; height: 100%; background: var(--BG-100, #F7F8FA); overflow: hidden; border-radius: 8px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex; } .header-image-container { align-self: stretch; height: 160px; flex-direction: column; justify-content: center; align-items: center; gap: 10px; display: flex; } .header-image { align-self: stretch; flex: 1 1 0; position: relative; background: #FFEDED; overflow: hidden; border-radius: 8px; } .header-image img { width: 408.90px; height: 218px; left: -24.45px; top: -29px; position: absolute; } .title-container { align-self: stretch; padding-top: 15px; padding-bottom: 15px; justify-content: space-between; align-items: flex-start; display: inline-flex; } .title { justify-content: center; display: flex; flex-direction: column; color: var(--Text-1, #211F24); font-size: 18px; padding: 5px; font-family: Alibaba PuHuiTi; font-weight: 400; line-height: 26px; word-wrap: break-word; } .tag { height: 20px; padding-left: 8px; padding-right: 8px; background: var(--Functional-Red-1, #FFE9E7); overflow: hidden; border-radius: 2px; justify-content: flex-start; align-items: center; gap: 4px; display: flex; } .tag-icon { width: 12px; height: 12px; position: relative; } .tag-icon-inner { width: 11.50px; height: 10.75px; left: 0.25px; top: 0.63px; position: absolute; background: var(--Functional-Red-6, #F64B31); } .tag-text { color: var(--Functional-Red-6, #F64B31); font-size: 12px; font-family: Alibaba PuHuiTi; font-weight: 400; line-height: 20px; word-wrap: break-word; } .usage-stats { width: 79px; height: 24px; position: relative; } .usage-count { left: 0px; top: 0px; position: absolute; color: var(--Text-2, #3C4043); font-size: 16px; font-family: Alibaba PuHuiTi; font-weight: 400; line-height: 24px; word-wrap: break-word; } .usage-label { left: 43px; top: 3px; position: absolute; color: var(--Text-3, #737478); font-size: 12px; font-family: Alibaba PuHuiTi; font-weight: 400; line-height: 20px; word-wrap: break-word; } .description { align-self: stretch; color: var(--Text-2, #3C4043); font-size: 14px; font-family: Alibaba PuHuiTi; font-weight: 400; line-height: 22px; word-wrap: break-word; padding-inline: 5px; } .divider { align-self: stretch; height: 0px; outline: 1px var(--Border-2, #E6E6E8) solid; outline-offset: -0.50px; } .history-title { color: var(--Text-3, #737478); font-size: 14px; font-family: Alibaba PuHuiTi; font-weight: 400; line-height: 22px; word-wrap: break-word; } .history-item { align-self: stretch; height: 40px; padding: 8px; border-radius: 8px; justify-content: flex-start; align-items: center; gap: 10px; display: inline-flex; } .history-item-text { flex: 1 1 0; color: var(--Text-1, #211F24); font-size: 14px; font-family: Alibaba PuHuiTi; font-weight: 400; line-height: 22px; word-wrap: break-word; } .scroll-indicator { width: 8px; height: 240px; padding-left: 1px; padding-right: 1px; padding-top: 8px; padding-bottom: 8px; left: 362px; top: 40px; position: absolute; justify-content: flex-start; align-items: flex-start; gap: 10px; display: inline-flex; } .scroll-indicator-bar { flex: 1 1 0; height: 80px; background: var(--BG-600, #939499); border-radius: 4px; }