Hugging Face's logo

Spaces:
Culture-and-Morality-Lab
/
ccr-platform
Running on CPU Upgrade

App Files Community
devaanand commited on
Commit
4e87534
·
1 Parent(s): b195b7b

feat: CAML lab branding - CCR logo, ink+teal theme, favicon, attribution

Browse files

Palette derived from the lab's CCR logo: ink (#151515) header bars with the
white logo variant, darkened logo teal (#26736f) for links/buttons (AA on
white), pure logo teal (#339B98) for data fills. Correlation matrix now
diverges teal (positive) vs copper (negative). Applied across the React app,
guide, and product pages with 'Culture & Morality Lab, UMass Amherst'
attribution.

Files changed (16) hide show
  1. backend/app/guide.html +22 -7
  2. backend/app/product.html +22 -7
  3. backend/static/assets/index-6wlQqoEv.css +1 -0
  4. backend/static/assets/index-CLMW4NjF.css +0 -1
  5. backend/static/assets/{index-DEl4g2Fg.js → index-U6eqlx5K.js} +0 -0
  6. backend/static/ccr-logo-white.svg +16 -0
  7. backend/static/ccr-logo.svg +15 -0
  8. backend/static/index.html +3 -2
  9. frontend/index.html +1 -0
  10. frontend/public/ccr-logo-white.svg +16 -0
  11. frontend/public/ccr-logo.svg +15 -0
  12. frontend/src/AdminPage.jsx +1 -1
  13. frontend/src/App.jsx +8 -3
  14. frontend/src/ResultsView.jsx +3 -2
  15. frontend/src/WelcomePage.jsx +5 -2
  16. frontend/src/styles.css +34 -24
backend/app/guide.html CHANGED
@@ -3,17 +3,18 @@
3
  <head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
6
  <title>CCR Platform - Testing Guide</title>
7
  <style>
8
  :root {
9
  --bg: #ffffff; --fg: #1a1a1a; --muted: #666; --border: #ddd;
10
- --accent: #7a1f3d; --card: #f7f7f8; --amber-bg: #fff7e0; --amber-border: #e0b84d;
11
- --code-bg: #f0f0f2; --maroon: #7a1f3d;
12
  }
13
  @media (prefers-color-scheme: dark) {
14
  :root {
15
  --bg: #16181c; --fg: #e6e6e6; --muted: #9a9a9a; --border: #3a3d44;
16
- --accent: #e08aa3; --card: #1f2228; --amber-bg: #2e2810; --amber-border: #8a6d1f;
17
  --code-bg: #24272e;
18
  }
19
  }
@@ -22,9 +23,9 @@
22
  margin: 0; background: var(--bg); color: var(--fg);
23
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
24
  }
25
- /* Shared top bar: same maroon brand as the app, links back to it. */
26
  .topbar {
27
- background: var(--maroon); color: #fff;
28
  padding: 12px 1.25rem;
29
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
30
  }
@@ -32,6 +33,9 @@
32
  color: #fff; font-weight: 650; font-size: 1.02rem;
33
  text-decoration: none; letter-spacing: .2px; white-space: nowrap;
34
  }
 
 
 
35
  .topbar .brand:hover { opacity: .88; }
36
  .topbar nav { margin-left: auto; display: flex; gap: 1.1rem; flex-wrap: wrap; }
37
  .topbar nav a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .88rem; }
@@ -84,7 +88,7 @@
84
  }
85
  .toast {
86
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
87
- background: var(--maroon); color: #fff; padding: .5rem .9rem; border-radius: 8px;
88
  font-size: .85rem; opacity: 0; pointer-events: none; transition: opacity .2s;
89
  }
90
  .toast.show { opacity: 1; }
@@ -96,7 +100,18 @@
96
  </head>
97
  <body>
98
  <header class="topbar">
99
- <a class="brand" href="/">CCR Platform</a>
 
 
 
 
 
 
 
 
 
 
 
100
  <nav>
101
  <a href="/">Dashboard</a>
102
  <a href="/welcome">About</a>
 
3
  <head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <link rel="icon" type="image/svg+xml" href="/ccr-logo.svg">
7
  <title>CCR Platform - Testing Guide</title>
8
  <style>
9
  :root {
10
  --bg: #ffffff; --fg: #1a1a1a; --muted: #666; --border: #ddd;
11
+ --accent: #26736f; --card: #f7f7f8; --amber-bg: #fff7e0; --amber-border: #e0b84d;
12
+ --code-bg: #f0f0f2; --brand: #151515;
13
  }
14
  @media (prefers-color-scheme: dark) {
15
  :root {
16
  --bg: #16181c; --fg: #e6e6e6; --muted: #9a9a9a; --border: #3a3d44;
17
+ --accent: #6cc9c6; --card: #1f2228; --amber-bg: #2e2810; --amber-border: #8a6d1f;
18
  --code-bg: #24272e;
19
  }
20
  }
 
23
  margin: 0; background: var(--bg); color: var(--fg);
24
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
25
  }
26
+ /* Shared top bar: same ink-and-teal brand as the app, links back to it. */
27
  .topbar {
28
+ background: var(--brand); color: #fff;
29
  padding: 12px 1.25rem;
30
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
31
  }
 
33
  color: #fff; font-weight: 650; font-size: 1.02rem;
34
  text-decoration: none; letter-spacing: .2px; white-space: nowrap;
35
  }
36
+ .topbar .brand { display: inline-flex; align-items: center; gap: .6rem; }
37
+ .brand-logo { height: 20px; width: auto; display: block; }
38
+ .topbar .lab { color: rgba(255,255,255,.6); font-size: .82rem; }
39
  .topbar .brand:hover { opacity: .88; }
40
  .topbar nav { margin-left: auto; display: flex; gap: 1.1rem; flex-wrap: wrap; }
41
  .topbar nav a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .88rem; }
 
88
  }
89
  .toast {
90
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
91
+ background: var(--brand); color: #fff; padding: .5rem .9rem; border-radius: 8px;
92
  font-size: .85rem; opacity: 0; pointer-events: none; transition: opacity .2s;
93
  }
94
  .toast.show { opacity: 1; }
 
100
  </head>
101
  <body>
102
  <header class="topbar">
103
+ <a class="brand" href="/"><svg class="brand-logo" viewBox="188 455 880 338" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
104
+ <g fill="none" stroke="#fff" stroke-width="32">
105
+ <path d="M 458.884 538.509 A 133 133 0 1 0 458.884 709.491"/>
106
+ <path d="M 563.116 538.509 A 133 133 0 0 1 766.884 538.509"/>
107
+ <path d="M 563.116 709.491 A 133 133 0 0 0 766.884 709.491"/>
108
+ <path d="M 846 754 V 496 H 950 A 73 62 0 0 1 950 620 H 846"/>
109
+ <path d="M 930 620 L 1035 759"/>
110
+ </g>
111
+ <circle cx="481" cy="624" r="15" fill="#339B98"/>
112
+ <circle cx="538" cy="624" r="15" fill="#339B98"/>
113
+ </svg>CCR Platform</a>
114
+ <span class="lab">Culture &amp; Morality Lab · UMass Amherst</span>
115
  <nav>
116
  <a href="/">Dashboard</a>
117
  <a href="/welcome">About</a>
backend/app/product.html CHANGED
@@ -3,17 +3,18 @@
3
  <head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
6
  <title>CCR Platform - Product &amp; Architecture</title>
7
  <style>
8
  :root {
9
  --bg: #ffffff; --fg: #1a1a1a; --muted: #666; --border: #ddd;
10
- --accent: #7a1f3d; --card: #f7f7f8; --amber-bg: #fff7e0; --amber-border: #e0b84d;
11
- --code-bg: #f0f0f2; --maroon: #7a1f3d;
12
  }
13
  @media (prefers-color-scheme: dark) {
14
  :root {
15
  --bg: #16181c; --fg: #e6e6e6; --muted: #9a9a9a; --border: #3a3d44;
16
- --accent: #e08aa3; --card: #1f2228; --amber-bg: #2e2810; --amber-border: #8a6d1f;
17
  --code-bg: #24272e;
18
  }
19
  }
@@ -22,9 +23,9 @@
22
  margin: 0; background: var(--bg); color: var(--fg);
23
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
24
  }
25
- /* Shared top bar: same maroon brand as the app, links back to it. */
26
  .topbar {
27
- background: var(--maroon); color: #fff;
28
  padding: 12px 1.25rem;
29
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
30
  }
@@ -32,6 +33,9 @@
32
  color: #fff; font-weight: 650; font-size: 1.02rem;
33
  text-decoration: none; letter-spacing: .2px; white-space: nowrap;
34
  }
 
 
 
35
  .topbar .brand:hover { opacity: .88; }
36
  .topbar nav { margin-left: auto; display: flex; gap: 1.1rem; flex-wrap: wrap; }
37
  .topbar nav a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .88rem; }
@@ -81,7 +85,7 @@
81
  }
82
  .toast {
83
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
84
- background: var(--maroon); color: #fff; padding: .5rem .9rem; border-radius: 8px;
85
  font-size: .85rem; opacity: 0; pointer-events: none; transition: opacity .2s;
86
  }
87
  .toast.show { opacity: 1; }
@@ -95,7 +99,18 @@
95
  </head>
96
  <body>
97
  <header class="topbar">
98
- <a class="brand" href="/">CCR Platform</a>
 
 
 
 
 
 
 
 
 
 
 
99
  <nav>
100
  <a href="/">Dashboard</a>
101
  <a href="/welcome">About</a>
 
3
  <head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <link rel="icon" type="image/svg+xml" href="/ccr-logo.svg">
7
  <title>CCR Platform - Product &amp; Architecture</title>
8
  <style>
9
  :root {
10
  --bg: #ffffff; --fg: #1a1a1a; --muted: #666; --border: #ddd;
11
+ --accent: #26736f; --card: #f7f7f8; --amber-bg: #fff7e0; --amber-border: #e0b84d;
12
+ --code-bg: #f0f0f2; --brand: #151515;
13
  }
14
  @media (prefers-color-scheme: dark) {
15
  :root {
16
  --bg: #16181c; --fg: #e6e6e6; --muted: #9a9a9a; --border: #3a3d44;
17
+ --accent: #6cc9c6; --card: #1f2228; --amber-bg: #2e2810; --amber-border: #8a6d1f;
18
  --code-bg: #24272e;
19
  }
20
  }
 
23
  margin: 0; background: var(--bg); color: var(--fg);
24
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
25
  }
26
+ /* Shared top bar: same ink-and-teal brand as the app, links back to it. */
27
  .topbar {
28
+ background: var(--brand); color: #fff;
29
  padding: 12px 1.25rem;
30
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
31
  }
 
33
  color: #fff; font-weight: 650; font-size: 1.02rem;
34
  text-decoration: none; letter-spacing: .2px; white-space: nowrap;
35
  }
36
+ .topbar .brand { display: inline-flex; align-items: center; gap: .6rem; }
37
+ .brand-logo { height: 20px; width: auto; display: block; }
38
+ .topbar .lab { color: rgba(255,255,255,.6); font-size: .82rem; }
39
  .topbar .brand:hover { opacity: .88; }
40
  .topbar nav { margin-left: auto; display: flex; gap: 1.1rem; flex-wrap: wrap; }
41
  .topbar nav a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .88rem; }
 
85
  }
86
  .toast {
87
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
88
+ background: var(--brand); color: #fff; padding: .5rem .9rem; border-radius: 8px;
89
  font-size: .85rem; opacity: 0; pointer-events: none; transition: opacity .2s;
90
  }
91
  .toast.show { opacity: 1; }
 
99
  </head>
100
  <body>
101
  <header class="topbar">
102
+ <a class="brand" href="/"><svg class="brand-logo" viewBox="188 455 880 338" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
103
+ <g fill="none" stroke="#fff" stroke-width="32">
104
+ <path d="M 458.884 538.509 A 133 133 0 1 0 458.884 709.491"/>
105
+ <path d="M 563.116 538.509 A 133 133 0 0 1 766.884 538.509"/>
106
+ <path d="M 563.116 709.491 A 133 133 0 0 0 766.884 709.491"/>
107
+ <path d="M 846 754 V 496 H 950 A 73 62 0 0 1 950 620 H 846"/>
108
+ <path d="M 930 620 L 1035 759"/>
109
+ </g>
110
+ <circle cx="481" cy="624" r="15" fill="#339B98"/>
111
+ <circle cx="538" cy="624" r="15" fill="#339B98"/>
112
+ </svg>CCR Platform</a>
113
+ <span class="lab">Culture &amp; Morality Lab · UMass Amherst</span>
114
  <nav>
115
  <a href="/">Dashboard</a>
116
  <a href="/welcome">About</a>
backend/static/assets/index-6wlQqoEv.css ADDED
@@ -0,0 +1 @@
 
 
1
+ :root{--brand-ink: #151515;--brand: #26736f;--brand-dark: #1d5a57;--accent: #339b98;--ink: #1d2129;--muted: #667085;--line: #e5e7eb;--bg: #f7f7f8;--card: #ffffff;--ok: #157f3d;--err: #b42318;--accent-soft: #e7f3f2;--control-height: 40px}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;color:var(--ink);background:var(--bg);font-size:14.5px;line-height:1.5}.app{display:flex;flex-direction:column;min-height:100vh}a{color:var(--brand)}.header{background:var(--brand-ink);color:#fff;padding:14px 28px;display:flex;align-items:center;flex-wrap:wrap;gap:14px}.header .brand{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:650;letter-spacing:.2px;white-space:nowrap;color:#fff;text-decoration:none}.brand-logo{height:24px;width:auto;display:block}.header .brand:hover{opacity:.88}.header .sub{flex:1 1 280px;min-width:0;font-size:12.5px;opacity:.85}.layout{display:flex;flex:1;min-width:0;min-height:0}.sidebar{width:250px;background:var(--card);border-right:1px solid var(--line);padding:18px 14px;flex-shrink:0;display:flex;flex-direction:column;min-height:0}.sidebar h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:0 0 10px 4px;display:flex;align-items:center;gap:8px}.sidebar h2 .count{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:0 8px;font-size:10.5px;letter-spacing:0;color:var(--muted)}.sidebar-filter{width:100%;padding:7px 10px;margin-bottom:10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;background:#fff;color:var(--ink)}.sidebar-filter:focus{outline:none;border-color:var(--brand)}.project-list{flex:1;min-height:0;overflow-y:auto;margin:0 -4px;padding:0 4px 4px}.group-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:10px 4px 5px}div:first-child>.group-label{margin-top:2px}.project-item{display:block;width:100%;text-align:left;padding:9px 12px;margin-bottom:5px;border:1px solid transparent;border-radius:8px;background:none;cursor:pointer;font:inherit;color:var(--ink)}.project-item:hover{background:var(--bg)}.project-item.active{background:var(--accent-soft);border-color:var(--brand);font-weight:600}.project-item .project-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-item .date{display:block;font-size:11.5px;color:var(--muted);font-weight:400}.project-create{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.project-create>button{width:100%}.main{flex:1;padding:22px 28px;overflow-y:auto;min-width:0}.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin-bottom:16px;box-shadow:0 1px 2px #1018280a}.card h3{margin:0 0 4px;font-size:15px}.card .hint{color:var(--muted);font-size:12.5px;margin:0 0 12px}.step-badge{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;font-weight:700;margin-right:8px;vertical-align:-3px}button{white-space:nowrap}button.primary{background:var(--brand);color:#fff;border:none;min-height:var(--control-height);display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;line-height:1.2;transition:background-color .15s ease}button.primary:hover{background:var(--brand-dark)}button.primary:disabled{background:#c9ccd1;cursor:not-allowed}a.google-btn{background:var(--brand);color:#fff;border:none;min-height:var(--control-height);display:flex;align-items:center;justify-content:center;padding:0 18px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;line-height:1.2;text-decoration:none;width:100%;box-sizing:border-box}a.google-btn:hover{background:var(--brand-dark)}button.ghost,a.ghost{background:none;border:1px solid var(--line);color:var(--ink);min-height:var(--control-height);display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:8px;font:inherit;cursor:pointer;line-height:1.2;text-decoration:none;transition:border-color .15s ease,color .15s ease}button.ghost:hover,a.ghost:hover{border-color:var(--brand);color:var(--brand)}button.linkish{background:none;border:none;color:var(--brand);font:inherit;cursor:pointer;padding:0;text-decoration:underline}input[type=text],input[type=email],input[type=password],textarea,select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}input[type=text],input[type=email],input[type=password],select{height:var(--control-height)}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid rgba(51,155,152,.5);outline-offset:2px}input[type=file]{display:block;max-width:100%;margin-top:6px;font-size:13px;color:var(--muted)}input[type=file]::file-selector-button{background:#fff;border:1px solid var(--line);color:var(--ink);padding:7px 14px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer;margin-right:10px}input[type=file]::file-selector-button:hover{border-color:var(--brand);color:var(--brand)}.row>button{align-self:flex-end;margin-bottom:1px}textarea{resize:vertical}label.field{display:block;margin-bottom:10px;font-size:13px;font-weight:600}label.field>*{margin-top:4px;font-weight:400}.field-hint{margin-top:0;font-weight:400;color:var(--muted);font-size:12px}.row{display:flex;gap:14px;flex-wrap:wrap}.row>*{min-width:0}.row>.grow{flex:1;min-width:min(220px,100%)}.language-control{min-width:170px}.model-control{min-width:260px}.run-settings{display:grid;grid-template-columns:minmax(160px,230px) minmax(320px,720px) max-content;justify-content:start;gap:14px;align-items:end}.run-settings .field{margin-bottom:0}.run-button{min-width:180px;height:var(--control-height)}.construct-row{display:grid;grid-template-columns:minmax(320px,1120px) max-content;justify-content:start;align-items:end;gap:14px}.results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}.result-actions{justify-content:flex-end}.result-actions a{display:inline-flex;text-decoration:none}.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:600}.pill.completed{background:#e6f4ea;color:var(--ok)}.pill.running{background:#fff3e0;color:#b45309}.pill.queued{background:#eef2f7;color:var(--muted)}.pill.failed{background:#fdecea;color:var(--err)}.progress-track{background:var(--line);border-radius:999px;height:7px;overflow:hidden}.progress-fill{background:var(--accent);height:100%;transition:width .4s ease}.warnings{background:#fff8e6;border:1px solid #f2dfa8;color:#7a5b00;border-radius:8px;padding:10px 14px}.error-banner{background:#fdecea;color:var(--err);border:1px solid #f5c6c0;padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:13px}.table-wrap{width:100%;overflow-x:auto}table.docs{width:100%;border-collapse:collapse;font-size:13px}table.docs th{text-align:left;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;padding:6px 8px;border-bottom:1px solid var(--line)}table.docs td{padding:7px 8px;border-bottom:1px solid var(--bg);vertical-align:top;overflow-wrap:anywhere}table.docs td.score{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}table.docs tbody tr:hover td{background:var(--bg)}.stat-grid{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:4px}.stat{flex:1;min-width:110px;background:var(--bg);border-radius:8px;padding:10px 14px}.stat .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}.stat .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.item-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}.item-bar-label{flex:1;font-size:12.5px;min-width:0;overflow-wrap:anywhere}.item-bar-track{flex:1.2;background:var(--bg);border-radius:999px;height:10px}.item-bar-fill{background:var(--accent);opacity:.85;height:100%;border-radius:999px}.item-bar-val{width:52px;text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600}.construct-items{margin:8px 0 0;padding-left:20px;color:var(--muted);font-size:12.5px}.construct-items li{margin-bottom:2px}.meta-footer{font-size:12px;color:var(--muted);background:var(--bg);border-radius:8px;padding:10px 14px;margin-top:14px;font-variant-numeric:tabular-nums}.meta-footer code{font-size:11.5px}.muted{color:var(--muted)}.small{font-size:12.5px}.mt{margin-top:12px}.header-nav{margin-left:auto;display:flex;align-items:center;gap:14px;color:#fff;flex-wrap:wrap}.header-link{background:none;border:none;padding:0;color:#ffffffd1;font:inherit;font-size:13px;cursor:pointer;text-decoration:none;transition:color .15s ease}.header-link:hover{color:#fff;text-decoration:underline}.header-link.current{color:#fff;font-weight:600}.header-btn{background:#ffffff1f;color:#fff;border:1px solid rgba(255,255,255,.45);padding:5px 14px;border-radius:7px;font:inherit;font-size:13px;cursor:pointer;text-decoration:none;transition:background-color .15s ease}.header-btn:hover{background:#ffffff38}.project-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}.project-title{font-size:17px;font-weight:650;margin-right:10px}button.danger{color:var(--err);border-color:#f0c4be}button.danger:hover{color:var(--err);border-color:var(--err)}button.danger-solid{background:var(--err)}button.danger-solid:hover{background:#93261b}button.danger-solid:disabled{background:#c9ccd1}.picker{position:relative}.picker-display{width:100%;display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;color:var(--ink);cursor:pointer;text-align:left}.picker-display:hover{border-color:var(--brand)}.picker-display .picker-caret{margin-left:auto;color:var(--muted);font-size:11px}.picker-search{width:100%;padding:8px 12px;border:1px solid var(--brand);border-radius:8px;font:inherit;background:#fff}.picker-search:focus{outline:none;box-shadow:0 0 0 3px #339b9826}.picker-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:50;width:100%;max-width:640px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px #0000002e;max-height:340px;overflow-y:auto;padding:4px 0 6px}.picker-group{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:8px 12px 3px;position:sticky;top:0;background:var(--card)}.picker-option{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 12px;cursor:pointer;font-size:13.5px}.picker-option:hover,.picker-option.active{background:var(--accent-soft)}.picker-option.selected .picker-name{font-weight:650;color:var(--brand)}.picker-name{min-width:0}.picker-meta{flex-shrink:0;font-size:11.5px;color:var(--muted);white-space:nowrap}.picker-empty{padding:12px;margin:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#14161a73;display:flex;align-items:center;justify-content:center;z-index:40;padding:16px}.modal{background:var(--card);border-radius:12px;padding:26px 28px 24px;width:100%;max-width:460px;box-shadow:0 12px 40px #0000002e}.modal h3{margin:0 0 8px;font-size:18px}.modal .hint{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 4px}.modal form.mt{margin-top:18px}.modal label.field{margin-bottom:16px}.modal label.field:last-of-type{margin-bottom:20px}.modal .row{gap:10px}.modal .row>.primary{flex:1}.modal p.small.muted.mt{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6}@media (max-width: 820px){body{font-size:14px}.header{padding:12px 16px;align-items:flex-start;gap:2px 12px}.header .brand{font-size:16px}.header-nav{gap:10px 14px}.header .sub{flex:1 1 210px;font-size:12px;line-height:1.35}.layout{display:block}.sidebar{width:100%;border-right:0;border-bottom:1px solid var(--line);padding:14px}.project-list{max-height:220px;margin-right:0;flex:none}.project-create{border-top:0}.main{width:100%;padding:16px 14px 28px;overflow:visible}.card{padding:16px;margin-bottom:14px}.row,.run-settings,.construct-row,.results-toolbar,.result-actions{gap:10px}.row,.results-toolbar,.result-actions{flex-direction:column;align-items:stretch}.run-settings,.construct-row{grid-template-columns:1fr}.row>.grow,.construct-row>.grow,.language-control,.model-control{width:100%;min-width:0}.main .row>button,.main .row>a,.main .row>a>button,.results-toolbar>button{align-self:stretch;margin-bottom:0;width:100%}.run-button{width:100%;min-width:0}.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.stat{min-width:0}.item-bar-row{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:6px 10px}.item-bar-track{grid-column:1 / -1;width:100%}.item-bar-val{width:auto}table.docs{min-width:520px}}@media (max-width: 460px){.header .sub{flex-basis:100%}.stat-grid{grid-template-columns:1fr}}.empty-state{text-align:center;max-width:560px;margin:48px auto 0;padding:36px 28px 28px}.empty-state h3{font-size:17px}.empty-state .hint{font-size:13px}.empty-actions{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;margin:18px 0 16px}.ghost-link{color:var(--brand);font-weight:600;text-decoration:none}.ghost-link:hover{text-decoration:underline}.welcome{padding-top:1.2rem}.welcome-hero{padding:26px 28px}.welcome-hero h2{margin:0 0 .6rem;font-size:1.5rem}.welcome-hero p{max-width:62ch}.welcome-cta{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin:1.1rem 0 .6rem}.welcome-cta .ghost-link{font-size:.95rem}.welcome-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.welcome-step h3{margin:.2rem 0 .3rem}.step-n{width:1.9rem;height:1.9rem;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}@media (max-width: 700px){.welcome-steps{grid-template-columns:1fr}}.construct-selected{margin-top:8px;border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:#fff}.construct-selected summary{cursor:pointer;display:flex;align-items:baseline;gap:8px;list-style-position:inside}.construct-selected-name{font-weight:600;font-size:13.5px}.construct-remove{margin-left:auto;flex-shrink:0}.construct-results summary{cursor:pointer}.construct-results summary .picker-meta{margin-left:6px}.construct-results h4{margin:14px 0 4px;font-size:13.5px}
backend/static/assets/index-CLMW4NjF.css DELETED
@@ -1 +0,0 @@
1
- :root{--maroon: #7a1f3d;--maroon-dark: #5e1730;--ink: #1d2129;--muted: #667085;--line: #e5e7eb;--bg: #f7f7f8;--card: #ffffff;--ok: #157f3d;--err: #b42318;--accent-soft: #f6ebef;--control-height: 40px}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;color:var(--ink);background:var(--bg);font-size:14.5px;line-height:1.5}.app{display:flex;flex-direction:column;min-height:100vh}a{color:var(--maroon)}.header{background:var(--maroon);color:#fff;padding:14px 28px;display:flex;align-items:center;flex-wrap:wrap;gap:14px}.header .brand{flex:0 0 auto;font-size:17px;font-weight:650;letter-spacing:.2px;white-space:nowrap;color:#fff;text-decoration:none}.header .brand:hover{opacity:.88}.header .sub{flex:1 1 280px;min-width:0;font-size:12.5px;opacity:.85}.layout{display:flex;flex:1;min-width:0;min-height:0}.sidebar{width:250px;background:var(--card);border-right:1px solid var(--line);padding:18px 14px;flex-shrink:0;display:flex;flex-direction:column;min-height:0}.sidebar h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:0 0 10px 4px;display:flex;align-items:center;gap:8px}.sidebar h2 .count{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:0 8px;font-size:10.5px;letter-spacing:0;color:var(--muted)}.sidebar-filter{width:100%;padding:7px 10px;margin-bottom:10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;background:#fff;color:var(--ink)}.sidebar-filter:focus{outline:none;border-color:var(--maroon)}.project-list{flex:1;min-height:0;overflow-y:auto;margin:0 -4px;padding:0 4px 4px}.group-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:10px 4px 5px}div:first-child>.group-label{margin-top:2px}.project-item{display:block;width:100%;text-align:left;padding:9px 12px;margin-bottom:5px;border:1px solid transparent;border-radius:8px;background:none;cursor:pointer;font:inherit;color:var(--ink)}.project-item:hover{background:var(--bg)}.project-item.active{background:var(--accent-soft);border-color:var(--maroon);font-weight:600}.project-item .project-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-item .date{display:block;font-size:11.5px;color:var(--muted);font-weight:400}.project-create{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.project-create>button{width:100%}.main{flex:1;padding:22px 28px;overflow-y:auto;min-width:0}.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin-bottom:16px;box-shadow:0 1px 2px #1018280a}.card h3{margin:0 0 4px;font-size:15px}.card .hint{color:var(--muted);font-size:12.5px;margin:0 0 12px}.step-badge{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;background:var(--maroon);color:#fff;font-size:12px;font-weight:700;margin-right:8px;vertical-align:-3px}button{white-space:nowrap}button.primary{background:var(--maroon);color:#fff;border:none;min-height:var(--control-height);display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;line-height:1.2;transition:background-color .15s ease}button.primary:hover{background:var(--maroon-dark)}button.primary:disabled{background:#c9ccd1;cursor:not-allowed}a.google-btn{background:var(--maroon);color:#fff;border:none;min-height:var(--control-height);display:flex;align-items:center;justify-content:center;padding:0 18px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;line-height:1.2;text-decoration:none;width:100%;box-sizing:border-box}a.google-btn:hover{background:var(--maroon-dark)}button.ghost,a.ghost{background:none;border:1px solid var(--line);color:var(--ink);min-height:var(--control-height);display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:8px;font:inherit;cursor:pointer;line-height:1.2;text-decoration:none;transition:border-color .15s ease,color .15s ease}button.ghost:hover,a.ghost:hover{border-color:var(--maroon);color:var(--maroon)}button.linkish{background:none;border:none;color:var(--maroon);font:inherit;cursor:pointer;padding:0;text-decoration:underline}input[type=text],input[type=email],input[type=password],textarea,select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}input[type=text],input[type=email],input[type=password],select{height:var(--control-height)}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid rgba(122,31,61,.38);outline-offset:2px}input[type=file]{display:block;max-width:100%;margin-top:6px;font-size:13px;color:var(--muted)}input[type=file]::file-selector-button{background:#fff;border:1px solid var(--line);color:var(--ink);padding:7px 14px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer;margin-right:10px}input[type=file]::file-selector-button:hover{border-color:var(--maroon);color:var(--maroon)}.row>button{align-self:flex-end;margin-bottom:1px}textarea{resize:vertical}label.field{display:block;margin-bottom:10px;font-size:13px;font-weight:600}label.field>*{margin-top:4px;font-weight:400}.field-hint{margin-top:0;font-weight:400;color:var(--muted);font-size:12px}.row{display:flex;gap:14px;flex-wrap:wrap}.row>*{min-width:0}.row>.grow{flex:1;min-width:min(220px,100%)}.language-control{min-width:170px}.model-control{min-width:260px}.run-settings{display:grid;grid-template-columns:minmax(160px,230px) minmax(320px,720px) max-content;justify-content:start;gap:14px;align-items:end}.run-settings .field{margin-bottom:0}.run-button{min-width:180px;height:var(--control-height)}.construct-row{display:grid;grid-template-columns:minmax(320px,1120px) max-content;justify-content:start;align-items:end;gap:14px}.results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}.result-actions{justify-content:flex-end}.result-actions a{display:inline-flex;text-decoration:none}.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:600}.pill.completed{background:#e6f4ea;color:var(--ok)}.pill.running{background:#fff3e0;color:#b45309}.pill.queued{background:#eef2f7;color:var(--muted)}.pill.failed{background:#fdecea;color:var(--err)}.progress-track{background:var(--line);border-radius:999px;height:7px;overflow:hidden}.progress-fill{background:var(--maroon);height:100%;transition:width .4s ease}.warnings{background:#fff8e6;border:1px solid #f2dfa8;color:#7a5b00;border-radius:8px;padding:10px 14px}.error-banner{background:#fdecea;color:var(--err);border:1px solid #f5c6c0;padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:13px}.table-wrap{width:100%;overflow-x:auto}table.docs{width:100%;border-collapse:collapse;font-size:13px}table.docs th{text-align:left;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;padding:6px 8px;border-bottom:1px solid var(--line)}table.docs td{padding:7px 8px;border-bottom:1px solid var(--bg);vertical-align:top;overflow-wrap:anywhere}table.docs td.score{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}table.docs tbody tr:hover td{background:var(--bg)}.stat-grid{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:4px}.stat{flex:1;min-width:110px;background:var(--bg);border-radius:8px;padding:10px 14px}.stat .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}.stat .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.item-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}.item-bar-label{flex:1;font-size:12.5px;min-width:0;overflow-wrap:anywhere}.item-bar-track{flex:1.2;background:var(--bg);border-radius:999px;height:10px}.item-bar-fill{background:var(--maroon);opacity:.85;height:100%;border-radius:999px}.item-bar-val{width:52px;text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600}.construct-items{margin:8px 0 0;padding-left:20px;color:var(--muted);font-size:12.5px}.construct-items li{margin-bottom:2px}.meta-footer{font-size:12px;color:var(--muted);background:var(--bg);border-radius:8px;padding:10px 14px;margin-top:14px;font-variant-numeric:tabular-nums}.meta-footer code{font-size:11.5px}.muted{color:var(--muted)}.small{font-size:12.5px}.mt{margin-top:12px}.header-nav{margin-left:auto;display:flex;align-items:center;gap:14px;color:#fff;flex-wrap:wrap}.header-link{background:none;border:none;padding:0;color:#ffffffd1;font:inherit;font-size:13px;cursor:pointer;text-decoration:none;transition:color .15s ease}.header-link:hover{color:#fff;text-decoration:underline}.header-link.current{color:#fff;font-weight:600}.header-btn{background:#ffffff1f;color:#fff;border:1px solid rgba(255,255,255,.45);padding:5px 14px;border-radius:7px;font:inherit;font-size:13px;cursor:pointer;text-decoration:none;transition:background-color .15s ease}.header-btn:hover{background:#ffffff38}.project-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}.project-title{font-size:17px;font-weight:650;margin-right:10px}button.danger{color:var(--err);border-color:#f0c4be}button.danger:hover{color:var(--err);border-color:var(--err)}button.danger-solid{background:var(--err)}button.danger-solid:hover{background:#93261b}button.danger-solid:disabled{background:#c9ccd1}.picker{position:relative}.picker-display{width:100%;display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;color:var(--ink);cursor:pointer;text-align:left}.picker-display:hover{border-color:var(--maroon)}.picker-display .picker-caret{margin-left:auto;color:var(--muted);font-size:11px}.picker-search{width:100%;padding:8px 12px;border:1px solid var(--maroon);border-radius:8px;font:inherit;background:#fff}.picker-search:focus{outline:none;box-shadow:0 0 0 3px #7a1f3d1f}.picker-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:50;width:100%;max-width:640px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px #0000002e;max-height:340px;overflow-y:auto;padding:4px 0 6px}.picker-group{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:8px 12px 3px;position:sticky;top:0;background:var(--card)}.picker-option{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 12px;cursor:pointer;font-size:13.5px}.picker-option:hover,.picker-option.active{background:var(--accent-soft)}.picker-option.selected .picker-name{font-weight:650;color:var(--maroon)}.picker-name{min-width:0}.picker-meta{flex-shrink:0;font-size:11.5px;color:var(--muted);white-space:nowrap}.picker-empty{padding:12px;margin:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#14161a73;display:flex;align-items:center;justify-content:center;z-index:40;padding:16px}.modal{background:var(--card);border-radius:12px;padding:26px 28px 24px;width:100%;max-width:460px;box-shadow:0 12px 40px #0000002e}.modal h3{margin:0 0 8px;font-size:18px}.modal .hint{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 4px}.modal form.mt{margin-top:18px}.modal label.field{margin-bottom:16px}.modal label.field:last-of-type{margin-bottom:20px}.modal .row{gap:10px}.modal .row>.primary{flex:1}.modal p.small.muted.mt{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6}@media (max-width: 820px){body{font-size:14px}.header{padding:12px 16px;align-items:flex-start;gap:2px 12px}.header .brand{font-size:16px}.header-nav{gap:10px 14px}.header .sub{flex:1 1 210px;font-size:12px;line-height:1.35}.layout{display:block}.sidebar{width:100%;border-right:0;border-bottom:1px solid var(--line);padding:14px}.project-list{max-height:220px;margin-right:0;flex:none}.project-create{border-top:0}.main{width:100%;padding:16px 14px 28px;overflow:visible}.card{padding:16px;margin-bottom:14px}.row,.run-settings,.construct-row,.results-toolbar,.result-actions{gap:10px}.row,.results-toolbar,.result-actions{flex-direction:column;align-items:stretch}.run-settings,.construct-row{grid-template-columns:1fr}.row>.grow,.construct-row>.grow,.language-control,.model-control{width:100%;min-width:0}.main .row>button,.main .row>a,.main .row>a>button,.results-toolbar>button{align-self:stretch;margin-bottom:0;width:100%}.run-button{width:100%;min-width:0}.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.stat{min-width:0}.item-bar-row{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:6px 10px}.item-bar-track{grid-column:1 / -1;width:100%}.item-bar-val{width:auto}table.docs{min-width:520px}}@media (max-width: 460px){.header .sub{flex-basis:100%}.stat-grid{grid-template-columns:1fr}}.empty-state{text-align:center;max-width:560px;margin:48px auto 0;padding:36px 28px 28px}.empty-state h3{font-size:17px}.empty-state .hint{font-size:13px}.empty-actions{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;margin:18px 0 16px}.ghost-link{color:var(--maroon);font-weight:600;text-decoration:none}.ghost-link:hover{text-decoration:underline}.welcome{padding-top:1.2rem}.welcome-hero{padding:26px 28px}.welcome-hero h2{margin:0 0 .6rem;font-size:1.5rem}.welcome-hero p{max-width:62ch}.welcome-cta{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin:1.1rem 0 .6rem}.welcome-cta .ghost-link{font-size:.95rem}.welcome-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.welcome-step h3{margin:.2rem 0 .3rem}.step-n{width:1.9rem;height:1.9rem;border-radius:50%;background:var(--maroon);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}@media (max-width: 700px){.welcome-steps{grid-template-columns:1fr}}.construct-selected{margin-top:8px;border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:#fff}.construct-selected summary{cursor:pointer;display:flex;align-items:baseline;gap:8px;list-style-position:inside}.construct-selected-name{font-weight:600;font-size:13.5px}.construct-remove{margin-left:auto;flex-shrink:0}.construct-results summary{cursor:pointer}.construct-results summary .picker-meta{margin-left:6px}.construct-results h4{margin:14px 0 4px;font-size:13.5px}
 
 
backend/static/assets/{index-DEl4g2Fg.js → index-U6eqlx5K.js} RENAMED
The diff for this file is too large to render. See raw diff
 
backend/static/ccr-logo-white.svg ADDED
backend/static/ccr-logo.svg ADDED
backend/static/index.html CHANGED
@@ -3,9 +3,10 @@
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
6
  <title>CCR Platform - Contextualized Construct Representations</title>
7
- <script type="module" crossorigin src="/assets/index-DEl4g2Fg.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-CLMW4NjF.css">
9
  </head>
10
  <body>
11
  <div id="root"></div>
 
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <link rel="icon" type="image/svg+xml" href="/ccr-logo.svg" />
7
  <title>CCR Platform - Contextualized Construct Representations</title>
8
+ <script type="module" crossorigin src="/assets/index-U6eqlx5K.js"></script>
9
+ <link rel="stylesheet" crossorigin href="/assets/index-6wlQqoEv.css">
10
  </head>
11
  <body>
12
  <div id="root"></div>
frontend/index.html CHANGED
@@ -3,6 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
6
  <title>CCR Platform - Contextualized Construct Representations</title>
7
  </head>
8
  <body>
 
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <link rel="icon" type="image/svg+xml" href="/ccr-logo.svg" />
7
  <title>CCR Platform - Contextualized Construct Representations</title>
8
  </head>
9
  <body>
frontend/public/ccr-logo-white.svg ADDED
frontend/public/ccr-logo.svg ADDED
frontend/src/AdminPage.jsx CHANGED
@@ -137,7 +137,7 @@ export default function AdminPage({ auth }) {
137
  <>
138
  {error && <div className="error-banner" onClick={() => setError("")}>{error}</div>}
139
  {notice && (
140
- <div className="card" style={{ borderColor: "var(--maroon)" }}>
141
  <p style={{ overflowWrap: "anywhere" }}><b>{notice}</b></p>
142
  </div>
143
  )}
 
137
  <>
138
  {error && <div className="error-banner" onClick={() => setError("")}>{error}</div>}
139
  {notice && (
140
+ <div className="card" style={{ borderColor: "var(--brand)" }}>
141
  <p style={{ overflowWrap: "anywhere" }}><b>{notice}</b></p>
142
  </div>
143
  )}
frontend/src/App.jsx CHANGED
@@ -195,10 +195,11 @@ export default function App() {
195
  }
196
  }}
197
  >
198
- CCR Platform
 
199
  </a>
200
  <span className="sub">
201
- Contextualized Construct Representations · theory-driven psychological text analysis
202
  </span>
203
  <nav className="header-nav">
204
  {IS_ADMIN_PATH ? (
@@ -212,7 +213,11 @@ export default function App() {
212
  </button>
213
  )}
214
  <a className="header-link" href="/guide">Guide</a>
215
- <a className="header-link" href="/product">How it works</a>
 
 
 
 
216
  {auth?.signed_in ? (
217
  <>
218
  <span className="small">Hi, {auth.name}</span>
 
195
  }
196
  }}
197
  >
198
+ <img className="brand-logo" src="/ccr-logo-white.svg" alt="CCR" />
199
+ <span>CCR Platform</span>
200
  </a>
201
  <span className="sub">
202
+ Contextualized Construct Representations · Culture &amp; Morality Lab, UMass Amherst
203
  </span>
204
  <nav className="header-nav">
205
  {IS_ADMIN_PATH ? (
 
213
  </button>
214
  )}
215
  <a className="header-link" href="/guide">Guide</a>
216
+ {/* /product is lab-internal; the server enforces the gate, the
217
+ header just doesn't advertise it to everyone else. */}
218
+ {["lab", "maintainer", "pi"].includes(auth?.role) && (
219
+ <a className="header-link" href="/product">How it works</a>
220
+ )}
221
  {auth?.signed_in ? (
222
  <>
223
  <span className="small">Hi, {auth.name}</span>
frontend/src/ResultsView.jsx CHANGED
@@ -203,8 +203,9 @@ function CorrelationCard({ correlations }) {
203
  function cellStyle(r, isDiag) {
204
  if (isDiag || r == null) return { color: "#98a2b3" };
205
  const alpha = Math.min(0.85, Math.abs(r));
 
206
  return {
207
- background: r >= 0 ? `rgba(122, 31, 61, ${alpha})` : `rgba(31, 77, 122, ${alpha})`,
208
  color: Math.abs(r) > 0.5 ? "#fff" : undefined,
209
  textAlign: "center",
210
  };
@@ -340,7 +341,7 @@ function Histogram({ histogram }) {
340
  width={Math.max(1, barW - 3)}
341
  height={h}
342
  rx="2"
343
- fill="#7a1f3d"
344
  opacity="0.85"
345
  >
346
  <title>
 
203
  function cellStyle(r, isDiag) {
204
  if (isDiag || r == null) return { color: "#98a2b3" };
205
  const alpha = Math.min(0.85, Math.abs(r));
206
+ // Diverging pair: brand teal for positive, copper for negative.
207
  return {
208
+ background: r >= 0 ? `rgba(38, 115, 111, ${alpha})` : `rgba(178, 96, 43, ${alpha})`,
209
  color: Math.abs(r) > 0.5 ? "#fff" : undefined,
210
  textAlign: "center",
211
  };
 
341
  width={Math.max(1, barW - 3)}
342
  height={h}
343
  rx="2"
344
+ fill="#339b98"
345
  opacity="0.85"
346
  >
347
  <title>
frontend/src/WelcomePage.jsx CHANGED
@@ -39,13 +39,16 @@ export default function WelcomePage({ onEnter }) {
39
  <button className="primary" onClick={onEnter}>
40
  Open the dashboard →
41
  </button>
 
 
 
42
  <a className="ghost-link" href="/guide">How to use &amp; test it</a>
43
- <a className="ghost-link" href="/product">How it works under the hood</a>
44
  </div>
45
  <p className="hint">
46
  No account needed to try it - anonymous visitors get a few runs a day,
47
  and uploads are deleted right after their analysis. Accounts are free
48
- and keep your projects.
 
49
  </p>
50
  </section>
51
 
 
39
  <button className="primary" onClick={onEnter}>
40
  Open the dashboard →
41
  </button>
42
+ {/* /product (architecture docs) is lab-internal now; the public
43
+ landing only advertises the guide. Lab members reach it from
44
+ the header. */}
45
  <a className="ghost-link" href="/guide">How to use &amp; test it</a>
 
46
  </div>
47
  <p className="hint">
48
  No account needed to try it - anonymous visitors get a few runs a day,
49
  and uploads are deleted right after their analysis. Accounts are free
50
+ and keep your projects. Built and maintained by the{" "}
51
+ <b>Culture &amp; Morality Lab</b> at UMass Amherst.
52
  </p>
53
  </section>
54
 
frontend/src/styles.css CHANGED
@@ -1,6 +1,12 @@
1
  :root {
2
- --maroon: #7a1f3d;
3
- --maroon-dark: #5e1730;
 
 
 
 
 
 
4
  --ink: #1d2129;
5
  --muted: #667085;
6
  --line: #e5e7eb;
@@ -8,7 +14,7 @@
8
  --card: #ffffff;
9
  --ok: #157f3d;
10
  --err: #b42318;
11
- --accent-soft: #f6ebef;
12
  --control-height: 40px;
13
  }
14
 
@@ -25,11 +31,11 @@ body {
25
 
26
  .app { display: flex; flex-direction: column; min-height: 100vh; }
27
 
28
- a { color: var(--maroon); }
29
 
30
  /* ---------- header ---------- */
31
  .header {
32
- background: var(--maroon);
33
  color: #fff;
34
  padding: 14px 28px;
35
  display: flex;
@@ -39,6 +45,9 @@ a { color: var(--maroon); }
39
  }
40
  .header .brand {
41
  flex: 0 0 auto;
 
 
 
42
  font-size: 17px;
43
  font-weight: 650;
44
  letter-spacing: 0.2px;
@@ -46,6 +55,7 @@ a { color: var(--maroon); }
46
  color: #fff;
47
  text-decoration: none;
48
  }
 
49
  .header .brand:hover { opacity: 0.88; }
50
  .header .sub { flex: 1 1 280px; min-width: 0; font-size: 12.5px; opacity: 0.85; }
51
 
@@ -76,7 +86,7 @@ a { color: var(--maroon); }
76
  border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px;
77
  background: #fff; color: var(--ink);
78
  }
79
- .sidebar-filter:focus { outline: none; border-color: var(--maroon); }
80
  .project-list {
81
  flex: 1;
82
  min-height: 0;
@@ -96,7 +106,7 @@ div:first-child > .group-label { margin-top: 2px; }
96
  background: none; cursor: pointer; font: inherit; color: var(--ink);
97
  }
98
  .project-item:hover { background: var(--bg); }
99
- .project-item.active { background: var(--accent-soft); border-color: var(--maroon); font-weight: 600; }
100
  .project-item .project-name {
101
  display: block;
102
  overflow: hidden;
@@ -125,7 +135,7 @@ div:first-child > .group-label { margin-top: 2px; }
125
  .step-badge {
126
  display: inline-flex; align-items: center; justify-content: center;
127
  width: 21px; height: 21px; border-radius: 50%;
128
- background: var(--maroon); color: #fff; font-size: 12px; font-weight: 700;
129
  margin-right: 8px; vertical-align: -3px;
130
  }
131
 
@@ -133,7 +143,7 @@ div:first-child > .group-label { margin-top: 2px; }
133
  button { white-space: nowrap; }
134
 
135
  button.primary {
136
- background: var(--maroon); color: #fff; border: none;
137
  min-height: var(--control-height);
138
  display: inline-flex;
139
  align-items: center;
@@ -142,17 +152,17 @@ button.primary {
142
  line-height: 1.2;
143
  transition: background-color 0.15s ease;
144
  }
145
- button.primary:hover { background: var(--maroon-dark); }
146
  button.primary:disabled { background: #c9ccd1; cursor: not-allowed; }
147
  a.google-btn {
148
- background: var(--maroon); color: #fff; border: none;
149
  min-height: var(--control-height);
150
  display: flex; align-items: center; justify-content: center;
151
  padding: 0 18px; border-radius: 8px; font: inherit; font-weight: 600;
152
  cursor: pointer; line-height: 1.2; text-decoration: none; width: 100%;
153
  box-sizing: border-box;
154
  }
155
- a.google-btn:hover { background: var(--maroon-dark); }
156
  button.ghost, a.ghost {
157
  background: none; border: 1px solid var(--line); color: var(--ink);
158
  min-height: var(--control-height);
@@ -163,9 +173,9 @@ button.ghost, a.ghost {
163
  line-height: 1.2; text-decoration: none;
164
  transition: border-color 0.15s ease, color 0.15s ease;
165
  }
166
- button.ghost:hover, a.ghost:hover { border-color: var(--maroon); color: var(--maroon); }
167
  button.linkish {
168
- background: none; border: none; color: var(--maroon);
169
  font: inherit; cursor: pointer; padding: 0; text-decoration: underline;
170
  }
171
 
@@ -179,7 +189,7 @@ button:focus-visible,
179
  input:focus-visible,
180
  textarea:focus-visible,
181
  select:focus-visible {
182
- outline: 2px solid rgba(122, 31, 61, 0.38);
183
  outline-offset: 2px;
184
  }
185
 
@@ -194,7 +204,7 @@ input[type="file"]::file-selector-button {
194
  cursor: pointer; margin-right: 10px;
195
  }
196
  input[type="file"]::file-selector-button:hover {
197
- border-color: var(--maroon); color: var(--maroon);
198
  }
199
 
200
  /* Buttons inside a row of labeled fields align to the controls' baseline
@@ -251,7 +261,7 @@ label.field > * { margin-top: 4px; font-weight: 400; }
251
  .pill.failed { background: #fdecea; color: var(--err); }
252
 
253
  .progress-track { background: var(--line); border-radius: 999px; height: 7px; overflow: hidden; }
254
- .progress-fill { background: var(--maroon); height: 100%; transition: width 0.4s ease; }
255
 
256
  .warnings {
257
  background: #fff8e6; border: 1px solid #f2dfa8; color: #7a5b00;
@@ -287,7 +297,7 @@ table.docs tbody tr:hover td { background: var(--bg); }
287
  .item-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
288
  .item-bar-label { flex: 1; font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
289
  .item-bar-track { flex: 1.2; background: var(--bg); border-radius: 999px; height: 10px; }
290
- .item-bar-fill { background: var(--maroon); opacity: 0.85; height: 100%; border-radius: 999px; }
291
  .item-bar-val { width: 52px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; }
292
 
293
  .construct-items { margin: 8px 0 0; padding-left: 20px; color: var(--muted); font-size: 12.5px; }
@@ -343,13 +353,13 @@ button.danger-solid:disabled { background: #c9ccd1; }
343
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
344
  background: #fff; font: inherit; color: var(--ink); cursor: pointer; text-align: left;
345
  }
346
- .picker-display:hover { border-color: var(--maroon); }
347
  .picker-display .picker-caret { margin-left: auto; color: var(--muted); font-size: 11px; }
348
  .picker-search {
349
- width: 100%; padding: 8px 12px; border: 1px solid var(--maroon);
350
  border-radius: 8px; font: inherit; background: #fff;
351
  }
352
- .picker-search:focus { outline: none; box-shadow: 0 0 0 3px rgba(122, 31, 61, 0.12); }
353
  .picker-panel {
354
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
355
  width: 100%; max-width: 640px;
@@ -367,7 +377,7 @@ button.danger-solid:disabled { background: #c9ccd1; }
367
  padding: 6px 12px; cursor: pointer; font-size: 13.5px;
368
  }
369
  .picker-option:hover, .picker-option.active { background: var(--accent-soft); }
370
- .picker-option.selected .picker-name { font-weight: 650; color: var(--maroon); }
371
  .picker-name { min-width: 0; }
372
  .picker-meta { flex-shrink: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
373
  .picker-empty { padding: 12px; margin: 0; }
@@ -502,7 +512,7 @@ button.danger-solid:disabled { background: #c9ccd1; }
502
  flex-wrap: wrap; margin: 18px 0 16px;
503
  }
504
 
505
- .ghost-link { color: var(--maroon); font-weight: 600; text-decoration: none; }
506
  .ghost-link:hover { text-decoration: underline; }
507
 
508
  /* ------------------------------------------------------------- welcome */
@@ -521,7 +531,7 @@ button.danger-solid:disabled { background: #c9ccd1; }
521
  .welcome-step h3 { margin: .2rem 0 .3rem; }
522
  .step-n {
523
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
524
- background: var(--maroon); color: #fff; font-weight: 700;
525
  display: flex; align-items: center; justify-content: center;
526
  }
527
  @media (max-width: 700px) {
 
1
  :root {
2
+ /* CAML (Culture & Morality Lab) palette, from the CCR logo: near-black
3
+ strokes + teal similarity dots. --brand is a darkened logo teal so text
4
+ and buttons keep AA contrast on white; --accent is the logo teal itself,
5
+ used for non-text fills (bars, dots, highlights). */
6
+ --brand-ink: #151515;
7
+ --brand: #26736f;
8
+ --brand-dark: #1d5a57;
9
+ --accent: #339b98;
10
  --ink: #1d2129;
11
  --muted: #667085;
12
  --line: #e5e7eb;
 
14
  --card: #ffffff;
15
  --ok: #157f3d;
16
  --err: #b42318;
17
+ --accent-soft: #e7f3f2;
18
  --control-height: 40px;
19
  }
20
 
 
31
 
32
  .app { display: flex; flex-direction: column; min-height: 100vh; }
33
 
34
+ a { color: var(--brand); }
35
 
36
  /* ---------- header ---------- */
37
  .header {
38
+ background: var(--brand-ink); /* the logo's stroke color */
39
  color: #fff;
40
  padding: 14px 28px;
41
  display: flex;
 
45
  }
46
  .header .brand {
47
  flex: 0 0 auto;
48
+ display: inline-flex;
49
+ align-items: center;
50
+ gap: 10px;
51
  font-size: 17px;
52
  font-weight: 650;
53
  letter-spacing: 0.2px;
 
55
  color: #fff;
56
  text-decoration: none;
57
  }
58
+ .brand-logo { height: 24px; width: auto; display: block; }
59
  .header .brand:hover { opacity: 0.88; }
60
  .header .sub { flex: 1 1 280px; min-width: 0; font-size: 12.5px; opacity: 0.85; }
61
 
 
86
  border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px;
87
  background: #fff; color: var(--ink);
88
  }
89
+ .sidebar-filter:focus { outline: none; border-color: var(--brand); }
90
  .project-list {
91
  flex: 1;
92
  min-height: 0;
 
106
  background: none; cursor: pointer; font: inherit; color: var(--ink);
107
  }
108
  .project-item:hover { background: var(--bg); }
109
+ .project-item.active { background: var(--accent-soft); border-color: var(--brand); font-weight: 600; }
110
  .project-item .project-name {
111
  display: block;
112
  overflow: hidden;
 
135
  .step-badge {
136
  display: inline-flex; align-items: center; justify-content: center;
137
  width: 21px; height: 21px; border-radius: 50%;
138
+ background: var(--brand); color: #fff; font-size: 12px; font-weight: 700;
139
  margin-right: 8px; vertical-align: -3px;
140
  }
141
 
 
143
  button { white-space: nowrap; }
144
 
145
  button.primary {
146
+ background: var(--brand); color: #fff; border: none;
147
  min-height: var(--control-height);
148
  display: inline-flex;
149
  align-items: center;
 
152
  line-height: 1.2;
153
  transition: background-color 0.15s ease;
154
  }
155
+ button.primary:hover { background: var(--brand-dark); }
156
  button.primary:disabled { background: #c9ccd1; cursor: not-allowed; }
157
  a.google-btn {
158
+ background: var(--brand); color: #fff; border: none;
159
  min-height: var(--control-height);
160
  display: flex; align-items: center; justify-content: center;
161
  padding: 0 18px; border-radius: 8px; font: inherit; font-weight: 600;
162
  cursor: pointer; line-height: 1.2; text-decoration: none; width: 100%;
163
  box-sizing: border-box;
164
  }
165
+ a.google-btn:hover { background: var(--brand-dark); }
166
  button.ghost, a.ghost {
167
  background: none; border: 1px solid var(--line); color: var(--ink);
168
  min-height: var(--control-height);
 
173
  line-height: 1.2; text-decoration: none;
174
  transition: border-color 0.15s ease, color 0.15s ease;
175
  }
176
+ button.ghost:hover, a.ghost:hover { border-color: var(--brand); color: var(--brand); }
177
  button.linkish {
178
+ background: none; border: none; color: var(--brand);
179
  font: inherit; cursor: pointer; padding: 0; text-decoration: underline;
180
  }
181
 
 
189
  input:focus-visible,
190
  textarea:focus-visible,
191
  select:focus-visible {
192
+ outline: 2px solid rgba(51, 155, 152, 0.5);
193
  outline-offset: 2px;
194
  }
195
 
 
204
  cursor: pointer; margin-right: 10px;
205
  }
206
  input[type="file"]::file-selector-button:hover {
207
+ border-color: var(--brand); color: var(--brand);
208
  }
209
 
210
  /* Buttons inside a row of labeled fields align to the controls' baseline
 
261
  .pill.failed { background: #fdecea; color: var(--err); }
262
 
263
  .progress-track { background: var(--line); border-radius: 999px; height: 7px; overflow: hidden; }
264
+ .progress-fill { background: var(--accent); height: 100%; transition: width 0.4s ease; }
265
 
266
  .warnings {
267
  background: #fff8e6; border: 1px solid #f2dfa8; color: #7a5b00;
 
297
  .item-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
298
  .item-bar-label { flex: 1; font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
299
  .item-bar-track { flex: 1.2; background: var(--bg); border-radius: 999px; height: 10px; }
300
+ .item-bar-fill { background: var(--accent); opacity: 0.85; height: 100%; border-radius: 999px; }
301
  .item-bar-val { width: 52px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; }
302
 
303
  .construct-items { margin: 8px 0 0; padding-left: 20px; color: var(--muted); font-size: 12.5px; }
 
353
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
354
  background: #fff; font: inherit; color: var(--ink); cursor: pointer; text-align: left;
355
  }
356
+ .picker-display:hover { border-color: var(--brand); }
357
  .picker-display .picker-caret { margin-left: auto; color: var(--muted); font-size: 11px; }
358
  .picker-search {
359
+ width: 100%; padding: 8px 12px; border: 1px solid var(--brand);
360
  border-radius: 8px; font: inherit; background: #fff;
361
  }
362
+ .picker-search:focus { outline: none; box-shadow: 0 0 0 3px rgba(51, 155, 152, 0.15); }
363
  .picker-panel {
364
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
365
  width: 100%; max-width: 640px;
 
377
  padding: 6px 12px; cursor: pointer; font-size: 13.5px;
378
  }
379
  .picker-option:hover, .picker-option.active { background: var(--accent-soft); }
380
+ .picker-option.selected .picker-name { font-weight: 650; color: var(--brand); }
381
  .picker-name { min-width: 0; }
382
  .picker-meta { flex-shrink: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
383
  .picker-empty { padding: 12px; margin: 0; }
 
512
  flex-wrap: wrap; margin: 18px 0 16px;
513
  }
514
 
515
+ .ghost-link { color: var(--brand); font-weight: 600; text-decoration: none; }
516
  .ghost-link:hover { text-decoration: underline; }
517
 
518
  /* ------------------------------------------------------------- welcome */
 
531
  .welcome-step h3 { margin: .2rem 0 .3rem; }
532
  .step-n {
533
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
534
+ background: var(--brand); color: #fff; font-weight: 700;
535
  display: flex; align-items: center; justify-content: center;
536
  }
537
  @media (max-width: 700px) {