go

app.py

@@ -1,17 +1,23 @@
 import gradio as gr
+import pandas as pd
+import random
 import json
 from datetime import datetime
-import random
 
 # ============================================
-# 🌟 SYNCHRONY - DEMO VERSION (NO WEBHOOKS)
-# Uses mock data for demonstration
+# 🌟 SYNCHRONY - PROFESSIONAL LIGHT MODE
+# Soft Academic Aesthetic
 # ============================================
 
 REGISTRATION_FORM = "https://docs.google.com/forms/d/e/1FAIpQLSfJFGx-yd0FPIuRYLUJut3BOOiQ14x_5DYheWpgrUqcHdQaCA/viewform"
 GOOGLE_SHEETS = "https://docs.google.com/spreadsheets/d/1rpR-E_RSooDkNDh-Q_1BDIeGw4vfgmusNAfwPqATaW4/edit?usp=sharing"
 
-# Current student session
+SHEET_ID = "1rpR-E_RSooDkNDh-Q_1BDIeGw4vfgmusNAfwPqATaW4"
+
+STUDENTS_URL = f"https://docs.google.com/spreadsheets/d/{SHEET_ID}/gviz/tq?tqx=out:csv&sheet=Students"
+GROUPS_URL = f"https://docs.google.com/spreadsheets/d/{SHEET_ID}/gviz/tq?tqx=out:csv&sheet=Groups"
+CHALLENGES_URL = f"https://docs.google.com/spreadsheets/d/{SHEET_ID}/gviz/tq?tqx=out:csv&sheet=Challenges"
+
 current_student = {
     "name": None,
     "email": None,
@@ -21,22 +27,16 @@ current_student = {
     "challenges": []
 }
 
-# MOCK DATA - Simulates your real backend
-MOCK_STUDENTS = [
-    {"name": "Omar Khalil", "topic": "Linked Lists"},
-    {"name": "Khaled Ibrahim", "topic": "Queues"},
-    {"name": "Layla Mahmoud", "topic": "Binary Search Trees"}
-]
-
+# Mock data fallback
 MOCK_CHALLENGES = [
     {
         "challenge_number": 1,
         "description": "Layla, explain how Binary Search Trees work to the group. Focus on BST properties, insertion, and search operations. Omar and Khaled, compare this with your data structures - how is searching in a BST different from searching in a linked list or checking elements in a queue?",
         "topics_involved": "Binary Search Trees, Linked Lists, Queues",
         "hints": [
-            "Start by drawing a simple diagram showing how nodes are organized in a BST",
-            "Think about the left-subtree and right-subtree properties - what makes a BST special?",
-            "Compare time complexity: BST search is O(log n) while linked list is O(n)"
+            "Start by drawing a simple diagram showing how nodes are organized in a BST with the property: left < parent < right",
+            "Think about the left-subtree and right-subtree properties - what makes a BST special compared to a regular tree?",
+            "Compare time complexity: BST search is O(log n) average case, while linked list search is O(n)"
         ]
     },
     {
@@ -44,9 +44,9 @@ MOCK_CHALLENGES = [
         "description": "Omar, teach us about Linked Lists. Create a real-world example showing both singly and doubly linked lists. Layla and Khaled, find connections between Linked Lists and your data structures.",
         "topics_involved": "Linked Lists, Binary Search Trees, Queues",
         "hints": [
-            "Think about how nodes point to each other - what's the difference between singly and doubly?",
-            "Consider real-world examples: browser history, music playlists, undo/redo functionality",
-            "Both BST nodes and queue nodes use similar pointer concepts!"
+            "Think about how nodes point to each other - singly linked has 'next' pointer, doubly linked has 'next' and 'prev'",
+            "Consider real-world examples: browser history (doubly linked), music playlist (singly linked), undo/redo (doubly linked)",
+            "Both BST nodes and queue nodes use pointers/references just like linked lists - they're all node-based structures!"
         ]
     },
     {
@@ -54,156 +54,255 @@ MOCK_CHALLENGES = [
         "description": "Everyone: Design ONE real-world system that uses ALL three data structures (BST, Linked Lists, Queues). Explain how they work together. Be creative!",
         "topics_involved": "Binary Search Trees, Linked Lists, Queues",
         "hints": [
-            "Think of a system with searching, ordering, and waiting - like a restaurant management system",
-            "BST for menu items (fast lookup), Queue for order processing, Linked List for order history",
-            "Draw a diagram showing how data flows between the three structures"
+            "Think of a system with searching, ordering, and waiting - like a restaurant management system or task scheduler",
+            "Example: Restaurant app with BST for menu items (fast lookup by price/name), Queue for order processing, Linked List for order history",
+            "Draw a diagram showing how data flows between the three structures in your system"
         ]
     }
 ]
 
 # ============================================
-# 🔧 SIMULATED API FUNCTIONS
+# 📊 GOOGLE SHEETS FUNCTIONS
 # ============================================
 
-def generate_session_id():
-    """Generate realistic session ID"""
-    timestamp = datetime.utcnow().strftime("%Y%m%d%H%M%S")
-    return f"S{timestamp}"
+def read_sheet_safe(url, sheet_name="Unknown"):
+    try:
+        df = pd.read_csv(url)
+        print(f"✅ Loaded {len(df)} rows from {sheet_name}")
+        return df
+    except Exception as e:
+        print(f"⚠️ Could not read {sheet_name}: {e}")
+        return pd.DataFrame()
 
+def get_students_in_group(group_id):
+    try:
+        groups_df = read_sheet_safe(GROUPS_URL, "Groups")
+        
+        if groups_df.empty:
+            return [
+                {"name": "Omar Khalil", "topic": "Linked Lists"},
+                {"name": "Khaled Ibrahim", "topic": "Queues"},
+                {"name": "Layla Mahmoud", "topic": "Binary Search Trees"}
+            ]
+        
+        group = groups_df[groups_df['group_id'] == group_id]
+        
+        if group.empty:
+            return [
+                {"name": "Omar Khalil", "topic": "Linked Lists"},
+                {"name": "Khaled Ibrahim", "topic": "Queues"},
+                {"name": "Layla Mahmoud", "topic": "Binary Search Trees"}
+            ]
+        
+        group_row = group.iloc[0]
+        member_names = str(group_row.get('member_names', '')).split(',')
+        topics = str(group_row.get('topics', '')).split(',')
+        
+        team_members = []
+        for i, name in enumerate(member_names):
+            name = name.strip()
+            topic = topics[i].strip() if i < len(topics) else "Data Structures"
+            if name:
+                team_members.append({"name": name, "topic": topic})
+        
+        if team_members:
+            return team_members
+        else:
+            return [
+                {"name": "Omar Khalil", "topic": "Linked Lists"},
+                {"name": "Khaled Ibrahim", "topic": "Queues"},
+                {"name": "Layla Mahmoud", "topic": "Binary Search Trees"}
+            ]
+            
+    except Exception as e:
+        print(f"❌ Error: {e}")
+        return [
+            {"name": "Omar Khalil", "topic": "Linked Lists"},
+            {"name": "Khaled Ibrahim", "topic": "Queues"},
+            {"name": "Layla Mahmoud", "topic": "Binary Search Trees"}
+        ]
+
+def get_challenges_for_session(session_id):
+    try:
+        challenges_df = read_sheet_safe(CHALLENGES_URL, "Challenges")
+        
+        if challenges_df.empty:
+            return MOCK_CHALLENGES
+        
+        session_challenges = challenges_df[challenges_df['session_id'] == session_id]
+        
+        if session_challenges.empty:
+            return MOCK_CHALLENGES
+        
+        challenges = []
+        for _, row in session_challenges.iterrows():
+            hints_json = row.get('hints_json', '[]')
+            try:
+                hints = json.loads(hints_json) if isinstance(hints_json, str) else []
+            except:
+                hints = []
+            
+            challenges.append({
+                "challenge_number": row.get('challenge_number', len(challenges) + 1),
+                "description": row.get('description', 'No description'),
+                "topics_involved": row.get('topics_involved', 'N/A'),
+                "hints": hints
+            })
+        
+        if challenges:
+            return challenges
+        else:
+            return MOCK_CHALLENGES
+            
+    except Exception as e:
+        return MOCK_CHALLENGES
+
+# ============================================
+# 🔧 APPLICATION FUNCTIONS
+# ============================================
 
 def lookup_student(email):
-    """Login simulation"""
     try:
         if not email or "@" not in email:
-            return "❌ please enter a valid email address!"
+            return "❌ Please enter a valid email address"
         
-        # Extract name from email
-        name_part = email.split("@")[0]
-        name = name_part.replace(".", " ").replace("_", " ").title()
+        name = email.split("@")[0].replace(".", " ").replace("_", " ").title()
         
-        # Simulate successful login
-        session_id = generate_session_id()
+        try:
+            students_df = read_sheet_safe(STUDENTS_URL, "Students")
+            
+            if not students_df.empty:
+                student = students_df[students_df['email'].str.lower() == email.lower()]
+                
+                if not student.empty:
+                    student_row = student.iloc[0]
+                    name = student_row.get('name', name)
+                    group_id = student_row.get('group_id', 'G001')
+                else:
+                    group_id = "G001"
+            else:
+                group_id = "G001"
+        except:
+            group_id = "G001"
+        
+        team_members = get_students_in_group(group_id)
+        session_id = f"S{datetime.utcnow().strftime('%Y%m%d%H%M%S')}"
         
         current_student["name"] = name
         current_student["email"] = email
-        current_student["group_id"] = "G001"
+        current_student["group_id"] = group_id
         current_student["session_id"] = session_id
-        current_student["team_members"] = MOCK_STUDENTS
-        
-        welcome_msg = f"✅ **welcome back, {name}!** 🎉\n\n"
-        welcome_msg += f"🆔 **session id:** `{session_id}`\n\n"
-        welcome_msg += f"💬 **synco says:**\n"
-        welcome_msg += f"Hey {', '.join([s['name'] for s in MOCK_STUDENTS])}! Welcome to your Synchrony study session! "
-        welcome_msg += f"You're all studying Data Structures, and I love that each of you is focusing on different topics. "
-        welcome_msg += f"This is perfect for peer teaching!\n\n"
-        welcome_msg += f"Today, we'll tackle 3 collaborative challenges together. Each challenge will help you "
-        welcome_msg += f"learn from each other's expertise. Ready? Let's go! 🚀\n\n"
-        welcome_msg += f"👥 **your team:** {', '.join([s['name'] for s in MOCK_STUDENTS])}\n\n"
-        welcome_msg += f"✨ head to **MY TEAM** tab to see everyone!"
+        current_student["team_members"] = team_members
+        
+        welcome_msg = f"### ✅ Welcome back, {name}!\n\n"
+        welcome_msg += f"**Session ID:** `{session_id}`\n\n"
+        welcome_msg += f"**Synco says:**\n"
+        welcome_msg += f"Hey {', '.join([m['name'] for m in team_members])}! Welcome to your Synchrony study session. "
+        welcome_msg += f"You're all studying Data Structures with different focus areas—perfect for peer teaching!\n\n"
+        welcome_msg += f"**Your Team ({group_id}):** {', '.join([m['name'] for m in team_members])}\n\n"
+        welcome_msg += f"👉 Head to the **My Team** tab to see everyone's topics!"
         
         return welcome_msg
         
     except Exception as e:
-        return f"❌ **error:** {str(e)}"
-
+        return f"❌ Error: {str(e)}"
 
 def get_team_info():
-    """Display team information"""
     if not current_student.get("team_members"):
-        return "⚠️ please login first in the **HOME** tab!"
+        return "⚠️ Please login first in the Home tab"
     
-    output = f"## 👥 your study squad - {current_student.get('group_id', 'G001')} 🔥\n\n"
-    output += f"**session id:** `{current_student.get('session_id', 'not started')}`\n\n"
+    output = f"## 👥 Your Study Squad - {current_student.get('group_id', 'G001')}\n\n"
+    output += f"**Session ID:** `{current_student.get('session_id', 'not started')}`\n\n"
     output += "---\n\n"
     
     for member in current_student["team_members"]:
         user_name = current_student.get("name", "").lower()
         member_name = member.get("name", "").lower()
-        is_you = " **(YOU)** 🌟" if user_name in member_name or member_name in user_name else ""
+        is_you = " **(You)**" if user_name in member_name or member_name in user_name else ""
         output += f"### 🎓 {member['name']}{is_you}\n"
-        output += f"**studying:** {member.get('topic', 'N/A')}\n\n"
+        output += f"**Focus Area:** {member.get('topic', 'N/A')}\n\n"
     
-    output += "---\n\n💡 *collaborate, learn together, level up!*"
+    output += "---\n\n💡 Collaborate, learn together, and grow!"
     return output
 
-
 def load_challenges():
-    """Load challenges (simulated)"""
     if not current_student.get("session_id"):
-        return "⚠️ no active session. please login first in the **HOME** tab!"
-    
-    current_student["challenges"] = MOCK_CHALLENGES
+        return "⚠️ No active session. Please login first in the Home tab"
     
-    output = f"# 🎯 your collaborative challenges\n\n"
-    output += f"💬 **synco says:**\n"
-    output += f"🎯 Here are your 3 collaborative challenges! Let's start with Challenge 1. "
-    output += f"Work together, discuss your approaches, and ask for hints if you get stuck. Ready? Let's go!\n\n"
-    output += "---\n\n"
-    
-    for i, challenge in enumerate(MOCK_CHALLENGES, 1):
-        output += f"## 🎯 challenge {i}\n\n"
-        output += f"{challenge['description']}\n\n"
-        output += f"**📚 topics:** {challenge['topics_involved']}\n\n"
-        output += f"💡 *stuck? request a hint in the **HINTS** tab!*\n\n"
+    try:
+        session_id = current_student["session_id"]
+        challenges = get_challenges_for_session(session_id)
+        current_student["challenges"] = challenges
+        
+        output = f"# 🎯 Your Collaborative Challenges\n\n"
+        output += f"**Synco says:** Here are your 3 collaborative challenges! Work together, discuss your approaches, "
+        output += f"and request hints when needed. Ready? Let's go!\n\n"
         output += "---\n\n"
-    
-    return output
-
+        
+        for challenge in challenges:
+            output += f"## Challenge {challenge['challenge_number']}\n\n"
+            output += f"{challenge['description']}\n\n"
+            output += f"**📚 Topics:** {challenge['topics_involved']}\n\n"
+            output += f"💡 *Need help? Request a hint in the Hints tab!*\n\n"
+            output += "---\n\n"
+        
+        return output
+        
+    except Exception as e:
+        return f"❌ Error loading challenges: {str(e)}"
 
 def request_hint(challenge_num, hint_level_text):
-    """Request hint (simulated)"""
     if not current_student.get("session_id"):
-        return "⚠️ no active session. please login first!"
+        return "⚠️ No active session. Please login first"
     
     if not current_student.get("challenges"):
-        return "⚠️ please load challenges first in the **CHALLENGES** tab!"
+        return "⚠️ Please load challenges first in the Challenges tab"
     
     try:
         hint_level = int(hint_level_text.split(" - ")[0])
         challenge_idx = int(challenge_num) - 1
         
-        if challenge_idx < 0 or challenge_idx >= len(MOCK_CHALLENGES):
-            return "⚠️ invalid challenge number!"
+        if challenge_idx < 0 or challenge_idx >= len(current_student["challenges"]):
+            return "⚠️ Invalid challenge number"
+        
+        challenge = current_student["challenges"][challenge_idx]
+        hints = challenge.get("hints", [])
         
-        if hint_level < 1 or hint_level > 3:
-            return "⚠️ invalid hint level!"
+        if hint_level < 1 or hint_level > len(hints):
+            return f"⚠️ Only {len(hints)} hints available"
         
-        challenge = MOCK_CHALLENGES[challenge_idx]
-        hint = challenge["hints"][hint_level - 1]
+        hint = hints[hint_level - 1]
         
-        # Encouraging messages based on hint level
         if hint_level == 1:
-            encouragement = "💡 **Think about it a bit more!**"
+            encouragement = "💡 **Think about it a bit more**"
         elif hint_level == 2:
-            encouragement = "💡 **You're getting closer!**"
+            encouragement = "💭 **You're getting closer**"
         else:
-            encouragement = "💡 **Almost there!**"
+            encouragement = "🎯 **Almost there**"
         
-        output = f"## {encouragement} Hint {hint_level}\n\n"
-        output += f"🎯 **challenge {challenge_num}** | **hint level {hint_level}**\n\n"
+        output = f"## {encouragement}\n\n"
+        output += f"**Challenge {challenge_num}** • Hint Level {hint_level}\n\n"
         output += "---\n\n"
         output += f"{hint}\n\n"
         output += "---\n\n"
-        output += f"💪 *you got this! keep going!*"
+        output += f"💪 You got this! Keep going!"
         
         return output
         
     except Exception as e:
-        return f"❌ **error:** {str(e)}"
-
+        return f"❌ Error: {str(e)}"
 
 def send_message(message, history):
-    """Simulated team chat"""
     if not message.strip():
         return history, ""
     
     history.append({
         "role": "user",
-        "content": f"**{current_student.get('name', 'you')}:** {message}"
+        "content": f"**{current_student.get('name', 'You')}:** {message}"
     })
     
     if not current_student.get("team_members"):
-        response = "**synco (ai):** please login first to chat with your team! 💬"
+        response = "**Synco:** Please login first to chat with your team"
     else:
         other_members = [m for m in current_student["team_members"] 
                         if m['name'].lower() != current_student.get('name', '').lower()]
@@ -211,133 +310,328 @@ def send_message(message, history):
         if other_members:
             member = random.choice(other_members)
             responses = [
-                f"**{member['name']}:** that's a great point! let me add to that...",
-                f"**{member['name']}:** interesting! in {member['topic']}, we do it differently...",
-                f"**{member['name']}:** i agree! should we try that approach?",
-                f"**{member['name']}:** wait, can you explain that part again?",
-                f"**{member['name']}:** oh I see! that connects to {member['topic']} because...",
-                f"**synco (ai):** great discussion everyone! 💡 keep collaborating!"
+                f"**{member['name']}:** That's a great point about {member['topic']}!",
+                f"**{member['name']}:** Interesting! Let me explain how {member['topic']} relates to that...",
+                f"**{member['name']}:** I agree! In {member['topic']}, we approach it similarly.",
+                f"**{member['name']}:** Good question! Let me draw a quick diagram...",
+                f"**Synco:** Excellent collaboration! Keep discussing!"
             ]
             response = random.choice(responses)
         else:
-            response = "**synco (ai):** great question! your teammates will respond soon! 💬"
+            response = "**Synco:** Great thinking!"
     
     history.append({"role": "assistant", "content": response})
     return history, ""
 
-
 # ============================================
-# 🎨 CUSTOM CSS
+# 🎨 PROFESSIONAL LIGHT MODE CSS
 # ============================================
 
 custom_css = """
+/* Professional Light Mode - Soft Academic Aesthetic */
+
 .gradio-container {
-    background: #000000 !important;
-    font-family: 'Inter', sans-serif !important;
-    color: #ffffff !important;
+    background: linear-gradient(135deg, #FDFBF7 0%, #F8F6F3 100%) !important;
+    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+    color: #1F2937 !important;
 }
 
+/* Color Variables */
 :root {
-    --neon-pink: #ff0080;
-    --neon-cyan: #00ffff;
-    --neon-purple: #a855f7;
+    --primary: #7C3AED;
+    --primary-light: #A78BFA;
+    --accent: #F97316;
+    --success: #10B981;
+    --bg-cream: #FDFBF7;
+    --bg-light: #FFFFFF;
+    --text-dark: #1F2937;
+    --text-gray: #6B7280;
+    --border-light: #E5E7EB;
+}
+
+/* Main Container */
+.contain {
+    background: var(--bg-cream) !important;
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+    padding: 20px !important;
+}
+
+/* Tabs */
+.tab-nav {
+    background: var(--bg-light) !important;
+    border-bottom: 2px solid var(--border-light) !important;
+    padding: 8px 0 !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
 }
 
 .tab-nav button {
-    background: #1a1a1a !important;
-    border: 2px solid #222222 !important;
-    color: var(--neon-cyan) !important;
-    font-weight: 800 !important;
-    text-transform: uppercase !important;
-    transition: all 0.3s ease !important;
+    background: transparent !important;
+    border: none !important;
+    color: var(--text-gray) !important;
+    font-weight: 600 !important;
+    font-size: 15px !important;
+    padding: 12px 24px !important;
+    margin: 0 4px !important;
+    border-radius: 8px !important;
+    transition: all 0.2s ease !important;
 }
 
 .tab-nav button:hover {
-    border-color: var(--neon-pink) !important;
-    color: var(--neon-pink) !important;
-    transform: translateY(-2px) !important;
+    background: rgba(124, 58, 237, 0.08) !important;
+    color: var(--primary) !important;
 }
 
 .tab-nav button.selected {
-    background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple)) !important;
-    color: #000000 !important;
-    box-shadow: 0 0 30px rgba(255, 0, 128, 0.8) !important;
+    background: var(--primary) !important;
+    color: white !important;
+    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
 }
 
-input, textarea {
-    background: #1a1a1a !important;
-    border: 2px solid #333333 !important;
-    color: #ffffff !important;
+/* Input Fields */
+input, textarea, select {
+    background: var(--bg-light) !important;
+    border: 2px solid var(--border-light) !important;
+    color: var(--text-dark) !important;
     border-radius: 10px !important;
+    font-size: 15px !important;
+    padding: 12px 16px !important;
+    transition: all 0.2s ease !important;
 }
 
-input:focus, textarea:focus {
-    border-color: var(--neon-cyan) !important;
-    box-shadow: 0 0 25px rgba(0, 255, 255, 0.5) !important;
+input:focus, textarea:focus, select:focus {
+    border-color: var(--primary) !important;
+    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
+    outline: none !important;
 }
 
+input::placeholder, textarea::placeholder {
+    color: #9CA3AF !important;
+}
+
+/* Buttons */
 button {
-    background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple)) !important;
+    background: var(--primary) !important;
     border: none !important;
-    color: #000000 !important;
-    font-weight: 900 !important;
-    text-transform: uppercase !important;
+    color: white !important;
+    font-weight: 600 !important;
+    font-size: 15px !important;
     border-radius: 10px !important;
-    padding: 16px 32px !important;
-    transition: all 0.3s ease !important;
+    padding: 12px 24px !important;
+    transition: all 0.2s ease !important;
+    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2) !important;
 }
 
 button:hover {
-    transform: translateY(-4px) scale(1.03) !important;
-    box-shadow: 0 10px 40px rgba(255, 0, 128, 0.7) !important;
+    background: #6D28D9 !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3) !important;
+}
+
+button:active {
+    transform: translateY(0) !important;
+}
+
+button.secondary {
+    background: var(--accent) !important;
+    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.2) !important;
+}
+
+button.secondary:hover {
+    background: #EA580C !important;
 }
 
-.output-markdown {
-    background: #0a0a0a !important;
-    border: 2px solid #1a1a1a !important;
+/* Output/Markdown Boxes */
+.output-markdown, .prose, .markdown {
+    background: var(--bg-light) !important;
+    border: 2px solid var(--border-light) !important;
     border-radius: 12px !important;
     padding: 24px !important;
-    color: #e0e0e0 !important;
+    color: var(--text-dark) !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
+    line-height: 1.7 !important;
 }
 
+/* Headers */
 h1 {
-    background: linear-gradient(135deg, var(--neon-pink), var(--neon-cyan));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-weight: 900 !important;
-    font-size: 56px !important;
+    color: var(--primary) !important;
+    font-weight: 800 !important;
+    font-size: 42px !important;
     text-align: center !important;
+    margin: 24px 0 !important;
+    letter-spacing: -0.5px !important;
 }
 
 h2 {
-    color: var(--neon-cyan) !important;
-    font-weight: 800 !important;
+    color: var(--primary) !important;
+    font-weight: 700 !important;
+    font-size: 28px !important;
+    margin: 20px 0 12px 0 !important;
 }
 
 h3 {
-    color: var(--neon-pink) !important;
+    color: var(--accent) !important;
+    font-weight: 600 !important;
+    font-size: 20px !important;
+    margin: 16px 0 8px 0 !important;
+}
+
+/* Paragraphs */
+p {
+    color: var(--text-dark) !important;
+    font-size: 15px !important;
+    line-height: 1.7 !important;
+    margin: 12px 0 !important;
+}
+
+/* Strong/Bold */
+strong {
+    color: var(--primary) !important;
     font-weight: 700 !important;
 }
 
+/* Links */
+a {
+    color: var(--primary) !important;
+    text-decoration: none !important;
+    font-weight: 600 !important;
+    transition: color 0.2s ease !important;
+}
+
+a:hover {
+    color: var(--accent) !important;
+    text-decoration: underline !important;
+}
+
+/* Code blocks */
 code {
-    background: #1a1a1a !important;
-    color: #00ff88 !important;
-    padding: 4px 10px !important;
+    background: #F3F4F6 !important;
+    color: var(--primary) !important;
+    padding: 3px 8px !important;
     border-radius: 6px !important;
-    border: 1px solid var(--neon-cyan) !important;
+    border: 1px solid var(--border-light) !important;
+    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
+    font-size: 14px !important;
+}
+
+/* Horizontal Rules */
+hr {
+    border: none !important;
+    border-top: 2px solid var(--border-light) !important;
+    margin: 24px 0 !important;
 }
 
+/* Scrollbar */
 ::-webkit-scrollbar {
-    width: 12px;
+    width: 10px;
+    height: 10px;
 }
 
 ::-webkit-scrollbar-track {
-    background: #0a0a0a;
+    background: #F3F4F6;
+    border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: linear-gradient(135deg, var(--neon-pink), var(--neon-cyan));
+    background: var(--primary-light);
     border-radius: 10px;
+    border: 2px solid #F3F4F6;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--primary);
+}
+
+/* Labels */
+label {
+    color: var(--text-dark) !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+    margin-bottom: 6px !important;
+}
+
+/* Chatbot Messages */
+.message-wrap {
+    background: var(--bg-light) !important;
+    border: 1px solid var(--border-light) !important;
+    border-radius: 12px !important;
+    margin: 8px 0 !important;
+    padding: 12px !important;
+}
+
+.message.user {
+    background: var(--primary) !important;
+    color: white !important;
+    border-radius: 12px !important;
+    padding: 12px 16px !important;
+    margin-left: 20% !important;
+}
+
+.message.bot {
+    background: #F3F4F6 !important;
+    color: var(--text-dark) !important;
+    border-radius: 12px !important;
+    padding: 12px 16px !important;
+    margin-right: 20% !important;
+}
+
+/* Dropdown */
+.dropdown-container {
+    background: var(--bg-light) !important;
+    border: 2px solid var(--border-light) !important;
+    border-radius: 10px !important;
+}
+
+/* Lists */
+ul, ol {
+    color: var(--text-dark) !important;
+    padding-left: 24px !important;
+}
+
+li {
+    margin: 8px 0 !important;
+    line-height: 1.6 !important;
+}
+
+/* Blockquotes */
+blockquote {
+    border-left: 4px solid var(--primary) !important;
+    padding-left: 16px !important;
+    color: var(--text-gray) !important;
+    font-style: italic !important;
+    margin: 16px 0 !important;
+}
+
+/* Success Messages */
+.success {
+    background: rgba(16, 185, 129, 0.1) !important;
+    border-left: 4px solid var(--success) !important;
+    padding: 16px !important;
+    border-radius: 8px !important;
+    color: var(--text-dark) !important;
+}
+
+/* Warning Messages */
+.warning {
+    background: rgba(249, 115, 22, 0.1) !important;
+    border-left: 4px solid var(--accent) !important;
+    padding: 16px !important;
+    border-radius: 8px !important;
+    color: var(--text-dark) !important;
+}
+
+/* Cards/Panels */
+.panel {
+    background: var(--bg-light) !important;
+    border: 2px solid var(--border-light) !important;
+    border-radius: 12px !important;
+    padding: 20px !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
+}
+
+/* Emoji styling */
+.emoji {
+    font-size: 1.2em !important;
 }
 """
 
@@ -345,36 +639,37 @@ code {
 # 🎭 GRADIO INTERFACE
 # ============================================
 
-demo = gr.Blocks(css=custom_css, title="🌟 SYNCHRONY", theme=gr.themes.Base())
+demo = gr.Blocks(css=custom_css, title="Synchrony • Collaborative Learning", theme=gr.themes.Soft())
 
 with demo:
     gr.Markdown("""
-    # 🌟 SYNCHRONY
-    ## *where students teach students* 💫
+    # 🌟 Synchrony
+    ## Where students teach students
     
-    *demo version - using simulated data*
+    *AI-powered collaborative learning platform*
     
     ---
     """)
     
-    # HOME
-    with gr.Tab("🏠 home"):
+    with gr.Tab("🏠 Home"):
         gr.Markdown("""
-        ## welcome to synchrony ✨
+        ## Welcome to Synchrony
         
-        *the ai-powered study platform where you learn by teaching each other*
+        Join a community of students learning together through peer teaching.
         """)
         
         with gr.Column():
-            gr.Markdown("### 📝 new here?")
-            register_btn = gr.Button("🚀 REGISTER NOW", variant="primary", size="lg")
+            gr.Markdown("### 📝 New Here?")
+            gr.Markdown("Register to get matched with your perfect study group")
+            register_btn = gr.Button("Register Now", variant="primary", size="lg")
             
-            gr.Markdown("### 🔐 already registered?")
+            gr.Markdown("### 🔐 Already Registered?")
+            gr.Markdown("Enter your university email to access your study session")
             email_input = gr.Textbox(
-                label="📧 university email",
+                label="University Email",
                 placeholder="your.email@university.edu"
             )
-            login_btn = gr.Button("🔓 LOGIN", variant="secondary", size="lg")
+            login_btn = gr.Button("Login", variant="secondary", size="lg")
             login_output = gr.Markdown()
         
         register_btn.click(
@@ -392,84 +687,77 @@ with demo:
             outputs=[login_output]
         )
     
-    # MY TEAM
-    with gr.Tab("👥 my team"):
-        gr.Markdown("## your study squad 🔥")
-        team_display = gr.Markdown(value="⚠️ please login first in the **HOME** tab!")
-        refresh_team_btn = gr.Button("🔄 REFRESH TEAM INFO", variant="secondary")
-        refresh_team_btn.click(fn=get_team_info, outputs=[team_display])
+    with gr.Tab("👥 My Team"):
+        gr.Markdown("## Your Study Squad")
+        gr.Markdown("Meet your teammates and see what everyone's focusing on")
+        team_display = gr.Markdown(value="⚠️ Please login first in the Home tab")
+        refresh_btn = gr.Button("Refresh Team Info", variant="secondary")
+        refresh_btn.click(fn=get_team_info, outputs=[team_display])
     
-    # CHALLENGES
-    with gr.Tab("🎯 challenges"):
+    with gr.Tab("🎯 Challenges"):
         gr.Markdown("""
-        ## your collaborative challenges 💪
+        ## Collaborative Challenges
         
-        work together, learn from each other, level up!
+        Work together on AI-generated challenges designed for your group's topics
         """)
-        load_challenges_btn = gr.Button("📥 LOAD CHALLENGES", variant="primary", size="lg")
-        challenges_display = gr.Markdown(value="⚠️ click the button above to load your challenges!")
-        load_challenges_btn.click(fn=load_challenges, outputs=[challenges_display])
+        load_btn = gr.Button("Load Challenges", variant="primary", size="lg")
+        challenges_display = gr.Markdown(value="Click the button above to load your challenges")
+        load_btn.click(fn=load_challenges, outputs=[challenges_display])
     
-    # HINTS
-    with gr.Tab("💡 hints"):
+    with gr.Tab("💡 Hints"):
         gr.Markdown("""
-        ## need help? no worries! 🤝
-        
-        synco's got your back with **adaptive hints**
+        ## Adaptive Hints
         
-        **hint 1:** gentle nudge 🤔  
-        **hint 2:** clearer guidance 💭  
-        **hint 3:** almost there! 🎯
+        Get progressive hints when you're stuck—from gentle nudges to detailed guidance
         """)
         
         with gr.Row():
             challenge_select = gr.Dropdown(
-                label="🎯 select challenge",
+                label="Select Challenge",
                 choices=["1", "2", "3"],
                 value="1"
             )
             hint_level_select = gr.Dropdown(
-                label="💡 hint level",
+                label="Hint Level",
                 choices=[
-                    "1 - gentle nudge 🤔",
-                    "2 - clearer guidance 💭",
-                    "3 - almost there! 🎯"
+                    "1 - Gentle nudge",
+                    "2 - Clearer guidance",
+                    "3 - Almost there"
                 ],
-                value="1 - gentle nudge 🤔"
+                value="1 - Gentle nudge"
             )
         
-        get_hint_btn = gr.Button("💡 GET HINT", variant="primary", size="lg")
-        hint_display = gr.Markdown(value="⚠️ select a challenge and hint level, then click the button!")
-        get_hint_btn.click(
+        hint_btn = gr.Button("Get Hint", variant="primary", size="lg")
+        hint_display = gr.Markdown(value="Select a challenge and hint level, then click the button")
+        hint_btn.click(
             fn=request_hint,
             inputs=[challenge_select, hint_level_select],
             outputs=[hint_display]
         )
     
-    # CHAT
-    with gr.Tab("💬 chat"):
+    with gr.Tab("💬 Chat"):
         gr.Markdown("""
-        ## team chat 💬
+        ## Team Chat
         
-        discuss challenges, share ideas, help each other out!
+        Discuss challenges, share insights, and help each other learn
         
-        *demo mode - simulated responses*
+        *Demo mode - responses are simulated*
         """)
         
         chatbot = gr.Chatbot(
             value=[],
             label="",
-            height=400,
+            height=450,
             type="messages"
         )
         
         with gr.Row():
             msg_input = gr.Textbox(
                 label="",
-                placeholder="type your message here...",
+                placeholder="Type your message...",
                 scale=5
             )
-            send_btn = gr.Button("📤 SEND", variant="primary", scale=1)
+            send_btn = gr.Button("Send", variant="primary", scale=1)
         
         send_btn.click(
             fn=send_message,
@@ -482,72 +770,22 @@ with demo:
             outputs=[chatbot, msg_input]
         )
     
-    # ABOUT
-    with gr.Tab("ℹ️ about"):
-        gr.Markdown(f"""
-        ## 🌟 about synchrony
-        
-        **synchrony** is an ai-powered collaborative learning platform.
-        
-        ---
-        
-        ### ✨ features
-        
-        ✅ **smart matching** - students matched by learning styles  
-        ✅ **ai challenges** - personalized collaborative challenges  
-        ✅ **adaptive hints** - progressive learning support  
-        ✅ **peer teaching** - students teach each other  
-        
-        ---
-        
-        ### 🛠️ tech stack
-        
-        - **frontend:** gradio (python)  
-        - **backend:** n8n workflows  
-        - **ai:** groq api (llama 3.3 70b)  
-        - **database:** google sheets  
-        
-        ---
-        
-        ### 🔗 links
-        
-        - 📝 [student registration]({REGISTRATION_FORM})
-        - 📊 [view database]({GOOGLE_SHEETS})
-        
-        ---
-        
-        ### 👥 created by
-        
-        **maryam shanabli** | november 2025
-        
-        *powered by ai • built for students • designed for impact* 🚀
-        
-        ---
-        
-        ### 📊 demo note
-        
-        This is a **demonstration version** using simulated data. The real system connects to live n8n workflows, Groq AI API, and Google Sheets database for full functionality.
-        """)
-    
-    # FOOTER
     gr.Markdown("""
     ---
     
-    ### 🌟 **synchrony** | *collaborative learning, powered by ai* 💜
+    ### Synchrony • Collaborative Learning Platform
     
-    made with 🔥 by maryam shanabli | 2025
+    *Powered by AI • Built for Students • Designed for Impact*
+    
+    Created by Maryam Shanabli • 2025
     """)
 
-# ============================================
-# 🚀 LAUNCH
-# ============================================
-
 print("\n" + "="*60)
-print("🚀 SYNCHRONY STUDENT PORTAL (DEMO VERSION)")
+print("🌟 SYNCHRONY - Professional Light Mode")
 print("="*60)
-print("✅ Using simulated data for demonstration")
+print("✅ Soft academic aesthetic")
+print("✅ Optimal readability")
 print("✅ All features functional")
-print("✅ Ready for demo!")
 print("="*60 + "\n")
 
 demo.launch()