Refactor recommendation page and templates

- Converted recommend.html to extend a new base.html template for better structure and reusability.
- Added breadcrumb navigation and improved user selection interface with Alpine.js for dynamic updates.
- Implemented a new approach and method selection UI with buttons and dynamic filtering for recommendations.
- Enhanced the results display with tabs for cards and comparison, including loading states and error handling.
- Created macros in macros.html for reusable components like navigation, glass containers, product cards, and loading spinners.
- Introduced a base layout in base.html with theme toggling and toast notifications for user feedback.
- Updated JavaScript logic to handle user interactions and API calls more efficiently.

app.py

@@ -92,6 +92,7 @@ def get_product_info(product_id):
 @app.route("/")
 def index():
     return render_template("index.html",
+                           active_page="home",
                            users=USER_OPTIONS,
                            categories=CATEGORIES,
                            brands=BRANDS,
@@ -101,6 +102,7 @@ def index():
 @app.route("/recommend")
 def recommend_page():
     return render_template("recommend.html",
+                           active_page="recommend",
                            users=USER_OPTIONS,
                            categories=CATEGORIES,
                            brands=BRANDS,
@@ -110,6 +112,7 @@ def recommend_page():
 @app.route("/evaluate")
 def evaluate_page():
     return render_template("evaluation.html",
+                           active_page="evaluate",
                            users=USER_OPTIONS,
                            categories=CATEGORIES,
                            brands=BRANDS,
@@ -297,5 +300,120 @@ def api_evaluate():
         return jsonify({"error": str(e)}), 500
 
 
+@app.route("/api/products/filter")
+def api_products_filter():
+    cat = request.args.get("category")
+    brand = request.args.get("brand")
+    price_min = request.args.get("price_min", type=float)
+    price_max = request.args.get("price_max", type=float)
+    q = request.args.get("q", "").lower()
+    filtered = products.copy()
+    if cat:
+        filtered = filtered[filtered["category"] == cat]
+    if brand:
+        filtered = filtered[filtered["brand"] == brand]
+    if price_min is not None:
+        filtered = filtered[filtered["price"] >= price_min]
+    if price_max is not None:
+        filtered = filtered[filtered["price"] <= price_max]
+    if q:
+        filtered = filtered[filtered["name"].str.lower().str.contains(q, na=False)]
+    results = []
+    for _, row in filtered.iterrows():
+        results.append(get_product_info(row["product_id"]))
+    return jsonify({
+        "total": len(results),
+        "products": results,
+    })
+
+
+@app.route("/api/user/<int:user_id>/preferences", methods=["PUT"])
+def api_update_preferences(user_id):
+    data = request.json
+    user_idx = users[users["user_id"] == user_id].index
+    if user_idx.empty:
+        return jsonify({"error": "User not found"}), 404
+    if "budget_min" in data:
+        users.at[user_idx[0], "budget_min"] = data["budget_min"]
+    if "budget_max" in data:
+        users.at[user_idx[0], "budget_max"] = data["budget_max"]
+    prefs = get_user_preferences(users, user_id)
+    for u in USER_OPTIONS:
+        if u["id"] == user_id:
+            u["budget_min"] = float(prefs.get("budget_min", 0))
+            u["budget_max"] = float(prefs.get("budget_max", 999999))
+            break
+    return jsonify({"success": True, "preferences": prefs})
+
+
+@app.route("/htmx/recommend", methods=["POST"])
+def htmx_recommend():
+    data = request.json or request.form
+    user_id = data.get("user_id", type=int)
+    approach = data.get("approach", "cf")
+    method = data.get("method", "user_based")
+    n_recs = data.get("n", 10, type=int)
+
+    if not user_id:
+        return '<div class="empty-state"><div class="empty-icon">⚠️</div><p>Please select a user first.</p></div>'
+
+    user_rated = get_user_rated_items(user_id)
+    prefs = get_user_preferences(users, user_id)
+
+    try:
+        if approach == "cf":
+            recs = cf.recommend(method, user_id, n_recommendations=n_recs)
+        elif approach == "content":
+            recs = cb.recommend(method, user_profile_items=user_rated, preferences=prefs, n_recommendations=n_recs)
+        elif approach == "knowledge":
+            constraints = {
+                "budget_min": prefs.get("budget_min", 0),
+                "budget_max": prefs.get("budget_max", 999999),
+                "category": list(prefs.get("preferred_categories", set())),
+                "brand": list(prefs.get("favorite_brands", set())),
+            }
+            recs = kb.recommend(method, constraints=constraints, preferences=prefs, n_recommendations=n_recs)
+        else:
+            return f'<div class="empty-state"><div class="empty-icon">❌</div><p>Unknown approach: {approach}</p></div>'
+    except Exception as e:
+        return f'<div class="empty-state"><div class="empty-icon">❌</div><p>{str(e)}</p></div>'
+
+    if not recs:
+        return '<div class="empty-state"><div class="empty-icon">📭</div><p>No recommendations found.</p></div>'
+
+    html = '<div class="product-grid">'
+    for pid, score in recs:
+        product = get_product_info(pid)
+        if not product:
+            continue
+        explanation = "Recommended based on your preferences."
+        html += f'''
+        <div class="product-card">
+            <div class="product-icon">{get_category_icon(product["category"])}</div>
+            <div class="product-name">{product["name"]}</div>
+            <div class="product-meta">{product["brand"]} · {product["subcategory"]}</div>
+            <div class="compact-row">
+                <div class="product-price">${product["price"]:.2f}</div>
+                <div class="product-rating">{stars_html(product["avg_rating"])} {product["avg_rating"]}</div>
+            </div>
+            <div class="product-explanation">{explanation}</div>
+        </div>'''
+    html += '</div>'
+    return html
+
+
+def get_category_icon(category):
+    icons = {
+        "Electronics": "💻", "Clothing": "👕", "Home & Kitchen": "🏠",
+        "Books": "📚", "Sports": "⚽", "Beauty": "💄", "Toys": "🧸", "Automotive": "🚗"
+    }
+    return icons.get(category, "📦")
+
+
+def stars_html(rating):
+    f = int(rating)
+    return "★" * f + "☆" * (5 - f)
+
+
 if __name__ == "__main__":
     app.run(debug=True, host="0.0.0.0", port=5000)

static/css/style.css

@@ -1,547 +1,1452 @@
+:root {
+  --primary: #6C63FF;
+  --primary-light: #8B85FF;
+  --primary-dark: #4D44E8;
+  --primary-rgb: 108, 99, 255;
+  --secondary: #FF6584;
+  --secondary-light: #FF8DA3;
+  --secondary-rgb: 255, 101, 132;
+
+  --bg-deep: #0f0c29;
+  --bg-mid: #302b63;
+  --bg-light: #24243e;
+  --bg-gradient: linear-gradient(135deg, var(--bg-deep), var(--bg-mid), var(--bg-light));
+
+  --glass-bg: rgba(255, 255, 255, 0.06);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-hover-bg: rgba(255, 255, 255, 0.1);
+  --glass-blur: 20px;
+  --card-bg: rgba(255, 255, 255, 0.04);
+  --card-border: rgba(255, 255, 255, 0.08);
+  --card-hover-bg: rgba(255, 255, 255, 0.07);
+  --card-hover-border: rgba(var(--primary-rgb), 0.3);
+
+  --text-primary: #ffffff;
+  --text-body: #e0e0e0;
+  --text-muted: rgba(255, 255, 255, 0.6);
+  --text-dim: rgba(255, 255, 255, 0.4);
+
+  --star: #FFD700;
+  --tag-text: #a99bff;
+  --tag-bg: rgba(var(--primary-rgb), 0.2);
+  --tag-border: rgba(var(--primary-rgb), 0.3);
+  --tag-brand-text: #ff9eb2;
+  --tag-brand-bg: rgba(var(--secondary-rgb), 0.15);
+  --tag-brand-border: rgba(var(--secondary-rgb), 0.3);
+
+  --success: #22C55E;
+  --error: #EF4444;
+  --warning: #F59E0B;
+
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+
+  --transition-fast: 0.2s ease;
+  --transition-normal: 0.3s ease;
+  --transition-slow: 0.5s ease;
+
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
+  --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.3);
+  --shadow-glow: 0 8px 25px rgba(var(--primary-rgb), 0.4);
+
+  --container-max: 1200px;
+}
+
+[data-theme="light"] {
+  --bg-deep: #f0f2f5;
+  --bg-mid: #e2e6ed;
+  --bg-light: #ffffff;
+  --bg-gradient: linear-gradient(135deg, #f0f2f5, #e2e6ed, #ffffff);
+
+  --glass-bg: rgba(255, 255, 255, 0.75);
+  --glass-border: rgba(0, 0, 0, 0.08);
+  --glass-hover-bg: rgba(255, 255, 255, 0.9);
+  --card-bg: rgba(255, 255, 255, 0.6);
+  --card-border: rgba(0, 0, 0, 0.06);
+  --card-hover-bg: rgba(255, 255, 255, 0.85);
+  --card-hover-border: rgba(var(--primary-rgb), 0.2);
+
+  --text-primary: #1a1a2e;
+  --text-body: #333333;
+  --text-muted: rgba(0, 0, 0, 0.55);
+  --text-dim: rgba(0, 0, 0, 0.35);
+
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
+  --shadow-glow: 0 8px 25px rgba(var(--primary-rgb), 0.25);
+
+  --tag-text: var(--primary);
+  --tag-brand-text: var(--secondary);
+}
+
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-    min-height: 100vh;
-    color: #e0e0e0;
+html {
+  scroll-behavior: smooth;
 }
 
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  background: var(--bg-gradient);
+  min-height: 100vh;
+  color: var(--text-body);
+  transition: background var(--transition-slow), color var(--transition-normal);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(var(--primary-rgb), 0.3);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--primary-rgb), 0.5);
+}
+
+::selection {
+  background: rgba(var(--primary-rgb), 0.3);
+  color: var(--text-primary);
+}
+
+/* ===== AMBIENT BACKGROUND ===== */
+.ambient-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  overflow: hidden;
+  pointer-events: none;
+}
+.ambient-blob {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.12;
+  will-change: transform;
+}
+.ambient-blob-1 {
+  width: 600px;
+  height: 600px;
+  background: var(--primary);
+  top: -15%;
+  left: -10%;
+  animation: floatA 25s ease-in-out infinite;
+}
+.ambient-blob-2 {
+  width: 500px;
+  height: 500px;
+  background: var(--secondary);
+  bottom: -15%;
+  right: -10%;
+  animation: floatB 25s ease-in-out infinite;
+  animation-delay: -8s;
+}
+.ambient-blob-3 {
+  width: 400px;
+  height: 400px;
+  background: var(--primary-light);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: floatC 30s ease-in-out infinite;
+  animation-delay: -16s;
+  opacity: 0.06;
+}
+
+@keyframes floatA {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  25% { transform: translate(40px, -40px) scale(1.1); }
+  50% { transform: translate(-20px, 20px) scale(0.95); }
+  75% { transform: translate(30px, 30px) scale(1.05); }
+}
+@keyframes floatB {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  25% { transform: translate(-30px, 30px) scale(1.08); }
+  50% { transform: translate(20px, -30px) scale(0.92); }
+  75% { transform: translate(-40px, -20px) scale(1.02); }
+}
+@keyframes floatC {
+  0%, 100% { transform: translate(-50%, -50%) scale(1); }
+  33% { transform: translate(-40%, -60%) scale(1.15); }
+  66% { transform: translate(-60%, -40%) scale(0.9); }
+}
+
+/* ===== NAVIGATION ===== */
 .nav {
-    background: rgba(255, 255, 255, 0.05);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    padding: 1rem 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--glass-border);
+  padding: var(--space-md) var(--space-xl);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  transition: background var(--transition-normal);
 }
 
 .nav-brand {
-    font-size: 1.3rem;
-    font-weight: 700;
-    color: #fff;
-    text-decoration: none;
-    letter-spacing: -0.5px;
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  text-decoration: none;
+  letter-spacing: -0.5px;
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
 }
 
 .nav-brand span {
-    color: #6C63FF;
+  color: var(--primary);
+}
+
+.nav-brand svg {
+  width: 24px;
+  height: 24px;
+  stroke: var(--primary);
+}
+
+.nav-center {
+  display: flex;
+  gap: var(--space-lg);
 }
 
 .nav-links {
-    display: flex;
-    gap: 1.5rem;
+  display: flex;
+  gap: var(--space-lg);
 }
 
 .nav-links a {
-    color: rgba(255, 255, 255, 0.7);
-    text-decoration: none;
-    font-size: 0.9rem;
-    font-weight: 500;
-    transition: color 0.2s;
-    padding: 0.5rem 0;
+  color: var(--text-muted);
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: color var(--transition-fast);
+  padding: var(--space-sm) 0;
+  position: relative;
 }
 
-.nav-links a:hover,
-.nav-links a.active {
-    color: #fff;
+.nav-links a::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--primary);
+  transform: scaleX(0);
+  transition: transform var(--transition-fast);
+}
+
+.nav-links a:hover {
+  color: var(--text-primary);
 }
 
 .nav-links a.active {
-    border-bottom: 2px solid #6C63FF;
+  color: var(--text-primary);
+}
+
+.nav-links a.active::after {
+  transform: scaleX(1);
 }
 
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.theme-toggle {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--glass-border);
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--text-muted);
+  transition: all var(--transition-fast);
+  font-size: 1rem;
+}
+.theme-toggle:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: var(--text-primary);
+}
+
+/* ===== LAYOUT ===== */
 .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem;
+  max-width: var(--container-max);
+  margin: 0 auto;
+  padding: var(--space-xl);
+  animation: pageIn 0.4s ease;
+}
+
+@keyframes pageIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
+/* ===== GLASS PANEL ===== */
 .glass {
-    background: rgba(255, 255, 255, 0.06);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 16px;
-    padding: 1.5rem;
-    margin-bottom: 1.5rem;
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-lg);
+  margin-bottom: var(--space-lg);
+  transition: all var(--transition-normal);
+}
+
+.glass:hover {
+  border-color: rgba(var(--primary-rgb), 0.15);
 }
 
 .glass-header {
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: #fff;
-    margin-bottom: 1rem;
-}
-
-select, input[type="number"] {
-    background: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    border-radius: 8px;
-    padding: 0.65rem 1rem;
-    color: #fff;
-    font-size: 0.9rem;
-    width: 100%;
-    outline: none;
-    transition: border-color 0.2s;
-    appearance: none;
-    -webkit-appearance: none;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: var(--space-md);
+}
+
+/* ===== FORM ELEMENTS ===== */
+select, input[type="number"], input[type="text"], input[type="range"] {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
+  padding: 0.65rem 1rem;
+  color: var(--text-primary);
+  font-size: 0.9rem;
+  width: 100%;
+  outline: none;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+  appearance: none;
+  -webkit-appearance: none;
+  font-family: inherit;
 }
 
 select:hover, input:hover {
-    border-color: rgba(108, 99, 255, 0.5);
+  border-color: rgba(var(--primary-rgb), 0.5);
 }
 
 select:focus, input:focus {
-    border-color: #6C63FF;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
+}
+
+select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  padding-right: 2.5rem;
 }
 
 select option {
-    background: #24243e;
-    color: #fff;
+  background: var(--bg-light);
+  color: var(--text-primary);
+}
+
+input[type="range"] {
+  padding: 0;
+  border: none;
+  background: none;
+  height: 6px;
+  accent-color: var(--primary);
+}
+
+.form-group {
+  margin-bottom: var(--space-md);
+}
+
+.form-label {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  margin-bottom: 0.3rem;
 }
 
+.form-hint {
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  margin-top: 0.25rem;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-md);
+}
+
+/* ===== BUTTONS ===== */
 .btn {
-    padding: 0.7rem 1.5rem;
-    border: none;
-    border-radius: 8px;
-    font-size: 0.9rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-family: inherit;
+  padding: 0.7rem 1.5rem;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition-normal);
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn:active {
+  transform: scale(0.97);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
 }
 
 .btn-primary {
-    background: linear-gradient(135deg, #6C63FF, #FF6584);
-    color: #fff;
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  color: #fff;
 }
 
-.btn-primary:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(108, 99, 255, 0.4);
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-glow);
 }
 
 .btn-secondary {
-    background: rgba(255, 255, 255, 0.1);
-    color: #fff;
-    border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+  border: 1px solid var(--glass-border);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.15);
+  transform: translateY(-1px);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid transparent;
+}
+
+.btn-ghost:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-primary);
+}
+
+.btn-sm {
+  padding: 0.4rem 0.8rem;
+  font-size: 0.8rem;
 }
 
-.btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.15);
+.btn-lg {
+  padding: 1rem 2rem;
+  font-size: 1rem;
 }
 
 .btn-group {
-    display: flex;
-    gap: 0.5rem;
-    flex-wrap: wrap;
+  display: flex;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+}
+
+.btn-loading {
+  pointer-events: none;
+}
+
+.btn-loading .btn-text {
+  opacity: 0;
+}
+
+.btn-loading::after {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
 }
 
 .btn-approach {
-    background: rgba(255, 255, 255, 0.06);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
-    padding: 0.75rem 1.2rem;
-    color: rgba(255, 255, 255, 0.7);
-    cursor: pointer;
-    font-size: 0.85rem;
-    font-weight: 500;
-    transition: all 0.3s;
-    font-family: inherit;
-    flex: 1;
-    min-width: 120px;
-    text-align: center;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--radius-md);
+  padding: 0.75rem 1.2rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-weight: 500;
+  transition: all var(--transition-normal);
+  font-family: inherit;
+  flex: 1;
+  min-width: 120px;
+  text-align: center;
 }
 
 .btn-approach:hover {
-    background: rgba(108, 99, 255, 0.15);
-    border-color: #6C63FF;
-    color: #fff;
+  background: rgba(var(--primary-rgb), 0.15);
+  border-color: var(--primary);
+  color: var(--text-primary);
+  transform: translateY(-2px);
 }
 
 .btn-approach.active {
-    background: linear-gradient(135deg, rgba(108, 99, 255, 0.3), rgba(255, 101, 132, 0.2));
-    border-color: #6C63FF;
-    color: #fff;
+  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.3), rgba(var(--secondary-rgb), 0.2));
+  border-color: var(--primary);
+  color: var(--text-primary);
+  box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.2);
 }
 
 .btn-approach .icon {
-    font-size: 1.5rem;
-    display: block;
-    margin-bottom: 0.3rem;
+  font-size: 1.5rem;
+  display: block;
+  margin-bottom: 0.3rem;
 }
 
 .btn-method {
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 6px;
-    padding: 0.4rem 0.8rem;
-    color: rgba(255, 255, 255, 0.6);
-    cursor: pointer;
-    font-size: 0.8rem;
-    transition: all 0.2s;
-    font-family: inherit;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+  padding: 0.4rem 0.8rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.8rem;
+  transition: all var(--transition-fast);
+  font-family: inherit;
 }
 
 .btn-method:hover {
-    background: rgba(255, 255, 255, 0.08);
-    color: #fff;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary);
 }
 
 .btn-method.active {
-    background: rgba(108, 99, 255, 0.2);
-    border-color: #6C63FF;
-    color: #fff;
+  background: rgba(var(--primary-rgb), 0.2);
+  border-color: var(--primary);
+  color: var(--text-primary);
 }
 
+/* ===== PROFILE CARD ===== */
 .profile-card {
-    display: flex;
-    gap: 2rem;
-    align-items: center;
-    flex-wrap: wrap;
+  display: flex;
+  gap: var(--space-xl);
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 .profile-avatar {
-    width: 64px;
-    height: 64px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, #6C63FF, #FF6584);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: #fff;
-    flex-shrink: 0;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #fff;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.profile-avatar::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  opacity: 0.3;
+  z-index: -1;
+  animation: pulse-ring 2s ease-in-out infinite;
+}
+
+@keyframes pulse-ring {
+  0%, 100% { transform: scale(1); opacity: 0.3; }
+  50% { transform: scale(1.08); opacity: 0.1; }
 }
 
 .profile-info {
-    flex: 1;
+  flex: 1;
 }
 
 .profile-name {
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: #fff;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-primary);
 }
 
 .profile-detail {
-    font-size: 0.85rem;
-    color: rgba(255, 255, 255, 0.6);
-    margin-top: 0.2rem;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  margin-top: 0.2rem;
 }
 
 .profile-tags {
-    display: flex;
-    gap: 0.4rem;
-    flex-wrap: wrap;
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
 }
 
+/* ===== TAGS ===== */
 .tag {
-    background: rgba(108, 99, 255, 0.2);
-    border: 1px solid rgba(108, 99, 255, 0.3);
-    border-radius: 4px;
-    padding: 0.15rem 0.5rem;
-    font-size: 0.75rem;
-    color: #a99bff;
+  background: var(--tag-bg);
+  border: 1px solid var(--tag-border);
+  border-radius: var(--radius-sm);
+  padding: 0.15rem 0.5rem;
+  font-size: 0.75rem;
+  color: var(--tag-text);
+}
+
+.tag-brand {
+  background: var(--tag-brand-bg);
+  border-color: var(--tag-brand-border);
+  color: var(--tag-brand-text);
 }
 
+/* ===== GRID ===== */
 .row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1.5rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-lg);
 }
 
 @media (max-width: 768px) {
-    .row {
-        grid-template-columns: 1fr;
-    }
+  .row {
+    grid-template-columns: 1fr;
+  }
 }
 
+/* ===== PRODUCT CARD ===== */
 .product-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--space-md);
 }
 
 .product-card {
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 12px;
-    padding: 1rem;
-    transition: all 0.3s;
-    cursor: default;
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-md);
+  transition: all var(--transition-normal);
+  cursor: default;
+  position: relative;
+  overflow: hidden;
+}
+
+.product-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--primary), var(--secondary));
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform var(--transition-normal);
 }
 
 .product-card:hover {
-    transform: translateY(-3px);
-    background: rgba(255, 255, 255, 0.07);
-    border-color: rgba(108, 99, 255, 0.3);
-    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+  transform: translateY(-4px);
+  background: var(--card-hover-bg);
+  border-color: var(--card-hover-border);
+  box-shadow: var(--shadow-lg);
+}
+
+.product-card:hover::before {
+  transform: scaleX(1);
+}
+
+.product-card .score-badge-top {
+  position: absolute;
+  top: var(--space-sm);
+  right: var(--space-sm);
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  color: #fff;
+  border-radius: var(--radius-sm);
+  padding: 0.15rem 0.5rem;
+  font-size: 0.7rem;
+  font-weight: 600;
 }
 
 .product-icon {
-    width: 48px;
-    height: 48px;
-    border-radius: 10px;
-    background: linear-gradient(135deg, rgba(108, 99, 255, 0.2), rgba(255, 101, 132, 0.1));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-    margin-bottom: 0.75rem;
+  width: 48px;
+  height: 48px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2), rgba(var(--secondary-rgb), 0.1));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  margin-bottom: 0.75rem;
 }
 
 .product-name {
-    font-size: 0.95rem;
-    font-weight: 600;
-    color: #fff;
-    margin-bottom: 0.3rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 0.3rem;
 }
 
 .product-meta {
-    font-size: 0.8rem;
-    color: rgba(255, 255, 255, 0.5);
-    margin-bottom: 0.4rem;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  margin-bottom: 0.4rem;
 }
 
 .product-price {
-    font-size: 1rem;
-    font-weight: 700;
-    color: #6C63FF;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--primary);
 }
 
 .product-rating {
-    display: flex;
-    align-items: center;
-    gap: 0.3rem;
-    font-size: 0.85rem;
-    color: #FFD700;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.85rem;
+  color: var(--star);
 }
 
 .product-explanation {
-    font-size: 0.78rem;
-    color: rgba(255, 255, 255, 0.6);
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
-    padding-top: 0.6rem;
-    margin-top: 0.6rem;
-    font-style: italic;
-}
-
-.score-badge {
-    display: inline-block;
-    background: rgba(108, 99, 255, 0.2);
-    border-radius: 4px;
-    padding: 0.1rem 0.4rem;
-    font-size: 0.7rem;
-    color: #a99bff;
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  padding-top: 0.6rem;
+  margin-top: 0.6rem;
+  font-style: italic;
+  line-height: 1.4;
 }
 
 .compact-row {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    flex-wrap: wrap;
+  display: flex;
+  gap: var(--space-md);
+  align-items: center;
+  flex-wrap: wrap;
 }
 
-.form-group {
-    margin-bottom: 1rem;
-}
-
-.form-label {
-    display: block;
-    font-size: 0.8rem;
-    font-weight: 500;
-    color: rgba(255, 255, 255, 0.7);
-    margin-bottom: 0.3rem;
+/* ===== SCORE BADGE ===== */
+.score-badge {
+  display: inline-block;
+  background: var(--tag-bg);
+  border-radius: var(--radius-sm);
+  padding: 0.1rem 0.4rem;
+  font-size: 0.7rem;
+  color: var(--tag-text);
 }
 
+/* ===== TABS ===== */
 .tabs {
-    display: flex;
-    gap: 0.5rem;
-    margin-bottom: 1.5rem;
-    flex-wrap: wrap;
+  display: flex;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-lg);
+  flex-wrap: wrap;
 }
 
 .tab {
-    padding: 0.6rem 1.2rem;
-    border-radius: 8px;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: rgba(255, 255, 255, 0.6);
-    cursor: pointer;
-    font-size: 0.85rem;
-    font-weight: 500;
-    transition: all 0.2s;
-    font-family: inherit;
+  padding: 0.6rem 1.2rem;
+  border-radius: var(--radius-md);
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-weight: 500;
+  transition: all var(--transition-fast);
+  font-family: inherit;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
 }
 
 .tab:hover {
-    background: rgba(255, 255, 255, 0.08);
-    color: #fff;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary);
 }
 
 .tab.active {
-    background: rgba(108, 99, 255, 0.2);
-    border-color: #6C63FF;
-    color: #fff;
+  background: rgba(var(--primary-rgb), 0.2);
+  border-color: var(--primary);
+  color: var(--text-primary);
 }
 
 .tab-content {
-    display: none;
+  display: none;
 }
 
 .tab-content.active {
-    display: block;
-    animation: fadeIn 0.3s ease;
+  display: block;
+  animation: fadeIn 0.3s ease;
 }
 
 @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
+/* ===== EVALUATION TABLE ===== */
 .eval-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 0.85rem;
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
 }
 
 .eval-table th,
 .eval-table td {
-    padding: 0.6rem 0.8rem;
-    text-align: left;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  padding: 0.6rem 0.8rem;
+  text-align: left;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 
 .eval-table th {
-    color: rgba(255, 255, 255, 0.5);
-    font-weight: 500;
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+  color: var(--text-muted);
+  font-weight: 500;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
 }
 
 .eval-table td {
-    color: rgba(255, 255, 255, 0.85);
+  color: var(--text-body);
 }
 
 .eval-table tr:hover td {
-    background: rgba(255, 255, 255, 0.03);
+  background: rgba(255, 255, 255, 0.03);
 }
 
 .best-row {
-    background: rgba(108, 99, 255, 0.08) !important;
+  background: rgba(var(--primary-rgb), 0.08) !important;
+}
+
+.eval-table .metric-improved {
+  color: var(--success);
+}
+.eval-table .metric-declined {
+  color: var(--error);
 }
 
+/* ===== LOADING STATES ===== */
 .loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 3rem;
-    color: rgba(255, 255, 255, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  color: var(--text-muted);
+  gap: 0.75rem;
 }
 
 .spinner {
-    width: 24px;
-    height: 24px;
-    border: 3px solid rgba(255, 255, 255, 0.1);
-    border-top-color: #6C63FF;
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-    margin-right: 0.75rem;
+  width: 24px;
+  height: 24px;
+  border: 3px solid rgba(255, 255, 255, 0.1);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.04) 25%,
+    rgba(255, 255, 255, 0.08) 50%,
+    rgba(255, 255, 255, 0.04) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: var(--radius-md);
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.skeleton-card {
+  height: 180px;
+  padding: var(--space-md);
+}
+
+.skeleton-line {
+  height: 12px;
+  margin-bottom: 8px;
+  width: 80%;
+}
+.skeleton-line:last-child {
+  width: 60%;
 }
 
 @keyframes spin {
-    to { transform: rotate(360deg); }
+  to { transform: rotate(360deg); }
 }
 
+/* ===== EMPTY STATE ===== */
 .empty-state {
-    text-align: center;
-    padding: 3rem;
-    color: rgba(255, 255, 255, 0.4);
+  text-align: center;
+  padding: 3rem;
+  color: var(--text-dim);
 }
 
-.empty-state .icon {
-    font-size: 3rem;
-    margin-bottom: 1rem;
+.empty-state .empty-icon {
+  font-size: 3rem;
+  margin-bottom: var(--space-md);
 }
 
+.empty-state .empty-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin-bottom: var(--space-sm);
+}
+
+.empty-state .empty-desc {
+  font-size: 0.85rem;
+  color: var(--text-dim);
+}
+
+/* ===== CHART ===== */
 .chart-container {
-    position: relative;
-    height: 300px;
-    width: 100%;
+  position: relative;
+  height: 300px;
+  width: 100%;
 }
 
+.chart-container canvas {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+/* ===== ANALYSIS BLOCK ===== */
 .analysis-block {
-    background: rgba(108, 99, 255, 0.06);
-    border: 1px solid rgba(108, 99, 255, 0.15);
-    border-radius: 10px;
-    padding: 1rem;
-    margin-top: 1rem;
+  background: rgba(var(--primary-rgb), 0.06);
+  border: 1px solid rgba(var(--primary-rgb), 0.15);
+  border-radius: 10px;
+  padding: 1rem;
+  margin-top: var(--space-md);
 }
 
 .analysis-block h4 {
-    color: #a99bff;
-    margin-bottom: 0.5rem;
-    font-size: 0.9rem;
+  color: var(--tag-text);
+  margin-bottom: var(--space-sm);
+  font-size: 0.9rem;
 }
 
 .analysis-block p {
-    font-size: 0.85rem;
-    color: rgba(255, 255, 255, 0.7);
-    line-height: 1.5;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+
+.analysis-block ul {
+  list-style: none;
+  padding: 0;
+}
+.analysis-block li {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  padding: 0.25rem 0;
+  line-height: 1.5;
+}
+.analysis-block li::before {
+  content: '▸ ';
+  color: var(--primary);
 }
 
+/* ===== COMPARE VIEW ===== */
 .compare-view {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 1rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: var(--space-md);
 }
 
 @media (max-width: 992px) {
-    .compare-view {
-        grid-template-columns: 1fr;
-    }
+  .compare-view {
+    grid-template-columns: 1fr;
+  }
 }
 
 .compare-column {
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 12px;
-    padding: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: var(--radius-lg);
+  padding: var(--space-md);
+  border: 1px solid var(--card-border);
+  transition: all var(--transition-normal);
+}
+
+.compare-column:hover {
+  border-color: rgba(var(--primary-rgb), 0.2);
 }
 
 .compare-column h3 {
-    font-size: 0.9rem;
-    color: #fff;
-    margin-bottom: 1rem;
-    text-align: center;
-    padding-bottom: 0.5rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  font-size: 0.9rem;
+  color: var(--text-primary);
+  margin-bottom: var(--space-md);
+  text-align: center;
+  padding-bottom: var(--space-sm);
+  border-bottom: 1px solid var(--card-border);
+}
+
+.compare-item {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  font-size: 0.8rem;
+}
+.compare-item:last-child {
+  border-bottom: none;
+}
+.compare-item-name {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+.compare-item-meta {
+  color: var(--text-dim);
+  margin-top: 0.15rem;
 }
 
+/* ===== BADGE ===== */
 .badge-best {
-    background: linear-gradient(135deg, #6C63FF, #FF6584);
-    color: #fff;
-    padding: 0.2rem 0.6rem;
-    border-radius: 4px;
-    font-size: 0.7rem;
-    font-weight: 600;
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  color: #fff;
+  padding: 0.2rem 0.6rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.7rem;
+  font-weight: 600;
+  display: inline-block;
+}
+
+/* ===== TOAST NOTIFICATIONS ===== */
+.toast-container {
+  position: fixed;
+  bottom: var(--space-xl);
+  right: var(--space-xl);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  pointer-events: none;
+}
+
+.toast {
+  pointer-events: auto;
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
+  padding: 0.75rem 1rem;
+  color: var(--text-primary);
+  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  box-shadow: var(--shadow-md);
+  min-width: 280px;
+  max-width: 400px;
+  animation: toastIn 0.35s ease, toastOut 0.35s ease 3s forwards;
+}
+
+.toast-success {
+  border-left: 3px solid var(--success);
+}
+.toast-error {
+  border-left: 3px solid var(--error);
+}
+.toast-info {
+  border-left: 3px solid var(--primary);
+}
+.toast-warning {
+  border-left: 3px solid var(--warning);
+}
+
+.toast-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.toast-success .toast-icon { color: var(--success); }
+.toast-error .toast-icon { color: var(--error); }
+.toast-info .toast-icon { color: var(--primary); }
+.toast-warning .toast-icon { color: var(--warning); }
+
+.toast-close {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 0.15rem;
+  font-size: 1rem;
+  line-height: 1;
+}
+
+@keyframes toastIn {
+  from { transform: translateX(100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+@keyframes toastOut {
+  from { opacity: 1; }
+  to { opacity: 0; transform: translateY(-10px); }
+}
+
+/* ===== PREFERENCE EDITOR ===== */
+.preference-slider {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: 0.5rem 0;
+}
+.preference-slider label {
+  min-width: 120px;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+.preference-slider input[type="range"] {
+  flex: 1;
+}
+.preference-slider .slider-value {
+  min-width: 40px;
+  text-align: right;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--primary);
+}
+
+/* ===== FILTER CONTROLS ===== */
+.filter-bar {
+  display: flex;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+  align-items: end;
+  margin-bottom: var(--space-md);
+}
+
+.filter-bar .form-group {
+  margin-bottom: 0;
+  min-width: 160px;
+}
+
+.filter-bar .form-group select,
+.filter-bar .form-group input {
+  width: auto;
+  min-width: 140px;
+}
+
+/* ===== RESPONSIVE ===== */
+@media (max-width: 768px) {
+  .nav {
+    padding: var(--space-md);
+    flex-wrap: wrap;
+    gap: var(--space-sm);
+  }
+  .nav-links {
+    gap: var(--space-sm);
+    font-size: 0.8rem;
+  }
+  .container {
+    padding: var(--space-md);
+  }
+  .glass {
+    padding: var(--space-md);
+  }
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+  .product-grid {
+    grid-template-columns: 1fr;
+  }
+  .toast-container {
+    bottom: var(--space-md);
+    right: var(--space-md);
+    left: var(--space-md);
+  }
+  .toast {
+    min-width: 0;
+    max-width: 100%;
+  }
+  .eval-table {
+    font-size: 0.75rem;
+  }
+  .eval-table th,
+  .eval-table td {
+    padding: 0.4rem 0.5rem;
+  }
+  .nav-center {
+    order: 3;
+    width: 100%;
+    justify-content: center;
+  }
 }
 
+@media (max-width: 992px) {
+  .profile-card {
+    flex-direction: column;
+    text-align: center;
+  }
+  .profile-tags {
+    justify-content: center;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  .ambient-blob { display: none; }
+  html { scroll-behavior: auto; }
+}
+
+/* ===== CATEGORY ACCENT COLORS ===== */
+:root {
+  --cat-electronics: #3B82F6;
+  --cat-clothing: #EC4899;
+  --cat-home-kitchen: #F59E0B;
+  --cat-books: #14B8A6;
+  --cat-sports: #22C55E;
+  --cat-beauty: #A855F7;
+  --cat-toys: #F97316;
+  --cat-automotive: #EF4444;
+}
+
+.product-card[data-category="Electronics"]::before { background: var(--cat-electronics); }
+.product-card[data-category="Clothing"]::before { background: var(--cat-clothing); }
+.product-card[data-category="Home & Kitchen"]::before { background: var(--cat-home-kitchen); }
+.product-card[data-category="Books"]::before { background: var(--cat-books); }
+.product-card[data-category="Sports"]::before { background: var(--cat-sports); }
+.product-card[data-category="Beauty"]::before { background: var(--cat-beauty); }
+.product-card[data-category="Toys"]::before { background: var(--cat-toys); }
+.product-card[data-category="Automotive"]::before { background: var(--cat-automotive); }
+
+.product-card[data-category="Electronics"]:hover { border-color: rgba(59, 130, 246, 0.3); }
+.product-card[data-category="Clothing"]:hover { border-color: rgba(236, 72, 153, 0.3); }
+.product-card[data-category="Home & Kitchen"]:hover { border-color: rgba(245, 158, 11, 0.3); }
+.product-card[data-category="Books"]:hover { border-color: rgba(20, 184, 166, 0.3); }
+.product-card[data-category="Sports"]:hover { border-color: rgba(34, 197, 94, 0.3); }
+.product-card[data-category="Beauty"]:hover { border-color: rgba(168, 85, 247, 0.3); }
+.product-card[data-category="Toys"]:hover { border-color: rgba(249, 115, 22, 0.3); }
+.product-card[data-category="Automotive"]:hover { border-color: rgba(239, 68, 68, 0.3); }
+
+/* ===== RELEVANCE PROGRESS BAR ===== */
+.product-score-bar {
+  height: 3px;
+  border-radius: 2px;
+  margin-top: 0.5rem;
+  background: rgba(255, 255, 255, 0.06);
+  overflow: hidden;
+}
+.product-score-bar-fill {
+  height: 100%;
+  border-radius: 2px;
+  background: linear-gradient(90deg, var(--primary), var(--secondary));
+  transition: width 0.6s ease;
+}
+
+/* ===== STAGGERED CARD ENTRY ===== */
+.product-card.stagger {
+  animation: cardIn 0.4s ease backwards;
+}
+@keyframes cardIn {
+  from { opacity: 0; transform: translateY(15px) scale(0.97); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ===== TOOLTIP ===== */
+.tooltip-trigger {
+  position: relative;
+  cursor: help;
+  border-bottom: 1px dashed var(--text-dim);
+}
+.tooltip-trigger .tooltip-content {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  background: var(--bg-light);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  color: var(--text-body);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: all var(--transition-fast);
+  z-index: 50;
+  box-shadow: var(--shadow-md);
+  line-height: 1.4;
+  font-style: normal;
+  font-weight: 400;
+}
+.tooltip-trigger:hover .tooltip-content {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+.tooltip-trigger .tooltip-content::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: var(--glass-border);
+}
+
+/* ===== BREADCRUMB ===== */
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  margin-bottom: var(--space-md);
+  padding: 0;
+  list-style: none;
+}
+.breadcrumb li { display: flex; align-items: center; gap: 0.4rem; }
+.breadcrumb a {
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+.breadcrumb a:hover { color: var(--primary); }
+.breadcrumb .sep { color: var(--text-dim); }
+.breadcrumb .current { color: var(--text-primary); font-weight: 500; }
+
+/* ===== KPI METRIC CARDS ===== */
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: var(--space-md);
+  margin-bottom: var(--space-lg);
+}
+.kpi-card {
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-md);
+  text-align: center;
+  transition: all var(--transition-normal);
+}
+.kpi-card:hover {
+  border-color: var(--card-hover-border);
+  transform: translateY(-2px);
+}
+.kpi-card .kpi-label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-dim);
+  margin-bottom: 0.3rem;
+}
+.kpi-card .kpi-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+.kpi-card .kpi-unit {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.15rem;
+}
+.kpi-card.kpi-primary .kpi-value { color: var(--primary); }
+.kpi-card.kpi-secondary .kpi-value { color: var(--secondary); }
+.kpi-card.kpi-success .kpi-value { color: var(--success); }
+.kpi-card.kpi-warning .kpi-value { color: var(--warning); }
+
+/* ===== COMPARE VIEW SYNCED SCROLL ===== */
+.compare-view.synced-scroll .compare-column {
+  overflow-y: auto;
+  max-height: 500px;
+}
+
+/* ===== KEYBOARD SHORTCUT HINT ===== */
+.kbd-hint {
+  position: fixed;
+  bottom: var(--space-md);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
+  padding: 0.4rem 1rem;
+  font-size: 0.7rem;
+  color: var(--text-dim);
+  z-index: 50;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity var(--transition-slow);
+  pointer-events: none;
+}
+.kbd-hint.visible { opacity: 1; }
+.kbd-hint kbd {
+  display: inline-block;
+  background: rgba(255,255,255,0.1);
+  border-radius: 3px;
+  padding: 0 0.3rem;
+  font-family: inherit;
+  font-size: 0.65rem;
+  border: 1px solid var(--glass-border);
+  margin: 0 0.1rem;
+}
+
+[x-cloak] { display: none !important; }
+
+/* ===== UTILITIES ===== */
 .hidden {
-    display: none !important;
+  display: none !important;
 }
 
-.mt-1 { margin-top: 0.5rem; }
-.mt-2 { margin-top: 1rem; }
-.mt-3 { margin-top: 1.5rem; }
-.mb-2 { margin-bottom: 1rem; }
+.mt-1 { margin-top: var(--space-sm); }
+.mt-2 { margin-top: var(--space-md); }
+.mt-3 { margin-top: var(--space-lg); }
+.mb-1 { margin-bottom: var(--space-sm); }
+.mb-2 { margin-bottom: var(--space-md); }
+.mb-3 { margin-bottom: var(--space-lg); }
+
+.text-center { text-align: center; }
+.text-muted { color: var(--text-muted); }
+.text-dim { color: var(--text-dim); }
+
+.flex { display: flex; }
+.flex-center { display: flex; align-items: center; justify-content: center; }
+.flex-between { display: flex; align-items: center; justify-content: space-between; }
+.gap-sm { gap: var(--space-sm); }
+.gap-md { gap: var(--space-md); }
+
+.w-full { width: 100%; }

templates/base.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en" x-data="{ theme: localStorage.getItem('theme') || 'dark' }" :data-theme="theme">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{% block title %}TasteEngine{% endblock %}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/static/css/style.css">
+  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js" defer></script>
+  <script src="https://unpkg.com/htmx.org@2.0.3/dist/htmx.min.js" defer></script>
+  <script src="https://unpkg.com/lucide@0.468.0/dist/umd/lucide.js" defer></script>
+  {% block head_extra %}{% endblock %}
+</head>
+<body data-page="{{ active_page|default('home') }}">
+  <div class="ambient-bg">
+    <div class="ambient-blob ambient-blob-1"></div>
+    <div class="ambient-blob ambient-blob-2"></div>
+    <div class="ambient-blob ambient-blob-3"></div>
+  </div>
+
+  {% from "macros.html" import nav %}
+  {{ nav(active_page|default('home')) }}
+
+  <div class="container">
+    {% block breadcrumb %}{% endblock %}
+    {% block content %}{% endblock %}
+  </div>
+
+  <div id="toastContainer" class="toast-container"></div>
+
+  <script>
+    function toggleTheme() {
+      const html = document.documentElement;
+      const current = html.getAttribute('data-theme') || 'dark';
+      const next = current === 'dark' ? 'light' : 'dark';
+      html.setAttribute('data-theme', next);
+      localStorage.setItem('theme', next);
+      document.getElementById('themeIcon').textContent = next === 'dark' ? '🌙' : '☀️';
+    }
+
+    function toast(message, type = 'info', duration = 3000) {
+      const container = document.getElementById('toastContainer');
+      const icons = { success: '✓', error: '✕', info: 'ℹ', warning: '⚠' };
+      const t = document.createElement('div');
+      t.className = `toast toast-${type}`;
+      t.innerHTML = `
+        <span class="toast-icon">${icons[type] || 'ℹ'}</span>
+        <span>${message}</span>
+        <button class="toast-close" onclick="this.parentElement.remove()">×</button>
+      `;
+      container.appendChild(t);
+      setTimeout(() => { if (t.parentElement) t.remove(); }, duration);
+    }
+
+    function copyToClipboard(text) {
+      navigator.clipboard.writeText(text).then(() => toast('Copied!', 'success'));
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+      const theme = localStorage.getItem('theme') || 'dark';
+      document.documentElement.setAttribute('data-theme', theme);
+      document.getElementById('themeIcon').textContent = theme === 'dark' ? '🌙' : '☀️';
+    });
+
+    document.addEventListener('htmx:beforeRequest', function() {
+      document.querySelectorAll('.btn.htmx-request').forEach(function(btn) {
+        btn.disabled = true;
+      });
+    });
+    document.addEventListener('htmx:afterRequest', function() {
+      document.querySelectorAll('.btn.htmx-request').forEach(function(btn) {
+        btn.disabled = false;
+      });
+    });
+    document.addEventListener('htmx:responseError', function(evt) {
+      toast('Request failed: ' + (evt.detail.xhr.statusText || 'Unknown error'), 'error');
+    });
+
+    function getCategoryIcon(category) {
+      const icons = {
+        'Electronics': '💻',
+        'Clothing': '👕',
+        'Home & Kitchen': '🏠',
+        'Books': '📚',
+        'Sports': '⚽',
+        'Beauty': '💄',
+        'Toys': '🧸',
+        'Automotive': '🚗'
+      };
+      return icons[category] || '📦';
+    }
+
+    function stars(rating) {
+      const f = Math.floor(rating);
+      return '★'.repeat(f) + '☆'.repeat(5 - f);
+    }
+
+    function syncScroll(source) {
+      const container = source.closest('.synced-scroll');
+      if (!container) return;
+      const pct = source.scrollTop / (source.scrollHeight - source.clientHeight);
+      container.querySelectorAll('.compare-column').forEach(col => {
+        if (col !== source) col.scrollTop = pct * (col.scrollHeight - col.clientHeight);
+      });
+    }
+
+    document.addEventListener('keydown', function(e) {
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT' || e.target.tagName === 'TEXTAREA') return;
+      const page = document.body.getAttribute('data-page');
+      if (e.key === '1' && page === 'recommend') {
+        const btn = document.querySelector('.btn-approach[data-approach="cf"]');
+        if (btn) { btn.click(); toast('Selected Collaborative Filtering', 'info', 1500); }
+      }
+      if (e.key === '2' && page === 'recommend') {
+        const btn = document.querySelector('.btn-approach[data-approach="content"]');
+        if (btn) { btn.click(); toast('Selected Content-Based', 'info', 1500); }
+      }
+      if (e.key === '3' && page === 'recommend') {
+        const btn = document.querySelector('.btn-approach[data-approach="knowledge"]');
+        if (btn) { btn.click(); toast('Selected Knowledge-Based', 'info', 1500); }
+      }
+      if ((e.key === 'r' || e.key === 'Enter') && page === 'recommend') {
+        const genBtn = document.querySelector('.btn-primary');
+        if (genBtn && !genBtn.disabled) genBtn.click();
+      }
+      if (e.key === 'e' && page !== 'evaluate') { window.location.href = '/evaluate'; }
+      if (e.key === 'h' && page !== 'home') { window.location.href = '/'; }
+    });
+
+    {% block page_globals %}{% endblock %}
+  </script>
+
+  {% block scripts %}{% endblock %}
+</body>
+</html>

templates/evaluation.html

@@ -1,333 +1,490 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TasteEngine — Evaluation</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/static/css/style.css">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
-</head>
-<body>
-    <nav class="nav">
-        <a href="/" class="nav-brand">Taste<span>Engine</span></a>
-        <div class="nav-links">
-            <a href="/">Home</a>
-            <a href="/recommend">Recommend</a>
-            <a href="/evaluate" class="active">Evaluate</a>
-        </div>
-    </nav>
-
-    <div class="container">
-        <div class="glass">
-            <h2 class="glass-header">📊 Evaluation & Comparison Dashboard</h2>
-            <p style="color: rgba(255,255,255,0.6); font-size: 0.9rem;">Comprehensive analysis of all recommendation methods and approaches using 6 evaluation metrics.</p>
-            <div class="mt-2">
-                <button class="btn btn-primary" onclick="runEvaluation()">▶️ Run Evaluation</button>
-            </div>
-        </div>
-
-        <div id="evalLoading" class="loading hidden">
-            <div class="spinner"></div>
-            <span>Running evaluation...</span>
-        </div>
-
-        <div id="evalResults" class="hidden">
-
-            <div class="glass">
-                <h2 class="glass-header">🤝 Collaborative Filtering — Method Comparison</h2>
-                <div style="overflow-x: auto;">
-                    <table class="eval-table" id="cfTable">
-                        <thead>
-                            <tr>
-                                <th>Method</th>
-                                <th>RMSE ↓</th>
-                                <th>MAE ↓</th>
-                                <th>Precision@5 ↑</th>
-                                <th>Recall@5 ↑</th>
-                                <th>F1@5 ↑</th>
-                                <th>Coverage ↑</th>
-                            </tr>
-                        </thead>
-                        <tbody id="cfTableBody">
-                            <tr><td colspan="7" style="text-align:center;color:rgba(255,255,255,0.4);">Click "Run Evaluation" to see results</td></tr>
-                        </tbody>
-                    </table>
-                </div>
-                <div id="bestCfBadge" class="mt-2 hidden">
-                    <span class="badge-best">🏆 Best CF Method: <span id="bestCfName"></span></span>
-                </div>
-
-                <div class="mt-2 chart-container">
-                    <canvas id="cfChart"></canvas>
-                </div>
-            </div>
-
-            <div class="glass">
-                <h2 class="glass-header">📈 Approach Comparison (CF vs Content-Based vs Knowledge-Based)</h2>
-                <div style="overflow-x: auto;">
-                    <table class="eval-table" id="approachTable">
-                        <thead>
-                            <tr>
-                                <th>Approach</th>
-                                <th>Precision@5 ↑</th>
-                                <th>Recall@5 ↑</th>
-                            </tr>
-                        </thead>
-                        <tbody id="approachTableBody">
-                            <tr><td colspan="3" style="text-align:center;color:rgba(255,255,255,0.4);">Click "Run Evaluation" to see results</td></tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-
-            <div class="glass" id="analysisSection" class="hidden">
-                <h2 class="glass-header">🔍 Analysis & Insights</h2>
-
-                <div class="analysis-block">
-                    <h4>Which method performs best?</h4>
-                    <p id="analysisBestMethod">Run evaluation to find out.</p>
-                </div>
-
-                <div class="analysis-block mt-2">
-                    <h4>Which approach performs best?</h4>
-                    <p id="analysisBestApproach">Run evaluation to find out.</p>
-                </div>
-
-                <div class="analysis-block mt-2">
-                    <h4>Under what conditions does each perform better?</h4>
-                    <p id="analysisConditions">Run evaluation to find out.</p>
-                </div>
-
-                <div class="analysis-block mt-2">
-                    <h4>Why do differences occur?</h4>
-                    <p id="analysisWhy">Run evaluation to find out.</p>
-                </div>
-            </div>
-
-        </div>
+{% extends "base.html" %}
+{% block title %}TasteEngine — Evaluation{% endblock %}
+
+{% block head_extra %}
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+{% endblock %}
+
+{% block breadcrumb %}
+<ul class="breadcrumb">
+  <li><a href="/">Home</a><span class="sep">/</span></li>
+  <li class="current">Evaluate</li>
+</ul>
+{% endblock %}
+
+{% block content %}
+{% from "macros.html" import glass, spinner %}
+
+<div x-data="evalApp()">
+  {% call glass("Evaluation & Comparison Dashboard") %}
+    <p class="text-muted" style="font-size: 0.9rem;">
+      Comprehensive analysis of all recommendation methods and approaches using 6 evaluation metrics.
+    </p>
+    <div class="mt-2">
+      <button class="btn btn-primary" @click="runEvaluation()" :disabled="running">
+        <span x-show="!running">Run Evaluation</span>
+        <span x-show="running">Running...</span>
+      </button>
+    </div>
+  {% endcall %}
+
+  <div x-show="running" x-transition>
+    {{ spinner("Running evaluation...") }}
+  </div>
+
+  <div x-show="hasResults" x-cloak x-transition.duration.400ms>
+
+    <div class="kpi-grid">
+      <div class="kpi-card kpi-primary">
+        <div class="kpi-label">Best RMSE</div>
+        <div class="kpi-value"><span x-text="animatedKpis.bestRmse"></span></div>
+        <div class="kpi-unit" x-text="'via ' + methodLabel(bestCfMethod)"></div>
+      </div>
+      <div class="kpi-card kpi-success">
+        <div class="kpi-label">Best Method</div>
+        <div class="kpi-value" style="font-size:1rem;" x-text="methodLabel(bestCfMethod)"></div>
+        <div class="kpi-unit">Lowest RMSE</div>
+      </div>
+      <div class="kpi-card kpi-secondary">
+        <div class="kpi-label">Coverage</div>
+        <div class="kpi-value"><span x-text="animatedKpis.coverage"></span></div>
+        <div class="kpi-unit" x-text="'by ' + methodLabel(bestCfMethod)"></div>
+      </div>
+      <div class="kpi-card kpi-warning">
+        <div class="kpi-label">Best Precision@5</div>
+        <div class="kpi-value"><span x-text="animatedKpis.bestPrecision"></span></div>
+        <div class="kpi-unit" x-text="bestApproach ? bestApproach : '—'"></div>
+      </div>
     </div>
 
-    <script>
-        let cfChartInstance = null;
-
-        function runEvaluation() {
-            document.getElementById('evalLoading').classList.remove('hidden');
-            document.getElementById('evalResults').classList.add('hidden');
-
-            fetch('/api/evaluate')
-            .then(r => r.json())
-            .then(data => {
-                document.getElementById('evalLoading').classList.add('hidden');
-                document.getElementById('evalResults').classList.remove('hidden');
-
-                if (data.error) {
-                    document.getElementById('cfTableBody').innerHTML =
-                        `<tr><td colspan="7" style="text-align:center;color:#FF6584;">Error: ${data.error}</td></tr>`;
-                    return;
-                }
-
-                renderCfTable(data);
-                renderCfChart(data);
-                renderApproachTable(data);
-                renderAnalysis(data);
-            })
-            .catch(err => {
-                document.getElementById('evalLoading').classList.add('hidden');
-                document.getElementById('evalResults').classList.remove('hidden');
-                document.getElementById('cfTableBody').innerHTML =
-                    `<tr><td colspan="7" style="text-align:center;color:#FF6584;">Error: ${err.message}</td></tr>`;
-            });
-        }
-
-        function renderCfTable(data) {
-            const tbody = document.getElementById('cfTableBody');
-            tbody.innerHTML = '';
-
-            if (!data.cf_methods || data.cf_methods.length === 0) {
-                tbody.innerHTML = `<tr><td colspan="7" style="text-align:center;color:rgba(255,255,255,0.4);">No CF methods evaluated</td></tr>`;
-                return;
+    {% call glass("Collaborative Filtering — Method Comparison") %}
+      <div class="flex-between mb-2">
+        <span></span>
+        <button class="btn btn-ghost btn-sm" @click="exportCSV()">Export CSV</button>
+      </div>
+      <div style="overflow-x: auto;">
+        <table class="eval-table">
+          <thead>
+            <tr>
+              <th>Method</th>
+              <th>RMSE ↓</th>
+              <th>MAE ↓</th>
+              <th>Precision@5 ↑</th>
+              <th>Recall@5 ↑</th>
+              <th>F1@5 ↑</th>
+              <th>Coverage ↑</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template x-for="row in cfData" :key="row.method">
+              <tr :class="{ 'best-row': row.method === bestCfMethod }">
+                <td>
+                  <strong x-text="methodLabel(row.method)"></strong>
+                  <span x-show="row.method === bestCfMethod" class="badge-best">BEST</span>
+                </td>
+                <td x-text="row.RMSE?.toFixed(4)"></td>
+                <td x-text="row.MAE?.toFixed(4)"></td>
+                <td x-text="row['Precision@5']?.toFixed(4)"></td>
+                <td x-text="row['Recall@5']?.toFixed(4)"></td>
+                <td x-text="row['F1@5']?.toFixed(4)"></td>
+                <td x-text="row.Coverage?.toFixed(4)"></td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="mt-2" x-show="bestCfMethod">
+        <span class="badge-best">Best CF Method: <span x-text="methodLabel(bestCfMethod)"></span></span>
+      </div>
+
+      <div class="mt-2 chart-container">
+        <canvas id="cfChart"></canvas>
+      </div>
+    {% endcall %}
+
+    {% call glass("Approach Comparison (CF vs Content-Based vs Knowledge-Based)") %}
+      <div style="overflow-x: auto;">
+        <table class="eval-table">
+          <thead>
+            <tr>
+              <th>Approach</th>
+              <th>Precision@5 ↑</th>
+              <th>Recall@5 ↑</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template x-for="row in approachData" :key="row.approach">
+              <tr :class="{ 'best-row': row.approach === bestApproach }">
+                <td>
+                  <strong x-text="row.approach"></strong>
+                  <span x-show="row.approach === bestApproach" class="badge-best">BEST</span>
+                </td>
+                <td x-text="row['Precision@5']?.toFixed(4) || 'N/A'"></td>
+                <td x-text="row['Recall@5']?.toFixed(4) || 'N/A'"></td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="mt-2 chart-container">
+        <canvas id="approachChart"></canvas>
+      </div>
+    {% endcall %}
+
+    {% call glass("Multi-Method Radar Comparison") %}
+      <p class="text-muted" style="font-size: 0.85rem; margin-bottom: 1rem;">
+        Normalized comparison across all metrics for every CF method.
+      </p>
+      <div class="chart-container">
+        <canvas id="radarChart"></canvas>
+      </div>
+    {% endcall %}
+
+    {% call glass("Analysis & Insights") %}
+      <div class="analysis-block">
+        <h4>Which method performs best?</h4>
+        <p x-html="analysis.bestMethod"></p>
+      </div>
+      <div class="analysis-block mt-2">
+        <h4>Which approach performs best?</h4>
+        <p x-html="analysis.bestApproach"></p>
+      </div>
+      <div class="analysis-block mt-2">
+        <h4>Under what conditions does each perform better?</h4>
+        <ul>
+          <li><strong>Dense user data:</strong> Collaborative Filtering (leverages peer patterns)</li>
+          <li><strong>Cold-start user:</strong> Knowledge-Based (no history needed)</li>
+          <li><strong>Cold-start item:</strong> Content-Based (matches item features)</li>
+          <li><strong>Explicit constraints:</strong> Knowledge-Based (precise filtering)</li>
+          <li><strong>Niche categories:</strong> Content-Based (item features override sparsity)</li>
+        </ul>
+      </div>
+      <div class="analysis-block mt-2">
+        <h4>Why do differences occur?</h4>
+        <p>Differences arise from algorithmic biases: CF relies on the collective behavior of users, making it powerful for popular items but weak for new users/items. Content-Based depends on feature representation quality and tends to overspecialize. Knowledge-Based is deterministic and transparent but requires explicit user input and domain rules. The choice depends on data availability, user context, and the specific recommendation goal.</p>
+      </div>
+    {% endcall %}
+
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  const methodLabels = {
+    user_based: 'User-Based',
+    item_based: 'Item-Based',
+    svd: 'SVD',
+    knn: 'KNN',
+    slope_one: 'Slope One'
+  };
+
+  document.addEventListener('alpine:init', () => {
+    Alpine.data('evalApp', () => ({
+      running: false,
+      hasResults: false,
+      cfData: [],
+      approachData: [],
+      bestCfMethod: null,
+      bestApproach: null,
+      cfChartInstance: null,
+      approachChartInstance: null,
+      radarChartInstance: null,
+      analysis: {
+        bestMethod: 'Run evaluation to find out.',
+        bestApproach: 'Run evaluation to find out.'
+      },
+      animatedKpis: { bestRmse: '—', coverage: '—', bestPrecision: '—' },
+
+      methodLabel(id) {
+        return methodLabels[id] || id;
+      },
+
+      async runEvaluation() {
+        this.running = true;
+
+        try {
+          const r = await fetch('/api/evaluate');
+          const data = await r.json();
+
+          if (data.error) {
+            toast('Error: ' + data.error, 'error');
+            return;
+          }
+
+          this.cfData = data.cf_methods || [];
+          this.approachData = data.approaches || [];
+          this.bestCfMethod = data.best_cf_method;
+          this.bestApproach = data.best_approach;
+          this.hasResults = true;
+
+          this.$nextTick(() => {
+            this.renderCharts(data);
+            this.renderAnalysis(data);
+
+            const best = data.cf_methods?.find(r => r.method === data.best_cf_method);
+            if (best) {
+              this.animatedKpis.bestRmse = '0.0000';
+              this.animateCounter(this.animatedKpis, 'bestRmse', best.RMSE, 4, 1200);
+              this.animatedKpis.coverage = '0.0000';
+              this.animateCounter(this.animatedKpis, 'coverage', best.Coverage, 4, 1200);
             }
-
-            const methodLabels = {
-                user_based: 'User-Based',
-                item_based: 'Item-Based',
-                svd: 'SVD',
-                knn: 'KNN',
-                slope_one: 'Slope One'
-            };
-
-            let bestMethod = null;
-            let bestRmse = Infinity;
-
-            data.cf_methods.forEach(row => {
-                if (row.error) {
-                    const tr = document.createElement('tr');
-                    tr.innerHTML = `<td>${row.method}</td><td colspan="6" style="color:#FF6584;">Error: ${row.error}</td>`;
-                    tbody.appendChild(tr);
-                    return;
-                }
-
-                if (row.RMSE < bestRmse) {
-                    bestRmse = row.RMSE;
-                    bestMethod = row.method;
-                }
-
-                const isBest = row.method === data.best_cf_method;
-                const tr = document.createElement('tr');
-                if (isBest) tr.className = 'best-row';
-                tr.innerHTML = `
-                    <td><strong>${methodLabels[row.method] || row.method}</strong> ${isBest ? '<span class="badge-best">BEST</span>' : ''}</td>
-                    <td>${row.RMSE.toFixed(4)}</td>
-                    <td>${row.MAE.toFixed(4)}</td>
-                    <td>${row['Precision@5'].toFixed(4)}</td>
-                    <td>${row['Recall@5'].toFixed(4)}</td>
-                    <td>${row['F1@5'].toFixed(4)}</td>
-                    <td>${row.Coverage.toFixed(4)}</td>
-                `;
-                tbody.appendChild(tr);
-            });
-
-            if (data.best_cf_method) {
-                document.getElementById('bestCfBadge').classList.remove('hidden');
-                document.getElementById('bestCfName').textContent =
-                    (methodLabels[data.best_cf_method] || data.best_cf_method) +
-                    ` (RMSE: ${bestRmse.toFixed(4)})`;
+            if (data.best_approach) {
+              const bestApp = data.approaches?.find(a => a.approach === data.best_approach);
+              if (bestApp) {
+                this.animatedKpis.bestPrecision = '0.0000';
+                this.animateCounter(this.animatedKpis, 'bestPrecision', bestApp['Precision@5'] || 0, 4, 1200);
+              }
             }
-        }
+          });
 
-        function renderCfChart(data) {
-            if (!data.cf_methods || data.cf_methods.length === 0) return;
-
-            const methods = data.cf_methods.filter(r => !r.error);
-            const methodLabels = { user_based: 'User-Based', item_based: 'Item-Based', svd: 'SVD', knn: 'KNN', slope_one: 'Slope One' };
-
-            const labels = methods.map(r => methodLabels[r.method] || r.method);
-            const rmseData = methods.map(r => r.RMSE);
-            const maeData = methods.map(r => r.MAE);
-
-            if (cfChartInstance) cfChartInstance.destroy();
-
-            const ctx = document.getElementById('cfChart').getContext('2d');
-            cfChartInstance = new Chart(ctx, {
-                type: 'bar',
-                data: {
-                    labels: labels,
-                    datasets: [
-                        {
-                            label: 'RMSE (lower is better)',
-                            data: rmseData,
-                            backgroundColor: 'rgba(108, 99, 255, 0.6)',
-                            borderColor: '#6C63FF',
-                            borderWidth: 1
-                        },
-                        {
-                            label: 'MAE (lower is better)',
-                            data: maeData,
-                            backgroundColor: 'rgba(255, 101, 132, 0.6)',
-                            borderColor: '#FF6584',
-                            borderWidth: 1
-                        }
-                    ]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            labels: { color: 'rgba(255,255,255,0.7)' }
-                        }
-                    },
-                    scales: {
-                        x: {
-                            ticks: { color: 'rgba(255,255,255,0.5)' },
-                            grid: { color: 'rgba(255,255,255,0.05)' }
-                        },
-                        y: {
-                            beginAtZero: true,
-                            ticks: { color: 'rgba(255,255,255,0.5)' },
-                            grid: { color: 'rgba(255,255,255,0.05)' }
-                        }
-                    }
-                }
-            });
+          toast('Evaluation complete', 'success');
+        } catch (err) {
+          toast('Error: ' + err.message, 'error');
+        } finally {
+          this.running = false;
         }
-
-        function renderApproachTable(data) {
-            const tbody = document.getElementById('approachTableBody');
-            tbody.innerHTML = '';
-
-            if (!data.approaches || data.approaches.length === 0) {
-                tbody.innerHTML = `<tr><td colspan="3" style="text-align:center;color:rgba(255,255,255,0.4);">Approach comparison requires more data. Try running again.</td></tr>`;
-                return;
+      },
+
+      renderCharts(data) {
+        this.renderCfChart(data);
+        this.renderApproachChart(data);
+        this.renderRadarChart(data);
+      },
+
+      renderCfChart(data) {
+        if (this.cfChartInstance) this.cfChartInstance.destroy();
+
+        const methods = (data.cf_methods || []).filter(r => !r.error);
+        if (methods.length === 0) return;
+
+        const labels = methods.map(r => methodLabels[r.method] || r.method);
+        const ctx = document.getElementById('cfChart').getContext('2d');
+
+        this.cfChartInstance = new Chart(ctx, {
+          type: 'bar',
+          data: {
+            labels: labels,
+            datasets: [
+              {
+                label: 'RMSE (lower is better)',
+                data: methods.map(r => r.RMSE),
+                backgroundColor: 'rgba(108, 99, 255, 0.6)',
+                borderColor: '#6C63FF',
+                borderWidth: 1
+              },
+              {
+                label: 'MAE (lower is better)',
+                data: methods.map(r => r.MAE),
+                backgroundColor: 'rgba(255, 101, 132, 0.6)',
+                borderColor: '#FF6584',
+                borderWidth: 1
+              }
+            ]
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+              legend: {
+                labels: { color: 'rgba(255,255,255,0.7)' }
+              }
+            },
+            scales: {
+              x: {
+                ticks: { color: 'rgba(255,255,255,0.5)' },
+                grid: { color: 'rgba(255,255,255,0.05)' }
+              },
+              y: {
+                beginAtZero: true,
+                ticks: { color: 'rgba(255,255,255,0.5)' },
+                grid: { color: 'rgba(255,255,255,0.05)' }
+              }
+            }
+          }
+        });
+      },
+
+      renderApproachChart(data) {
+        if (this.approachChartInstance) this.approachChartInstance.destroy();
+
+        const approaches = data.approaches || [];
+        if (approaches.length === 0) return;
+
+        const ctx = document.getElementById('approachChart').getContext('2d');
+
+        this.approachChartInstance = new Chart(ctx, {
+          type: 'bar',
+          data: {
+            labels: approaches.map(r => r.approach),
+            datasets: [
+              {
+                label: 'Precision@5',
+                data: approaches.map(r => r['Precision@5'] || 0),
+                backgroundColor: 'rgba(108, 99, 255, 0.6)',
+                borderColor: '#6C63FF',
+                borderWidth: 1
+              },
+              {
+                label: 'Recall@5',
+                data: approaches.map(r => r['Recall@5'] || 0),
+                backgroundColor: 'rgba(255, 101, 132, 0.6)',
+                borderColor: '#FF6584',
+                borderWidth: 1
+              }
+            ]
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+              legend: {
+                labels: { color: 'rgba(255,255,255,0.7)' }
+              }
+            },
+            scales: {
+              x: {
+                ticks: { color: 'rgba(255,255,255,0.5)' },
+                grid: { color: 'rgba(255,255,255,0.05)' }
+              },
+              y: {
+                beginAtZero: true,
+                ticks: { color: 'rgba(255,255,255,0.5)' },
+                grid: { color: 'rgba(255,255,255,0.05)' }
+              }
             }
+          }
+        });
+      },
 
-            data.approaches.forEach(row => {
-                if (row.error) {
-                    const tr = document.createElement('tr');
-                    tr.innerHTML = `<td>${row.approach}</td><td colspan="2" style="color:#FF6584;">${row.error}</td>`;
-                    tbody.appendChild(tr);
-                    return;
-                }
-                const isBest = data.best_approach && row.approach === data.best_approach;
-                const tr = document.createElement('tr');
-                if (isBest) tr.className = 'best-row';
-                tr.innerHTML = `
-                    <td><strong>${row.approach}</strong> ${isBest ? '<span class="badge-best">BEST</span>' : ''}</td>
-                    <td>${row['Precision@5']?.toFixed(4) || 'N/A'}</td>
-                    <td>${row['Recall@5']?.toFixed(4) || 'N/A'}</td>
-                `;
-                tbody.appendChild(tr);
-            });
-        }
+      renderRadarChart(data) {
+        if (this.radarChartInstance) this.radarChartInstance.destroy();
 
-        function renderAnalysis(data) {
-            document.getElementById('analysisSection').classList.remove('hidden');
+        const methods = (data.cf_methods || []).filter(r => !r.error);
+        if (methods.length === 0) return;
 
-            const methodLabels = { user_based: 'User-Based', item_based: 'Item-Based', svd: 'SVD', knn: 'KNN', slope_one: 'Slope One' };
+        const metrics = ['RMSE', 'MAE', 'Precision@5', 'Recall@5', 'F1@5', 'Coverage'];
 
-            if (data.best_cf_method) {
-                const best = data.cf_methods.find(r => r.method === data.best_cf_method);
-                const rmseVal = best ? best.RMSE.toFixed(4) : '—';
-                document.getElementById('analysisBestMethod').innerHTML =
-                    `<strong>${methodLabels[data.best_cf_method] || data.best_cf_method}</strong> achieves the lowest RMSE (${rmseVal}) among all CF methods. ` +
-                    `SVD (Matrix Factorization) typically performs best because it captures latent factors in the user-item interaction matrix, ` +
-                    `handling sparsity better than memory-based methods like User-Based or Item-Based CF.`;
-            }
+        function normalize(values) {
+          const mn = Math.min(...values);
+          const mx = Math.max(...values);
+          return mx === mn ? values.map(() => 1) : values.map(v => (v - mn) / (mx - mn));
+        }
 
-            if (data.best_approach && data.approaches && data.approaches.length > 0) {
-                const best = data.approaches.find(a => a.approach === data.best_approach);
-                const precVal = best ? best['Precision@5'].toFixed(4) : '—';
-                document.getElementById('analysisBestApproach').innerHTML =
-                    `<strong>${data.best_approach}</strong> achieves the highest Precision@5 (${precVal}) on this dataset. ` +
-                    `Collaborative Filtering generally performs best when sufficient rating data exists. ` +
-                    `Content-Based works well for new items but suffers from overspecialization. ` +
-                    `Knowledge-Based excels in cold-start scenarios and when users have explicit constraints.`;
-            } else {
-                document.getElementById('analysisBestApproach').textContent = 'Run evaluation to compare approaches.';
+        const normalized = metrics.map(metric => ({
+          label: metric,
+          values: normalize(methods.map(m => m[metric] || 0))
+        }));
+
+        const colors = [
+          'rgba(108, 99, 255, 0.3)',
+          'rgba(255, 101, 132, 0.3)',
+          'rgba(34, 197, 94, 0.3)',
+          'rgba(245, 158, 11, 0.3)',
+          'rgba(59, 130, 246, 0.3)'
+        ];
+        const borders = [
+          '#6C63FF', '#FF6584', '#22C55E', '#F59E0B', '#3B82F6'
+        ];
+
+        const ctx = document.getElementById('radarChart').getContext('2d');
+
+        this.radarChartInstance = new Chart(ctx, {
+          type: 'radar',
+          data: {
+            labels: metrics,
+            datasets: methods.map((m, i) => ({
+              label: methodLabels[m.method] || m.method,
+              data: metrics.map(metric => {
+                const vals = methods.map(x => x[metric] || 0);
+                const mn = Math.min(...vals);
+                const mx = Math.max(...vals);
+                return mx === mn ? 1 : ((m[metric] || 0) - mn) / (mx - mn);
+              }),
+              backgroundColor: colors[i % colors.length],
+              borderColor: borders[i % borders.length],
+              borderWidth: 2,
+              pointBackgroundColor: borders[i % borders.length]
+            }))
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+              legend: {
+                labels: { color: 'rgba(255,255,255,0.7)' }
+              }
+            },
+            scales: {
+              r: {
+                beginAtZero: true,
+                max: 1,
+                ticks: {
+                  color: 'rgba(255,255,255,0.4)',
+                  backdropColor: 'transparent'
+                },
+                grid: { color: 'rgba(255,255,255,0.08)' },
+                angleLines: { color: 'rgba(255,255,255,0.08)' },
+                pointLabels: {
+                  color: 'rgba(255,255,255,0.7)',
+                  font: { size: 11 }
+                }
+              }
             }
-
-            document.getElementById('analysisConditions').innerHTML = `
-                <b>• Dense user data:</b> Collaborative Filtering (leverages peer patterns)<br>
-                <b>• Cold-start user:</b> Knowledge-Based (no history needed)<br>
-                <b>• Cold-start item:</b> Content-Based (matches item features)<br>
-                <b>• Explicit constraints:</b> Knowledge-Based (precise filtering)<br>
-                <b>• Niche categories:</b> Content-Based (item features override sparsity)
-            `;
-
-            document.getElementById('analysisWhy').innerHTML =
-                `Differences arise from algorithmic biases: CF relies on the collective behavior of users, ` +
-                `making it powerful for popular items but weak for new users/items. Content-Based depends on ` +
-                `feature representation quality and tends to overspecialize. Knowledge-Based is deterministic ` +
-                `and transparent but requires explicit user input and domain rules. The choice depends on data ` +
-                `availability, user context, and the specific recommendation goal.`;
+          }
+        });
+      },
+
+      animateCounter(obj, key, target, decimals = 4, duration = 1000) {
+        const start = performance.now();
+        const step = (now) => {
+          const elapsed = now - start;
+          const pct = Math.min(elapsed / duration, 1);
+          const eased = 1 - Math.pow(1 - pct, 3);
+          obj[key] = (target * eased).toFixed(decimals);
+          if (pct < 1) requestAnimationFrame(step);
+        };
+        requestAnimationFrame(step);
+      },
+
+      exportCSV() {
+        if (!this.cfData.length) { toast('No data to export', 'warning'); return; }
+        let csv = 'Method,RMSE,MAE,Precision@5,Recall@5,F1@5,Coverage\n';
+        const labels = { user_based: 'User-Based', item_based: 'Item-Based', svd: 'SVD', knn: 'KNN', slope_one: 'Slope One' };
+        this.cfData.forEach(r => {
+          if (!r.error) {
+            csv += `${labels[r.method] || r.method},${r.RMSE},${r.MAE},${r['Precision@5']},${r['Recall@5']},${r['F1@5']},${r.Coverage}\n`;
+          }
+        });
+        if (this.approachData.length) {
+          csv += '\nApproach,Precision@5,Recall@5\n';
+          this.approachData.forEach(r => {
+            csv += `${r.approach},${r['Precision@5'] || 'N/A'},${r['Recall@5'] || 'N/A'}\n`;
+          });
         }
-
-        if (localStorage.getItem('autoEval') === 'true') {
-            localStorage.removeItem('autoEval');
-            runEvaluation();
+        const blob = new Blob([csv], { type: 'text/csv' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url; a.download = 'tasteengine_evaluation.csv';
+        a.click(); URL.revokeObjectURL(url);
+        toast('CSV exported', 'success');
+      },
+
+      renderAnalysis(data) {
+        const best = data.cf_methods?.find(r => r.method === data.best_cf_method);
+        const rmseVal = best ? best.RMSE.toFixed(4) : '—';
+
+        this.analysis.bestMethod = `<strong>${methodLabels[data.best_cf_method] || data.best_cf_method}</strong> achieves the lowest RMSE (${rmseVal}) among all CF methods. SVD (Matrix Factorization) typically performs best because it captures latent factors in the user-item interaction matrix, handling sparsity better than memory-based methods.`;
+
+        if (data.best_approach) {
+          const bestApp = data.approaches?.find(a => a.approach === data.best_approach);
+          const precVal = bestApp ? bestApp['Precision@5'].toFixed(4) : '—';
+          this.analysis.bestApproach = `<strong>${data.best_approach}</strong> achieves the highest Precision@5 (${precVal}) on this dataset. Collaborative Filtering generally performs best when sufficient rating data exists. Content-Based works well for new items but suffers from overspecialization. Knowledge-Based excels in cold-start scenarios and when users have explicit constraints.`;
         }
-    </script>
-</body>
-</html>
+      }
+    }));
+  });
+</script>
+{% endblock %}

templates/index.html

@@ -1,132 +1,162 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TasteEngine — Recommender System</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/static/css/style.css">
-</head>
-<body>
-    <nav class="nav">
-        <a href="/" class="nav-brand">Taste<span>Engine</span></a>
-        <div class="nav-links">
-            <a href="/" class="active">Home</a>
-            <a href="/recommend">Recommend</a>
-            <a href="/evaluate">Evaluate</a>
-        </div>
-    </nav>
+{% extends "base.html" %}
+{% block title %}TasteEngine — Home{% endblock %}
 
-    <div class="container">
-        <div class="glass">
-            <h1 class="glass-header">Welcome to TasteEngine</h1>
-            <p style="color: rgba(255,255,255,0.6); font-size: 0.9rem;">An intelligent multi-approach recommender system. Compare Collaborative Filtering, Content-Based, and Knowledge-Based recommendations side by side.</p>
-        </div>
+{% block content %}
+{% from "macros.html" import glass, tag %}
 
-        <div class="row">
-            <div class="glass" id="userSelectPanel">
-                <h2 class="glass-header">Select a User</h2>
-                <div class="form-group">
-                    <label class="form-label">User</label>
-                    <select id="userSelect">
-                        <option value="">-- Choose a user --</option>
-                        {% for u in users %}
-                        <option value="{{ u.id }}">{{ u.name }} (Age: {{ u.age }})</option>
-                        {% endfor %}
-                    </select>
-                </div>
-                <div id="profileCard" class="profile-card mt-2 hidden">
-                    <div class="profile-avatar" id="profileAvatar">A</div>
-                    <div class="profile-info">
-                        <div class="profile-name" id="profileName">Alice</div>
-                        <div class="profile-detail" id="profileDetail">Age: 28</div>
-                        <div class="profile-detail">Budget: $<span id="profileBudgetMin">0</span> - $<span id="profileBudgetMax">0</span></div>
-                        <div class="profile-tags mt-1" id="profileTags"></div>
-                    </div>
-                </div>
-            </div>
+{% call glass("Welcome to TasteEngine") %}
+  <p class="text-muted" style="font-size: 0.9rem;">
+    An intelligent multi-approach recommender system. Compare Collaborative Filtering,
+    Content-Based, and Knowledge-Based recommendations side by side.
+  </p>
+{% endcall %}
 
-            <div class="glass">
-                <h2 class="glass-header">Quick Actions</h2>
-                <p style="color: rgba(255,255,255,0.6); font-size: 0.85rem; margin-bottom: 1rem;">Get started by selecting a user above, then:</p>
-                <a href="/recommend" class="btn btn-primary" style="display: inline-block; text-decoration: none; margin-bottom: 0.5rem;">🔍 Get Recommendations</a>
-                <br>
-                <a href="/evaluate" class="btn btn-secondary" style="display: inline-block; text-decoration: none;">📊 View Evaluation</a>
-            </div>
+<div x-data="homeApp()" class="row">
+  {% call glass("Select a User") %}
+    <div class="form-group">
+      <label class="form-label" for="userSelect">User</label>
+      <select id="userSelect" x-model="selectedUserId" @change="onUserChange">
+        <option value="">-- Choose a user --</option>
+        {% for u in users %}
+        <option value="{{ u.id }}">{{ u.name }} (Age: {{ u.age }})</option>
+        {% endfor %}
+      </select>
+    </div>
+    <div class="profile-card mt-2" x-show="selectedUser" x-cloak x-transition>
+      <div class="profile-avatar" x-text="selectedUser?.name?.charAt(0) || '?'"></div>
+      <div class="profile-info">
+        <div class="profile-name" x-text="selectedUser?.name"></div>
+        <div class="profile-detail" x-text="'Age: ' + selectedUser?.age"></div>
+        <div class="profile-detail" x-text="'Budget: $' + selectedUser?.budget_min?.toFixed(2) + ' - $' + selectedUser?.budget_max?.toFixed(2)"></div>
+        <div class="profile-tags mt-1">
+          <template x-for="cat in (selectedUser?.categories || [])" :key="cat">
+            <span class="tag" x-text="cat"></span>
+          </template>
+          <template x-for="b in (selectedUser?.brands || [])" :key="b">
+            <span class="tag tag-brand" x-text="b"></span>
+          </template>
         </div>
+      </div>
+    </div>
 
-        <div class="glass">
-            <h2 class="glass-header">Available Approaches</h2>
-            <div class="row" style="grid-template-columns: 1fr 1fr 1fr;">
-                <div style="text-align: center; padding: 1rem;">
-                    <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">🤝</div>
-                    <h3 style="color: #fff; font-size: 1rem; margin-bottom: 0.3rem;">Collaborative Filtering</h3>
-                    <p style="color: rgba(255,255,255,0.5); font-size: 0.8rem;">5 methods: User, Item, SVD, KNN, Slope One</p>
-                </div>
-                <div style="text-align: center; padding: 1rem;">
-                    <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">🏷️</div>
-                    <h3 style="color: #fff; font-size: 1rem; margin-bottom: 0.3rem;">Content-Based</h3>
-                    <p style="color: rgba(255,255,255,0.5); font-size: 0.8rem;">TF-IDF + Cosine Similarity, Feature Matching</p>
-                </div>
-                <div style="text-align: center; padding: 1rem;">
-                    <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">⚙️</div>
-                    <h3 style="color: #fff; font-size: 1rem; margin-bottom: 0.3rem;">Knowledge-Based</h3>
-                    <p style="color: rgba(255,255,255,0.5); font-size: 0.8rem;">Constraint, Rule, Utility-based filtering</p>
-                </div>
-            </div>
+    <div x-show="selectedUser" x-cloak x-transition class="mt-2">
+      <button class="btn btn-secondary btn-sm" @click="showEditor = !showEditor">
+        <span x-text="showEditor ? 'Hide Preferences' : 'Edit Preferences'"></span>
+      </button>
+    </div>
+
+    <div x-show="showEditor && selectedUser" x-cloak x-transition class="mt-2">
+      <div class="glass" style="margin-bottom:0;padding:1rem;">
+        <h3 style="font-size:0.9rem;color:var(--text-primary);margin-bottom:0.75rem;">Budget Preferences</h3>
+        <div class="preference-slider">
+          <label>Min Budget</label>
+          <input type="range" :min="0" :max="selectedUser?.budget_max || 100" x-model.number="editBudgetMin">
+          <span class="slider-value" x-text="'$' + editBudgetMin"></span>
+        </div>
+        <div class="preference-slider">
+          <label>Max Budget</label>
+          <input type="range" :min="editBudgetMin" :max="500" x-model.number="editBudgetMax">
+          <span class="slider-value" x-text="'$' + editBudgetMax"></span>
         </div>
+        <button class="btn btn-primary btn-sm mt-2" @click="savePreferences()" :disabled="savingPrefs">
+          <span x-show="!savingPrefs">Save Preferences</span>
+          <span x-show="savingPrefs">Saving...</span>
+        </button>
+      </div>
     </div>
+  {% endcall %}
 
-    <script>
-        const userData = {{ users | tojson | safe }};
+  {% call glass("Quick Actions") %}
+    <p class="text-muted" style="font-size: 0.85rem; margin-bottom: 1rem;">
+      Get started by selecting a user above, then:
+    </p>
+    <a href="/recommend" class="btn btn-primary" style="display: inline-flex; text-decoration: none; margin-bottom: 0.5rem;">Get Recommendations</a>
+    <br>
+    <a href="/evaluate" class="btn btn-secondary" style="display: inline-flex; text-decoration: none;">View Evaluation</a>
+  {% endcall %}
+</div>
 
-        document.getElementById('userSelect').addEventListener('change', function() {
-            const uid = parseInt(this.value);
-            if (!uid) {
-                document.getElementById('profileCard').classList.add('hidden');
-                return;
-            }
-            const user = userData.find(u => u.id === uid);
-            if (!user) return;
+{% call glass("Available Approaches") %}
+  <div class="row" style="grid-template-columns: 1fr 1fr 1fr;">
+    <div class="text-center" style="padding: 1rem;">
+      <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">🤝</div>
+      <h3 style="color: var(--text-primary); font-size: 1rem; margin-bottom: 0.3rem;">Collaborative Filtering</h3>
+      <p class="text-dim" style="font-size: 0.8rem;">5 methods: User, Item, SVD, KNN, Slope One</p>
+    </div>
+    <div class="text-center" style="padding: 1rem;">
+      <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">🏷️</div>
+      <h3 style="color: var(--text-primary); font-size: 1rem; margin-bottom: 0.3rem;">Content-Based</h3>
+      <p class="text-dim" style="font-size: 0.8rem;">TF-IDF + Cosine Similarity, Feature Matching</p>
+    </div>
+    <div class="text-center" style="padding: 1rem;">
+      <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">⚙️</div>
+      <h3 style="color: var(--text-primary); font-size: 1rem; margin-bottom: 0.3rem;">Knowledge-Based</h3>
+      <p class="text-dim" style="font-size: 0.8rem;">Constraint, Rule, Utility-based filtering</p>
+    </div>
+  </div>
+{% endcall %}
+{% endblock %}
 
-            document.getElementById('profileCard').classList.remove('hidden');
-            document.getElementById('profileAvatar').textContent = user.name.charAt(0);
-            document.getElementById('profileName').textContent = user.name;
-            document.getElementById('profileDetail').textContent = `Age: ${user.age}`;
-            document.getElementById('profileBudgetMin').textContent = user.budget_min.toFixed(2);
-            document.getElementById('profileBudgetMax').textContent = user.budget_max.toFixed(2);
+{% block scripts %}
+<script>
+  const userData = {{ users | tojson | safe }};
 
-            const tagsContainer = document.getElementById('profileTags');
-            tagsContainer.innerHTML = '';
-            user.categories.forEach(cat => {
-                if (cat) {
-                    const tag = document.createElement('span');
-                    tag.className = 'tag';
-                    tag.textContent = cat;
-                    tagsContainer.appendChild(tag);
-                }
-            });
-            user.brands.forEach(b => {
-                if (b) {
-                    const tag = document.createElement('span');
-                    tag.className = 'tag';
-                    tag.style.borderColor = 'rgba(255,101,132,0.3)';
-                    tag.style.background = 'rgba(255,101,132,0.15)';
-                    tag.style.color = '#ff9eb2';
-                    tag.textContent = b;
-                    tagsContainer.appendChild(tag);
-                }
-            });
+  document.addEventListener('alpine:init', () => {
+    Alpine.data('homeApp', () => ({
+      selectedUserId: localStorage.getItem('selectedUser') || null,
+      selectedUser: null,
+      showEditor: false,
+      editBudgetMin: 0,
+      editBudgetMax: 100,
+      savingPrefs: false,
 
-            localStorage.setItem('selectedUser', uid);
-        });
+      init() {
+        if (this.selectedUserId) {
+          this.selectedUserId = parseInt(this.selectedUserId);
+          this.onUserChange();
+        }
+      },
+
+      onUserChange() {
+        const uid = this.selectedUserId ? parseInt(this.selectedUserId) : null;
+        if (!uid) {
+          this.selectedUser = null;
+          return;
+        }
+        this.selectedUser = userData.find(u => u.id === uid);
+        if (this.selectedUser) {
+          this.editBudgetMin = this.selectedUser.budget_min;
+          this.editBudgetMax = this.selectedUser.budget_max;
+        }
+        localStorage.setItem('selectedUser', uid);
+      },
 
-        const savedUser = localStorage.getItem('selectedUser');
-        if (savedUser) {
-            document.getElementById('userSelect').value = savedUser;
-            document.getElementById('userSelect').dispatchEvent(new Event('change'));
+      async savePreferences() {
+        if (!this.selectedUser) return;
+        this.savingPrefs = true;
+        try {
+          const r = await fetch(`/api/user/${this.selectedUser.id}/preferences`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              budget_min: this.editBudgetMin,
+              budget_max: this.editBudgetMax
+            })
+          });
+          const data = await r.json();
+          if (data.success) {
+            this.selectedUser.budget_min = this.editBudgetMin;
+            this.selectedUser.budget_max = this.editBudgetMax;
+            toast('Preferences saved!', 'success');
+            this.showEditor = false;
+          }
+        } catch (err) {
+          toast('Error saving preferences', 'error');
+        } finally {
+          this.savingPrefs = false;
         }
-    </script>
-</body>
-</html>
+      }
+    }));
+  });
+</script>
+{% endblock %}

templates/macros.html

@@ -0,0 +1,84 @@
+{% macro nav(active_page) %}
+<nav class="nav">
+  <a href="/" class="nav-brand">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+    Taste<span>Engine</span>
+  </a>
+  <div class="nav-center">
+    <div class="nav-links">
+      <a href="/" class="{{ 'active' if active_page == 'home' }}">Home</a>
+      <a href="/recommend" class="{{ 'active' if active_page == 'recommend' }}">Recommend</a>
+      <a href="/evaluate" class="{{ 'active' if active_page == 'evaluate' }}">Evaluate</a>
+    </div>
+  </div>
+  <div class="nav-actions">
+    <button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle dark/light mode">
+      <span id="themeIcon">🌙</span>
+    </button>
+  </div>
+</nav>
+{% endmacro %}
+
+{% macro glass(title, class="") %}
+<div class="glass {{ class }}">
+  {% if title %}<h2 class="glass-header">{{ title }}</h2>{% endif %}
+  {{ caller() }}
+</div>
+{% endmacro %}
+
+{% macro product_card(item) %}
+<div class="product-card">
+  <div class="product-icon">{{ get_category_icon(item.category) }}</div>
+  <div class="product-name">{{ item.name }}</div>
+  <div class="product-meta">{{ item.brand }} · {{ item.subcategory }}</div>
+  <div class="compact-row">
+    <div class="product-price">${{ "%.2f"|format(item.price) }}</div>
+    <div class="product-rating">{{ stars(item.avg_rating) }} {{ item.avg_rating }}</div>
+  </div>
+  <div class="product-explanation">{{ item.explanation }}</div>
+</div>
+{% endmacro %}
+
+{% macro tag(text, type="") %}
+<span class="tag{% if type == 'brand' %} tag-brand{% endif %}">{{ text }}</span>
+{% endmacro %}
+
+{% macro spinner(text="Loading...") %}
+<div class="loading">
+  <div class="spinner"></div>
+  <span>{{ text }}</span>
+</div>
+{% endmacro %}
+
+{% macro empty_state(icon, title, desc) %}
+<div class="empty-state">
+  <div class="empty-icon">{{ icon }}</div>
+  <div class="empty-title">{{ title }}</div>
+  <div class="empty-desc">{{ desc }}</div>
+</div>
+{% endmacro %}
+
+{% macro tooltip(term, explanation) %}
+<span class="tooltip-trigger">{{ term }}<span class="tooltip-content">{{ explanation }}</span></span>
+{% endmacro %}
+
+{% macro kpi_card(label, value, unit, class="") %}
+<div class="kpi-card {{ class }}">
+  <div class="kpi-label">{{ label }}</div>
+  <div class="kpi-value">{{ value }}</div>
+  {% if unit %}<div class="kpi-unit">{{ unit }}</div>{% endif %}
+</div>
+{% endmacro %}
+
+{% macro skeleton_cards(count=6) %}
+<div class="product-grid" id="skeletonGrid">
+  {% for i in range(count) %}
+  <div class="product-card skeleton-card">
+    <div class="skeleton" style="width:48px;height:48px;border-radius:10px;margin-bottom:0.75rem;"></div>
+    <div class="skeleton skeleton-line"></div>
+    <div class="skeleton skeleton-line" style="width:60%;"></div>
+    <div class="skeleton skeleton-line" style="width:40%;"></div>
+  </div>
+  {% endfor %}
+</div>
+{% endmacro %}

templates/recommend.html

@@ -1,347 +1,411 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TasteEngine — Recommendations</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/static/css/style.css">
-</head>
-<body>
-    <nav class="nav">
-        <a href="/" class="nav-brand">Taste<span>Engine</span></a>
-        <div class="nav-links">
-            <a href="/">Home</a>
-            <a href="/recommend" class="active">Recommend</a>
-            <a href="/evaluate">Evaluate</a>
+{% extends "base.html" %}
+{% block title %}TasteEngine — Recommendations{% endblock %}
+
+{% block breadcrumb %}
+<ul class="breadcrumb">
+  <li><a href="/">Home</a><span class="sep">/</span></li>
+  <li class="current">Recommend</li>
+</ul>
+{% endblock %}
+
+{% block content %}
+{% from "macros.html" import glass, spinner, skeleton_cards %}
+
+<div x-data="recommendApp()">
+  <div class="row">
+    {% call glass("User") %}
+      <div class="form-group">
+        <label class="form-label" for="userSelect">Select User</label>
+        <select id="userSelect" x-model="selectedUserId" @change="onUserChange">
+          <option value="">-- Choose --</option>
+          {% for u in users %}
+          <option value="{{ u.id }}">{{ u.name }}</option>
+          {% endfor %}
+        </select>
+      </div>
+      <div class="mt-1" x-show="selectedUser" x-cloak>
+        <div class="compact-row">
+          <div class="profile-avatar" style="width:40px;height:40px;font-size:1rem;" x-text="selectedUser?.name?.charAt(0) || '?'"></div>
+          <div>
+            <div style="font-weight:600;color:var(--text-primary);font-size:0.9rem;" x-text="selectedUser?.name"></div>
+            <div style="font-size:0.8rem;color:var(--text-muted);" x-text="'Categories: ' + (selectedUser?.categories?.join(', ') || 'none')"></div>
+          </div>
         </div>
-    </nav>
-
-    <div class="container">
-        <div class="row">
-            <div class="glass">
-                <h2 class="glass-header">User</h2>
-                <div class="form-group">
-                    <label class="form-label">Select User</label>
-                    <select id="userSelect" onchange="onUserChange()">
-                        <option value="">-- Choose --</option>
-                        {% for u in users %}
-                        <option value="{{ u.id }}">{{ u.name }}</option>
-                        {% endfor %}
-                    </select>
-                </div>
-                <div id="profileMini" class="hidden mt-1">
-                    <div class="compact-row">
-                        <div class="profile-avatar" id="miniAvatar" style="width:40px;height:40px;font-size:1rem;">A</div>
-                        <div>
-                            <div id="miniName" style="font-weight:600;color:#fff;font-size:0.9rem;"></div>
-                            <div id="miniCats" style="font-size:0.8rem;color:rgba(255,255,255,0.5);"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+      </div>
+    {% endcall %}
+
+    {% call glass("Number of Recommendations") %}
+      <div class="form-group">
+        <input type="number" id="nRecs" value="10" min="1" max="50" style="max-width: 100px;" x-model.number="nRecs">
+      </div>
+    {% endcall %}
+  </div>
+
+  {% call glass("Choose Approach & Method") %}
+    <div class="btn-group" id="approachGroup">
+      <template x-for="(app, key) in approaches" :key="key">
+        <button class="btn-approach"
+          :class="{ active: currentApproach === key }"
+          :data-approach="key"
+          @click="selectApproach(key)">
+          <span class="icon" x-text="app.icon"></span>
+          <span x-text="app.label"></span>
+        </button>
+      </template>
+    </div>
 
-            <div class="glass">
-                <h2 class="glass-header">Number of Recommendations</h2>
-                <div class="form-group">
-                    <input type="number" id="nRecs" value="10" min="1" max="50" style="max-width: 100px;">
-                </div>
-            </div>
+    <div class="mt-2">
+      <template x-for="(app, key) in approaches" :key="key">
+        <div x-show="currentApproach === key" x-transition.duration.200ms>
+          <div class="btn-group">
+            <template x-for="m in app.methods" :key="m.id">
+              <button class="btn-method"
+                :class="{ active: currentMethod === m.id }"
+                @click="currentMethod = m.id"
+                x-text="m.label">
+              </button>
+            </template>
+          </div>
         </div>
+      </template>
+    </div>
 
-        <div class="glass">
-            <h2 class="glass-header">Choose Approach & Method</h2>
-            <div class="btn-group" id="approachGroup">
-                <button class="btn-approach" data-approach="cf" onclick="selectApproach('cf')">
-                    <span class="icon">🤝</span>
-                    Collaborative Filtering
-                </button>
-                <button class="btn-approach" data-approach="content" onclick="selectApproach('content')">
-                    <span class="icon">🏷️</span>
-                    Content-Based
-                </button>
-                <button class="btn-approach" data-approach="knowledge" onclick="selectApproach('knowledge')">
-                    <span class="icon">⚙️</span>
-                    Knowledge-Based
-                </button>
-            </div>
+    <div class="mt-2">
+      <button class="btn btn-primary" @click="getRecommendations()" :disabled="loading || !selectedUserId">
+        <span x-show="!loading">Get Recommendations</span>
+        <span x-show="loading">Generating...</span>
+      </button>
+    </div>
+  {% endcall %}
 
-            <div id="methodsContainer" class="mt-2">
-                {% for key, approach in approaches.items() %}
-                <div id="methods-{{ key }}" class="methods-group hidden">
-                    <div class="btn-group">
-                        {% for m in approach.methods %}
-                        <button class="btn-method" data-method="{{ m.id }}" data-approach="{{ key }}" onclick="selectMethod('{{ key }}', '{{ m.id }}')">{{ m.label }}</button>
-                        {% endfor %}
-                    </div>
-                </div>
-                {% endfor %}
-            </div>
+  <div x-show="showResults" x-cloak x-transition.duration.300ms>
+    <div class="tabs">
+      <button class="tab" :class="{ active: activeTab === 'cards' }" @click="activeTab = 'cards'">Cards</button>
+      <button class="tab" :class="{ active: activeTab === 'compare' }" @click="activeTab = 'compare'">Compare Approaches</button>
+    </div>
 
-            <div class="mt-2">
-                <button class="btn btn-primary" onclick="getRecommendations()">🚀 Generate Recommendations</button>
+    <div x-show="activeTab === 'cards'" x-transition>
+      {% call glass("") %}
+        <h2 class="glass-header" x-text="resultTitle"></h2>
+        <div class="mt-2">
+          <div x-show="!results && loading" x-transition>
+            {{ skeleton_cards(6) }}
+          </div>
+          <div x-show="results && results.length === 0" x-transition>
+            {% from "macros.html" import empty_state %}
+            {{ empty_state('📭', 'No recommendations', 'Try a different approach or method.') }}
+          </div>
+
+          <div class="filter-bar" x-show="results && results.length > 0" x-cloak>
+            <div class="form-group">
+              <label class="form-label">Category</label>
+              <select x-model="filterCategory">
+                <option value="">All Categories</option>
+                <template x-for="cat in availableCategories" :key="cat">
+                  <option :value="cat" x-text="cat"></option>
+                </template>
+              </select>
             </div>
-        </div>
-
-        <div id="resultsContainer" class="hidden">
-            <div class="tabs" id="resultTabs">
-                <button class="tab active" data-tab="tab-cards" onclick="switchTab('tab-cards')">📋 Cards</button>
-                <button class="tab" data-tab="tab-compare" onclick="switchTab('tab-compare')">🔄 Compare Approaches</button>
+            <div class="form-group">
+              <label class="form-label">Brand</label>
+              <select x-model="filterBrand">
+                <option value="">All Brands</option>
+                <template x-for="b in availableBrands" :key="b">
+                  <option :value="b" x-text="b"></option>
+                </template>
+              </select>
             </div>
-
-            <div id="tab-cards" class="tab-content active">
-                <div class="glass">
-                    <h2 class="glass-header" id="resultHeader">Recommendations</h2>
-                    <div id="productGrid" class="product-grid mt-2"></div>
-                </div>
+            <div class="form-group">
+              <label class="form-label">Max Price</label>
+              <input type="number" x-model.number="filterPriceMax" placeholder="Any" min="0" style="min-width:100px;">
             </div>
-
-            <div id="tab-compare" class="tab-content">
-                <div class="glass">
-                    <h2 class="glass-header">Compare All Approaches</h2>
-                    <p style="color:rgba(255,255,255,0.5);font-size:0.85rem;margin-bottom:1rem;">Select a user first, then click below to compare.</p>
-                    <button class="btn btn-primary" onclick="compareAll()">🔄 Compare All Approaches</button>
-                    <div id="compareResults" class="mt-2"></div>
-                </div>
+            <div class="form-group" style="align-self:end;">
+              <button class="btn btn-ghost btn-sm" @click="filterCategory=''; filterBrand=''; filterPriceMax=null">
+                Clear Filters
+              </button>
             </div>
+          </div>
+
+          <div class="product-grid" x-show="results && results.length > 0" x-transition>
+            <template x-for="(item, idx) in filteredResults" :key="item.id">
+              <div class="product-card stagger"
+                :data-category="item.category"
+                :style="{ animationDelay: (idx * 60) + 'ms' }"
+                @mouseenter="item.showTooltip = true"
+                @mouseleave="item.showTooltip = false">
+                <div class="product-icon" x-text="getCategoryIcon(item.category)"></div>
+                <div class="product-name" x-text="item.name"></div>
+                <div class="product-meta" x-text="item.brand + ' · ' + item.subcategory"></div>
+                <div class="compact-row flex-between">
+                  <div class="product-price" x-text="'$' + item.price.toFixed(2)"></div>
+                  <div class="product-rating">
+                    <span x-text="stars(item.avg_rating)"></span>
+                    <span x-text="item.avg_rating"></span>
+                  </div>
+                </div>
+                <div class="product-score-bar" x-show="item.score">
+                  <div class="product-score-bar-fill" :style="{ width: (item.score * 100) + '%' }"></div>
+                </div>
+                <div class="product-explanation" x-text="item.explanation"></div>
+              </div>
+            </template>
+          </div>
         </div>
+      {% endcall %}
+    </div>
 
-        <div id="loadingIndicator" class="loading hidden">
-            <div class="spinner"></div>
-            <span>Generating recommendations...</span>
+    <div x-show="activeTab === 'compare'" x-transition>
+      {% call glass("Compare All Approaches") %}
+        <p class="text-muted" style="font-size:0.85rem;margin-bottom:1rem;">
+          Compare all methods across Collaborative Filtering, Content-Based, and Knowledge-Based.
+        </p>
+        <button class="btn btn-primary" @click="compareAll()" :disabled="loading || !selectedUserId">
+          <span x-show="!loading">Compare All Approaches</span>
+          <span x-show="loading">Loading...</span>
+        </button>
+        <div class="mt-2" x-show="compareResults">
+          <div class="compare-view synced-scroll">
+            <template x-for="col in compareResults" :key="col.method || col.label">
+              <div class="compare-column" @scroll="syncScroll($el)">
+                <h3 x-text="col.label"></h3>
+                <template x-if="col.error">
+                  <p class="text-dim" style="font-size:0.8rem;" x-text="col.error"></p>
+                </template>
+                <template x-if="!col.error && (!col.items || col.items.length === 0)">
+                  <p class="text-dim" style="font-size:0.8rem;">No results</p>
+                </template>
+                <template x-for="(item, i) in col.items" :key="i">
+                  <div class="compare-item">
+                    <div class="compare-item-name" x-text="(i+1) + '. ' + item.name"></div>
+                    <div class="compare-item-meta" x-text="'$' + item.price.toFixed(2) + ' · ' + item.brand"></div>
+                  </div>
+                </template>
+              </div>
+            </template>
+          </div>
         </div>
+      {% endcall %}
     </div>
-
-    <script>
-        const userData = {{ users | tojson | safe }};
-        const approaches = {{ approaches | tojson | safe }};
-        let currentApproach = 'cf';
-        let currentMethod = 'user_based';
-
-        const savedUser = localStorage.getItem('selectedUser');
-        if (savedUser) {
-            document.getElementById('userSelect').value = savedUser;
-            onUserChange();
+  </div>
+</div>
+
+<div class="kbd-hint" id="kbdHint">
+  <kbd>1</kbd> <kbd>2</kbd> <kbd>3</kbd> Select approach ·
+  <kbd>R</kbd> Recommend ·
+  <kbd>E</kbd> Evaluate ·
+  <kbd>H</kbd> Home
+</div>
+
+<script>
+  setTimeout(() => document.getElementById('kbdHint')?.classList.add('visible'), 2000);
+  setTimeout(() => document.getElementById('kbdHint')?.classList.remove('visible'), 8000);
+  document.addEventListener('keydown', () => {
+    const h = document.getElementById('kbdHint');
+    if (h) h.classList.remove('visible');
+  });
+</script>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  const userData = {{ users | tojson | safe }};
+  const approaches = {{ approaches | tojson | safe }};
+
+  document.addEventListener('alpine:init', () => {
+    Alpine.data('recommendApp', () => ({
+      approaches: approaches,
+      selectedUserId: null,
+      selectedUser: null,
+      currentApproach: 'cf',
+      currentMethod: 'user_based',
+      loading: false,
+      results: null,
+      resultTitle: '',
+      compareResults: null,
+      activeTab: 'cards',
+      nRecs: 10,
+      showResults: false,
+      filterCategory: '',
+      filterBrand: '',
+      filterPriceMax: null,
+
+      get availableCategories() {
+        return [...new Set((this.results || []).map(i => i.category))];
+      },
+
+      get availableBrands() {
+        return [...new Set((this.results || []).map(i => i.brand))];
+      },
+
+      get filteredResults() {
+        let items = this.results || [];
+        if (this.filterCategory) items = items.filter(i => i.category === this.filterCategory);
+        if (this.filterBrand) items = items.filter(i => i.brand === this.filterBrand);
+        if (this.filterPriceMax) items = items.filter(i => i.price <= this.filterPriceMax);
+        return items;
+      },
+
+      init() {
+        const params = new URLSearchParams(window.location.search);
+        const urlUser = params.get('user');
+        const urlApproach = params.get('approach');
+        const urlMethod = params.get('method');
+        const saved = urlUser || localStorage.getItem('selectedUser');
+        if (saved) {
+          this.selectedUserId = parseInt(saved);
+          this.onUserChange();
         }
-
-        document.getElementById('userSelect').addEventListener('change', function() {
-            localStorage.setItem('selectedUser', this.value);
-        });
-
-        function onUserChange() {
-            const uid = parseInt(document.getElementById('userSelect').value);
-            if (!uid) {
-                document.getElementById('profileMini').classList.add('hidden');
-                return;
-            }
-            const user = userData.find(u => u.id === uid);
-            if (!user) return;
-
-            document.getElementById('profileMini').classList.remove('hidden');
-            document.getElementById('miniAvatar').textContent = user.name.charAt(0);
-            document.getElementById('miniName').textContent = user.name;
-            document.getElementById('miniCats').textContent = 'Categories: ' + (user.categories || []).join(', ');
+        if (urlApproach && this.approaches[urlApproach]) {
+          this.currentApproach = urlApproach;
+          if (urlMethod) this.currentMethod = urlMethod;
+          else if (this.approaches[urlApproach].methods.length > 0) {
+            this.currentMethod = this.approaches[urlApproach].methods[0].id;
+          }
         }
-
-        function selectApproach(approach) {
-            currentApproach = approach;
-
-            document.querySelectorAll('.btn-approach').forEach(b => b.classList.remove('active'));
-            document.querySelector(`.btn-approach[data-approach="${approach}"]`).classList.add('active');
-
-            document.querySelectorAll('.methods-group').forEach(g => g.classList.add('hidden'));
-            document.getElementById(`methods-${approach}`).classList.remove('hidden');
-
-            const firstMethod = document.querySelector(`#methods-${approach} .btn-method`);
-            if (firstMethod) {
-                currentMethod = firstMethod.dataset.method;
-                document.querySelectorAll('.btn-method').forEach(b => b.classList.remove('active'));
-                firstMethod.classList.add('active');
-            }
-
-            document.getElementById('resultsContainer').classList.add('hidden');
+        setTimeout(() => {
+          if (urlUser) this.getRecommendations();
+        }, 300);
+      },
+
+      updateUrl() {
+        const params = new URLSearchParams();
+        if (this.selectedUserId) params.set('user', this.selectedUserId);
+        if (this.currentApproach) params.set('approach', this.currentApproach);
+        if (this.currentMethod) params.set('method', this.currentMethod);
+        const qs = params.toString();
+        const url = window.location.pathname + (qs ? '?' + qs : '');
+        window.history.replaceState({}, '', url);
+      },
+
+      onUserChange() {
+        const uid = this.selectedUserId;
+        if (!uid) {
+          this.selectedUser = null;
+          return;
         }
-
-        function selectMethod(approach, method) {
-            currentMethod = method;
-            document.querySelectorAll(`#methods-${approach} .btn-method`).forEach(b => b.classList.remove('active'));
-            document.querySelector(`#methods-${approach} .btn-method[data-method="${method}"]`).classList.add('active');
+        this.selectedUser = userData.find(u => u.id === uid);
+        localStorage.setItem('selectedUser', uid);
+        this.results = null;
+        this.compareResults = null;
+        this.updateUrl();
+      },
+
+      selectApproach(key) {
+        this.currentApproach = key;
+        const methods = this.approaches[key].methods;
+        if (methods.length > 0) {
+          this.currentMethod = methods[0].id;
+        }
+        this.results = null;
+        this.compareResults = null;
+        this.updateUrl();
+      },
+
+      async getRecommendations() {
+        if (!this.selectedUserId) {
+          toast('Please select a user first.', 'warning');
+          return;
         }
 
-        selectApproach('cf');
-
-        function getRecommendations(userOverride, approachOverride, methodOverride) {
-            const uid = parseInt(userOverride || document.getElementById('userSelect').value);
-            const approach = approachOverride || currentApproach;
-            const method = methodOverride || currentMethod;
-            const n = parseInt(document.getElementById('nRecs').value) || 10;
-
-            if (!uid) {
-                alert('Please select a user first.');
-                return;
-            }
-
-            document.getElementById('loadingIndicator').classList.remove('hidden');
-            document.getElementById('resultsContainer').classList.add('hidden');
-
-            fetch('/api/recommend', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ user_id: uid, approach: approach, method: method, n: n })
-            })
-            .then(r => r.json())
-            .then(data => {
-                document.getElementById('loadingIndicator').classList.add('hidden');
-
-                if (data.error) {
-                    document.getElementById('productGrid').innerHTML = `<div class="empty-state"><div class="icon">⚠️</div><p>${data.error}</p></div>`;
-                    document.getElementById('resultsContainer').classList.remove('hidden');
-                    return;
-                }
-
-                const approachInfo = approaches[approach];
-                const methodInfo = approachInfo.methods.find(m => m.id === method);
-                document.getElementById('resultHeader').textContent =
-                    `Recommendations via ${approachInfo.label} — ${methodInfo ? methodInfo.label : method}`;
-
-                const grid = document.getElementById('productGrid');
-                grid.innerHTML = '';
-
-                if (!data.recommendations || data.recommendations.length === 0) {
-                    grid.innerHTML = `<div class="empty-state"><div class="icon">📭</div><p>No recommendations found. Try a different approach.</p></div>`;
-                    document.getElementById('resultsContainer').classList.remove('hidden');
-                    return;
-                }
-
-                data.recommendations.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'product-card';
-
-                    const stars = '★'.repeat(Math.floor(item.avg_rating)) + '☆'.repeat(5 - Math.floor(item.avg_rating));
-
-                    card.innerHTML = `
-                        <div class="product-icon">${getCategoryIcon(item.category)}</div>
-                        <div class="product-name">${item.name}</div>
-                        <div class="product-meta">${item.brand} · ${item.subcategory}</div>
-                        <div class="compact-row">
-                            <div class="product-price">$${item.price.toFixed(2)}</div>
-                            <div class="product-rating">${stars} ${item.avg_rating}</div>
-                        </div>
-                        <div class="product-explanation">💡 ${item.explanation}</div>
-                    `;
-                    grid.appendChild(card);
-                });
-
-                document.getElementById('resultsContainer').classList.remove('hidden');
-                switchTab('tab-cards');
+        this.loading = true;
+        this.results = null;
+        this.compareResults = null;
+
+        try {
+          const r = await fetch('/api/recommend', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              user_id: this.selectedUserId,
+              approach: this.currentApproach,
+              method: this.currentMethod,
+              n: this.nRecs
             })
-            .catch(err => {
-                document.getElementById('loadingIndicator').classList.add('hidden');
-                document.getElementById('productGrid').innerHTML = `<div class="empty-state"><div class="icon">❌</div><p>Error: ${err.message}</p></div>`;
-                document.getElementById('resultsContainer').classList.remove('hidden');
-            });
+          });
+          const data = await r.json();
+
+          if (data.error) {
+            toast(data.error, 'error');
+            this.results = [];
+            return;
+          }
+
+          const appInfo = this.approaches[this.currentApproach];
+          const methodInfo = appInfo.methods.find(m => m.id === this.currentMethod);
+          this.resultTitle = `Recommendations via ${appInfo.label} — ${methodInfo ? methodInfo.label : this.currentMethod}`;
+
+          this.results = data.recommendations || [];
+          this.activeTab = 'cards';
+          this.showResults = true;
+          this.updateUrl();
+
+          if (this.results.length > 0) {
+            toast(`Found ${this.results.length} recommendations`, 'success');
+          }
+        } catch (err) {
+          toast('Error: ' + err.message, 'error');
+          this.results = [];
+        } finally {
+          this.loading = false;
         }
+      },
 
-        function compareAll() {
-            const uid = parseInt(document.getElementById('userSelect').value);
-            if (!uid) {
-                alert('Please select a user first.');
-                return;
-            }
-
-            document.getElementById('loadingIndicator').classList.remove('hidden');
-            const container = document.getElementById('compareResults');
-            container.innerHTML = '';
-
-            const cfMethods = approaches.cf.methods.map(m => m.id);
-            const promises = [];
-
-            cfMethods.forEach(m => {
-                promises.push(
-                    fetch('/api/recommend', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ user_id: uid, approach: 'cf', method: m, n: 5 })
-                    }).then(r => r.json()).then(data => ({ approach: 'cf', method: m, data }))
-                );
-            });
-
-            Object.keys(approaches).forEach(app => {
-                const methods = approaches[app].methods;
-                methods.forEach(m => {
-                    if (app !== 'cf') {
-                        promises.push(
-                            fetch('/api/recommend', {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({ user_id: uid, approach: app, method: m.id, n: 5 })
-                            }).then(r => r.json()).then(data => ({ approach: app, method: m.id, data }))
-                        );
-                    }
-                });
-            });
-
-            Promise.all(promises).then(results => {
-                document.getElementById('loadingIndicator').classList.add('hidden');
-                document.getElementById('resultsContainer').classList.remove('hidden');
-                switchTab('tab-compare');
-
-                container.innerHTML = '<div class="compare-view"></div>';
-                const compareGrid = container.querySelector('.compare-view');
-
-                results.forEach(result => {
-                    const appInfo = approaches[result.approach];
-                    const methodInfo = appInfo.methods.find(m => m.id === result.method);
-                    const col = document.createElement('div');
-                    col.className = 'compare-column';
-                    col.innerHTML = `<h3>${appInfo.icon} ${methodInfo ? methodInfo.label : result.method}</h3>`;
-
-                    if (result.data.error) {
-                        col.innerHTML += `<p style="color:rgba(255,255,255,0.4);font-size:0.8rem;">${result.data.error}</p>`;
-                    } else if (!result.data.recommendations || result.data.recommendations.length === 0) {
-                        col.innerHTML += `<p style="color:rgba(255,255,255,0.4);font-size:0.8rem;">No results</p>`;
-                    } else {
-                        const list = document.createElement('div');
-                        result.data.recommendations.forEach((item, i) => {
-                            const div = document.createElement('div');
-                            div.style.cssText = 'padding:0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size:0.8rem;';
-                            div.innerHTML = `
-                                <div style="font-weight:500;color:#fff;">${i+1}. ${item.name}</div>
-                                <div style="color:rgba(255,255,255,0.4);">$${item.price.toFixed(2)} · ${item.brand}</div>
-                            `;
-                            list.appendChild(div);
-                        });
-                        col.appendChild(list);
-                    }
-                    compareGrid.appendChild(col);
-                });
-            }).catch(err => {
-                document.getElementById('loadingIndicator').classList.add('hidden');
-                container.innerHTML = `<div class="empty-state"><div class="icon">❌</div><p>Error: ${err.message}</p></div>`;
-            });
+      async compareAll() {
+        if (!this.selectedUserId) {
+          toast('Please select a user first.', 'warning');
+          return;
         }
 
-        function switchTab(tabId) {
-            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-            document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
-            document.querySelector(`.tab[data-tab="${tabId}"]`).classList.add('active');
-            document.getElementById(tabId).classList.add('active');
-        }
+        this.loading = true;
+        this.compareResults = null;
+
+        const promises = [];
+        const totalMethods = Object.values(this.approaches).reduce((sum, a) => sum + a.methods.length, 0);
+        Object.keys(this.approaches).forEach(appKey => {
+          this.approaches[appKey].methods.forEach(m => {
+            promises.push(
+              fetch('/api/recommend', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ user_id: this.selectedUserId, approach: appKey, method: m.id, n: 5 })
+              })
+              .then(r => r.json())
+              .then(data => ({
+                approach: appKey,
+                method: m.id,
+                label: this.approaches[appKey].icon + ' ' + m.label,
+                data
+              }))
+              .catch(err => ({
+                approach: appKey,
+                method: m.id,
+                label: this.approaches[appKey].icon + ' ' + m.label,
+                data: { error: err.message, recommendations: [] }
+              }))
+            );
+          });
+        });
 
-        function getCategoryIcon(category) {
-            const icons = {
-                'Electronics': '💻',
-                'Clothing': '👕',
-                'Home & Kitchen': '🏠',
-                'Books': '📚',
-                'Sports': '⚽',
-                'Beauty': '💄',
-                'Toys': '🧸',
-                'Automotive': '🚗'
-            };
-            return icons[category] || '📦';
+        try {
+          const results = await Promise.all(promises);
+          this.compareResults = results.map(r => ({
+            approach: r.approach,
+            method: r.method,
+            label: r.label,
+            error: r.data.error,
+            items: r.data.recommendations || []
+          }));
+          this.activeTab = 'compare';
+          this.showResults = true;
+          const loaded = results.filter(r => !r.data.error && r.data.recommendations?.length).length;
+          toast(`Loaded ${loaded} of ${totalMethods} methods`, loaded === totalMethods ? 'success' : 'warning');
+        } catch (err) {
+          toast('Error: ' + err.message, 'error');
+        } finally {
+          this.loading = false;
         }
-    </script>
-</body>
-</html>
+      },
+    }));
+  });
+</script>
+{% endblock %}