* { box-sizing: border-box; }
body { margin: 0; min-width: 1100px; background: #f7f7f7; color: #444; font: 14px Arial, "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }
.material-ranking { padding: 16px 0 80px; padding-top: 67px; font-size: 16px; }
.ranking-panel { width: 960px; min-height: 560px; margin: 0 auto; background: #fff; }
.ranking-banner { height: 74px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; background: #fff1e9 url("https://css.tgb.cn/images/ticai/ticai_head2.png") center / cover no-repeat; }
.ranking-brand, .ranking-update, .ranking-toolbar, .ranking-tabs, .topic-cell { display: flex; align-items: center; }
.ranking-logo { width: 31px; height: 31px; padding-top: 4px; margin-right: 9px; border-radius: 8px; background: #bd4f20; color: #fff; font-size: 12px; font-weight: bold; line-height: 12px; text-align: center; }
.ranking-brand strong { color: #743816; font-size: 24px; line-height: 1; }
.ranking-slogan { margin-left: 15px; color: #8c6048; font-size: 14px; font-style: italic; }
.ranking-update { gap: 14px; color: #b56b47; font-size: 14px; }
.refresh-button, .search-button { border: 0; cursor: pointer; color: #fff; background: #ca5119; }
.refresh-button { height: 25px; padding: 0 12px 0 9px; border-radius: 4px; display: inline-flex; align-items: center; gap: 5px; }
.refresh-button img { width: 14px; height: 14px; }
.refresh-button.is-loading img { animation: ranking-spin .7s linear infinite; }
.material-ranking .ranking-banner { display: flex !important; justify-content: space-between !important; }
.material-ranking .ranking-update { display: flex !important; align-items: center !important; margin-left: auto !important; float: none !important; position: static !important; }
.material-ranking .refresh-button { float: none !important; margin: 0 !important; }
.ranking-toolbar { height: 53px; padding: 0 22px; background: #fff8f4; }
.ranking-search { width: 198px; height: 28px; padding: 0 8px; display: flex; align-items: center; border: 1px solid #efdbcf; border-radius: 4px 0 0 4px; }
.ranking-search img { width: 13px; height: 13px; margin-right: 5px; object-fit: contain; }
.ranking-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #96390f; font-size: 14px; background: #fff8f4; }
.search-button { width: 70px; height: 30px; margin-right: auto; border-radius: 0 4px 4px 0; font-size: 14px; }
.ranking-tabs { align-self: stretch; }
.ranking-tab-label { margin-right: 8px; color: #985f44; font-size: 14px; white-space: nowrap; }
.ranking-tab { width: 80px; height: 30px; border: 1px solid #f1d8cc; border-right: 0; color: #985f44; background: #fffaf7; cursor: pointer; font-size: 14px; }
.ranking-tab:last-child { border-right: 1px solid #f1d8cc; border-radius: 0 4px 4px 0; }
.ranking-tab-label + .ranking-tab { border-radius: 4px 0 0 4px; }
.ranking-tab.is-active { color: #fff; border-color: #c85018; background: #c85018; }
.ranking-row { min-height: 60px; padding: 0 22px; display: grid; grid-template-columns: 182px 92px 150px 150px 150px 58px 80px; align-items: center; column-gap: 10px; border-bottom: 1px solid #f2f2f2; }
.ranking-head { min-height: 33px; color: #aaa; font-size: 14px; }
.ranking-head span:not(:first-child), .ranking-row > span { text-align: center; }
.ranking-help { position: relative; width: 17px; height: 17px; margin-left: 4px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; color: transparent; background: url("https://css.tgb.cn/images/ticai/ticai_tip.png") center / contain no-repeat; font-size: 0; font-style: normal; line-height: 1; cursor: help; }
.ranking-help-popover { position: absolute; z-index: 10; top: 25px; left: 50%; width: 460px; padding: 18px 20px; display: none; transform: translateX(-50%); border: 1px solid #eee; border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); color: #666; background: #fff; font-size: 14px; font-style: normal; font-weight: normal; line-height: 22px; text-align: left; white-space: normal; }
.ranking-help:hover .ranking-help-popover, .ranking-help:focus .ranking-help-popover { display: block; }
.ranking-help-popover strong { display: block; margin-bottom: 12px; color: #333; font-size: 18px; line-height: 24px; text-align: center; }
.ranking-help-popover b { display: block; margin-top: 10px; color: #333; font-size: 16px; line-height: 22px; }
.ranking-help-popover p { margin: 2px 0 0; }
.ranking-help-popover .ranking-help-welcome { margin-top: 16px; }
.ranking-help-popover .ranking-help-disclaimer { margin-top: 16px; color: #999; }
.ranking-body .ranking-row { transition: background-color .15s ease; }
.ranking-body .ranking-row[data-detail-url] { cursor: pointer; }
.ranking-body .ranking-row:hover { background: #fffaf7; }
.topic-cell { min-width: 0; text-align: left; }
.topic-rank { width: 27px; flex: 0 0 21px; margin-right: 8px; color: #777; font-size: 16px; text-align: center; }
.topic-rank.is-new { width: 22px; height: 22px; margin-right: 7px; overflow: hidden; color: transparent; background: url("https://css.tgb.cn/images/ticai/ticai_new.png") center / 22px 22px no-repeat; font-size: 0; }
.topic-rank.is-hot { width: 22px; height: 22px; margin-right: 7px; overflow: hidden; color: transparent; background: url("https://css.tgb.cn/images/ticai/iticai_hot.png") center / 22px 22px no-repeat; font-size: 0; }
.topic-rank.rank-top-1 { color: #ff4d4f; }
.topic-rank.rank-top-2 { color: #ff9800; }
.topic-rank.rank-top-3 { color: #e6c700; }
.topic-cell div { min-width: 0; }
.topic-cell strong, .topic-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-cell strong { color: #3f3f3f; font-weight: bold; }
.topic-cell strong a { color: inherit; text-decoration: none; }
.topic-cell strong a:hover { color: #4793f1; }
.topic-cell small { margin-top: 3px; color: #aaa; font-size: 14px; }
.stock-cell { display: block; color: #555; text-align: center; }
.stock-cell a { color: inherit; text-decoration: none; }
.stock-cell a:hover { color: #4793f1; text-decoration: underline; }
.stock-cell small { display: block; margin-top: 2px; color: #4793f1; font-size: 14px; }
.up-value, .limit-value { color: #f05252; }
.up-value.rate-down { color: #2cab6e; }
.up-value.rate-flat { color: #999; }
.up-value { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.up-value em { font-style: normal; }
.new-high { padding: 2px 5px; border: 1px solid; border-radius: 3px; font-size: 14px; line-height: 14px; white-space: nowrap; }
.new-high-rose { border-color: #ffb4ad; color: #ff6d5d; background: #fff0ee; }
.new-high-amber { border-color: #ffd08a; color: #ef9c25; background: #fff7e8; }
.new-high-blue { border-color: #9ccdf5; color: #419ee1; background: #edf7ff; }
.ranking-empty { padding: 45px 0; color: #aaa; text-align: center; }
@keyframes ranking-spin { to { transform: rotate(360deg); } }