Update css.py

css.py

@@ -23,7 +23,6 @@ def get_css():
         font-size: 2.5rem !important;
         font-weight: 700;
         letter-spacing: 0.1em;
-        text-transform: uppercase;
         color: #34d399 !important;
         text-shadow: 0 0 15px rgba(52, 211, 153, 0.3);
         margin-bottom: 0.2rem;
@@ -33,6 +32,25 @@ def get_css():
         color: #6ee7b7 !important;
         opacity: 0.8;
     }
+    .description {
+        font-size: 0.7rem !important;
+        color: #94a3b8 !important;
+        opacity: 0.9;
+        max-width: 800px;
+        margin: 10px auto;
+        line-height: 1.5;
+    }
+    .description a {
+        color: #34d399 !important;
+        text-decoration: underline;
+    }
+    /* === Column spacing === */
+    .main-row {
+        gap: 24px !important;
+    }
+    .main-row > div {
+        min-height: 700px;
+    }
     /* === 枠 (Glass Frame) === */
     .step-frame {
         background: rgba(2, 6, 23, 0.7) !important;
@@ -42,12 +60,10 @@ def get_css():
         margin-bottom: 12px !important;
         transition: all 0.3s ease !important;
         box-shadow: 0 0 10px rgba(16, 185, 129, 0.05);
-        /* 右パネルは高さを確保 */
         height: 100%; 
         display: flex;
         flex-direction: column;
     }
-    /* 特定IDで微調整する場合 */
     #right-panel {
         min-height: 600px;
     }
@@ -71,6 +87,12 @@ def get_css():
         display: block;
         text-shadow: 0 0 5px rgba(52, 211, 153, 0.4);
     }
+    .step-hint {
+        font-size: 0.7rem !important;
+        color: #6ee7b7 !important;
+        opacity: 0.7;
+        margin-bottom: 8px;
+    }
     /* === 入力パーツ === */
     label span {
         font-size: 0.7rem !important;
@@ -85,12 +107,21 @@ def get_css():
         font-size: 0.9rem !important;
         padding: 4px 8px !important;
     }
+    /* Editable inputs should be white */
+    input:not([readonly]):not(:disabled),
+    textarea:not([readonly]):not(:disabled) {
+        color: #ffffff !important;
+    }
+    /* Dropdown inputs white when editable */
+    .svelte-1gfkn6j input {
+        color: #ffffff !important;
+    }
     ::placeholder { color: #059669 !important; opacity: 0.7; }
     textarea:focus, input:focus {
         border-color: #34d399 !important;
         box-shadow: 0 0 10px rgba(52, 211, 153, 0.2) !important;
     }
-    input[type=number] { color: #34d399 !important; }
+    input[type=number] { color: #ffffff !important; }
     /* === タスクカード & ボタン === */
     button {
         text-transform: uppercase !important;
@@ -116,7 +147,7 @@ def get_css():
         display: flex;
         align-items: flex-end;
         gap: 10px;
-        margin-top: auto; /* 下部に固定 */
+        margin-top: auto;
         padding-top: 10px;
     }
     
@@ -145,6 +176,15 @@ def get_css():
         transform: scale(1.05);
         box-shadow: 0 0 15px rgba(52, 211, 153, 0.6);
     }
+    /* Stop button style */
+    .stop-btn {
+        background: #ef4444 !important;
+        color: white !important;
+    }
+    .stop-btn:hover {
+        background: #dc2626 !important;
+        box-shadow: 0 0 15px rgba(239, 68, 68, 0.6) !important;
+    }
     /* === チャットボット (バブルデザイン) === */
     .bubble-wrap { background: transparent !important; }
     
@@ -184,7 +224,6 @@ def get_css():
     footer { 
         display: none !important; 
     }
-    /* 読み込み中のくるくる（スピン）は残したい場合はここを調整 */
     .loading-wrap {
         display: none !important;
     }