Update app.py

app.py

@@ -91,7 +91,6 @@ custom_css = f"""
 @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
 
 /* --- 1. DEFAULT (DARK/NIGHT MODE) --- */
-/* This applies when the page first loads or when 'light-mode' is NOT active */
 :root, .dark, body {{
     --bg-gradient: radial-gradient(circle at 50% 0%, #0a0a2e 0%, #000000 100%);
     --card-bg: rgba(15, 15, 35, 0.7);
@@ -103,22 +102,23 @@ custom_css = f"""
     --info-bg: rgba(212, 175, 55, 0.08); 
     --info-border: #d4af37;
     --glow-color: rgba(212, 175, 55, 0.4);
+    --input-bg: rgba(0,0,0,0.2);
 }}
 
 /* --- 2. LIGHT MODE OVERRIDE (PAPYRUS) --- */
-/* We use high specificity (.gradio-container.light-mode) to defeat the OS dark mode */
 body.light-mode, .gradio-container.light-mode {{
     --bg-gradient: linear-gradient(135deg, #f0e6d2 0%, #e6dcc3 100%) !important;
     --card-bg: rgba(255, 255, 255, 0.6) !important;
-    --text-primary: #3d342b !important; /* Forces Dark Text */
-    --text-accent: #8b4513 !important;  /* Forces Brown Accent */
+    --text-primary: #3d342b !important;
+    --text-accent: #8b4513 !important;
     --border-color: #8b4513 !important;
     --btn-grad: linear-gradient(135deg, #cd853f 0%, #8b4513 100%) !important;
     --btn-text: #fff !important;
     --info-bg: rgba(139, 69, 19, 0.05) !important; 
     --info-border: #8b4513 !important;
     --glow-color: rgba(139, 69, 19, 0.3) !important;
-    color: #3d342b !important; /* Force Body Text Dark */
+    --input-bg: rgba(255, 255, 255, 0.7) !important;
+    color: var(--text-primary) !important;
 }}
 
 /* --- GLOBAL LAYOUT --- */
@@ -147,13 +147,12 @@ button, a, .cursor-pointer {{
     animation: fadeDust 0.6s linear forwards;
     box-shadow: 0 0 5px var(--text-accent);
 }}
-
 @keyframes fadeDust {{
     0% {{ opacity: 1; transform: scale(1); }}
     100% {{ opacity: 0; transform: scale(0); }}
 }}
 
-/* --- CARDS --- */
+/* --- CARDS & TITLES --- */
 .card {{
     background: var(--card-bg) !important;
     border: 1px solid rgba(128, 128, 128, 0.2) !important;
@@ -165,12 +164,26 @@ button, a, .cursor-pointer {{
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     color: var(--text-primary) !important;
 }}
-
 .card:hover {{
     transform: translateY(-4px);
     border-color: var(--border-color) !important;
     box-shadow: 0 10px 40px rgba(0,0,0,0.2), 0 0 20px var(--glow-color);
 }}
+.card-title {{
+    font-family: 'Cairo', sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--text-accent) !important;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    border-bottom: 1px solid rgba(128,128,128, 0.2);
+    padding-bottom: 15px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}}
 
 /* --- BUTTONS --- */
 button.primary-btn {{
@@ -188,7 +201,6 @@ button.primary-btn:hover {{
     transform: scale(1.02);
     box-shadow: 0 0 25px var(--glow-color);
 }}
-
 button.toggle-btn {{
     background: transparent !important;
     border: 1px solid var(--border-color) !important;
@@ -200,7 +212,7 @@ button.toggle-btn:hover {{
     background: var(--info-bg) !important;
 }}
 
-/* --- GUIDE BOXES & TEXT COLORS --- */
+/* --- GUIDE BOXES --- */
 .guide-step {{
     background-color: var(--info-bg) !important;
     border-left: 4px solid var(--info-border) !important;
@@ -210,9 +222,8 @@ button.toggle-btn:hover {{
     font-family: 'Space Mono', monospace;
     font-size: 13px;
     line-height: 1.6;
-    color: var(--text-primary) !important; /* STRICT COLOR ENFORCEMENT */
+    color: var(--text-primary) !important;
 }}
-
 .step-number {{
     color: var(--text-accent) !important;
     font-weight: bold;
@@ -221,7 +232,6 @@ button.toggle-btn:hover {{
     margin-bottom: 6px;
     font-size: 12px;
 }}
-
 .path-highlight {{
     background: rgba(128,128,128,0.2);
     padding: 3px 8px;
@@ -231,27 +241,61 @@ button.toggle-btn:hover {{
     border: 1px solid var(--border-color);
 }}
 
-/* --- FIXES --- */
-.gradio-image, .gradio-json {{ background: transparent !important; border: none !important; }}
+/* --- DEEP LIGHT MODE FIXES --- */
 
-/* Fix Light Mode Upload Box Background */
-body.light-mode .gradio-image button, 
-.gradio-container.light-mode .gradio-image button {{
-     background-color: rgba(255, 248, 240, 0.7) !important;
+/* 1. Force Image Containers to be Light/Transparent in Light Mode */
+body.light-mode .gradio-image,
+body.light-mode .image-container,
+body.light-mode .gradio-image > div {{
+    background-color: rgba(255, 255, 255, 0.4) !important;
+}}
+/* Fix the upload area button specifically */
+body.light-mode .gradio-image button {{
+     background-color: rgba(255, 248, 240, 0.8) !important;
      border: 2px dashed var(--border-color) !important;
      color: var(--text-primary) !important;
 }}
 
+/* 2. Fix Analysis Log (Textbox) Background & Text */
 .report-box textarea {{
-    background-color: rgba(0,0,0,0.2) !important;
+    background-color: var(--input-bg) !important; /* Uses variable now */
     border: 1px solid var(--border-color) !important;
     font-family: 'Space Mono', monospace !important;
-    color: var(--text-primary) !important; /* Ensure text matches theme */
+    color: var(--text-primary) !important;
     font-size: 14px !important;
 }}
 
+/* 3. Fix Accordion/JSON in Light Mode */
+body.light-mode .accordion {{
+    background-color: rgba(255, 255, 255, 0.5) !important;
+    border: 1px solid var(--border-color) !important;
+}}
+body.light-mode .accordion span, 
+body.light-mode .accordion label {{
+    color: var(--text-primary) !important;
+}}
+
+/* 4. Fix General Text Visibility */
+body.light-mode span, .gradio-container.light-mode span,
+body.light-mode p, .gradio-container.light-mode p {{
+     color: var(--text-primary) !important;
+}}
+body.light-mode .guide-step code {{
+    background-color: rgba(139, 69, 19, 0.1);
+    color: var(--text-accent) !important;
+}}
+body.light-mode .tab-nav button {{
+    color: var(--text-primary) !important;
+    opacity: 0.7;
+}}
+body.light-mode .tab-nav button.selected {{
+    color: var(--text-accent) !important;
+    opacity: 1;
+}}
+
+/* Cleanup */
+.gradio-image, .gradio-json {{ background: transparent !important; border: none !important; }}
 .block-title {{ color: var(--text-accent) !important; }}
-span {{ color: var(--text-primary); }}
 """
 
 header_html = """
@@ -345,7 +389,7 @@ trail_script = """
 <script>
 document.addEventListener('DOMContentLoaded', () => {
     document.addEventListener('mousemove', (e) => {
-        if (Math.random() > 0.7) return; // limit density
+        if (Math.random() > 0.7) return; 
         const dust = document.createElement('div');
         dust.classList.add('gold-dust');
         dust.style.left = e.clientX + 'px';
@@ -358,11 +402,9 @@ document.addEventListener('DOMContentLoaded', () => {
 """
 
 with gr.Blocks(title="Rosetta Decoder") as demo:
-    # Inject CSS & Trail Script
     gr.HTML(f"<style>{custom_css}</style>")
     gr.HTML(trail_script)
     
-    # Top Section
     with gr.Row(elem_classes="header-row"):
         with gr.Column(scale=4):
             gr.HTML(header_html)
@@ -371,7 +413,6 @@ with gr.Blocks(title="Rosetta Decoder") as demo:
 
     gr.HTML(mission_html)
     
-    # Workspace
     with gr.Row():
         with gr.Column(scale=1):
             gr.HTML('<div class="card"><div class="card-title">INPUT IMAGE</div>')
@@ -396,13 +437,11 @@ with gr.Blocks(title="Rosetta Decoder") as demo:
                 out_json = gr.JSON(label="JSON Data")
             gr.HTML('</div>')
 
-    # Footer
     gr.HTML(guide_instructions_html)
     gr.Code(value=claude_json_content, language="json", label="claude_desktop_config.json", interactive=False, lines=15)
     gr.HTML("</div>")
 
-    # Wiring
-    # JS: Toggle 'light-mode' on body AND container to defeat OS dark mode
+    # JS Toggle Logic
     btn_toggle.click(None, None, None, js="() => { document.body.classList.toggle('light-mode'); document.querySelector('.gradio-container').classList.toggle('light-mode'); }")
     
     btn_upload.click(fn=detect_hieroglyphs, inputs=[img_upload, slider_upload], outputs=[out_image, out_json, out_report, btn_download])