* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
  background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
  color: #c9d1d9;
  line-height: 1.5;
  min-height: 100vh;
}

.container { max-width: 800px; margin: 0 auto; padding: 12px 16px 40px; }

/* Header */
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0 12px; margin-bottom: 12px;
  border-bottom: 1px solid #21262d;
}
.logo { font-size: 1.3rem; font-weight: 700; color: #58a6ff; letter-spacing: -0.5px; }
.time { color: #484f58; font-size: 0.8rem; font-variant-numeric: tabular-nums; }

/* Cards */
.card {
  background: #161b22; border: 1px solid #21262d; border-radius: 10px;
  padding: 16px; margin-bottom: 12px;
  backdrop-filter: blur(4px);
}
.card-title {
  font-size: 0.85rem; font-weight: 600; color: #8b949e;
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid #21262d;
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* Grid */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } }

/* Index Cards */
.index-card {
  background: #0d1117; border: 1px solid #21262d; border-radius: 8px;
  padding: 14px 12px; text-align: center;
  transition: border-color 0.2s;
}
.index-card:hover { border-color: #30363d; }
.index-name { font-size: 0.8rem; color: #8b949e; margin-bottom: 2px; }
.index-price { font-size: 1.5rem; font-weight: 700; margin: 2px 0; letter-spacing: -0.5px; }
.index-change { font-size: 0.85rem; }
.index-extreme { font-size: 0.75rem; color: #484f58; margin-top: 4px; }

/* Colors */
.up { color: #f85149; }
.down { color: #3fb950; }
.flat { color: #8b949e; }

/* Stats Grid */
.stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.stat-item {
  background: #0d1117; border: 1px solid #21262d; border-radius: 6px;
  padding: 10px; text-align: center;
}
.stat-label { display: block; font-size: 0.75rem; color: #484f58; margin-bottom: 2px; }
.stat-value { display: block; font-size: 1.1rem; font-weight: 700; }

/* Auction */
.auction-list { display: flex; flex-direction: column; gap: 8px; }
.auction-item {
  background: #0d1117; border: 1px solid #21262d; border-radius: 6px;
  padding: 10px 12px; display: flex; justify-content: space-between; align-items: center;
}
.auction-name { font-size: 0.85rem; color: #8b949e; }
.auction-detail { font-size: 0.85rem; }
.auction-analysis { font-size: 0.78rem; color: #58a6ff; margin-top: 2px; }

/* Stock List */
.stock-list { display: flex; flex-direction: column; gap: 4px; }
.stock-item {
  background: #0d1117; border: 1px solid #21262d; border-radius: 5px;
  padding: 8px 12px; display: flex; justify-content: space-between; align-items: center;
}
.stock-item:hover { border-color: #30363d; }
.stock-name { font-size: 0.85rem; }
.stock-code { color: #484f58; font-size: 0.75rem; }
.stock-pct { font-weight: 700; font-size: 0.9rem; }
.stock-placeholder { color: #484f58; text-align: center; padding: 20px; font-size: 0.85rem; }
.index-skeleton { color: #484f58; text-align: center; padding: 20px; }

/* Badge */
.badge {
  display: inline-block; font-size: 0.75rem; padding: 1px 8px;
  border-radius: 10px; font-weight: 600; margin-left: 6px;
}
.up-badge { background: rgba(248,81,73,0.15); color: #f85149; }
.down-badge { background: rgba(63,185,80,0.15); color: #3fb950; }

/* Footer */
footer { text-align: center; padding: 24px 16px 0; color: #21262d; font-size: 0.75rem; }
footer p { margin-bottom: 2px; }

/* Scrollbar */
.stock-list::-webkit-scrollbar { width: 4px; }
.stock-list::-webkit-scrollbar-track { background: transparent; }
.stock-list::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; }