fix: SSO dotenv path and auth routes

.env.example

@@ -0,0 +1,6 @@
+# Backend SSO configuration
+SSO_DISCOVERY_URL=https://YOUR_SSO_PROVIDER/.well-known/openid-configuration
+SSO_CLIENT_ID=your-client-id
+SSO_CLIENT_SECRET=your-client-secret
+SESSION_SECRET=replace-with-a-secure-secret
+FRONTEND_URLS=http://localhost:5173,http://127.0.0.1:5173

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 *.db
+.env

Dockerfile

@@ -0,0 +1,18 @@
+# Use an official lightweight Python image
+FROM python:3.9-slim
+
+# Set the working directory
+WORKDIR /app
+
+# Copy your requirements and install them
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy all your project files (including the massive database) into the container
+COPY . .
+
+# Expose port 7860 (Hugging Face's default port)
+EXPOSE 7860
+
+# Command to run the FastAPI server
+CMD ["uvicorn", "api.main:app", "--host", "0.0.0.0", "--port", "7860"]

api/auth.py

@@ -0,0 +1,12 @@
+from fastapi import HTTPException, status
+from starlette.requests import Request
+
+
+def require_authenticated_user(request: Request):
+    """Require a logged-in SSO user when SSO is enabled."""
+    if getattr(request.app.state, 'sso_enabled', False) and not request.session.get('user'):
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail='Authentication required. Please sign in using SSO.',
+        )
+    return request.session.get('user')

api/main.py

@@ -4,8 +4,13 @@ FastAPI application entry point.
 import os
 import json
 import time
+from dotenv import load_dotenv
 from fastapi import FastAPI
+
+load_dotenv(dotenv_path=os.path.join(os.path.dirname(__file__), '..', '.env'))
 from fastapi.middleware.cors import CORSMiddleware
+from starlette.middleware.sessions import SessionMiddleware
+from authlib.integrations.starlette_client import OAuth
 from .routes import router
 from artwork_bandit.db import database
 from artwork_bandit.features.nlp_encoder import NLPEncoder
@@ -16,7 +21,43 @@ from artwork_bandit.bandit.thompson import ThompsonBandit
 
 APP = FastAPI()
 
-APP.add_middleware(CORSMiddleware, allow_origins=['*'], allow_methods=['*'], allow_headers=['*'])
+FRONTEND_URLS = os.getenv('FRONTEND_URLS', 'http://localhost:5173,http://127.0.0.1:5173').split(',')
+FRONTEND_URL = FRONTEND_URLS[0].strip()
+
+APP.add_middleware(
+    SessionMiddleware,
+    secret_key=os.getenv('SESSION_SECRET', 'replace-with-a-secure-secret'),
+    same_site='lax',
+)
+APP.add_middleware(
+    CORSMiddleware,
+    allow_origins=[url.strip() for url in FRONTEND_URLS if url.strip()],
+    allow_methods=['*'],
+    allow_headers=['*'],
+    allow_credentials=True,
+)
+
+SSO_DISCOVERY_URL = os.getenv('SSO_DISCOVERY_URL')
+SSO_CLIENT_ID = os.getenv('SSO_CLIENT_ID')
+SSO_CLIENT_SECRET = os.getenv('SSO_CLIENT_SECRET')
+SSO_SCOPES = os.getenv('SSO_SCOPES', 'openid profile email')
+
+APP.state.frontend_url = FRONTEND_URL
+APP.state.sso_enabled = bool(SSO_DISCOVERY_URL and SSO_CLIENT_ID and SSO_CLIENT_SECRET)
+print(f"[STARTUP] SSO enabled: {APP.state.sso_enabled}")
+APP.state.oauth = None
+
+if APP.state.sso_enabled:
+    oauth = OAuth()
+    oauth.register(
+        name='sso',
+        client_id=SSO_CLIENT_ID,
+        client_secret=SSO_CLIENT_SECRET,
+        server_metadata_url=SSO_DISCOVERY_URL,
+        client_kwargs={'scope': SSO_SCOPES},
+    )
+    APP.state.oauth = oauth
+
 APP.include_router(router)
 
 DATA_DIR = os.path.join(os.path.dirname(__file__), '..', 'data')

api/routes.py

@@ -1,4 +1,5 @@
 from fastapi import APIRouter, HTTPException, Request
+from fastapi.responses import RedirectResponse
 from .schemas import RecommendRequest, RecommendResponse, FeedbackRequest, FeedbackResponse, StatsResponse
 import time
 from artwork_bandit.db import database
@@ -7,8 +8,53 @@ import numpy as np
 router = APIRouter()
 
 
+def require_auth(request: Request):
+    if getattr(request.app.state, 'sso_enabled', False) and not request.session.get('user'):
+        raise HTTPException(status_code=401, detail='Authentication required')
+
+
+@router.get('/auth/user')
+async def auth_user(request: Request):
+    return {
+        'is_authenticated': bool(request.session.get('user')),
+        'user': request.session.get('user'),
+        'sso_enabled': getattr(request.app.state, 'sso_enabled', False),
+    }
+
+
+@router.get('/auth/login')
+async def auth_login(request: Request):
+    if not getattr(request.app.state, 'sso_enabled', False):
+        raise HTTPException(status_code=400, detail='SSO is not configured')
+    redirect_uri = request.url_for('auth_callback')
+    return await request.app.state.oauth.sso.authorize_redirect(request, redirect_uri)
+
+
+@router.get('/auth/callback')
+async def auth_callback(request: Request):
+    if not getattr(request.app.state, 'sso_enabled', False):
+        raise HTTPException(status_code=400, detail='SSO is not configured')
+    token = await request.app.state.oauth.sso.authorize_access_token(request)
+    user = token.get('userinfo')
+    if not user:
+        user = await request.app.state.oauth.sso.parse_id_token(request, token)
+    request.session['user'] = {
+        'name': user.get('name') or user.get('email') or user.get('preferred_username'),
+        'email': user.get('email'),
+        'sub': user.get('sub'),
+    }
+    return RedirectResponse(request.app.state.frontend_url)
+
+
+@router.get('/auth/logout')
+async def auth_logout(request: Request):
+    request.session.clear()
+    return RedirectResponse(request.app.state.frontend_url)
+
+
 @router.get('/users')
 async def list_users(request: Request):
+    require_auth(request)
     app = request.app
     users = getattr(app.state, 'users', None)
     if users is None:
@@ -19,6 +65,7 @@ async def list_users(request: Request):
 
 @router.get('/contents')
 async def list_contents(request: Request):
+    require_auth(request)
     app = request.app
     contents = getattr(app.state, 'contents', None)
     if contents is None:
@@ -27,6 +74,7 @@ async def list_contents(request: Request):
 
 @router.post('/recommend', response_model=RecommendResponse)
 async def recommend(req: RecommendRequest, request: Request):
+    require_auth(request)
     app = request.app
     start = time.time()
     fs = app.state.feature_store
@@ -80,6 +128,7 @@ async def recommend(req: RecommendRequest, request: Request):
 
 @router.post('/feedback', response_model=FeedbackResponse)
 async def feedback(req: FeedbackRequest, request: Request):
+    require_auth(request)
     app = request.app
     imp = database.get_impression(req.impression_id)
     if imp is None:
@@ -100,6 +149,7 @@ async def feedback(req: FeedbackRequest, request: Request):
 
 @router.get('/stats', response_model=StatsResponse)
 async def stats(request: Request):
+    require_auth(request)
     rows = database.impressions_with_rewards()
     total = len(rows)
     clicks = sum(1 for r in rows if r.reward and r.reward > 0)

features/vision_encoder.py

@@ -31,7 +31,7 @@ def _ensure_clip_loaded():
         print("[VisionEncoder] Creating ViT-B-32 model...", file=sys.stderr)
         sys.stderr.flush()
         # create model; choose a commonly available pretrained
-        _clip_model, _, _clip_preprocess = open_clip.create_model_and_transforms('ViT-B-32', pretrained='laion2b_s32b_b79k')
+        _clip_model, _, _clip_preprocess = open_clip.create_model_and_transforms('ViT-B-32', pretrained='laion2b_s34b_b79k')
         _clip_tokenizer = open_clip.get_tokenizer('ViT-B-32')
         _clip_model.eval()
         HAS_CLIP = True

frontend/.env.example

@@ -0,0 +1,2 @@
+# Frontend API base URL for development
+VITE_API_BASE_URL=http://localhost:8000

frontend/src/App.jsx

@@ -1,22 +1,66 @@
 import React, { useState, useEffect } from 'react'
-import { recommend, feedback, stats, getUsers, getContents } from './api'
+import {
+  initiateLogin,
+  initiateLogout,
+  getCurrentUser,
+  recommend,
+  feedback,
+  stats,
+  getUsers,
+  getContents,
+} from './api'
 
 export default function App() {
-  const [userId, setUserId] = useState('user_001')
-  const [contentId, setContentId] = useState('content_001')
+  const [authUser, setAuthUser] = useState(null)
+  const [authChecked, setAuthChecked] = useState(false)
+  const [ssoEnabled, setSsoEnabled] = useState(false)
+  const [userId, setUserId] = useState('')
+  const [contentId, setContentId] = useState('')
+  const [algorithm, setAlgorithm] = useState('linucb')
   const [users, setUsers] = useState([])
   const [contents, setContents] = useState([])
   const [result, setResult] = useState(null)
   const [impressionId, setImpressionId] = useState(null)
+  const [statsData, setStatsData] = useState(null)
   const [statusMsg, setStatusMsg] = useState('')
 
+  async function refreshSession() {
+    setStatusMsg('Checking authentication...')
+    try {
+      const auth = await getCurrentUser()
+      setAuthUser(auth.user)
+      setSsoEnabled(auth.sso_enabled)
+      if (auth.user) {
+        await loadLists()
+      }
+      setStatusMsg('')
+    } catch (e) {
+      setStatusMsg('Unable to verify authentication: ' + (e.message || e))
+    } finally {
+      setAuthChecked(true)
+    }
+  }
+
+  async function loadLists() {
+    try {
+      const [u, c] = await Promise.all([getUsers(), getContents()])
+      setUsers(u || [])
+      setContents(c || [])
+      if (u?.length && !userId) setUserId(u[0].user_id)
+      if (c?.length && !contentId) setContentId(c[0].content_id)
+    } catch (e) {
+      setStatusMsg('Failed to load users or contents: ' + (e.message || e))
+    }
+  }
+
   async function handleRecommend() {
     setStatusMsg('Requesting recommendation...')
     try {
-      const res = await recommend(userId, contentId)
+      const res = await recommend(userId, contentId, algorithm)
       setResult(res)
       setImpressionId(res.impression_id)
-      setStatusMsg(`Got recommendation (latency ${Math.round(res.latency_ms)} ms)`)
+      setStatsData(null)
+      setStatusMsg(`Recommendation delivered in ${Math.round(res.latency_ms)} ms`)
     } catch (e) {
       setStatusMsg('Error: ' + (e.message || e))
     }
@@ -24,97 +68,165 @@ export default function App() {
 
   async function handleFeedback(reward = 1.0) {
     if (!impressionId) {
-      setStatusMsg('No impression to give feedback for')
+      setStatusMsg('No recommendation available for feedback')
       return
     }
     setStatusMsg('Sending feedback...')
     try {
-      const res = await feedback(impressionId, reward)
-      setStatusMsg('Feedback recorded')
+      await feedback(impressionId, reward)
+      setStatusMsg('Feedback recorded successfully')
     } catch (e) {
       setStatusMsg('Error: ' + (e.message || e))
     }
   }
 
   async function handleStats() {
-    setStatusMsg('Fetching stats...')
+    setStatusMsg('Loading production stats...')
     try {
       const s = await stats()
-      setStatusMsg(`CTR: ${s.overall_ctr} (${s.total_clicks}/${s.total_impressions})`)
+      setStatsData(s)
+      setStatusMsg('Stats loaded')
     } catch (e) {
       setStatusMsg('Error: ' + (e.message || e))
     }
   }
 
   useEffect(() => {
-    async function loadLists() {
-      try {
-        const [u, c] = await Promise.all([getUsers(), getContents()])
-        setUsers(u || [])
-        setContents(c || [])
-        if (u && u.length && !userId) setUserId(u[0].user_id)
-        if (c && c.length && !contentId) setContentId(c[0].content_id)
-      } catch (e) {
-        setStatusMsg('Failed to load users/contents: ' + (e.message || e))
-      }
-    }
-    loadLists()
+    refreshSession()
   }, [])
 
+  const isReady = authChecked && (!!authUser || !authUser)
+
   return (
     <div className="container">
-      <header>
-        <h1>Artwork Bandit — Demo UI</h1>
-        <p className="subtitle">Recommend artworks, send feedback, and view stats</p>
+      <header className="topbar">
+        <div>
+          <p className="eyebrow">Artwork Bandit</p>
+          <h1>Recommendation Studio</h1>
+          <p className="subtitle">A modern SSO dashboard for artwork recommendation, feedback, and performance insights.</p>
+        </div>
+        <div className="profile-bar">
+          {authChecked ? (
+            authUser ? (
+              <>
+                <div className="profile-info">
+                  <span>{authUser.name}</span>
+                  <small>{authUser.email}</small>
+                </div>
+                <button className="secondary" onClick={initiateLogout}>Sign out</button>
+              </>
+            ) : ssoEnabled ? (
+              <button className="primary" onClick={initiateLogin}>Sign in with SSO</button>
+            ) : (
+              <div className="profile-info">
+                <span>SSO is not configured</span>
+                <small>Please set SSO environment variables to enable login.</small>
+              </div>
+            )
+          ) : (
+            <span>Checking login...</span>
+          )}
+        </div>
       </header>
 
-      <main>
-        <div className="controls">
-          <label>
-            User
-            <select value={userId} onChange={(e) => setUserId(e.target.value)}>
-              {users.map((u) => (
-                <option key={u.user_id} value={u.user_id}>{u.user_id} {u.mood ? `— ${u.mood}` : ''}</option>
-              ))}
-            </select>
-          </label>
-          <label>
-            Content
-            <select value={contentId} onChange={(e) => setContentId(e.target.value)}>
-              {contents.map((c) => (
-                <option key={c.content_id} value={c.content_id}>{c.content_id} {c.title ? `— ${c.title}` : ''}</option>
-              ))}
-            </select>
-          </label>
-          <div className="actions">
-            <button onClick={handleRecommend}>Recommend</button>
-            <button onClick={() => handleFeedback(1.0)}>Click (reward=1)</button>
-            <button onClick={() => handleFeedback(0.0)}>No Click (reward=0)</button>
-            <button onClick={handleStats}>Stats</button>
+      {!authUser ? (
+        <main className="hero-card">
+          <div>
+            <h2>Secure access with SSO</h2>
+            <p>Sign in to access the artwork recommendation engine, track model performance, and share feedback securely.</p>
+            <button className="primary" onClick={initiateLogin} disabled={!ssoEnabled}>
+              {ssoEnabled ? 'Start with SSO' : 'SSO not configured'}
+            </button>
           </div>
-        </div>
+          <div className="hero-aside">
+            <p>Configured backend SSO keeps your recommendation experiments protected while preserving the same fast feedback loop.</p>
+            {!ssoEnabled && <p className="empty-state">Set <code>SSO_DISCOVERY_URL</code>, <code>SSO_CLIENT_ID</code>, and <code>SSO_CLIENT_SECRET</code> to enable login.</p>}
+          </div>
+        </main>
+      ) : (
+        <main>
+          <section className="dashboard-grid">
+            <section className="panel controls-panel">
+              <h2>Recommendation controls</h2>
+              <label>
+                Dataset user
+                <select value={userId} onChange={(e) => setUserId(e.target.value)}>
+                  {users.map((u) => (
+                    <option key={u.user_id} value={u.user_id}>{u.user_id}{u.mood ? ` — ${u.mood}` : ''}</option>
+                  ))}
+                </select>
+              </label>
 
-        <section className="result">
-          {result ? (
-            <div className="card">
-              <img src={result.artwork_image || ''} alt={result.artwork_id} />
-              <div className="card-body">
-                <h3>{result.artwork_id}</h3>
-                <p>Algorithm: {result.algorithm}</p>
-                <p>Latency: {Math.round(result.latency_ms)} ms</p>
-                <p>Impression: {result.impression_id}</p>
+              <label>
+                Content topic
+                <select value={contentId} onChange={(e) => setContentId(e.target.value)}>
+                  {contents.map((c) => (
+                    <option key={c.content_id} value={c.content_id}>{c.title || c.content_id}</option>
+                  ))}
+                </select>
+              </label>
+
+              <label>
+                Algorithm
+                <select value={algorithm} onChange={(e) => setAlgorithm(e.target.value)}>
+                  <option value="linucb">LinUCB</option>
+                  <option value="thompson">Thompson Sampling</option>
+                </select>
+              </label>
+
+              <div className="actions">
+                <button className="primary" onClick={handleRecommend}>Recommend artwork</button>
+                <button onClick={() => handleFeedback(1.0)}>Submit click</button>
+                <button onClick={() => handleFeedback(0.0)}>Submit no click</button>
+                <button className="secondary" onClick={handleStats}>View stats</button>
               </div>
-            </div>
-          ) : (
-            <p>No recommendation yet.</p>
-          )}
-        </section>
+            </section>
+
+            <section className="panel result-panel">
+              <h2>Latest recommendation</h2>
+              {result ? (
+                <div className="card result-card">
+                  <img src={result.artwork_image || ''} alt={result.artwork_id} />
+                  <div className="card-body">
+                    <h3>{result.artwork_id}</h3>
+                    <p>Algorithm: {result.algorithm}</p>
+                    <p>Impression ID: {result.impression_id}</p>
+                    <p>Latency: {Math.round(result.latency_ms)} ms</p>
+                  </div>
+                </div>
+              ) : (
+                <p className="empty-state">No recommendation requested yet. Use the controls to generate your first prediction.</p>
+              )}
+            </section>
+          </section>
 
-        <div className="status">{statusMsg}</div>
-      </main>
+          <section className="panel stats-panel">
+            <h2>Live KPI dashboard</h2>
+            {statsData ? (
+              <div className="stats-grid">
+                <div className="stat-card">
+                  <span>Total impressions</span>
+                  <strong>{statsData.total_impressions}</strong>
+                </div>
+                <div className="stat-card">
+                  <span>Total clicks</span>
+                  <strong>{statsData.total_clicks}</strong>
+                </div>
+                <div className="stat-card">
+                  <span>Overall CTR</span>
+                  <strong>{(statsData.overall_ctr * 100).toFixed(1)}%</strong>
+                </div>
+              </div>
+            ) : (
+              <p className="empty-state">Run the stats query to inspect production performance.</p>
+            )}
+          </section>
+        </main>
+      )}
 
       <footer>
-        <small>Runs against API at <code>http://127.0.0.1:8000</code></small>
+        <p>{statusMsg || 'Ready'}</p>
+        <small>Backend session auth is enabled when SSO credentials are configured.</small>
       </footer>
     </div>
   )

frontend/src/api.js

@@ -1,28 +1,42 @@
 import axios from 'axios'
 
-const BASE = 'http://127.0.0.1:8000'
+const BASE = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000'
+const client = axios.create({ baseURL: BASE, withCredentials: true })
 
-export async function recommend(user_id, content_id) {
-  const r = await axios.post(`${BASE}/recommend`, { user_id, content_id })
+export const initiateLogin = () => {
+  window.location.href = `${BASE}/auth/login`
+}
+
+export const initiateLogout = () => {
+  window.location.href = `${BASE}/auth/logout`
+}
+
+export async function getCurrentUser() {
+  const r = await client.get('/auth/user')
+  return r.data
+}
+
+export async function recommend(user_id, content_id, algorithm = 'linucb') {
+  const r = await client.post('/recommend', { user_id, content_id, algorithm })
   return r.data
 }
 
 export async function feedback(impression_id, reward) {
-  const r = await axios.post(`${BASE}/feedback`, { impression_id, reward })
+  const r = await client.post('/feedback', { impression_id, reward })
   return r.data
 }
 
 export async function stats() {
-  const r = await axios.get(`${BASE}/stats`)
+  const r = await client.get('/stats')
   return r.data
 }
 
 export async function getUsers() {
-  const r = await axios.get(`${BASE}/users`)
+  const r = await client.get('/users')
   return r.data
 }
 
 export async function getContents() {
-  const r = await axios.get(`${BASE}/contents`)
+  const r = await client.get('/contents')
   return r.data
 }

frontend/src/styles.css

@@ -1,18 +1,282 @@
-:root{--bg:#0f1724;--card:#0b1220;--muted:#94a3b8;--accent:#06b6d4}
-*{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,'Helvetica Neue',Arial}
-body{margin:0;background:linear-gradient(180deg,#041022 0%,#071029 100%);color:#e6eef6}
-.container{max-width:980px;margin:32px auto;padding:24px}
-header h1{margin:0;font-size:1.6rem}
-.subtitle{margin:4px 0 18px;color:var(--muted)}
-.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
-label{display:flex;flex-direction:column;font-size:0.9rem;color:var(--muted)}
-input{padding:8px 10px;border-radius:8px;border:1px solid #123;background:#071226;color:inherit}
-.actions{grid-column:1/-1;display:flex;gap:10px;margin-top:8px}
-button{background:var(--accent);border:none;padding:8px 12px;border-radius:8px;color:#052;cursor:pointer}
-.result{margin-top:18px}
-.card{display:flex;gap:12px;background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);padding:12px;border-radius:10px;align-items:center}
-.card img{width:130px;height:130px;object-fit:cover;border-radius:8px;background:#022}
-.card-body h3{margin:0 0 6px}
-.status{margin-top:12px;color:var(--muted)}
-footer{margin-top:22px;color:var(--muted)}
-code{background:#022;padding:2px 6px;border-radius:6px}
+:root {
+  --bg: #0f1724;
+  --surface: #111827;
+  --surface-soft: #131f33;
+  --muted: #94a3b8;
+  --text: #e6eef6;
+  --accent: #22d3ee;
+  --accent-dark: #0e7490;
+  --border: rgba(148, 163, 184, 0.14);
+}
+
+* {
+  box-sizing: border-box;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 35%),
+    radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.15), transparent 28%),
+    linear-gradient(180deg, #050811 0%, #08101c 100%);
+  color: var(--text);
+}
+
+button,
+select {
+  font: inherit;
+}
+
+.container {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 28px 24px 42px;
+}
+
+header h1 {
+  margin: 0;
+  font-size: clamp(2rem, 2.8vw, 3.4rem);
+  line-height: 1.05;
+}
+
+.subtitle {
+  margin: 12px 0 0;
+  color: var(--muted);
+  max-width: 720px;
+}
+
+.topbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 28px;
+}
+
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.24em;
+  color: var(--accent);
+  margin: 0 0 12px;
+  font-size: 0.82rem;
+}
+
+.profile-bar {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.profile-info {
+  display: grid;
+  gap: 2px;
+  text-align: right;
+}
+
+.profile-info span {
+  font-weight: 700;
+}
+
+.profile-info small {
+  color: var(--muted);
+}
+
+button {
+  border: none;
+  border-radius: 999px;
+  padding: 12px 18px;
+  cursor: pointer;
+  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
+}
+
+button.primary {
+  background: linear-gradient(135deg, var(--accent), #38bdf8);
+  color: #031827;
+  box-shadow: 0 18px 50px rgba(34, 211, 238, 0.18);
+}
+
+button.secondary {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+button:hover {
+  transform: translateY(-1px);
+}
+
+.hero-card,
+.dashboard-grid,
+.panel,
+.stats-grid {
+  display: grid;
+}
+
+.hero-card {
+  gap: 20px;
+  padding: 36px;
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
+}
+
+.hero-card h2,
+.panel h2 {
+  margin: 0 0 14px;
+  font-size: 1.4rem;
+}
+
+.hero-card p,
+.panel p,
+.empty-state {
+  color: var(--muted);
+  line-height: 1.7;
+}
+
+.hero-aside {
+  color: var(--text);
+  font-size: 0.95rem;
+  line-height: 1.8;
+}
+
+.dashboard-grid {
+  gap: 24px;
+  grid-template-columns: minmax(300px, 360px) minmax(400px, 1fr);
+}
+
+.panel {
+  gap: 16px;
+  padding: 26px;
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.controls-panel label,
+.panel label {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  color: var(--muted);
+}
+
+label select {
+  min-width: 0;
+  border-radius: 16px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(15, 23, 42, 0.9);
+  color: var(--text);
+  padding: 14px 16px;
+}
+
+.actions {
+  display: grid;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.actions button {
+  width: 100%;
+}
+
+.result-panel {
+  min-height: 316px;
+}
+
+.card {
+  display: grid;
+  grid-template-columns: 180px 1fr;
+  gap: 20px;
+  align-items: center;
+  padding: 24px;
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.result-card img {
+  width: 100%;
+  max-width: 180px;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  border-radius: 20px;
+  background: #0d172a;
+}
+
+.card-body h3 {
+  margin: 0 0 12px;
+}
+
+.card-body p {
+  margin: 4px 0;
+  color: var(--muted);
+}
+
+.stats-panel {
+  grid-column: 1 / -1;
+}
+
+.stats-grid {
+  grid-template-columns: repeat(3, minmax(180px, 1fr));
+  gap: 16px;
+}
+
+.stat-card {
+  padding: 20px;
+  border-radius: 20px;
+  background: rgba(15, 23, 42, 0.9);
+  border: 1px solid rgba(148, 163, 184, 0.12);
+}
+
+.stat-card span {
+  display: block;
+  color: var(--muted);
+  margin-bottom: 8px;
+}
+
+.stat-card strong {
+  display: block;
+  font-size: 1.8rem;
+  color: var(--text);
+}
+
+footer {
+  margin-top: 24px;
+  color: var(--muted);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.empty-state {
+  padding: 28px 0;
+  color: var(--muted);
+}
+
+@media (max-width: 900px) {
+  .dashboard-grid,
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .container {
+    padding: 20px 16px 28px;
+  }
+
+  .topbar {
+    align-items: flex-start;
+  }
+
+  .profile-bar {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}

requirements.txt

@@ -14,3 +14,6 @@ httpx==0.27.0
 matplotlib==3.9.0
 seaborn==0.13.2
 tqdm==4.66.4
+authlib==1.2.0
+python-dotenv==1.0.1
+itsdangerous==2.2.0