/* --- Base Font & Body --- */ body { font-family: 'Inter', sans-serif; margin: 0; /* Padding is handled by the tag in index.html */ background-color: #f9fafb; } /* Input/Select fields in dark mode .dark-mode .form-input { background: #071026; color: #e6eef8; border-color: #2a3b5a; } .dark-mode .form-input::placeholder { color: #6b7f9c; } */ .form-input{ border: 5px solid #ccc; /* Default border */ padding: 8px; border-color: #007bff; background: #071026; } .form-radio { color: #2563eb; /* text-blue-600 */ border-radius: 9999px; /* Add this to make them round */ border-color: #d1d5db; /* Add a default border */ } .form-radio:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* focus:ring-blue-500/50 */ } .form-radio:checked { /* This ensures the dot appears in dark mode too */ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); } /* --- Dark Mode Form Styles --- */ /* Input/Select fields in dark mode */ .dark-mode .form-input { background: #071026; color: #e6eef8; border-color: #2a3b5a; background-color: #2563eb } .dark-mode .form-input::placeholder { color: #6b7f9c; } .dark-mode .form-radio { background-color: #071026; border-color: #2a3b5a; color: #2563eb; /* Keeps the dot color consistent */ } .dark-mode .form-radio:checked { background-color: #2563eb; /* Ensures bg color for the dot */ } .form-radio { color: #2563eb; /* text-blue-600 */ } .form-radio:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* focus:ring-blue-500/50 */ } /* --- General Custom Components --- */ .badge { padding: .35rem .6rem; border-radius: .5rem; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; display: inline-block; } /* --- Chart Responsiveness (from your Feed/Speed CSS) --- */ /* This is the key fix for the "phone part" */ .chart-container { position: relative; height: 250px; /* Default height for mobile */ width: 100%; color: #6b7280; /* Default text color for chart labels */ } @media (min-width: 768px) { .chart-container { height: 300px; /* Taller on desktop */ } } /* --- Dark Mode Customizations (from your Feed/Speed CSS) --- */ .dark-mode { background: #0b1220; color: #e6eef8; } /* Card background and text in dark mode */ .dark-mode .bg-white { background: #111c33; /* Slightly lighter than body */ color: #cfe6ff; border-color: #2a3b5a; /* Subtle border for cards */ } /* Lighter boxes (tips, results) in dark mode */ .dark-mode .bg-gray-50 { background: #0f172a; border-color: #1e293b; } /* Text colors in dark mode */ .dark-mode .text-gray-500 { color: #94a3b8; } .dark-mode .text-gray-600 { color: #94a3b8; } .dark-mode .text-gray-700 { color: #cfe6ff; } .dark-mode .text-gray-800 { color: #e6eef8; } .dark-mode .border { border-color: #334155; } .dark-mode .border-gray-200 { border-color: #334155; } /* e.g., border-t */ .dark-mode .border-gray-400 { border-color: #52637f; } /* e.g., fallback border */ .dark-mode .bg-gray-200 { background-color: #334155; } /* Reset button */ /* Input/Select fields in dark mode */ .dark-mode .form-input { background: #071026; color: #e6eef8; border-color: #2a3b5a; } .dark-mode .form-input::placeholder { color: #6b7f9c; } /* Dark mode for chart text */ .dark-mode .chart-container { color: #94a3b8; /* Styles the chart labels (ticks, titles) */ } .dark-mode #chartCanvas { background-color: #111c33; border: 1px solid #2a3b5a; border-radius: 0.5rem; /* rounded-lg */ padding: 8px; }