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

body { font-family: sans-serif; background: #f5f5f5; color: #333; }

.container { max-width: 900px; margin: 2rem auto; padding: 2rem; background: white; border-radius: 12px; }

h1 { margin-bottom: 1.5rem; font-size: 24px; text-align: center;}

.search-bar { display: flex; gap: 12px; margin-bottom: 1.5rem; }

input { flex: 1; padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; }

button { padding: 10px 20px; background: #333; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }

button:hover { background: #555; }

.error { color: red; font-size: 14px; margin-bottom: 1rem; }

.loading { font-size: 14px; color: #888; margin-bottom: 1rem; }

.hidden { display: none; }

canvas { width: 100% !important; max-width: 600px; display: block; margin: 0 auto; }

.timeframe-buttons { display: flex; gap: 8px; margin-bottom: 1.5rem; justify-content: center; }

.timeframe-buttons button { background: #f5f5f5; color: #333; font-size: 14px; padding: 6px 14px; }

.timeframe-buttons button.active { background: #333; color: white; }

.chart-toggle { display: flex; gap: 8px; margin-bottom: 1rem; justify-content: center; }

.chart-toggle button { background: #f5f5f5; color: #333; font-size: 14px; padding: 6px 14px; }

.chart-toggle button.active { background: #333; color: white; }