.advanced-chart { position: relative; width: 100%; height: 100%; min-height: 300px; background: #0a0e27; border-radius: 0.5rem; overflow: hidden; } .chart-svg { width: 100%; height: 100%; display: block; } .chart-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 300px; gap: 1rem; color: #64748b; } .loading-spinner { width: 2rem; height: 2rem; border: 3px solid #1e293b; border-top-color: #6366f1; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .indicators-overlay { position: absolute; top: 1rem; left: 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .indicator-badge { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(8px); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 0.375rem; font-size: 0.75rem; } .indicator-label { color: #94a3b8; font-weight: 600; } .indicator-value { color: white; font-weight: 700; font-family: 'Courier New', monospace; } .indicator-value.rsi-overbought { color: #ef4444; } .indicator-value.rsi-oversold { color: #10b981; } .indicator-value.rsi-neutral { color: #f59e0b; }