Update app.py

app.py

@@ -138,34 +138,170 @@ def save_analysis(r1, r2, r3, r4):
 
 CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Mono:wght@400;500&display=swap');
-:root { --bg:#080a0f; --surface:#0f1118; --border:#1e2235; --accent:#FF6B2B; --accent2:#FFB347; --accent3:#7DF9AA; --text:#E8EAF2; --muted:#55607A; --r:8px; }
-body, .gradio-container { background:var(--bg)!important; font-family:'Syne',sans-serif!important; color:var(--text)!important; }
-.hdr { text-align:center; padding:2rem 1rem 1.4rem; border-bottom:1px solid var(--border); background:radial-gradient(ellipse at 50% 0%,rgba(255,107,43,0.08),transparent 65%); }
-.hdr h1 { font-size:2rem; font-weight:800; letter-spacing:-0.04em; background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin:0 0 0.3rem; }
-.hdr .sub { color:var(--muted); font-family:'DM Mono',monospace; font-size:.75rem; }
-.hdr .own { color:var(--accent3); font-family:'DM Mono',monospace; font-size:.68rem; margin-top:.3rem; letter-spacing:.1em; text-transform:uppercase; }
-input[type=text], textarea { background:var(--surface)!important; border:1px solid var(--border)!important; border-radius:var(--r)!important; color:var(--text)!important; font-family:'DM Mono',monospace!important; font-size:.86rem!important; padding:.6rem .85rem!important; }
-input[type=text]:focus, textarea:focus { border-color:var(--accent)!important; outline:none!important; box-shadow:0 0 0 3px rgba(255,107,43,.1)!important; }
-label > span:first-child { color:var(--muted)!important; font-family:'DM Mono',monospace!important; font-size:.7rem!important; letter-spacing:.08em!important; text-transform:uppercase!important; }
-button.primary { background:var(--accent)!important; color:#080a0f!important; border:none!important; border-radius:var(--r)!important; font-family:'Syne',sans-serif!important; font-weight:800!important; font-size:.9rem!important; padding:.7rem 2.5rem!important; cursor:pointer!important; }
-button.primary:hover { opacity:.85!important; }
-button.secondary { background:#151822!important; color:var(--accent2)!important; border:1px solid var(--border)!important; border-radius:var(--r)!important; font-family:'Syne',sans-serif!important; font-weight:700!important; font-size:.8rem!important; padding:.5rem 1.2rem!important; cursor:pointer!important; }
-.out textarea { background:#060709!important; border:1px solid var(--border)!important; border-left:3px solid var(--accent)!important; border-radius:0 var(--r) var(--r) 0!important; font-family:'DM Mono',monospace!important; font-size:.84rem!important; line-height:1.7!important; color:var(--text)!important; }
-.foot { text-align:center; padding:1.5rem; color:var(--muted); font-family:'DM Mono',monospace; font-size:.68rem; border-top:1px solid var(--border); margin-top:2rem; }
+
+:root {
+    --bg: #030712;
+    --surface: #0a0f1e;
+    --surface2: #0f1629;
+    --border: #1a2544;
+    --accent: #00CFFF;
+    --accent2: #FFE500;
+    --accent3: #0066FF;
+    --text: #E8F4FF;
+    --muted: #4A6080;
+    --r: 8px;
+}
+
+body, .gradio-container {
+    background: var(--bg) !important;
+    font-family: 'Syne', sans-serif !important;
+    color: var(--text) !important;
+}
+
+.hdr {
+    text-align: center;
+    padding: 2.4rem 1rem 1.6rem;
+    border-bottom: 1px solid var(--border);
+    background:
+        radial-gradient(ellipse at 30% 50%, rgba(0,102,255,0.12) 0%, transparent 60%),
+        radial-gradient(ellipse at 70% 50%, rgba(0,207,255,0.08) 0%, transparent 60%);
+}
+.hdr h1 {
+    font-size: 2.2rem;
+    font-weight: 800;
+    letter-spacing: -0.04em;
+    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin: 0 0 0.3rem;
+}
+.hdr .sub {
+    color: var(--muted);
+    font-family: 'DM Mono', monospace;
+    font-size: .75rem;
+    letter-spacing: .06em;
+}
+.hdr .own {
+    color: var(--accent2);
+    font-family: 'DM Mono', monospace;
+    font-size: .68rem;
+    margin-top: .3rem;
+    letter-spacing: .1em;
+    text-transform: uppercase;
+}
+
+.tab-nav button {
+    background: transparent !important;
+    color: var(--muted) !important;
+    border: 1px solid transparent !important;
+    border-radius: var(--r) !important;
+    font-family: 'Syne', sans-serif !important;
+    font-weight: 700 !important;
+    font-size: 0.82rem !important;
+    padding: 0.5rem 1rem !important;
+    transition: all .18s !important;
+}
+.tab-nav button.selected {
+    background: var(--surface2) !important;
+    color: var(--accent) !important;
+    border-color: var(--accent3) !important;
+}
+.tab-nav button:hover { color: var(--text) !important; }
+
+input[type=text], textarea {
+    background: var(--surface) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--r) !important;
+    color: var(--text) !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: .86rem !important;
+    padding: .6rem .85rem !important;
+    transition: border-color .18s !important;
+}
+input[type=text]:focus, textarea:focus {
+    border-color: var(--accent) !important;
+    outline: none !important;
+    box-shadow: 0 0 0 3px rgba(0,207,255,.12) !important;
+}
+
+label > span:first-child {
+    color: var(--muted) !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: .7rem !important;
+    letter-spacing: .08em !important;
+    text-transform: uppercase !important;
+}
+
+button.primary {
+    background: linear-gradient(135deg, var(--accent3), var(--accent)) !important;
+    color: #030712 !important;
+    border: none !important;
+    border-radius: var(--r) !important;
+    font-family: 'Syne', sans-serif !important;
+    font-weight: 800 !important;
+    font-size: .92rem !important;
+    padding: .75rem 2.8rem !important;
+    cursor: pointer !important;
+    transition: opacity .15s, transform .15s !important;
+    letter-spacing: .04em !important;
+}
+button.primary:hover {
+    opacity: .88 !important;
+    transform: translateY(-1px) !important;
+}
+
+button.secondary {
+    background: var(--surface2) !important;
+    color: var(--accent2) !important;
+    border: 1px solid var(--accent3) !important;
+    border-radius: var(--r) !important;
+    font-family: 'Syne', sans-serif !important;
+    font-weight: 700 !important;
+    font-size: .8rem !important;
+    padding: .5rem 1.2rem !important;
+    cursor: pointer !important;
+    transition: all .15s !important;
+}
+button.secondary:hover {
+    background: var(--accent3) !important;
+    color: #030712 !important;
+}
+
+.out textarea {
+    background: #020510 !important;
+    border: 1px solid var(--border) !important;
+    border-left: 3px solid var(--accent) !important;
+    border-radius: 0 var(--r) var(--r) 0 !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: .84rem !important;
+    line-height: 1.7 !important;
+    color: var(--text) !important;
+}
+
+.foot {
+    text-align: center;
+    padding: 1.5rem;
+    color: var(--muted);
+    font-family: 'DM Mono', monospace;
+    font-size: .68rem;
+    border-top: 1px solid var(--border);
+    margin-top: 2rem;
+    letter-spacing: .05em;
+}
 """
 
 with gr.Blocks(css=CSS, title="Metabolic Phoenix Framework") as demo:
 
     gr.HTML("""
     <div class="hdr">
-        <h1>🔥 The Metabolic Phoenix Framework</h1>
+        <h1>⚡ The Metabolic Phoenix Framework</h1>
         <p class="sub">Injectiv8 &nbsp;·&nbsp; Ms. Nala &nbsp;·&nbsp; Llama-3.3-70B</p>
         <p class="own">Invented &amp; Owned by Dwayne Anthony Brian Galloway &nbsp;·&nbsp; 2026</p>
     </div>
     """)
 
     pdf_input = gr.File(label="Upload Document", file_types=[".pdf"], type="filepath")
-    run_btn   = gr.Button("🔥 Analyse", variant="primary")
+    run_btn   = gr.Button("⚡ Analyse", variant="primary")
 
     with gr.Accordion("Cycle 1 — Fact Ledger", open=True):
         out1 = gr.Textbox(label="", lines=12, elem_classes=["out"])