Upload style.css

style.css

@@ -0,0 +1,158 @@
+/* Custom styles for the application */
+body {
+    font-family: 'Arial', sans-serif;
+    color: #FFFFFF;
+    background-color: #181818;
+}
+
+/* Button styling */
+.stButton>button {
+    min-width: 40px !important;
+    height: 30px !important;
+    padding: 2px 8px !important;
+    margin: 2px !important;
+    background-color: #2D5BE3;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 14px;
+    font-weight: bold;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.stButton>button:hover {
+    background-color: #3DDC84;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+}
+
+/* Input field styling */
+.stTextInput>div>div>input {
+    border-radius: 5px;
+    border: 2px solid #2D5BE3;
+    padding: 0.5rem;
+    background-color: #242424;
+    color: #FFFFFF;
+    font-weight: 500;
+}
+
+.stTextInput>div>div>input:focus {
+    border-color: #FFDD44;
+    box-shadow: 0 0 0 2px rgba(255, 221, 68, 0.2);
+}
+
+/* Sidebar styling */
+.sidebar .sidebar-content {
+    background-color: #242424;
+    padding: 1rem;
+    border-right: 2px solid #2D5BE3;
+}
+
+/* Solution display styling */
+.stExpander {
+    background-color: #242424;
+    border-radius: 8px;
+    margin-bottom: 10px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+    border: 1px solid #3DDC84;
+}
+
+/* Plot container styling */
+.plot-container {
+    background-color: #242424;
+    border-radius: 8px;
+    padding: 1rem;
+    margin: 1rem 0;
+    border: 1px solid #2D5BE3;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+}
+
+/* Solution steps styling */
+.solution-step {
+    background-color: #242424;
+    padding: 1rem;
+    margin: 0.75rem 0;
+    border-radius: 6px;
+    border-left: 4px solid #3DDC84;
+}
+
+/* Mathematical symbols grid */
+.math-symbols-grid {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 4px;
+    margin: 10px 0;
+}
+
+/* Headers styling */
+h1, h2, h3 {
+    color: #FFFFFF;
+    font-weight: bold;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+}
+
+/* Interactive elements */
+.stSelectbox select,
+.stMultiSelect select {
+    background-color: #242424;
+    color: #FFFFFF;
+    border: 2px solid #2D5BE3;
+}
+
+/* Radio buttons and checkboxes */
+.stRadio > div {
+    border-radius: 6px;
+    padding: 0.5rem;
+    background-color: #242424;
+}
+
+.stRadio label {
+    color: #FFFFFF !important;
+}
+
+.stRadio label:hover {
+    color: #FFDD44 !important;
+}
+
+/* Tabs */
+.stTabs {
+    background-color: #242424;
+    border-radius: 8px;
+    padding: 1rem;
+    margin: 1rem 0;
+}
+
+/* Success/Info messages */
+.stSuccess, .stInfo {
+    background-color: #3DDC84;
+    color: #181818;
+    font-weight: bold;
+    border-radius: 6px;
+    padding: 0.75rem;
+}
+
+/* Error messages */
+.stError {
+    background-color: #FF4444;
+    color: #FFFFFF;
+    font-weight: bold;
+    border-radius: 6px;
+    padding: 0.75rem;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .stButton>button {
+        min-width: 30px !important;
+        height: 25px !important;
+        padding: 1px 6px !important;
+        font-size: 12px;
+    }
+
+    .stTextInput>div>div>input {
+        font-size: 16px;
+    }
+}