Update app.py

app.py

@@ -848,6 +848,132 @@ input[disabled] {
     border: 1px solid rgba(94, 74, 40, .45) !important;
 }
 
+/* ===== 修正右下方 Accordion / Details 標題太暗 ===== */
+.gradio-container details,
+.gradio-container .gr-accordion,
+.gradio-container [data-testid="accordion"],
+.gradio-container [class*="accordion"] {
+    background: #241f1d !important;
+    border: 1px solid rgba(184, 138, 66, 0.55) !important;
+    border-radius: 8px !important;
+    color: #fff2c7 !important;
+}
+
+.gradio-container details summary,
+.gradio-container .gr-accordion summary,
+.gradio-container [data-testid="accordion"] summary,
+.gradio-container [class*="accordion"] summary,
+.gradio-container details summary *,
+.gradio-container .gr-accordion summary *,
+.gradio-container [data-testid="accordion"] summary *,
+.gradio-container [class*="accordion"] summary * {
+    background: #241f1d !important;
+    color: #fff2c7 !important;
+    opacity: 1 !important;
+    font-weight: 800 !important;
+    text-shadow: none !important;
+}
+
+.gradio-container details summary::marker {
+    color: #fff2c7 !important;
+}
+
+.gradio-container details svg,
+.gradio-container .gr-accordion svg,
+.gradio-container [data-testid="accordion"] svg {
+    color: #fff2c7 !important;
+    fill: #fff2c7 !important;
+    stroke: #fff2c7 !important;
+}
+
+/* 範例問法標題不要太白或太淡 */
+.gradio-container .gr-examples,
+.gradio-container .gr-examples *,
+.gradio-container [data-testid="examples"],
+.gradio-container [data-testid="examples"] *,
+.gradio-container .examples,
+.gradio-container .examples * {
+    color: #1c2433 !important;
+    opacity: 1 !important;
+}
+
+.gradio-container .gr-examples > label,
+.gradio-container .gr-examples .label-wrap,
+.gradio-container .gr-examples .label-wrap *,
+.gradio-container [data-testid="examples"] label,
+.gradio-container [data-testid="examples"] .label-wrap,
+.gradio-container [data-testid="examples"] .label-wrap * {
+    color: #9a6b28 !important;
+    font-weight: 800 !important;
+}
+
+/* 深色框內的輸出/文字標籤統一亮金色 */
+.gradio-container .gr-textbox label,
+.gradio-container .gr-textbox label *,
+.gradio-container .gr-file label,
+.gradio-container .gr-file label *,
+.gradio-container .file-preview,
+.gradio-container .file-preview *,
+.gradio-container [data-testid="file"] label,
+.gradio-container [data-testid="file"] label * {
+    color: #fff2c7 !important;
+    opacity: 1 !important;
+    font-weight: 800 !important;
+}
+
+
+
+/* ===== 範例問法標題修正：改用獨立標題，避免 Gradio label 變淡 ===== */
+.examples-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 14px 0 10px;
+    color: #1c2433 !important;
+    opacity: 1 !important;
+    font-size: 14px;
+    font-weight: 900;
+    letter-spacing: .12em;
+    text-shadow: none !important;
+}
+.examples-title::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: linear-gradient(90deg, rgba(184,138,66,.45), rgba(184,138,66,0));
+}
+
+/* 隱藏 Gradio Examples 內建淡色 label，保留上方自訂標題 */
+.gradio-container .gr-examples > label,
+.gradio-container .gr-examples .label-wrap,
+.gradio-container [data-testid="examples"] > label,
+.gradio-container [data-testid="examples"] .label-wrap,
+.gradio-container .examples > label,
+.gradio-container .examples .label-wrap {
+    display: none !important;
+}
+
+/* 範例按鈕：維持紙面深色文字，避免被全域亮字覆蓋 */
+.gradio-container .gr-examples button,
+.gradio-container .gr-examples button *,
+.gradio-container [data-testid="examples"] button,
+.gradio-container [data-testid="examples"] button *,
+.gradio-container .examples button,
+.gradio-container .examples button * {
+    color: #21170f !important;
+    -webkit-text-fill-color: #21170f !important;
+    opacity: 1 !important;
+    font-weight: 700 !important;
+    text-shadow: none !important;
+}
+
+.gradio-container .gr-examples button,
+.gradio-container [data-testid="examples"] button,
+.gradio-container .examples button {
+    background: rgba(255, 248, 234, .98) !important;
+    border: 1px solid rgba(66, 49, 26, .55) !important;
+    border-radius: 8px !important;
+}
 """
 
 HEADER_HTML = """
@@ -1014,7 +1140,8 @@ def create_interface():
                 with gr.Accordion("▸ 查看檢索到的文本片段", open=False):
                     src = gr.Textbox(label="檢索到的文本片段", lines=10, interactive=False)
 
-                gr.Examples(examples=EXAMPLE_QS, inputs=qin, label="範例問法")
+                gr.HTML("<div class='examples-title'>三　範例問法</div>")
+                gr.Examples(examples=EXAMPLE_QS, inputs=qin, label="")
 
         # ── 事件綁定 ──────────────────────────────────
         apply_key_btn.click(fn=apply_api_key, inputs=[api_key_input], outputs=[api_key_status])