body { font-family: 'Inter', sans-serif; background-color: #f8fafc; }
.fade-in { animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.gauge-height { height: 280px; }
.gauge-fill { transition: height 1s ease-out, background-color 0.5s ease; }
input { -webkit-user-drag: none; user-select: text; }
.toggle-checkbox:checked { right: 0; border-color: #10B981; }
.toggle-checkbox:checked + .toggle-label { background-color: #10B981; }
.toggle-checkbox-blue:checked { right: 0; border-color: #3B82F6; }
.toggle-checkbox-blue:checked + .toggle-label-blue { background-color: #3B82F6; }
.rotate-180 { transform: rotate(180deg); }
.transition-transform { transition: transform 0.3s ease; }
.pointer-events-none { pointer-events: none; }
#toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { pointer-events: auto; min-width: 250px; padding: 12px 16px; border-radius: 8px; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; items-center; gap: 10px; transform: translateY(20px); opacity: 0; transition: all 0.3s ease; border-left: 4px solid #333; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast-success { border-left-color: #10B981; }
.toast-error { border-left-color: #EF4444; }
.toast-info { border-left-color: #3B82F6; }
.chart-btn { font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 9999px; transition: all 0.2s; }
.chart-btn.active { background-color: #0f172a; color: white; }
.chart-btn.inactive { background-color: #f1f5f9; color: #64748b; hover:bg-slate-200; }
.tab-btn { @apply pb-2 border-b-2 font-bold text-sm transition-colors; }
.tab-active-buy { border-color: #10B981; color: #10B981; }
.tab-active-sell { border-color: #EF4444; color: #EF4444; }
.tab-inactive { border-color: transparent; color: #94a3b8; }
#auth-overlay { position: fixed; inset: 0; background: #f8fafc; z-index: 200; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s; }
.loader { width: 48px; height: 48px; border: 5px solid #e2e8f0; border-bottom-color: #10B981; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Live Market indicator states — defined here because Tailwind CDN does not scan external .js files */
#live-indicator { display: none; }
#live-indicator.indicator-live   { display: flex; align-items: center; background-color: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
#live-indicator.indicator-stale  { display: flex; align-items: center; background-color: #fffbeb; color: #b45309; border-color: #fde68a; }
#live-indicator.indicator-error  { display: flex; align-items: center; background-color: #fef2f2; color: #b91c1c; border-color: #fecaca; }
#live-dot.dot-live   { background-color: #22c55e; }
#live-dot.dot-stale  { background-color: #f59e0b; }
#live-dot.dot-error  { background-color: #ef4444; }