* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: #f5f7fb;
  margin: 0;
  padding: 16px 12px 40px;
  color: #1e293b;
}
.container { max-width: 1000px; margin: 0 auto; }
.header { margin-bottom: 20px; padding: 0 4px; }
.header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 4px;
  background: linear-gradient(135deg, #1e3a5f, #2c5a8c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sub {
  font-size: 0.72rem;
  color: #5a6e7c;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.status-bar {
  background: #eef2f8;
  border-radius: 60px;
  padding: 8px 14px;
  font-size: 0.7rem;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
button {
  background: white;
  border: 0.5px solid #cbd5e1;
  padding: 6px 14px;
  border-radius: 40px;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: 0.2s;
}
button:hover { transform: translateY(-1px); }
.add-fund-panel,
.fund-card,
.overall-section,
.message-bar {
  background: white;
  border-radius: 28px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  border: 0.5px solid #e9edf2;
}
.add-fund-panel {
  margin-bottom: 20px;
  padding: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.add-fund-panel input {
  flex: 2;
  min-width: 150px;
  padding: 10px 14px;
  border: 0.5px solid #cbd5e1;
  border-radius: 40px;
  font-size: 0.85rem;
  background: white;
}
.add-fund-panel button { background: #2c7da0; color: white; border: none; }
.panel-tip { font-size: 0.7rem; color: #6c7e94; }
.message-bar {
  margin-bottom: 20px;
  padding: 12px 16px;
  font-size: 0.74rem;
  color: #36536b;
  white-space: pre-wrap;
}
.message-bar.warn { background: #fff8e8; color: #8a5a00; }
.message-bar.error { background: #fff0f0; color: #b42318; }
.hidden { display: none; }
.fund-card { margin-bottom: 24px; overflow: hidden; }
.card-header {
  padding: 16px 18px 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid #eff3f8;
}
.fund-title { font-weight: 700; font-size: 1.05rem; }
.fund-code {
  background: #eef3fc;
  padding: 3px 10px;
  border-radius: 30px;
  font-size: 0.65rem;
  font-weight: 500;
  color: #1e5a9c;
  font-family: monospace;
}
.valuation-block {
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: #fefefe;
}
.estimate-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.estimate-label { font-size: 0.7rem; color: #6c7e94; font-weight: 500; }
.estimate-change { font-size: 1.5rem; font-weight: 800; }
.coverage-row { display: flex; gap: 8px; flex-wrap: wrap; }
.coverage-badge,
.source-badge,
.note-badge,
.warning-badge,
.success-badge {
  border-radius: 40px;
  padding: 4px 12px;
  font-size: 0.65rem;
  font-weight: 500;
}
.coverage-badge { background: #f0f4fa; color: #3a5a78; }
.source-badge { background: #eef7fb; color: #15637d; }
.note-badge { background: #f5f3ff; color: #6d4aff; }
.warning-badge { background: #fff4df; color: #9a6700; }
.success-badge { background: #ecfdf3; color: #027a48; }
.detail-toggle { padding: 0 18px 10px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.toggle-btn, .set-default-btn {
  background: none;
  border: none;
  font-size: 0.68rem;
  color: #2c7da0;
  font-weight: 500;
  padding: 4px 0;
  cursor: pointer;
}
.stock-table-wrapper {
  padding: 0 14px 14px;
  border-top: 1px solid #eff3f8;
  background: white;
}
.stock-table { width: 100%; border-collapse: collapse; font-size: 0.7rem; }
.stock-table th { text-align: left; padding: 10px 4px 6px; color: #6c7c8e; font-weight: 500; border-bottom: 1px solid #eef2f6; }
.stock-table td { padding: 8px 4px; border-bottom: 1px solid #f4f7fc; }
.positive { color: #e34234; font-weight: 600; }
.negative { color: #2a7f49; font-weight: 600; }
.neutral { color: #64748b; font-weight: 600; }
.chart-container { padding: 12px 16px; border-top: 1px solid #eef2f8; background: #fefefe; }
.chart-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #3a5a78;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.range-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.range-btn {
  background: #f1f5f9;
  border: none;
  font-size: 0.6rem;
  padding: 4px 8px;
  border-radius: 16px;
  cursor: pointer;
  transition: 0.2s;
}
.range-btn.active { background: #2c7da0; color: white; }
.chart-box { width: 100%; height: 240px; margin-bottom: 12px; }
.overall-chart-box { width: 100%; height: 360px; margin-bottom: 12px; }
.inline-warnings {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 18px 12px;
}
.footer-note {
  text-align: center;
  font-size: 0.65rem;
  color: #8a99aa;
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #e6ecf3;
}
.update-badge { background: #eef2fa; border-radius: 40px; padding: 4px 12px; font-size: 0.65rem; }
.loading-tip, .error-tip {
  font-size: 0.7rem;
  text-align: center;
  padding: 20px;
  border-radius: 12px;
}
.loading-tip { color: #94a3b8; background: #f8fafc; }
.error-tip { color: #e34234; background: #fff0f0; }
.overall-section { margin-top: 24px; padding: 16px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 16px; }
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.2s;
  background: #f8fafc;
  border: 0.5px solid #e2e8f0;
}
.legend-item:hover { background: #eef2fa; }
.legend-item.selected { background: #eef2fa; border-color: #2c7da0; }
.legend-color { width: 20px; height: 4px; border-radius: 2px; }
.legend-text { font-size: 0.7rem; font-weight: 500; }
@media (max-width: 600px) {
  .estimate-change { font-size: 1.3rem; }
  .fund-title { font-size: 0.95rem; }
  .chart-box { height: 200px; }
  .overall-chart-box { height: 280px; }
  .range-btn { font-size: 0.55rem; padding: 3px 6px; }
}