html, body { font-family:'Helvetica Neue',Arial,sans-serif; margin:0; background:#f5f5f5; color:#333; }

#no-data-tip {
  padding: 15px;
  font-size: 19px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: bold;
}
#no-data-tip svg {
  width: 20px;
}

.header { background:#323752; color:#fff; text-align:center; padding:15px 0; font-size:20px; font-weight:bold; position:sticky; top:0; z-index:10; }
.container { padding:10px 15px; }

.tab-bar { display:flex; justify-content:space-around; margin-bottom:10px;gap: 5px; }
.tab-btn { flex:1; padding:10px 0; border:none; border-radius:5px; background:#323752; font-weight:bold; cursor:pointer; transition:background-color 0.3s; }
.tab-btn.active { background:#1e90ff; color:#fff; }

.top-overview { background:#fff; padding:10px; border-radius:8px; margin-bottom:10px; box-shadow:0 2px 5px rgba(0,0,0,0.1); overflow-x:auto; min-height: 68px; }
.top-overview h3 { margin:0 0 5px 0; font-size:16px; white-space:nowrap; }
.top-overview span { display:inline-block; margin-right:15px; font-weight:bold; white-space:nowrap; }

.search-sort { display:flex; margin-bottom:10px; gap:10px; }
.search-sort input, .search-sort select { padding:8px; flex:1; border-radius:5px; border:1px solid #ccc; font-size:14px; }

.stock-list { list-style:none; padding:0; margin:0; }
.stock-item { background:#fff; margin-bottom:10px; padding:10px; border-radius:8px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 2px 5px rgba(0,0,0,0.1); cursor:pointer; transition:transform 0.2s, background-color 0.3s; }
.stock-item:hover { transform:scale(1.02); }
.stock-info { display:flex; flex-direction:column; }
.stock-name { font-weight:bold; font-size:16px; }
.stock-code { font-size:12px; color:#888; }
.stock-price { font-weight:bold; font-size:16px; padding:2px 4px; border-radius:3px; transition:background-color 0.5s; }
.stock-change { font-size:14px; padding:2px 4px; border-radius:3px; transition:background-color 0.5s; }
.stock-change.up { color:#f44336; }
.stock-change.down { color:#4caf50; }

.chart { width:100%; height:220px; margin-top:10px; }
button { padding:10px 20px; margin-top:10px; border:none; border-radius:5px; background:#1e90ff; color:#fff; font-size:14px; width:100%; }

.marquee-container { background:#323752; color:#fff; padding:5px 0; overflow:hidden; white-space:nowrap; position:relative; border-radius: 5px;margin: 0 5px;}
.marquee { display:inline-block; white-space:nowrap; animation: marquee 60s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.marquee span { display:inline-block; margin-right:30px; font-size:14px; }

/* Banner 容器 */
.banner-container {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  margin: 10px 0;
  padding: 0 5px;
}

.banner-slide {
  display: flex;
  width: 100%;
  animation: slide 9s infinite linear;
}

.banner-slide img {
  width: 100%;
  flex-shrink: 0;
  display: block;
  border-radius: 8px;
}

@keyframes slide {
  /* 0% { transform: translateX(0%); }
  33% { transform: translateX(-100%); }
  66% { transform: translateX(-200%); }
  100% { transform: translateX(0%); } */
}