Spaces:

Culture-and-Morality-Lab
/

ccr-platform

Running on CPU Upgrade

devaanand commited on Jul 22

Commit

54bd1cf

1 Parent(s): 8ed8f32

refactor: enhance AdminPage overview display and improve navigation

- Added a Stat component to better visualize user statistics on the AdminPage.
- Updated the overview section to use the new Stat component for a cleaner layout.
- Improved the header navigation in App component for better user experience.
- Changed the brand header to a link for easier navigation back to the dashboard.
- Enhanced styling for header elements and added hover effects for links.
- Updated empty state messaging and layout in the App component for clarity.
- Refined CSS styles for better visual consistency and responsiveness.

Files changed (9) hide show

backend/app/guide.html +29 -5
backend/app/product.html +29 -5
backend/static/assets/{index-qbWtJ-39.js → index-BLDcIlkB.js} +0 -0
backend/static/assets/index-DAnNOmJI.css +0 -1
backend/static/assets/index-DRwGDsQP.css +1 -0
backend/static/index.html +2 -2
frontend/src/AdminPage.jsx +31 -12
frontend/src/App.jsx +39 -12
frontend/src/styles.css +49 -13

backend/app/guide.html CHANGED Viewed

@@ -7,13 +7,13 @@
 <style>
   :root {
     --bg: #ffffff; --fg: #1a1a1a; --muted: #666; --border: #ddd;
-    --accent: #2456a6; --card: #f7f7f8; --amber-bg: #fff7e0; --amber-border: #e0b84d;
-    --code-bg: #f0f0f2;
   }
   @media (prefers-color-scheme: dark) {
     :root {
       --bg: #16181c; --fg: #e6e6e6; --muted: #9a9a9a; --border: #3a3d44;
-      --accent: #7aa7e8; --card: #1f2228; --amber-bg: #2e2810; --amber-border: #8a6d1f;
       --code-bg: #24272e;
     }
   }
@@ -22,6 +22,21 @@
     margin: 0; background: var(--bg); color: var(--fg);
     font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   }
   main { max-width: 860px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
   h1 { font-size: 1.7rem; margin: 0 0 .25rem; }
   h2 { font-size: 1.25rem; margin: 2.2rem 0 .6rem; padding-top: .6rem; border-top: 1px solid var(--border); }
@@ -69,7 +84,7 @@
   }
   .toast {
     position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
-    background: var(--accent); color: #fff; padding: .5rem .9rem; border-radius: 8px;
     font-size: .85rem; opacity: 0; pointer-events: none; transition: opacity .2s;
   }
   .toast.show { opacity: 1; }
@@ -80,9 +95,18 @@
 </style>
 </head>
 <body>
 <main>
-<h1>CCR Platform - Testing Guide</h1>
 <p class="sub">Everything built so far, as click-through scenarios: what to do and exactly what
 you should see. Every dataset referenced is downloadable right here - all texts are
 synthetic, written for this kit; no real participant data anywhere.</p>

 <style>
   :root {
     --bg: #ffffff; --fg: #1a1a1a; --muted: #666; --border: #ddd;
+    --accent: #7a1f3d; --card: #f7f7f8; --amber-bg: #fff7e0; --amber-border: #e0b84d;
+    --code-bg: #f0f0f2; --maroon: #7a1f3d;
   }
   @media (prefers-color-scheme: dark) {
     :root {
       --bg: #16181c; --fg: #e6e6e6; --muted: #9a9a9a; --border: #3a3d44;
+      --accent: #e08aa3; --card: #1f2228; --amber-bg: #2e2810; --amber-border: #8a6d1f;
       --code-bg: #24272e;
     }
   }
     margin: 0; background: var(--bg); color: var(--fg);
     font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   }
+  /* Shared top bar: same maroon brand as the app, links back to it. */
+  .topbar {
+    background: var(--maroon); color: #fff;
+    padding: 12px 1.25rem;
+    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
+  }
+  .topbar .brand {
+    color: #fff; font-weight: 650; font-size: 1.02rem;
+    text-decoration: none; letter-spacing: .2px; white-space: nowrap;
+  }
+  .topbar .brand:hover { opacity: .88; }
+  .topbar nav { margin-left: auto; display: flex; gap: 1.1rem; flex-wrap: wrap; }
+  .topbar nav a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .88rem; }
+  .topbar nav a:hover { color: #fff; text-decoration: underline; }
+  .topbar nav a.current { color: #fff; font-weight: 600; }
   main { max-width: 860px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
   h1 { font-size: 1.7rem; margin: 0 0 .25rem; }
   h2 { font-size: 1.25rem; margin: 2.2rem 0 .6rem; padding-top: .6rem; border-top: 1px solid var(--border); }
   }
   .toast {
     position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
+    background: var(--maroon); color: #fff; padding: .5rem .9rem; border-radius: 8px;
     font-size: .85rem; opacity: 0; pointer-events: none; transition: opacity .2s;
   }
   .toast.show { opacity: 1; }
 </style>
 </head>
 <body>
+<header class="topbar">
+  <a class="brand" href="/">CCR Platform</a>
+  <nav>
+    <a href="/">Dashboard</a>
+    <a href="/welcome">About</a>
+    <a href="/guide" class="current">Guide</a>
+    <a href="/product">How it works</a>
+  </nav>
+</header>
 <main>
+<h1>Testing guide</h1>
 <p class="sub">Everything built so far, as click-through scenarios: what to do and exactly what
 you should see. Every dataset referenced is downloadable right here - all texts are
 synthetic, written for this kit; no real participant data anywhere.</p>

backend/app/product.html CHANGED Viewed

@@ -7,13 +7,13 @@
 <style>
   :root {
     --bg: #ffffff; --fg: #1a1a1a; --muted: #666; --border: #ddd;
-    --accent: #2456a6; --card: #f7f7f8; --amber-bg: #fff7e0; --amber-border: #e0b84d;
-    --code-bg: #f0f0f2;
   }
   @media (prefers-color-scheme: dark) {
     :root {
       --bg: #16181c; --fg: #e6e6e6; --muted: #9a9a9a; --border: #3a3d44;
-      --accent: #7aa7e8; --card: #1f2228; --amber-bg: #2e2810; --amber-border: #8a6d1f;
       --code-bg: #24272e;
     }
   }
@@ -22,6 +22,21 @@
     margin: 0; background: var(--bg); color: var(--fg);
     font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   }
   main { max-width: 860px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
   h1 { font-size: 1.7rem; margin: 0 0 .25rem; }
   h2 { font-size: 1.25rem; margin: 2.2rem 0 .6rem; padding-top: .6rem; border-top: 1px solid var(--border); }
@@ -66,7 +81,7 @@
   }
   .toast {
     position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
-    background: var(--accent); color: #fff; padding: .5rem .9rem; border-radius: 8px;
     font-size: .85rem; opacity: 0; pointer-events: none; transition: opacity .2s;
   }
   .toast.show { opacity: 1; }
@@ -79,9 +94,18 @@
 </style>
 </head>
 <body>
 <main>
-<h1>CCR Platform - Product &amp; Architecture</h1>
 <p class="sub">The under-the-hood companion to the <a href="/guide">testing guide</a>:
 who can do what, how access is governed, what runs where, and the engineering
 decisions behind it. The guide tells you how to <em>use</em> the platform; this

 <style>
   :root {
     --bg: #ffffff; --fg: #1a1a1a; --muted: #666; --border: #ddd;
+    --accent: #7a1f3d; --card: #f7f7f8; --amber-bg: #fff7e0; --amber-border: #e0b84d;
+    --code-bg: #f0f0f2; --maroon: #7a1f3d;
   }
   @media (prefers-color-scheme: dark) {
     :root {
       --bg: #16181c; --fg: #e6e6e6; --muted: #9a9a9a; --border: #3a3d44;
+      --accent: #e08aa3; --card: #1f2228; --amber-bg: #2e2810; --amber-border: #8a6d1f;
       --code-bg: #24272e;
     }
   }
     margin: 0; background: var(--bg); color: var(--fg);
     font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   }
+  /* Shared top bar: same maroon brand as the app, links back to it. */
+  .topbar {
+    background: var(--maroon); color: #fff;
+    padding: 12px 1.25rem;
+    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
+  }
+  .topbar .brand {
+    color: #fff; font-weight: 650; font-size: 1.02rem;
+    text-decoration: none; letter-spacing: .2px; white-space: nowrap;
+  }
+  .topbar .brand:hover { opacity: .88; }
+  .topbar nav { margin-left: auto; display: flex; gap: 1.1rem; flex-wrap: wrap; }
+  .topbar nav a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .88rem; }
+  .topbar nav a:hover { color: #fff; text-decoration: underline; }
+  .topbar nav a.current { color: #fff; font-weight: 600; }
   main { max-width: 860px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
   h1 { font-size: 1.7rem; margin: 0 0 .25rem; }
   h2 { font-size: 1.25rem; margin: 2.2rem 0 .6rem; padding-top: .6rem; border-top: 1px solid var(--border); }
   }
   .toast {
     position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
+    background: var(--maroon); color: #fff; padding: .5rem .9rem; border-radius: 8px;
     font-size: .85rem; opacity: 0; pointer-events: none; transition: opacity .2s;
   }
   .toast.show { opacity: 1; }
 </style>
 </head>
 <body>
+<header class="topbar">
+  <a class="brand" href="/">CCR Platform</a>
+  <nav>
+    <a href="/">Dashboard</a>
+    <a href="/welcome">About</a>
+    <a href="/guide">Guide</a>
+    <a href="/product" class="current">How it works</a>
+  </nav>
+</header>
 <main>
+<h1>Product &amp; architecture</h1>
 <p class="sub">The under-the-hood companion to the <a href="/guide">testing guide</a>:
 who can do what, how access is governed, what runs where, and the engineering
 decisions behind it. The guide tells you how to <em>use</em> the platform; this

backend/static/assets/{index-qbWtJ-39.js → index-BLDcIlkB.js} RENAMED Viewed

The diff for this file is too large to render. See raw diff

backend/static/assets/index-DAnNOmJI.css DELETED Viewed

@@ -1 +0,0 @@

- :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}.header{background:var(--maroon);color:#fff;padding:14px 28px;display:flex;align-items:baseline;flex-wrap:wrap;gap:14px}.header h1{flex:0 0 auto;font-size:17px;margin:0;font-weight:650;letter-spacing:.2px;white-space:nowrap}.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:8px;padding:18px 20px;margin-bottom:16px}.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}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{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}button.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}.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-auth{margin-left:auto;display:flex;align-items:center;gap:10px;color:#fff}.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}.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 h1{font-size:16px}.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}}.welcome{padding-top:1.2rem}.welcome-hero h2{margin:0 0 .6rem;font-size:1.45rem}.welcome-hero p{max-width:62ch}.welcome-cta{display:flex;gap:.9rem;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}}

backend/static/assets/index-DRwGDsQP.css ADDED Viewed

	@@ -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}}

backend/static/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CCR Platform - Contextualized Construct Representations</title>
-    <script type="module" crossorigin src="/assets/index-qbWtJ-39.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DAnNOmJI.css">
   </head>
   <body>
     <div id="root"></div>

     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CCR Platform - Contextualized Construct Representations</title>
+    <script type="module" crossorigin src="/assets/index-BLDcIlkB.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DRwGDsQP.css">
   </head>
   <body>
     <div id="root"></div>

frontend/src/AdminPage.jsx CHANGED Viewed

@@ -15,6 +15,15 @@ const ROLE_LABELS = {
   pi: "PI",
 };
 // Every admin card is collapsible; the big ones (verification queue, audit)
 // start closed so the page stays scannable.
 function Section({ title, hint, defaultOpen = true, children }) {
@@ -135,23 +144,33 @@ export default function AdminPage({ auth }) {
       <div className="project-header">
         <span className="project-title">Admin</span>
-        <a className="ghost header-btn" href="/">Back to platform</a>
       </div>
       {/* Overview */}
       <Section title="Overview">
         {overview ? (
-          <p className="hint">
-            <b>{overview.users}</b> accounts (
-            {ROLES.filter((r) => overview.users_by_role?.[r])
-              .map((r) => `${overview.users_by_role[r]} ${ROLE_LABELS[r]}`)
-              .join(", ") || "none"}
-            ; {overview.signups_last_7_days} new this week) · <b>{overview.runs_total}</b>{" "}
-            runs total ({overview.runs_last_7_days} this week
-            {overview.runs_by_status?.failed ? `, ${overview.runs_by_status.failed} failed` : ""}) ·{" "}
-            <b>{overview.projects}</b> projects ({overview.anonymous_projects} anonymous) ·{" "}
-            <b>{overview.constructs_unverified}</b> library scales awaiting verification
-          </p>
         ) : (
           <p className="hint">Loading…</p>
         )}

   pi: "PI",
 };
+function Stat({ k, v }) {
+  return (
+    <div className="stat">
+      <div className="v">{v}</div>
+      <div className="k">{k}</div>
+    </div>
+  );
+}
 // Every admin card is collapsible; the big ones (verification queue, audit)
 // start closed so the page stays scannable.
 function Section({ title, hint, defaultOpen = true, children }) {
       <div className="project-header">
         <span className="project-title">Admin</span>
+        <a className="ghost" href="/">← Back to dashboard</a>
       </div>
       {/* Overview */}
       <Section title="Overview">
         {overview ? (
+          <>
+            <div className="stat-grid">
+              <Stat k="Accounts" v={overview.users} />
+              <Stat k="Runs total" v={overview.runs_total} />
+              <Stat k="Projects" v={overview.projects} />
+              <Stat k="Awaiting verification" v={overview.constructs_unverified} />
+            </div>
+            <p className="small muted" style={{ margin: "10px 0 0" }}>
+              {ROLES.filter((r) => overview.users_by_role?.[r])
+                .map((r) => `${overview.users_by_role[r]} ${ROLE_LABELS[r]}`)
+                .join(", ") || "no accounts yet"}
+              {" "}· {overview.signups_last_7_days} sign-up
+              {overview.signups_last_7_days === 1 ? "" : "s"} and{" "}
+              {overview.runs_last_7_days} run{overview.runs_last_7_days === 1 ? "" : "s"} this week
+              {overview.runs_by_status?.failed
+                ? ` · ${overview.runs_by_status.failed} failed run${overview.runs_by_status.failed === 1 ? "" : "s"} total`
+                : ""}
+              {" "}· {overview.anonymous_projects} anonymous project
+              {overview.anonymous_projects === 1 ? "" : "s"}
+            </p>
+          </>
         ) : (
           <p className="hint">Loading…</p>
         )}

frontend/src/App.jsx CHANGED Viewed

@@ -183,16 +183,36 @@ export default function App() {
   return (
     <div className="app">
       <header className="header">
-        <h1>CCR Platform</h1>
         <span className="sub">
           Contextualized Construct Representations · theory-driven psychological text analysis
         </span>
-        <span className="header-auth">
-          {!showWelcome && (
-            <button className="header-btn" onClick={() => setShowWelcome(true)}>
               About
             </button>
           )}
           {auth?.signed_in ? (
             <>
               <span className="small">Hi, {auth.name}</span>
@@ -208,7 +228,7 @@ export default function App() {
               Sign in
             </button>
           )}
-        </span>
       </header>
       {showLogin && (
@@ -408,17 +428,24 @@ export default function App() {
               }}
             />
           ) : (
-            <div className="card">
-              <h3>Welcome</h3>
               <p className="hint">
-                Create or select a project, upload a corpus (CSV/XLSX), choose a validated
-                construct, and run a CCR analysis. Results include per-item loadings,
-                score distributions, and a reproducibility record for every run.
               </p>
               <p className="small muted">
                 Self-contained by design: embeddings run on this server itself - no
-                third-party AI APIs. Demo instance: storage is ephemeral and may reset;
-                please don&apos;t upload sensitive or identifiable data.
               </p>
             </div>
           )}

   return (
     <div className="app">
       <header className="header">
+        <a
+          className="brand"
+          href="/"
+          onClick={(e) => {
+            // Inside the SPA the brand is an instant way back to the
+            // dashboard; from /admin it's a normal navigation.
+            if (!IS_ADMIN_PATH) {
+              e.preventDefault();
+              enterDashboard();
+            }
+          }}
+        >
+          CCR Platform
+        </a>
         <span className="sub">
           Contextualized Construct Representations · theory-driven psychological text analysis
         </span>
+        <nav className="header-nav">
+          {IS_ADMIN_PATH ? (
+            <a className="header-link" href="/welcome">About</a>
+          ) : (
+            <button
+              className={"header-link" + (showWelcome ? " current" : "")}
+              onClick={() => setShowWelcome(true)}
+            >
               About
             </button>
           )}
+          <a className="header-link" href="/guide">Guide</a>
+          <a className="header-link" href="/product">How it works</a>
           {auth?.signed_in ? (
             <>
               <span className="small">Hi, {auth.name}</span>
               Sign in
             </button>
           )}
+        </nav>
       </header>
       {showLogin && (
               }}
             />
           ) : (
+            <div className="card empty-state">
+              <h3>Create your first project</h3>
               <p className="hint">
+                A project holds your datasets and runs. Upload a corpus (CSV/XLSX),
+                choose a validated construct, and run a CCR analysis - results include
+                per-item loadings, score distributions, and a reproducibility record
+                for every run.
               </p>
+              <div className="empty-actions">
+                <button className="primary" onClick={() => setCreating(true)}>
+                  + New project
+                </button>
+                <a className="ghost-link" href="/guide">Read the 5-minute guide</a>
+              </div>
               <p className="small muted">
                 Self-contained by design: embeddings run on this server itself - no
+                third-party AI APIs. Please don&apos;t upload sensitive or identifiable
+                data on this dev instance.
               </p>
             </div>
           )}

frontend/src/styles.css CHANGED Viewed

@@ -25,24 +25,28 @@ body {
 .app { display: flex; flex-direction: column; min-height: 100vh; }
 /* ---------- header ---------- */
 .header {
   background: var(--maroon);
   color: #fff;
   padding: 14px 28px;
   display: flex;
-  align-items: baseline;
   flex-wrap: wrap;
   gap: 14px;
 }
-.header h1 {
   flex: 0 0 auto;
   font-size: 17px;
-  margin: 0;
   font-weight: 650;
   letter-spacing: 0.2px;
   white-space: nowrap;
 }
 .header .sub { flex: 1 1 280px; min-width: 0; font-size: 12.5px; opacity: 0.85; }
 .layout { display: flex; flex: 1; min-width: 0; min-height: 0; }
@@ -112,7 +116,8 @@ div:first-child > .group-label { margin-top: 2px; }
 .card {
   background: var(--card); border: 1px solid var(--line);
-  border-radius: 8px; padding: 18px 20px; margin-bottom: 16px;
 }
 .card h3 { margin: 0 0 4px; font-size: 15px; }
 .card .hint { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; }
@@ -135,6 +140,7 @@ button.primary {
   justify-content: center;
   padding: 0 18px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer;
   line-height: 1.2;
 }
 button.primary:hover { background: var(--maroon-dark); }
 button.primary:disabled { background: #c9ccd1; cursor: not-allowed; }
@@ -147,16 +153,17 @@ a.google-btn {
   box-sizing: border-box;
 }
 a.google-btn:hover { background: var(--maroon-dark); }
-button.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;
 }
-button.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;
@@ -267,6 +274,7 @@ table.docs td {
   overflow-wrap: anywhere;
 }
 table.docs td.score { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
 .stat-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
 .stat {
@@ -296,14 +304,23 @@ table.docs td.score { font-variant-numeric: tabular-nums; font-weight: 600; whit
 .small { font-size: 12.5px; }
 .mt { margin-top: 12px; }
-/* ---------- header auth ---------- */
-.header-auth {
-  margin-left: auto; display: flex; align-items: center; gap: 10px; color: #fff;
 }
 .header-btn {
   background: rgba(255, 255, 255, 0.12); color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.45);
   padding: 5px 14px; border-radius: 7px; font: inherit; font-size: 13px; cursor: pointer;
 }
 .header-btn:hover { background: rgba(255, 255, 255, 0.22); }
@@ -386,7 +403,8 @@ button.danger-solid:disabled { background: #c9ccd1; }
     align-items: flex-start;
     gap: 2px 12px;
   }
-  .header h1 { font-size: 16px; }
   .header .sub {
     flex: 1 1 210px;
     font-size: 12px;
@@ -470,12 +488,30 @@ button.danger-solid:disabled { background: #c9ccd1; }
   .stat-grid { grid-template-columns: 1fr; }
 }
 /* ------------------------------------------------------------- welcome */
 .welcome { padding-top: 1.2rem; }
-.welcome-hero h2 { margin: 0 0 .6rem; font-size: 1.45rem; }
 .welcome-hero p { max-width: 62ch; }
 .welcome-cta {
-  display: flex; gap: .9rem; align-items: center; flex-wrap: wrap;
   margin: 1.1rem 0 .6rem;
 }
 .welcome-cta .ghost-link { font-size: .95rem; }

 .app { display: flex; flex-direction: column; min-height: 100vh; }
+a { color: var(--maroon); }
 /* ---------- header ---------- */
 .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: 0.2px;
   white-space: nowrap;
+  color: #fff;
+  text-decoration: none;
 }
+.header .brand:hover { opacity: 0.88; }
 .header .sub { flex: 1 1 280px; min-width: 0; font-size: 12.5px; opacity: 0.85; }
 .layout { display: flex; flex: 1; min-width: 0; min-height: 0; }
 .card {
   background: var(--card); border: 1px solid var(--line);
+  border-radius: 10px; padding: 18px 20px; margin-bottom: 16px;
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
 }
 .card h3 { margin: 0 0 4px; font-size: 15px; }
 .card .hint { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; }
   justify-content: center;
   padding: 0 18px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer;
   line-height: 1.2;
+  transition: background-color 0.15s ease;
 }
 button.primary:hover { background: var(--maroon-dark); }
 button.primary:disabled { background: #c9ccd1; cursor: not-allowed; }
   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 0.15s ease, color 0.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;
   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 {
 .small { font-size: 12.5px; }
 .mt { margin-top: 12px; }
+/* ---------- header nav + auth ---------- */
+.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: rgba(255, 255, 255, 0.82); font: inherit; font-size: 13px;
+  cursor: pointer; text-decoration: none; transition: color 0.15s ease;
+}
+.header-link:hover { color: #fff; text-decoration: underline; }
+.header-link.current { color: #fff; font-weight: 600; }
 .header-btn {
   background: rgba(255, 255, 255, 0.12); color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.45);
   padding: 5px 14px; border-radius: 7px; font: inherit; font-size: 13px; cursor: pointer;
+  text-decoration: none; transition: background-color 0.15s ease;
 }
 .header-btn:hover { background: rgba(255, 255, 255, 0.22); }
     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;
   .stat-grid { grid-template-columns: 1fr; }
 }
+/* ---------- empty state (no projects yet) ---------- */
+.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 */
 .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; }