Create styles.html

styles.html

@@ -0,0 +1,42 @@
+<style>
+    /* Base CSS for components */
+    .st-emotion-cache-13ln4jf { /* Targets the sidebar container */
+        width: 350px !important;
+    }
+    .custom-dropdown {
+        position: relative; display: inline-block; width: 100%;
+    }
+    .size-button {
+        background-color: #f0f2f6; color: #31333F; padding: 8px 12px;
+        border: 1px solid #ced4da; border-radius: 0.5rem; cursor: pointer;
+        display: flex; justify-content: space-between; align-items: center;
+        width: 100%; font-size: 14px;
+    }
+    .size-button:hover { border-color: #4A90E2; }
+    .dropdown-content {
+        display: none; position: absolute; background-color: #ffffff;
+        min-width: 300px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+        z-index: 1000; border-radius: 0.5rem; padding: 8px 0; border: 1px solid #ddd;
+    }
+    .custom-dropdown:hover .dropdown-content { display: block; }
+    .dropdown-item {
+        display: flex; align-items: center; padding: 10px 15px;
+        color: #31333F; text-decoration: none; gap: 15px;
+    }
+    .dropdown-item:hover, .dropdown-item.active { background-color: #f0f2f6; }
+    .item-icon { font-size: 20px; }
+    .item-text { flex-grow: 1; }
+    .item-primary { font-weight: 500; }
+    .item-subtitle { font-size: 12px; color: #555; }
+    .item-checkmark { font-weight: bold; color: #4A90E2; width: 20px; text-align: right; }
+
+    .dynamic-canvas-container {
+        width: 100%; max-width: 90vw; margin: 2rem auto; border: 1px solid #EAECEE;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.05); border-radius: 8px; padding: 2%;
+        overflow: hidden; resize: both; transition: aspect-ratio 0.3s ease-in-out;
+        display: flex; flex-direction: column; background: #fff;
+    }
+    .dynamic-canvas-container .stTextArea textarea {
+        transition: font-size 0.2s;
+    }
+</style>