UI update

src/app.py

@@ -14,93 +14,190 @@ from quadtree_engine import (
 )
 
 st.set_page_config(
-    page_title="QuadTree Image Engine",
-    page_icon="🌲",
+    page_title="Image Manipulation Engine",
+    page_icon="✨",
     layout="wide",
-    initial_sidebar_state="expanded"
+    initial_sidebar_state="collapsed"
 )
 
 # ── CSS ──────────────────────────────────────────────────────────────────────
 st.markdown("""
 <style>
-@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
 html, body, [data-testid="stAppViewContainer"], .stApp {
-    background: #0d0d0d !important;
-    color: #f0f0f0 !important;
-    font-family: 'IBM Plex Sans', sans-serif !important;
+    background: #FAF6F0 !important; /* Claude's warm light orange/beige background */
+    color: #2D2D2D !important;
+    font-family: 'Inter', sans-serif !important;
 }
 
 header[data-testid="stHeader"] {
-    display: none !important;
+    background: transparent !important;
 }
 
-
-h1, h2, h3, h4, h5, h6, [data-testid="stMarkdownContainer"] h1, [data-testid="stMarkdownContainer"] h2, [data-testid="stMarkdownContainer"] h3 {
-    font-family: 'DM Mono', monospace !important;
+/* Hide deploy buttons and toolbar */
+header[data-testid="stHeader"] .stAppDeployButton,
+header[data-testid="stHeader"] [data-testid="stToolbar"],
+header[data-testid="stHeader"] [data-testid="stHeaderActionElements"] {
+    display: none !important;
 }
 
-[data-testid="stSidebar"] {
-    background: #141414 !important;
-    border-right: 1px solid #2a2a2a !important;
+h1, h2, h3, h4, h5, h6, [data-testid="stMarkdownContainer"] h1 {
+    font-family: 'Inter', sans-serif !important;
+    font-weight: 600 !important;
+    color: #1A1A1A !important;
 }
 
+/* Claude UI Buttons */
 .stButton > button {
-    background-color: #00ff87 !important;
-    color: #0d0d0d !important;
+    background-color: #1A1A1A !important;
+    color: #FFFFFF !important;
     border: none !important;
-    border-radius: 4px !important;
-    font-family: 'DM Mono', monospace !important;
-    font-weight: 700 !important;
+    border-radius: 8px !important;
+    font-family: 'Inter', sans-serif !important;
+    font-weight: 500 !important;
+    padding: 0.5rem 1rem !important;
+    transition: all 0.2s ease;
     width: 100%;
-    margin-top: 1rem;
 }
 
 .stButton > button:hover {
-    background-color: #00cc6a !important;
-    color: #000000 !important;
+    background-color: #333333 !important;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 }
 
+/* Claude UI Secondary Button (Download) */
 .stDownloadButton > button {
-    background-color: transparent !important;
-    color: #00ff87 !important;
-    border: 1px solid #00ff87 !important;
-    border-radius: 4px !important;
-    font-family: 'DM Mono', monospace !important;
-    font-weight: 700 !important;
+    background-color: #FFFFFF !important;
+    color: #1A1A1A !important;
+    border: 1px solid #D1D1D1 !important;
+    border-radius: 8px !important;
+    font-family: 'Inter', sans-serif !important;
+    font-weight: 500 !important;
+    width: 100%;
+    padding: 0.5rem 1rem !important;
+    transition: all 0.2s ease;
 }
 
 .stDownloadButton > button:hover {
-    background-color: #00ff87 !important;
-    color: #0d0d0d !important;
+    background-color: #F8F8F8 !important;
+    border-color: #1A1A1A !important;
+}
+
+/* Inputs */
+.stSelectbox > div > div {
+    background-color: #FFFFFF !important;
+    border-radius: 8px !important;
+    border: 1px solid #E5E0D8 !important;
+    color: #1A1A1A !important;
 }
 
-.accent-text { color: #00ff87; }
-.warning-text { color: #ffb700; }
-.error-text { color: #ff4444; }
+.stTextInput > div > div > input {
+    background-color: #FFFFFF !important;
+    border-radius: 8px !important;
+    border: 1px solid #E5E0D8 !important;
+    color: #1A1A1A !important;
+}
+
+/* Slider Customization */
+.stSlider [data-testid="stTickBar"] {
+    background-color: #E5E0D8 !important;
+}
+.stSlider [data-testid="stSliderThumb"] {
+    background-color: #D97757 !important; /* Claude's Peach/Orange accent */
+}
+
+/* Tabs Styling */
+.stTabs [data-baseweb="tab-list"] {
+    gap: 2rem;
+}
+.stTabs [data-baseweb="tab"] {
+    font-family: 'Inter', sans-serif !important;
+    font-weight: 500 !important;
+    padding-bottom: 0.5rem !important;
+    color: #777777 !important;
+}
+.stTabs [aria-selected="true"] {
+    color: #1A1A1A !important;
+    border-bottom-color: #D97757 !important;
+}
+
+/* Hide Sidebar */
+[data-testid="stSidebar"] {
+    display: none !important;
+}
+[data-testid="collapsedControl"] {
+    display: none !important;
+}
+
+/* Custom CSS classes for components */
+.claude-stats-container {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1.5rem;
+    flex-wrap: wrap;
+}
+.claude-stat-card {
+    flex: 1;
+    background-color: #FFFFFF;
+    border: 1px solid #E5E0D8;
+    border-radius: 12px;
+    padding: 1.25rem;
+    text-align: center;
+    min-width: 140px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
+}
+.claude-stat-label {
+    font-size: 0.75rem;
+    color: #888888;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+}
+.claude-stat-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #1A1A1A;
+}
+.claude-stat-sub {
+    font-size: 0.75rem;
+    color: #D97757;
+    margin-top: 0.25rem;
+}
 
 .step-row {
     display: flex;
     align-items: center;
     margin-bottom: 0.5rem;
-    background-color: #141414;
-    border: 1px solid #2a2a2a;
+    background-color: #FFFFFF;
+    border: 1px solid #E5E0D8;
     padding: 0.75rem;
+    border-radius: 8px;
 }
 .step-num {
-    color: #00ff87;
-    font-family: 'DM Mono', monospace;
+    color: #D97757;
     font-weight: 700;
     margin-right: 1rem;
     min-width: 60px;
 }
 
 .code-block-custom {
-    background-color: #141414;
-    border: 1px solid #2a2a2a;
+    background-color: #F8F9FA;
+    border: 1px solid #E5E0D8;
     padding: 1rem;
-    font-family: 'DM Mono', monospace;
-    color: #f0f0f0;
+    border-radius: 8px;
+    color: #2D2D2D;
+}
+
+hr {
+    border-color: #E5E0D8 !important;
+}
+
+/* Make radio button labels dark */
+[data-testid="stRadio"] label {
+    color: #1A1A1A !important;
 }
 </style>
 """, unsafe_allow_html=True)
@@ -161,116 +258,122 @@ def count_nodes_and_leaves(node, depth=0):
     max_d = max(c[2] for c in counts)
     return total, leaves, max_d
 
-# ── Sidebar ──────────────────────────────────────────────────────────────────
+# ── App Header ───────────────────────────────────────────────────────────────
+st.markdown("<h1 style='text-align: center; margin-bottom: 2rem; font-size: 2.5rem; letter-spacing: -0.02em;'>Image Manipulation Engine</h1>", unsafe_allow_html=True)
+
+# ── Main Area ────────────────────────────────────────────────────────────────
+
+tab1, tab2, tab3 = st.tabs(["IMAGE VIEW", "ALGORITHM EXPLORER", "C SOURCE"])
+
+OP_MAP = {
+    "Compress Only": "compress_only",
+    "Grayscale": "grayscale",
+    "Negative": "negative",
+    "Sepia": "sepia",
+    "Brighten": "brighten",
+    "Mirror (Horizontal)": "mirror",
+    "Flip (Vertical)": "water",
+    "Rotate Left 90°": "rotate_left",
+    "Rotate Right 90°": "rotate_right",
+    "Blend / Union": "union",
+}
 
-with st.sidebar:
-    st.markdown("### ⬆ INPUT")
+with tab1:
+    # --- CONTROL PANEL ---
+    st.markdown("<div style='background-color: #FFFFFF; padding: 1.5rem; border-radius: 12px; border: 1px solid #E5E0D8; margin-bottom: 2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03);'>", unsafe_allow_html=True)
     
-    input_options = ["Upload file"]
-    has_ppms = os.path.isdir(PPM_DIR) and len(list_ppms()) > 0
-    if has_ppms:
-        input_options.append("Use repo PPM")
-        
-    input_mode = st.radio("Source", input_options, label_visibility="collapsed")
+    col1, col2, col3 = st.columns([1, 1, 1])
     
     arr1 = None
     file_id = None
+    arr2 = None
     
-    if input_mode == "Upload file":
-        up1 = st.file_uploader("Primary image", type=["ppm","png","jpg","jpeg"], key="u1")
-        if up1:
-            file_id = f"{up1.name}_{up1.size}"
-            try:
-                arr1, _ = load_array(uploaded=up1)
-            except ValueError as e:
-                st.error(str(e))
-    else:
-        sel = st.selectbox("Select PPM", list_ppms())
-        if sel:
-            file_id = f"repo_{sel}"
-            try:
-                arr1, _ = load_array(ppm_name=sel)
-            except ValueError as e:
-                st.error(str(e))
-                
-    # Bug 5: Image Size Guard
-    if arr1 is not None:
-        MAX_DIM = 2048
-        h, w = arr1.shape[:2]
-        if h > MAX_DIM or w > MAX_DIM:
-            st.markdown(f"<div style='color: #ffb700; font-size: 0.85rem; margin-bottom: 1rem; border: 1px solid #ffb700; padding: 0.5rem;'>⚠️ Image is {w}×{h}. Images over {MAX_DIM}px may be slow or crash. Consider resizing first.</div>", unsafe_allow_html=True)
-
-    # Bug 6: Stale Result Flash (immediately wipe on new file)
-    if file_id != st.session_state.get("last_file_id"):
-        st.session_state.pop("result", None)
-        st.session_state.pop("tree", None)
-        st.session_state.pop("op_done", None)
-        st.session_state["last_file_id"] = file_id
+    with col1:
+        st.markdown("<div style='color: #1A1A1A; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.95rem;'>1. Input Source</div>", unsafe_allow_html=True)
+        input_options = ["Upload file"]
+        has_ppms = os.path.isdir(PPM_DIR) and len(list_ppms()) > 0
+        if has_ppms:
+            input_options.append("Use Sample Images")
+            
+        input_mode = st.radio("Source", input_options, label_visibility="collapsed", horizontal=True)
         
-    st.markdown("---")
-    st.markdown("### ⚙ OPERATION")
-    
-    OP_MAP = {
-        "Compress Only": "compress_only",
-        "Grayscale": "grayscale",
-        "Negative": "negative",
-        "Sepia": "sepia",
-        "Brighten": "brighten",
-        "Mirror (Horizontal)": "mirror",
-        "Flip (Vertical)": "water",
-        "Rotate Left 90°": "rotate_left",
-        "Rotate Right 90°": "rotate_right",
-        "Blend / Union": "union",
-    }
-    
-    operation = st.selectbox("Operation", list(OP_MAP.keys()), label_visibility="collapsed")
-    op_key = OP_MAP[operation]
-    
-    arr2 = None
-    if op_key == "union":
-        st.markdown("<div style='font-family: \"DM Mono\", monospace; font-size: 0.85rem;'>Second image for blending:</div>", unsafe_allow_html=True)
         if input_mode == "Upload file":
-            up2 = st.file_uploader("Second image", type=["ppm","png","jpg","jpeg"], key="u2")
-            if up2:
+            up1 = st.file_uploader("Primary image", type=["ppm","png","jpg","jpeg"], key="u1", label_visibility="collapsed")
+            if up1:
+                file_id = f"{up1.name}_{up1.size}"
                 try:
-                    arr2, _ = load_array(uploaded=up2)
+                    arr1, _ = load_array(uploaded=up1)
                 except ValueError as e:
                     st.error(str(e))
         else:
-            sel2 = st.selectbox("Second PPM", list_ppms(), key="sel2")
-            if sel2:
+            sel = st.selectbox("Select PPM", list_ppms(), label_visibility="collapsed")
+            if sel:
+                file_id = f"repo_{sel}"
                 try:
-                    arr2, _ = load_array(ppm_name=sel2)
+                    arr1, _ = load_array(ppm_name=sel)
                 except ValueError as e:
                     st.error(str(e))
-
-    st.markdown("---")
-    st.markdown("### ◎ THRESHOLD")
-    threshold = st.slider("Quality vs Compression", 1, 500, 30, label_visibility="collapsed")
-    
-    if threshold <= 30:
-        st.markdown("<div style='color: #00ff87; font-family: \"DM Mono\", monospace; font-weight: bold;'>● LOSSLESS</div>", unsafe_allow_html=True)
-    elif threshold <= 100:
-        st.markdown("<div style='color: #ffb700; font-family: \"DM Mono\", monospace; font-weight: bold;'>● BALANCED</div>", unsafe_allow_html=True)
-    else:
-        st.markdown("<div style='color: #ff4444; font-family: \"DM Mono\", monospace; font-weight: bold;'>● LOSSY</div>", unsafe_allow_html=True)
+                    
+    with col2:
+        st.markdown("<div style='color: #1A1A1A; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.95rem;'>2. Operation</div>", unsafe_allow_html=True)
+        # Spacer to align with the radio button in col1
+        st.markdown("<div style='height: 38px; margin-bottom: 0px;'></div>", unsafe_allow_html=True)
         
-    run = st.button("▶ RUN", disabled=(arr1 is None))
+        operation = st.selectbox("Operation", list(OP_MAP.keys()), label_visibility="collapsed")
+        op_key = OP_MAP[operation]
+        
+        if op_key == "union":
+            st.markdown("<div style='font-size: 0.85rem; color: #777; margin-top: 0.5rem; margin-bottom: 0.2rem;'>Second image for blending:</div>", unsafe_allow_html=True)
+            if input_mode == "Upload file":
+                up2 = st.file_uploader("Second image", type=["ppm","png","jpg","jpeg"], key="u2", label_visibility="collapsed")
+                if up2:
+                    try:
+                        arr2, _ = load_array(uploaded=up2)
+                    except ValueError as e:
+                        st.error(str(e))
+            else:
+                sel2 = st.selectbox("Second PPM", list_ppms(), key="sel2", label_visibility="collapsed")
+                if sel2:
+                    try:
+                        arr2, _ = load_array(ppm_name=sel2)
+                    except ValueError as e:
+                        st.error(str(e))
+
+    with col3:
+        st.markdown("<div style='color: #1A1A1A; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.95rem;'>3. Configuration</div>", unsafe_allow_html=True)
+        # Spacer to align with the radio button in col1
+        st.markdown("<div style='height: 38px; margin-bottom: 0px;'></div>", unsafe_allow_html=True)
+        
+        threshold = st.slider("Quality vs Compression", 1, 500, 30, label_visibility="collapsed")
+        
+        if threshold <= 30:
+            st.markdown("<div style='color: #777; font-size: 0.8rem; margin-top: -10px;'>Mode: <span style='color: #10B981; font-weight: 600;'>Lossless</span></div>", unsafe_allow_html=True)
+        elif threshold <= 100:
+            st.markdown("<div style='color: #777; font-size: 0.8rem; margin-top: -10px;'>Mode: <span style='color: #F59E0B; font-weight: 600;'>Balanced</span></div>", unsafe_allow_html=True)
+        else:
+            st.markdown("<div style='color: #777; font-size: 0.8rem; margin-top: -10px;'>Mode: <span style='color: #EF4444; font-weight: 600;'>Lossy</span></div>", unsafe_allow_html=True)
+            
+    st.markdown("<hr style='margin-top: 1.5rem; margin-bottom: 1.5rem;'>", unsafe_allow_html=True)
     
-    st.markdown("<br>", unsafe_allow_html=True)
-    download_placeholder = st.empty()
-
-
-# ── Main Area ────────────────────────────────────────────────────────────────
+    col_empty, col_btn = st.columns([4, 2])
+    with col_btn:
+        run = st.button("✨ Generate Result", disabled=(arr1 is None))
+        
+    st.markdown("</div>", unsafe_allow_html=True)
 
-tab1, tab2, tab3 = st.tabs(["IMAGE VIEW", "ALGORITHM EXPLORER", "C SOURCE"])
+    # State management
+    if file_id != st.session_state.get("last_file_id"):
+        st.session_state.pop("result", None)
+        st.session_state.pop("tree", None)
+        st.session_state.pop("op_done", None)
+        st.session_state["last_file_id"] = file_id
 
-with tab1:
+    # --- IMAGE PROCESSING ---
     if run and arr1 is not None:
         st.session_state.pop("result", None)
         st.session_state.pop("tree", None)
         
-        with st.spinner("Processing..."):
+        with st.spinner("Processing image..."):
             try:
                 if op_key == "compress_only":
                     padded, oh, ow = pad_to_square_pow2(arr1)
@@ -289,7 +392,6 @@ with tab1:
                     computed, tree = process_image(arr1, op_key, threshold, return_tree=True)
 
                 if computed is not None:
-                    # Bug 1 Fix: Store result and tree together, avoid rebuilding
                     st.session_state["result"] = computed
                     st.session_state["tree"] = tree
                     st.session_state["op_done"] = operation
@@ -302,65 +404,77 @@ with tab1:
     result_arr = st.session_state.get("result")
     tree = st.session_state.get("tree")
     
+    # --- RESULTS DISPLAY ---
     if arr1 is not None:
-        with st.container():
-            c1, c2 = st.columns(2)
-            with c1:
-                st.markdown("<div style='font-family: \"DM Mono\", monospace; margin-bottom: 0.5rem; color: #555;'>BEFORE</div>", unsafe_allow_html=True)
-                st.image(arr_to_pil(arr1), use_container_width=True)
-                st.markdown(f"<div style='font-family: \"DM Mono\", monospace; color: #555; text-align: center;'>{arr1.shape[1]} × {arr1.shape[0]}</div>", unsafe_allow_html=True)
-            with c2:
-                st.markdown("<div style='font-family: \"DM Mono\", monospace; margin-bottom: 0.5rem; color: #555;'>AFTER</div>", unsafe_allow_html=True)
-                if result_arr is not None:
-                    st.image(arr_to_pil(result_arr), use_container_width=True)
-                    op_str = st.session_state.get("op_done", "")
-                    th_str = st.session_state.get("thresh_done", "")
-                    st.markdown(f"<div style='font-family: \"DM Mono\", monospace; color: #555; text-align: center;'>{op_str} · t={th_str}</div>", unsafe_allow_html=True)
-                else:
-                    st.markdown("<div style='border: 1px solid #2a2a2a; height: 300px; display: flex; align-items: center; justify-content: center; color: #555; font-family: \"DM Mono\", monospace; background-color: #141414;'>[ RESULT IMAGE ]</div>", unsafe_allow_html=True)
-        
+        MAX_DIM = 2048
+        h, w = arr1.shape[:2]
+        if h > MAX_DIM or w > MAX_DIM:
+            st.warning(f"Image is {w}×{h}. Images over {MAX_DIM}px may be slow or crash. Consider resizing first.")
+
+        rc1, rc2 = st.columns(2)
+        with rc1:
+            st.markdown("<div style='text-align: center; color: #888; margin-bottom: 1rem; font-weight: 600; letter-spacing: 0.05em; font-size: 0.85rem;'>ORIGINAL</div>", unsafe_allow_html=True)
+            st.image(arr_to_pil(arr1), use_container_width=True)
+            st.markdown(f"<div style='text-align: center; color: #777; font-size: 0.85rem; margin-top: 0.5rem;'>{arr1.shape[1]} × {arr1.shape[0]} px</div>", unsafe_allow_html=True)
+            
+        with rc2:
+            st.markdown("<div style='text-align: center; color: #888; margin-bottom: 1rem; font-weight: 600; letter-spacing: 0.05em; font-size: 0.85rem;'>PROCESSED</div>", unsafe_allow_html=True)
+            if result_arr is not None:
+                st.image(arr_to_pil(result_arr), use_container_width=True)
+                op_str = st.session_state.get("op_done", "")
+                th_str = st.session_state.get("thresh_done", "")
+                st.markdown(f"<div style='text-align: center; color: #777; font-size: 0.85rem; margin-top: 0.5rem;'>{op_str} (Threshold: {th_str})</div>", unsafe_allow_html=True)
+            else:
+                st.markdown("""
+                <div style='background-color: #FFFFFF; border: 1px dashed #D1D1D1; border-radius: 12px; height: 300px; display: flex; align-items: center; justify-content: center; flex-direction: column;'>
+                    <span style='font-size: 2rem; margin-bottom: 1rem;'>✨</span>
+                    <span style='color: #888; font-family: "Inter", sans-serif;'>Ready to process</span>
+                </div>
+                """, unsafe_allow_html=True)
+                
+        # QuadTree Stats
         if result_arr is not None and tree is not None:
             total_nodes, leaves, max_d = count_nodes_and_leaves(tree)
             total_pixels = arr1.shape[0] * arr1.shape[1]
             ratio = total_pixels / total_nodes if total_nodes > 0 else 0
             
-            st.markdown("<div style='font-family: \"DM Mono\", monospace; color: #555; margin-top: 2rem; margin-bottom: 0.5rem;'>QUADTREE STATS</div>", unsafe_allow_html=True)
-            
-            st.markdown(f"""
-            <div style='display: flex; border: 1px solid #2a2a2a; background-color: #141414;'>
-                <div style='flex: 1; border-right: 1px solid #2a2a2a; padding: 1rem; text-align: center;'>
-                    <div style='color: #555; font-family: "DM Mono", monospace; font-size: 0.8rem; margin-bottom: 0.5rem;'>TOTAL NODES</div>
-                    <div style='color: #00ff87; font-family: "DM Mono", monospace; font-size: 1.5rem; font-weight: 700;'>{total_nodes:,}</div>
-                    <div style='color: #00ff87; font-size: 0.75rem; font-family: "DM Mono", monospace; margin-top: 4px;'>{ratio:.1f}× fewer nodes</div>
-                </div>
-                <div style='flex: 1; border-right: 1px solid #2a2a2a; padding: 1rem; text-align: center;'>
-                    <div style='color: #555; font-family: "DM Mono", monospace; font-size: 0.8rem; margin-bottom: 0.5rem;'>LEAF NODES</div>
-                    <div style='color: #00ff87; font-family: "DM Mono", monospace; font-size: 1.5rem; font-weight: 700;'>{leaves:,}</div>
+            st.markdown("""
+            <div class='claude-stats-container'>
+                <div class='claude-stat-card'>
+                    <div class='claude-stat-label'>Total Nodes</div>
+                    <div class='claude-stat-value'>{nodes}</div>
+                    <div class='claude-stat-sub'>{ratio:.1f}x fewer nodes</div>
                 </div>
-                <div style='flex: 1; border-right: 1px solid #2a2a2a; padding: 1rem; text-align: center;'>
-                    <div style='color: #555; font-family: "DM Mono", monospace; font-size: 0.8rem; margin-bottom: 0.5rem;'>MAX DEPTH</div>
-                    <div style='color: #00ff87; font-family: "DM Mono", monospace; font-size: 1.5rem; font-weight: 700;'>{max_d}</div>
+                <div class='claude-stat-card'>
+                    <div class='claude-stat-label'>Leaf Nodes</div>
+                    <div class='claude-stat-value'>{leaves}</div>
                 </div>
-                <div style='flex: 1; border-right: 1px solid #2a2a2a; padding: 1rem; text-align: center;'>
-                    <div style='color: #555; font-family: "DM Mono", monospace; font-size: 0.8rem; margin-bottom: 0.5rem;'>TOTAL PIXELS</div>
-                    <div style='color: #00ff87; font-family: "DM Mono", monospace; font-size: 1.5rem; font-weight: 700;'>{total_pixels:,}</div>
+                <div class='claude-stat-card'>
+                    <div class='claude-stat-label'>Max Depth</div>
+                    <div class='claude-stat-value'>{max_d}</div>
                 </div>
-                <div style='flex: 1; padding: 1rem; text-align: center;'>
-                    <div style='color: #555; font-family: "DM Mono", monospace; font-size: 0.8rem; margin-bottom: 0.5rem;'>THRESHOLD</div>
-                    <div style='color: #00ff87; font-family: "DM Mono", monospace; font-size: 1.5rem; font-weight: 700;'>{st.session_state.get('thresh_done')}</div>
+                <div class='claude-stat-card'>
+                    <div class='claude-stat-label'>Total Pixels</div>
+                    <div class='claude-stat-value'>{pixels}</div>
                 </div>
             </div>
-            """, unsafe_allow_html=True)
+            """.replace('{nodes}', f"{total_nodes:,}").replace('{ratio}', f"{ratio}").replace('{leaves}', f"{leaves:,}").replace('{max_d}', str(max_d)).replace('{pixels}', f"{total_pixels:,}"), unsafe_allow_html=True)
             
-            with download_placeholder:
+            st.markdown("<br>", unsafe_allow_html=True)
+            col_empty, col_dl = st.columns([4, 1])
+            with col_dl:
                 img_pil = arr_to_pil(result_arr)
                 buf = io.BytesIO()
                 img_pil.save(buf, format="PNG")
-                st.download_button("↓ DOWNLOAD RESULT", buf.getvalue(), "result.png", "image/png")
+                st.download_button("Download Result", buf.getvalue(), "result.png", "image/png")
                 
     else:
-        st.markdown("<div style='border: 1px solid #2a2a2a; padding: 6rem; text-align: center; color: #555; font-family: \"DM Mono\", monospace; background-color: #141414;'>[ AWAITING INPUT ]</div>", unsafe_allow_html=True)
-
+        st.markdown("""
+        <div style='background-color: #FFFFFF; border: 1px dashed #D1D1D1; border-radius: 12px; padding: 4rem; text-align: center; margin-top: 2rem;'>
+            <h3 style='color: #1A1A1A; font-weight: 500; margin-bottom: 0.5rem;'>No Image Selected</h3>
+            <p style='color: #666;'>Upload an image or select one from the repository to get started.</p>
+        </div>
+        """, unsafe_allow_html=True)
 
 with tab2:
     st.markdown("### 1. What is a Quadtree?")
@@ -387,7 +501,7 @@ with tab2:
 
     st.markdown("---")
     st.markdown("### 2. How Compression Works")
-    st.markdown("<div style='color: #555; margin-bottom: 1rem;'>See how threshold controls quality vs. compression</div>", unsafe_allow_html=True)
+    st.markdown("<div style='color: #777; margin-bottom: 1rem;'>See how threshold controls quality vs. compression</div>", unsafe_allow_html=True)
     
     @st.cache_data
     def get_synthetic_image():
@@ -426,29 +540,29 @@ with tab2:
     st.markdown("### 4. Color Filters — How They Work on the Tree")
     fc1, fc2, fc3, fc4 = st.columns(4)
     with fc1:
-        with st.container(border=True):
+        with st.container():
             st.markdown("**Grayscale**")
             st.code("L = 0.299R + 0.587G + 0.114B\nR'=L, G'=L, B'=L")
-            st.caption("Weights green channel most heavily (human eye is most sensitive to green)")
+            st.caption("Weights green channel most heavily")
     with fc2:
-        with st.container(border=True):
+        with st.container():
             st.markdown("**Negative**")
             st.code("R' = 255 - R\nG' = 255 - G\nB' = 255 - B")
-            st.caption("Inverts each channel — dark becomes light, colors become complementary")
+            st.caption("Inverts each channel — dark becomes light")
     with fc3:
-        with st.container(border=True):
+        with st.container():
             st.markdown("**Sepia**")
-            st.code("R' = 0.393R + 0.769G + 0.189B\nG' = ...\nB' = ...")
-            st.caption("Warm brownish tones by mixing channels — mimics aged photographic paper")
+            st.code("R' = 0.393R + ...\nG' = ...\nB' = ...")
+            st.caption("Warm brownish tones by mixing channels")
     with fc4:
-        with st.container(border=True):
+        with st.container():
             st.markdown("**Brighten**")
-            st.code("R' = min(255, R*1.3)\nG' = min(255, G*1.3)\nB' = min(255, B*1.3)")
-            st.caption("Scales all channels up — clips at 255 to avoid overflow")
+            st.code("R' = min(255, R*1.3)\nG' = ...\nB' = ...")
+            st.caption("Scales all channels up")
 
     st.markdown("---")
     st.markdown("### 5. Spatial Transforms — Pointer Swaps")
-    st.markdown("<div class='accent-text'><strong>No pixel data is ever copied. Only 4 pointer assignments per node.</strong></div><br>", unsafe_allow_html=True)
+    st.markdown("<div style='color: #D97757; margin-bottom: 1rem;'><strong>No pixel data is ever copied. Only 4 pointer assignments per node.</strong></div>", unsafe_allow_html=True)
     tc1, tc2 = st.columns(2)
     with tc1:
         st.code("""MIRROR (horizontal):
@@ -511,7 +625,7 @@ Averaging formula: `result.R = (t1.R + t2.R) / 2`
 | Rotate/Mirror | O(k) | O(1) | Only pointer swaps |
 | Union | O(min(k1,k2)) | O(min(k1,k2)) | Bounded by smaller tree |
 
-<div style="border-left: 4px solid #00ff87; padding-left: 1rem; margin-top: 1rem; color: #f0f0f0;">
+<div style="border-left: 4px solid #D97757; padding-left: 1rem; margin-top: 1rem; color: #2D2D2D;">
 <strong>Key Takeaway:</strong> Filters and transforms run on the compressed tree — they're O(nodes) not O(pixels). At threshold=100, a 512×512 image (262K pixels) may have fewer than 5,000 nodes.
 </div>
 """, unsafe_allow_html=True)
@@ -520,10 +634,10 @@ Averaging formula: `result.R = (t1.R + t2.R) / 2`
 with tab3:
     st.markdown("### C Source vs Python")
     st.markdown("""
-    <div style="background-color: #141414; border: 1px solid #2a2a2a; padding: 1rem; margin-bottom: 1rem;">
+    <div style="background-color: #FFFFFF; border: 1px solid #E5E0D8; padding: 1rem; margin-bottom: 1rem; border-radius: 8px;">
     🔗 View the full C implementation on GitHub:<br>
     <a href="https://github.com/Harshwardhan-Deshmukh03/Image-Manipulation-QuadTree.git" target="_blank"
-       style="color:#00ff87;font-weight:600;text-decoration:none;">
+       style="color:#D97757;font-weight:600;text-decoration:none;">
        github.com/Harshwardhan-Deshmukh03/Image-Manipulation-QuadTree
     </a>
     </div>