From 104a4e0674297da553b4bb25a64abec92b3eb9e0 Mon Sep 17 00:00:00 2001
From: Duck Quang <quang.gateway@gmail.com>
Date: Sun, 12 Jul 2026 16:27:14 +0700
Subject: [PATCH] Researcher pages: token sweep, flat hairline surfaces,
 ProjectDetail declutter

- Token/color sweep of unit-8 CSS ranges: raw golds/purples/teals/navies and
  gradients replaced with token-driven values (var(--accent/--gold/--card-bg/
  --bg-muted/--accent-subtle) with legacy fallbacks); flattened comp-hero,
  seg "brand edition", bar/kpi golds, cal-day gradient, drive/fm/dm chrome.
- Killed now-redundant explicit dark-mode rules in owned ranges (drive, fm,
  kpi, safety menu, danger zone, comp-hero) - tokens + alphas cover them.
- Fixed .dm-modal background: var(--bg) had no fallback -> var(--card-bg, #fff).
- ProjectDetail declutter: local OverflowMenu ("...", SafetyMenu pattern +
  styles) demotes per-row Remove (calendar events, resource links) and the
  role editor trigger; removed redundant side-tab accent borders.
- Reachability: People header gains a "Find a mentor" ghost link; Apply page
  gains a quiet "Also in Grow: Programs - Competitions" link row.
- Groups/GroupDetail banner placeholders flattened (.banner-ph); Community
  image-dismiss scrim moved to .img-dismiss class; comp-hero glow divs removed.
- Motion polish: ease-out transitions, scale(0.97) presses, reduced-motion
  kept intact; removed .bar-fill width animation (layout-property transition).

Note: shared/design-system.css (not owned by this unit) still overrides
.comp-hero with a blue gradient via !important - the styles.css flatten
takes effect once that override is removed by its owner.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/pages/researcher/ApplicationHub.jsx |   5 +-
 src/pages/researcher/Community.jsx      |   3 +-
 src/pages/researcher/Competitions.jsx   |   1 -
 src/pages/researcher/GroupDetail.jsx    |   2 +-
 src/pages/researcher/Groups.jsx         |   2 +-
 src/pages/researcher/Mentors.jsx        |   1 -
 src/pages/researcher/People.jsx         |   5 +-
 src/pages/researcher/ProjectDetail.jsx  |  54 ++++++--
 src/styles.css                          | 169 ++++++++++--------------
 9 files changed, 127 insertions(+), 115 deletions(-)

diff --git a/src/pages/researcher/ApplicationHub.jsx b/src/pages/researcher/ApplicationHub.jsx
index 03982fa..caa6d66 100644
--- a/src/pages/researcher/ApplicationHub.jsx
+++ b/src/pages/researcher/ApplicationHub.jsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import { api } from '../../api.js';
 import { useAuth } from '../../auth.jsx';
 import { Card, Badge, Button, Field, EmptyState } from '../../components/ui.jsx';
@@ -117,6 +117,9 @@ export default function ApplicationHub() {
 
   return (
     <div>
+      <p className="muted" style={{ margin: '0 0 0.5rem', fontSize: '0.82rem' }}>
+        Also in Grow: <Link to="/researcher/programs">Programs</Link> · <Link to="/researcher/competitions">Competitions</Link>
+      </p>
       <h1 className="page-title">Apply for a role</h1>
       <p className="page-sub">
         Explore advanced roles and apply. A Moderator reviews each application — once approved, your role
diff --git a/src/pages/researcher/Community.jsx b/src/pages/researcher/Community.jsx
index 905955f..a127ea4 100644
--- a/src/pages/researcher/Community.jsx
+++ b/src/pages/researcher/Community.jsx
@@ -129,11 +129,10 @@ function Composer({ onPosted }) {
               <img src={imageSrc(imageUrl)} alt="" style={{ width: '100%', borderRadius: 12, maxHeight: 300, objectFit: 'cover' }} />
               <button
                 type="button"
-                className="btn btn-ghost btn-sm"
+                className="btn btn-ghost btn-sm img-dismiss"
                 onClick={() => setImageUrl('')}
                 title="Remove image"
                 aria-label="Remove image"
-                style={{ position: 'absolute', top: 8, right: 8, background: 'rgba(0,0,0,0.55)', color: '#fff', minWidth: 42, minHeight: 36 }}
               >
                 <Icon name="x" size={14} />
               </button>
diff --git a/src/pages/researcher/Competitions.jsx b/src/pages/researcher/Competitions.jsx
index 7962f2f..bf1d7ff 100644
--- a/src/pages/researcher/Competitions.jsx
+++ b/src/pages/researcher/Competitions.jsx
@@ -70,7 +70,6 @@ function FeaturedComp({ c }) {
   const href = safeHref(c.url);
   return (
     <div className="comp-hero pop-in">
-      <div className="comp-hero-glow" aria-hidden="true" />
       <div className="comp-hero-body">
         <span className="comp-hero-tag"><span className="icon-label"><Icon name="star" size={14} /> Featured opportunity</span></span>
         <h2 className="comp-hero-title">{c.title}</h2>
diff --git a/src/pages/researcher/GroupDetail.jsx b/src/pages/researcher/GroupDetail.jsx
index 95c3581..fc2f9b8 100644
--- a/src/pages/researcher/GroupDetail.jsx
+++ b/src/pages/researcher/GroupDetail.jsx
@@ -44,7 +44,7 @@ export default function GroupDetail() {
 
       {g.bannerUrl
         ? <img className="group-banner pop-in" src={imageSrc(g.bannerUrl)} alt="" onError={(e) => { e.currentTarget.style.display = 'none'; }} />
-        : <div className="group-banner pop-in" style={{ background: 'linear-gradient(135deg, var(--brand), var(--brand-deep))', border: 'none' }} aria-hidden="true" />}
+        : <div className="group-banner pop-in banner-ph" aria-hidden="true" />}
 
       <div className="card-row" style={{ margin: '0.6rem 0 0.2rem', alignItems: 'center' }}>
         <div className="row" style={{ gap: '0.7rem', alignItems: 'center', minWidth: 0 }}>
diff --git a/src/pages/researcher/Groups.jsx b/src/pages/researcher/Groups.jsx
index 7d9061f..df3959c 100644
--- a/src/pages/researcher/Groups.jsx
+++ b/src/pages/researcher/Groups.jsx
@@ -113,7 +113,7 @@ function GroupCard({ g }) {
     <Link to={`/researcher/groups/${g.id}`} className="card group-card" style={{ textDecoration: 'none', color: 'inherit' }}>
       {g.bannerUrl
         ? <img className="group-card-banner" src={imageSrc(g.bannerUrl)} alt="" loading="lazy" onError={(e) => { e.currentTarget.style.display = 'none'; }} />
-        : <div className="group-card-banner" style={{ background: 'linear-gradient(135deg, var(--brand), var(--brand-deep))' }} aria-hidden="true" />}
+        : <div className="group-card-banner banner-ph" aria-hidden="true" />}
       <div className="row" style={{ gap: '0.6rem', alignItems: 'center', marginBottom: '0.35rem' }}>
         {g.logoUrl && <img className="group-logo" src={imageSrc(g.logoUrl)} alt="" loading="lazy" onError={(e) => { e.currentTarget.style.display = 'none'; }} />}
         <h3 style={{ margin: 0 }}>{g.name}</h3>
diff --git a/src/pages/researcher/Mentors.jsx b/src/pages/researcher/Mentors.jsx
index b0c0999..e6529e4 100644
--- a/src/pages/researcher/Mentors.jsx
+++ b/src/pages/researcher/Mentors.jsx
@@ -47,7 +47,6 @@ export default function Mentors() {
   return (
     <div>
       <div className="comp-hero">
-        <span className="comp-hero-glow" />
         <div className="comp-hero-body">
           <span className="comp-hero-tag icon-label"><Icon name="graduation-cap" size={13} /> Expertise Mentors</span>
           <h1 className="comp-hero-title">Book a 1:1 with a subject-matter mentor</h1>
diff --git a/src/pages/researcher/People.jsx b/src/pages/researcher/People.jsx
index 202c6c2..5e905a3 100644
--- a/src/pages/researcher/People.jsx
+++ b/src/pages/researcher/People.jsx
@@ -42,7 +42,10 @@ export default function People() {
 
   return (
     <div>
-      <h1 className="page-title">People</h1>
+      <div className="card-row" style={{ alignItems: 'flex-start' }}>
+        <h1 className="page-title" style={{ margin: 0 }}>People</h1>
+        <Link className="btn btn-ghost btn-sm" to="/researcher/mentors" style={{ flex: 'none' }}>Find a mentor</Link>
+      </div>
       <p className="page-sub">Follow researchers and editors to get their updates — and message anyone directly.</p>
 
       <div className="seg" style={{ marginBottom: '1.25rem' }}>
diff --git a/src/pages/researcher/ProjectDetail.jsx b/src/pages/researcher/ProjectDetail.jsx
index 1813e83..7e518ce 100644
--- a/src/pages/researcher/ProjectDetail.jsx
+++ b/src/pages/researcher/ProjectDetail.jsx
@@ -3,9 +3,33 @@ import { useParams, Link } from 'react-router-dom';
 import { api } from '../../api.js';
 import { useAuth } from '../../auth.jsx';
 import { Card, Badge, Button, Field, Pfp } from '../../components/ui.jsx';
+import Icon from '../../components/Icon.jsx';
 import { useToast } from '../../components/toast.jsx';
 import { Embed, embedSrc } from '../../components/embed.jsx';
 
+// Quiet "⋯" overflow for secondary per-row controls (remove/rename/settings-ish),
+// so each view keeps one visible primary action. Same <details> pattern as
+// SafetyMenu; reuses its popover styles for one consistent menu look.
+function OverflowMenu({ label = 'More options', align = 'right', children }) {
+  return (
+    <details className="safety-menu">
+      <summary className="safety-menu-trigger" title={label} aria-label={label}>
+        <Icon name="more-horizontal" size={16} />
+      </summary>
+      <div className={`safety-menu-pop ${align === 'left' ? 'left' : ''}`}>{children}</div>
+    </details>
+  );
+}
+
+function MenuItem({ onClick, disabled, children }) {
+  const click = (e) => {
+    const d = e.currentTarget.closest('details');
+    if (d) d.open = false;
+    onClick?.(e);
+  };
+  return <button type="button" disabled={disabled} onClick={click}>{children}</button>;
+}
+
 const today = () => new Date().toISOString().slice(0, 10);
 const isOverdue = (d, done) => d && !done && String(d).slice(0, 10) < today();
 const fmtDate = (d) => (d ? new Date(`${String(d).slice(0, 10)}T12:00:00`).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) : '');
@@ -149,7 +173,7 @@ function Overview({ project, pct, done, total, onJump }) {
         <Card>
           <h3 style={{ marginTop: 0 }}>Chosen direction</h3>
           {chosen ? (
-            <div className="info-block" style={{ borderLeft: '3px solid var(--success)' }}>{chosen.text}</div>
+            <div className="info-block">{chosen.text}</div>
           ) : (
             <p className="muted" style={{ margin: 0 }}>The team hasn't picked a research direction yet.</p>
           )}
@@ -248,7 +272,7 @@ function TasksCard({ project, onChange }) {
       ) : (
         <div className="stack" style={{ marginTop: '0.6rem' }}>
           {ordered.map((t) => (
-            <div key={t.id} className="info-block" style={t.type === 'question' ? { borderLeft: '3px solid var(--brand)' } : undefined}>
+            <div key={t.id} className="info-block">
               <div className="card-row">
                 <div className="row" style={{ gap: '0.4rem' }}>
                   <Badge tone={t.type === 'question' ? 'blue' : 'gray'}>{t.type}</Badge>
@@ -428,7 +452,11 @@ function CalRow({ it, onRsvp, onRemove, past }) {
             </button>
           )}
           <Badge tone={overdue ? 'red' : CAL_TONE[it.kind] || 'gray'}>{overdue ? 'overdue' : it.kind}</Badge>
-          {it.canDelete && <button className="btn btn-ghost btn-sm" onClick={() => onRemove(it)}>Remove</button>}
+          {it.canDelete && (
+            <OverflowMenu label="Event options">
+              <MenuItem onClick={() => onRemove(it)}>Remove from calendar</MenuItem>
+            </OverflowMenu>
+          )}
         </div>
       </div>
     </div>
@@ -493,7 +521,7 @@ function IdeasCard({ project, onChange }) {
       <div className="stack">
         {ideas.length === 0 && <p className="muted">No ideas yet — add the first one.</p>}
         {ideas.map((i) => (
-          <div key={i.id} className="info-block" style={i.chosen ? { borderLeft: '3px solid var(--success)' } : undefined}>
+          <div key={i.id} className="info-block">
             <div className="card-row">
               <div>{i.text} {i.chosen && <Badge tone="green">chosen</Badge>}</div>
               <div className="row" style={{ gap: '0.3rem' }}>
@@ -554,9 +582,11 @@ function LinksCard({ project, onChange }) {
           <div key={l.id} className="info-block">
             <div className="card-row">
               <a href={l.url} target="_blank" rel="noreferrer">{l.label || l.url}</a>
-              <button className="btn btn-ghost btn-sm" onClick={() => remove(l.id)} disabled={deleting === l.id}>
-                {deleting === l.id ? '…' : 'Remove'}
-              </button>
+              <OverflowMenu label="Link options">
+                <MenuItem disabled={deleting === l.id} onClick={() => remove(l.id)}>
+                  {deleting === l.id ? 'Removing…' : 'Remove link'}
+                </MenuItem>
+              </OverflowMenu>
             </div>
             {embedSrc(l.url) && <Embed url={l.url} height={300} title={l.label || 'Embedded preview'} />}
           </div>
@@ -635,9 +665,13 @@ function RoleEditor({ projectId, member, onChange }) {
   };
   if (!editing) {
     return (
-      <button className="btn btn-ghost btn-sm" style={{ marginTop: '0.25rem' }} onClick={() => { setTitle(member.role || ''); setEditing(true); }}>
-        {member.role ? 'Edit role' : '+ Set role'}
-      </button>
+      <div style={{ marginTop: '0.15rem' }}>
+        <OverflowMenu label={`Options for ${member.name}`} align="left">
+          <MenuItem onClick={() => { setTitle(member.role || ''); setEditing(true); }}>
+            {member.role ? 'Edit role' : 'Set role'}
+          </MenuItem>
+        </OverflowMenu>
+      </div>
     );
   }
   return (
diff --git a/src/styles.css b/src/styles.css
index fac2da4..3951f11 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1416,11 +1416,8 @@ html[data-theme='dark'] .google-gsi > div { background: transparent !important;
    Dash glow-up: glassy chrome, softer surfaces (light mode)
    ============================================================ */
 body {
-  background:
-    radial-gradient(700px 360px at 85% -120px, rgba(120, 180, 251, 0.16), transparent 70%),
-    radial-gradient(600px 320px at -80px -100px, rgba(255, 215, 0, 0.10), transparent 70%),
-    #fcfdff;
-  background-attachment: fixed;
+  /* Flat muted canvas — white hairline surfaces sit on top of it. */
+  background: var(--bg-muted, var(--surface-alt));
 }
 .sidebar { background: transparent; }
 .card { transition: box-shadow 0.2s, border-color 0.2s; }
@@ -1439,8 +1436,8 @@ body {
 }
 .seg-btn:hover { color: var(--heading); }
 .seg-btn.on {
-  background: #fff; color: var(--brand-deep);
-  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.14);
+  background: var(--card-bg, #fff); color: var(--brand-deep);
+  box-shadow: var(--shadow-sm, 0 1px 4px rgba(16, 24, 40, 0.14));
 }
 
 /* Listing cards: banner + overlapping pfp circles. */
@@ -1466,39 +1463,24 @@ body {
 }
 .group-logo-lg { width: 52px; height: 52px; border-radius: 12px; }
 
-/* Featured competition hero. */
+/* Featured competition hero — flat white hairline card, gold tag only. */
 .comp-hero {
-  position: relative; overflow: hidden;
   border-radius: 20px; margin-bottom: 1.25rem;
   padding: 1.6rem 1.8rem;
-  background: linear-gradient(135deg, var(--brand-deep, #0a2540) 0%, #123a63 55%, #1c4f86 100%);
-  color: #fff; border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 18px 44px rgba(4, 30, 66, 0.28);
-}
-.comp-hero-glow {
-  position: absolute; width: 320px; height: 320px; border-radius: 50%;
-  right: -90px; top: -120px; pointer-events: none;
-  background: radial-gradient(circle, rgba(255, 215, 0, 0.32), transparent 70%);
-  animation: pulse-glow 4.5s ease-in-out infinite;
+  background: var(--card-bg, #fff);
+  border: 1px solid var(--line, var(--border));
 }
-.comp-hero-body { position: relative; z-index: 1; }
 .comp-hero-tag {
   display: inline-block; margin-bottom: 0.7rem;
-  background: rgba(255, 215, 0, 0.16); border: 1px solid rgba(255, 215, 0, 0.45);
-  color: #ffe480; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
+  background: rgba(255, 215, 0, 0.14); border: 1px solid rgba(255, 215, 0, 0.4);
+  color: var(--heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
   text-transform: uppercase; padding: 0.3rem 0.8rem; border-radius: 999px;
 }
-.comp-hero-title { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 800; line-height: 1.1; color: #fff; }
-.comp-hero-desc { margin: 0 0 1rem; max-width: 680px; color: rgba(255, 255, 255, 0.86); line-height: 1.55; }
-.comp-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
-.comp-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(4, 30, 66, 0.14); }
-html[data-theme='dark'] .comp-hero {
-  background: linear-gradient(135deg, #152840 0%, #1a3050 55%, #1e3a5f 100%);
-  border-color: rgba(120, 180, 251, 0.14);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
-}
-html[data-theme='dark'] .comp-hero-glow { opacity: 0.45; }
-@media (prefers-reduced-motion: reduce) { .comp-hero-glow, .comp-card { animation: none; transition: none; } }
+.comp-hero-title { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 800; line-height: 1.1; color: var(--ink); }
+.comp-hero-desc { margin: 0 0 1rem; max-width: 680px; color: var(--body); line-height: 1.55; }
+.comp-card { transition: transform 0.15s ease-out, box-shadow 0.15s ease-out; }
+.comp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 8px 22px rgba(16, 24, 40, 0.10)); }
+@media (prefers-reduced-motion: reduce) { .comp-card { transition: none; } .comp-card:hover { transform: none; } }
 
 /* Safety overflow menu (report / block). */
 .safety-menu { position: relative; display: inline-block; }
@@ -1514,8 +1496,8 @@ html[data-theme='dark'] .comp-hero-glow { opacity: 0.45; }
 .safety-menu-pop {
   position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
   min-width: 184px; padding: 0.3rem;
-  background: #fff; border: 1px solid var(--border); border-radius: 12px;
-  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.16);
+  background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 12px;
+  box-shadow: var(--shadow-lg, 0 12px 30px rgba(16, 24, 40, 0.16));
   animation: pop-in 0.16s ease;
 }
 .safety-menu-pop.left { right: auto; left: 0; }
@@ -1525,14 +1507,12 @@ html[data-theme='dark'] .comp-hero-glow { opacity: 0.45; }
   padding: 0.5rem 0.6rem; border-radius: 8px; color: var(--heading); font-size: 0.86rem;
 }
 .safety-menu-pop button:hover { background: var(--surface-alt); }
-html[data-theme='dark'] .safety-menu-pop { background: #16202e; }
 
-/* Danger zone (account deletion). */
-.danger-zone { border-color: #fecaca; background: #fff7f7; }
-html[data-theme='dark'] .danger-zone { background: #2a1416; border-color: #7f1d1d; }
+/* Danger zone (account deletion) — danger-tinted alphas theme themselves. */
+.danger-zone { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.05); }
 
 .pfp-stack { display: inline-flex; align-items: center; }
-.pfp-xs { width: 28px; height: 28px; font-size: 0.62rem; border: 2px solid #fff; }
+.pfp-xs { width: 28px; height: 28px; font-size: 0.62rem; border: 2px solid var(--card-bg, #fff); }
 .pfp-stack .pfp + .pfp { margin-left: -9px; }
 .pfp-more { background: var(--surface-alt); color: var(--slate); font-weight: 700; }
 
@@ -1564,18 +1544,18 @@ html[data-theme='dark'] .danger-zone { background: #2a1416; border-color: #7f1d1
 .cal-day:hover { background: var(--surface-alt); }
 .cal-day.dim { opacity: 0.35; }
 .cal-day.today .cal-num {
-  background: linear-gradient(135deg, var(--sky-deep), var(--brand));
+  background: var(--accent, var(--sky-deep));
   color: #fff; border-radius: 999px;
 }
-.cal-day.sel { border-color: var(--brand-dark); background: rgba(120, 180, 251, 0.10); }
+.cal-day.sel { border-color: var(--brand-dark); background: var(--accent-subtle, rgba(37, 137, 237, 0.1)); }
 .cal-num { font-size: 0.8rem; font-weight: 600; color: var(--heading); width: 22px; height: 22px; display: grid; place-items: center; }
 .cal-dots { display: flex; align-items: center; gap: 3px; }
 .cal-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
-.dot-task { background: var(--sky-deep); }
-.dot-paper { background: #f59e0b; }
-.dot-event { background: #8b5cf6; }
+.dot-task { background: var(--accent, var(--sky-deep)); }
+.dot-paper { background: var(--gold); }
+.dot-event { background: var(--fg-subtle, var(--body-alt)); }
 .dot-pathway { background: var(--success); }
-.dot-mentor { background: #14b8a6; }
+.dot-mentor { background: var(--brand-deep); }
 .cal-dots em { font-style: normal; font-size: 0.6rem; color: var(--body-alt); }
 .cal-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; padding: 0.55rem 0.65rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); }
 .cal-item-icon { font-size: 1.05rem; flex: none; }
@@ -1692,17 +1672,18 @@ html[data-theme='dark'] .listing-banner { opacity: 0.92; }
 .drive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; }
 .drive-tile {
   display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem;
-  background: #fff; border: 1px solid var(--border); border-radius: 14px;
+  background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 14px;
   padding: 1.1rem 0.7rem 0.9rem; cursor: pointer; font-family: var(--font);
-  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
+  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out;
 }
-.drive-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16, 24, 40, 0.10); border-color: rgba(120, 180, 251, 0.5); }
-.drive-folder { background: linear-gradient(180deg, rgba(120, 180, 251, 0.10), rgba(120, 180, 251, 0.02)); }
+.drive-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 8px 22px rgba(16, 24, 40, 0.10)); border-color: var(--line-strong, var(--border)); }
+.drive-tile:active { transform: scale(0.97); }
+.drive-folder { background: var(--accent-subtle, rgba(37, 137, 237, 0.06)); }
 .drive-icon { font-size: 2rem; line-height: 1; }
 .drive-name { font-weight: 600; font-size: 0.85rem; color: var(--heading); word-break: break-word; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .drive-sub { font-size: 0.7rem; }
 .drive-overlay { position: fixed; inset: 0; background: rgba(8, 15, 30, 0.65); backdrop-filter: blur(4px); z-index: 200; display: grid; place-items: center; padding: 1.5rem; }
-.drive-preview { width: 100%; max-width: 880px; background: #fff; border-radius: 16px; padding: 1rem; box-shadow: 0 24px 70px rgba(0,0,0,0.4); }
+.drive-preview { width: 100%; max-width: 880px; background: var(--card-bg, #fff); border-radius: 16px; padding: 1rem; box-shadow: 0 24px 70px rgba(0,0,0,0.4); }
 .drive-frame { width: 100%; height: min(70vh, 640px); border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt); }
 
 /* ---------- Archive (arXiv-style rows) ---------- */
@@ -1743,33 +1724,27 @@ html[data-theme='dark'] .listing-banner { opacity: 0.92; }
   background: var(--card-bg, #fff);
   border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.1rem;
 }
-.kpi-hot { background: #fffcf3; border-color: #f3e3ae; }
+.kpi-hot { background: rgba(255, 215, 0, 0.07); border-color: rgba(255, 215, 0, 0.35); }
 .kpi-icon { font-size: 1.2rem; }
 .kpi-value {
   font-size: 2.1rem; font-weight: 650; line-height: 1.1; letter-spacing: -0.03em;
   color: var(--ink);
   font-variant-numeric: tabular-nums;
 }
-.kpi-hot .kpi-value { color: #b45309; }
 .kpi-label { font-weight: 700; color: var(--heading); font-size: 0.85rem; }
 .kpi-sub { color: var(--body-alt); font-size: 0.72rem; margin-top: 0.15rem; }
 .bars { display: flex; flex-direction: column; gap: 0.45rem; }
 .bar-row { display: grid; grid-template-columns: 110px 1fr 28px; align-items: center; gap: 0.6rem; font-size: 0.8rem; }
 .bar-label { color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .bar-track { height: 10px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
-.bar-fill { display: block; height: 100%; border-radius: 999px; transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
-.bar-blue { background: linear-gradient(90deg, var(--sky-deep), var(--brand)); }
-.bar-gold { background: linear-gradient(90deg, #f59e0b, #ffd700); }
+.bar-fill { display: block; height: 100%; border-radius: 999px; }
+.bar-blue { background: var(--accent, var(--sky-deep)); }
+.bar-gold { background: var(--gold); }
 .bar-num { font-weight: 700; color: var(--heading); text-align: right; }
 
-/* Dark-mode variants for the new pieces. */
-html[data-theme='dark'] .drive-tile { background: #111a28; }
-html[data-theme='dark'] .drive-folder { background: linear-gradient(180deg, rgba(37, 137, 237, 0.14), rgba(37, 137, 237, 0.03)); }
-html[data-theme='dark'] .drive-preview { background: #111a28; }
+/* Dark-mode variants (drive/kpi rules removed — tokens + alphas cover them). */
 html[data-theme='dark'] .arx-row.open { background: #111a28; }
 html[data-theme='dark'] .arx-title { color: var(--ink); }
-html[data-theme='dark'] .kpi { background: var(--card-bg, #161616); }
-html[data-theme='dark'] .kpi-hot { background: #1c1808; border-color: #3d3313; }
 html[data-theme='dark'] .arx-cite { background: #0e1622; }
 
 /* ---------- Brand mark (real logo replaces the CSS dot) ---------- */
@@ -1779,44 +1754,28 @@ html[data-theme='dark'] .arx-cite { background: #0e1622; }
 html[data-theme='dark'] .brand-img,
 html[data-theme='dark'] .brand-mark { background: #fff; }
 
-/* ---------- Segmented control, brand edition (glass + blue gradient) ------ */
-.seg {
-  background: rgba(255, 255, 255, 0.55);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid rgba(120, 180, 251, 0.35);
-  box-shadow: 0 2px 10px rgba(0, 61, 130, 0.07);
-}
-.seg-btn { color: var(--brand-deep); }
-.seg-btn:hover { color: var(--brand-deep); background: rgba(120, 180, 251, 0.12); }
-.seg-btn.on {
-  background: linear-gradient(90deg, rgba(120, 180, 251, 0.95), rgba(120, 180, 251, 0.75));
-  color: #fff;
-  box-shadow: 0 2px 8px rgba(92, 158, 235, 0.45);
-}
-.seg-btn.on:hover { background: linear-gradient(90deg, #78b4fb, #5c9eeb); color: #fff; }
-html[data-theme='dark'] .seg { background: rgba(17, 26, 40, 0.7); border-color: rgba(120, 180, 251, 0.25); }
-html[data-theme='dark'] .seg-btn { color: #9cc4f8; }
-html[data-theme='dark'] .seg-btn.on { background: linear-gradient(90deg, #2f6cb8, #1a6bb5); color: #fff; }
+/* (Removed the glassy blue-gradient seg overrides — the base pill control
+   already reads as a flat white-on-muted segmented control.) */
 
 /* ---------- Drive: file-manager chrome ---------- */
-.fm { border: 1px solid var(--border); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06); }
+.fm { border: 1px solid var(--border); border-radius: 16px; background: var(--card-bg, #fff); overflow: hidden; box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,24,40,0.04)); }
 .fm-toolbar {
   display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem;
-  background: rgba(245, 248, 252, 0.85); backdrop-filter: blur(8px);
+  background: var(--bg-muted, var(--surface-alt));
   border-bottom: 1px solid var(--border);
 }
 .fm-btn {
   width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border);
-  background: #fff; color: var(--brand-deep); font-size: 1rem; cursor: pointer;
+  background: var(--card-bg, #fff); color: var(--brand-deep); font-size: 1rem; cursor: pointer;
   display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
-  transition: background 0.12s, transform 0.12s;
+  transition: background 0.12s ease-out, transform 0.12s ease-out;
 }
-.fm-btn:hover:not(:disabled) { background: var(--surface-alt); transform: translateX(-1px); }
+.fm-btn:hover:not(:disabled) { background: var(--surface-alt); }
+.fm-btn:active:not(:disabled) { transform: scale(0.97); }
 .fm-btn:disabled { opacity: 0.35; cursor: default; }
 .fm-path {
   flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.35rem;
-  background: #fff; border: 1px solid var(--border); border-radius: 9px;
+  background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 9px;
   padding: 0.35rem 0.6rem; overflow: hidden; white-space: nowrap;
 }
 .fm-crumb { border: none; background: transparent; cursor: pointer; font-family: var(--font); font-size: 0.85rem; color: var(--brand-deep); padding: 0; }
@@ -1829,7 +1788,7 @@ html[data-theme='dark'] .seg-btn.on { background: linear-gradient(90deg, #2f6cb8
 .fm-body { padding: 0.9rem; min-height: 260px; }
 .fm-status {
   padding: 0.4rem 0.9rem; border-top: 1px solid var(--border);
-  background: var(--surface-alt); color: var(--body-alt); font-size: 0.75rem;
+  background: var(--bg-muted, var(--surface-alt)); color: var(--body-alt); font-size: 0.75rem;
 }
 .fm-list { display: flex; flex-direction: column; }
 .fm-row {
@@ -1837,17 +1796,13 @@ html[data-theme='dark'] .seg-btn.on { background: linear-gradient(90deg, #2f6cb8
   width: 100%; text-align: left; padding: 0.5rem 0.6rem; border: none; border-radius: 9px;
   background: transparent; font-family: var(--font); font-size: 0.88rem; cursor: pointer;
 }
-.fm-row:hover { background: rgba(120, 180, 251, 0.10); }
+.fm-row:hover { background: var(--accent-subtle, rgba(37, 137, 237, 0.08)); }
 .fm-row-head { cursor: default; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--body-alt); border-bottom: 1px solid var(--border); border-radius: 0; }
 .fm-row-head:hover { background: transparent; }
 .fm-name { font-weight: 600; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 @media (max-width: 640px) { .fm-row { grid-template-columns: minmax(0, 1fr) 70px; } .fm-row > :nth-child(3), .fm-row > :nth-child(4) { display: none; } .fm-search { max-width: 120px; } }
 
-html[data-theme='dark'] .fm { background: #111a28; }
-html[data-theme='dark'] .fm-toolbar { background: rgba(14, 22, 34, 0.9); }
-html[data-theme='dark'] .fm-path, html[data-theme='dark'] .fm-btn { background: #0e1622; }
-html[data-theme='dark'] .fm-status { background: #0e1622; }
-html[data-theme='dark'] .fm-row:hover { background: rgba(37, 137, 237, 0.14); }
+/* (Dark fm overrides removed — the chrome is token-driven now.) */
 
 /* ---------- Direct messages ---------- */
 .dm-layout { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 1rem; align-items: start; }
@@ -1857,7 +1812,7 @@ html[data-theme='dark'] .fm-row:hover { background: rgba(37, 137, 237, 0.14); }
   background: transparent; border: none; border-radius: 12px; padding: 0.55rem 0.6rem; cursor: pointer;
 }
 .dm-convo:hover { background: var(--surface-alt); }
-.dm-convo.active { background: rgba(120, 180, 251, 0.16); }
+.dm-convo.active { background: var(--accent-subtle, rgba(37, 137, 237, 0.12)); }
 .dm-convo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .dm-convo-name { font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 0.35rem; }
 .dm-convo-last { color: var(--body-alt); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -1872,7 +1827,7 @@ html[data-theme='dark'] .fm-row:hover { background: rgba(37, 137, 237, 0.14); }
   border-radius: 14px 14px 14px 4px; padding: 0.5rem 0.75rem; font-size: 0.92rem;
   display: flex; flex-direction: column; gap: 0.15rem;
 }
-.dm-bubble.mine { background: var(--sky-deep); color: #fff; border-radius: 14px 14px 4px 14px; }
+.dm-bubble.mine { background: var(--accent, var(--sky-deep)); color: #fff; border-radius: 14px 14px 4px 14px; }
 .dm-bubble-time { font-size: 0.66rem; opacity: 0.7; align-self: flex-end; }
 .dm-compose { display: flex; gap: 0.5rem; padding: 0.75rem 1.1rem; border-top: 1px solid var(--border); }
 .dm-compose-input { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 12px; padding: 0.5rem 0.75rem; font-size: 0.9rem; font-family: inherit; min-height: 40px; max-height: 120px; }
@@ -1899,7 +1854,7 @@ html[data-theme='dark'] .fm-row:hover { background: rgba(37, 137, 237, 0.14); }
 .dm-reaction { background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; padding: 0.1rem 0.4rem; font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 0.2rem; transition: background 0.15s; }
 .dm-reaction:hover { background: rgba(0,0,0,0.12); }
 .dm-bubble.mine .dm-reaction { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3); }
-.dm-reaction-picker { position: absolute; background: white; border: 1px solid var(--border); border-radius: 12px; padding: 0.35rem; display: flex; gap: 0.15rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10; }
+.dm-reaction-picker { position: absolute; background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 0.35rem; display: flex; gap: 0.15rem; box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.15)); z-index: 10; }
 .dm-bubble-wrap { position: relative; display: flex; flex-direction: column; }
 .dm-bubble-wrap.mine { align-items: flex-end; }
 .dm-bubble-wrap:not(.mine) { align-items: flex-start; }
@@ -1933,7 +1888,8 @@ html[data-theme='dark'] .fm-row:hover { background: rgba(37, 137, 237, 0.14); }
 
 /* Modal */
 .dm-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; }
-.dm-modal { background: var(--bg); border-radius: 16px; padding: 1.25rem; width: 90%; max-width: 400px; max-height: 70vh; display: flex; flex-direction: column; gap: 0.75rem; }
+/* var(--card-bg) (was the undefined --bg, which rendered transparent) */
+.dm-modal { background: var(--card-bg, #fff); border-radius: 16px; padding: 1.25rem; width: 90%; max-width: 400px; max-height: 70vh; display: flex; flex-direction: column; gap: 0.75rem; }
 .dm-modal h3 { margin: 0; font-size: 1.1rem; }
 .dm-modal-search { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.75rem; font-size: 0.9rem; }
 .dm-modal-search:focus { outline: none; border-color: var(--brand); }
@@ -2734,3 +2690,22 @@ html[data-theme='dark'] .sandbox-tab.on { color: #9cc4f8; }
   .dash-action:active, .sidebar-link:active, .view-switcher-btn:active,
   .seg-btn:active, .dash-tab:active, .btn:active:not(:disabled) { transform: none; }
 }
+
+/* === unit-8: researcher-pages === */
+/* Flat placeholder for group banners without an uploaded image (was a blue
+   gradient). Sits on the muted canvas as a quiet hairline block. */
+.banner-ph { background: var(--bg-muted, var(--surface-alt)); }
+
+/* Dismiss button over a user-posted image — a scrim on the photo itself, so it
+   stays dark in both themes by design. The dark selectors outrank the theme's
+   .btn-ghost overrides. */
+.img-dismiss,
+html[data-theme='dark'] .img-dismiss {
+  position: absolute; top: 8px; right: 8px;
+  background: rgba(0, 0, 0, 0.55); color: #fff; border-color: transparent;
+  min-width: 42px; min-height: 36px;
+}
+.img-dismiss:hover:not(:disabled),
+html[data-theme='dark'] .img-dismiss:hover:not(:disabled) {
+  background: rgba(0, 0, 0, 0.7); color: #fff;
+}