six-degrees 0.6.0 → 0.7.0

package/.next/standalone/app/setup/page.js

@@ -6,21 +6,23 @@ import OnboardingGate from '../components/OnboardingGate';
 import Link from 'next/link';
 import { stopScrape, pickedPerson, scanRequest, HIDE_CHROME_KEY } from '../../lib/scraper-client';
 import { setupStep, askForField } from '../../lib/scanner-setup';
+import { RISK_POINTS } from '../../lib/scan-risk';
 import { IS_DEMO } from '../../lib/demo';
 import { circleScanCost } from '../../lib/reach';
 import ScanRadar from '../components/ScanRadar';
 import AppHeader from '../components/AppHeader';
-import { paceOf } from '../../lib/scan-pace';
+import { paceOf, durationText, firstCircleSeconds } from '../../lib/scan-pace';
 import { BudgetBox, CooldownBanner, PausedList } from '../components/LinkedInLimits';
 import FieldStep, { FieldAnswer } from '../components/FieldStep';
 import { TIER_COLORS as THEME_TIERS } from '../../lib/themes';
+import ClusterSpinner from '../components/ClusterSpinner';
 
 // Everything here runs through /api/scraper. There is deliberately no second
 // server and no command to copy: the step where people gave up was starting a
 // Python server in a terminal they had not been told they needed.
 
 const BG = 'var(--sd-page)';   // clear: the theme shows through (lib/themes.js)
-const LINE = '1px solid rgba(255,255,255,0.1)';
+const LINE = '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)';
 
 const ACTION_LABELS = {
   photos: 'Saving profile photos to this computer',
@@ -133,13 +135,32 @@ function SetupInner() {
     poll();
   }
 
-  // The question is answered: the steps take its place, from the top, since
-  // it may have been answered from far down the picker.
+  // The question is answered: a line takes its place, and the page goes back
+  // to the top, since it may have been answered from far down the picker.
   function answered(sectors) {
     setField({ sectors });
     window.scrollTo(0, 0);
   }
 
+  // "I understand": when, kept with your settings so it travels with a copy.
+  async function acceptRisk() {
+    setError(null);
+    setBusy(true);
+    try {
+      const r = await fetch('/api/settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ settings: { scanRiskAccepted: new Date().toISOString() } }),
+      });
+      if (!r.ok) setError((await r.json().catch(() => null))?.error || 'Could not save that. Try again.');
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setBusy(false);
+      poll();
+    }
+  }
+
   async function run(action, extra = {}) {
     setError(null);
     setBusy(true);
@@ -168,9 +189,13 @@ function SetupInner() {
   // and a line of its own when the Python inside the app didn't work.
   const step1 = setupStep(s);
   const needsDeps = s && !c.dependencies;
-  const needsChrome = s && !c.chrome;
+  // Step 1 says so and offers the download (lib/scanner-setup.js); nothing that opens LinkedIn can start.
+  const needsChrome = s && c.chrome === false;
   const notFound = s && !c.scriptsFound;
-  const canScrape = s?.ready && !running;
+  // The one-time "I understand" before anything opens LinkedIn (lib/scan-risk.js);
+  // the server refuses without it too. Unknown (an older server) counts as given.
+  const riskOk = c.riskAccepted !== false;
+  const canScrape = s?.ready && !running && riskOk;
   // Anything that searches LinkedIn waits out a cooldown (TRAPS §35).
   const li = s?.linkedin;
   const cooling = Boolean(li?.cooldown);
@@ -183,9 +208,12 @@ function SetupInner() {
   const current = !s || !step1.done ? 1 : !c.signedIn ? 2 : mapped === 0 ? 3 : 4;
   // Each step: done, the one you're on (now), or still to come (next).
   const stateOf = (n, done) => (done && n !== current ? 'done' : n === current ? 'now' : n < current ? 'done' : 'next');
-  // Your field, asked once before the first scan (lib/scanner-setup.js
-  // askForField). The steps wait while that isn't known yet (null).
+  // Your field, asked once when your connections are in, before who they know
+  // (lib/scanner-setup.js askForField); left out while that isn't known (null).
   const askField = IS_DEMO || field ? false : askForField(s, settings);
+  // Step 4, honestly: the first circle shows in minutes, the rest takes days.
+  const pace = li?.limits?.pace;
+  const firstCircle = durationText(firstCircleSeconds(pace));
   // A run that ended badly, and the line that says why — the last thing it
   // printed before stopping. Shown as a box, not left for someone to find in the log.
   const failed = s && !running && s.exitCode != null && s.exitCode !== 0;
@@ -198,7 +226,7 @@ function SetupInner() {
 
   return (
     <div style={{
-      minHeight: '100vh', background: BG, color: '#fff',
+      minHeight: '100vh', background: BG, color: 'var(--sd-fg-1, #fff)',
       fontFamily: 'var(--sd-font)',
     }}>
       {/* The same header as every page, Scan lit (Blake, 2026-10-02: continuity) */}
@@ -209,32 +237,37 @@ function SetupInner() {
         {/* What the scanner is, in one breath, and what it never does */}
         <div style={{
           padding: '26px 26px 22px', borderRadius: 16, marginBottom: 22, position: 'relative', overflow: 'hidden',
-          background: 'radial-gradient(120% 140% at 0% 0%, rgba(0,255,136,0.10), rgba(52,152,219,0.06) 45%, rgba(255,255,255,0.02) 75%)',
+          background: 'radial-gradient(120% 140% at 0% 0%, rgba(0,255,136,0.10), rgba(52,152,219,0.06) 45%, rgba(var(--sd-ink, 255, 255, 255), 0.02) 75%)',
           border: '1px solid rgba(0,255,136,0.22)',
         }}>
-          <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 1.6, color: '#00ff88' }}>YOUR SCANNER</div>
+          <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 1.6, color: 'var(--sd-green, #00ff88)' }}>YOUR SCANNER</div>
+          {/* Steps 1 to 3 draw the galaxy in minutes; step 4 is days of small rounds,
+              and saying "four steps" made it sound like one sitting. */}
           <h1 style={{ fontSize: 27, fontWeight: 800, margin: '6px 0 8px', lineHeight: 1.2 }}>
-            {mapped > 0 ? 'Your network is mapped. Send the scanner further.' : 'Map your network in four steps.'}
+            {mapped > 0 ? 'Your network is mapped. Send the scanner further.' : <>
+              Your galaxy in three steps.
+              <span style={{ display: 'block', color: 'var(--sd-fg-2, #aab7c4)', fontSize: 20, fontWeight: 700, marginTop: 4 }}>
+                Who they know fills in over days.
+              </span>
+            </>}
           </h1>
-          <div style={{ fontSize: 14.5, color: '#aab7c4', lineHeight: 1.6, maxWidth: 560 }}>
+          <div style={{ fontSize: 14.5, color: 'var(--sd-fg-2, #aab7c4)', lineHeight: 1.6, maxWidth: 560 }}>
             It works in your own Chrome on this Mac, slowly and in the open, and keeps everything here.
             You launch it; it does the reading; you watch it go.
           </div>
           <div style={{ display: 'flex', gap: '8px 18px', flexWrap: 'wrap', marginTop: 16 }}>
             {['Never posts or messages anyone', 'Never sees your password', 'Nothing leaves this Mac', 'Stops the moment you say'].map((t) => (
-              <span key={t} style={{ fontSize: 12.5, color: '#cfe8dc', display: 'flex', alignItems: 'center', gap: 6 }}>
-                <span style={{ color: '#00ff88', fontWeight: 900 }}>✓</span>{t}
+              <span key={t} style={{ fontSize: 12.5, color: 'var(--sd-fg-1, #cfe8dc)', display: 'flex', alignItems: 'center', gap: 6 }}>
+                <span style={{ color: 'var(--sd-green, #00ff88)', fontWeight: 900 }}>✓</span>{t}
               </span>
             ))}
           </div>
         </div>
 
         {/* The first look at the scanner can take a while (it looks for Python): say so, never a blank page. */}
-        {askField === null && <p style={{ color: '#778', fontSize: 13 }}>Checking your setup…</p>}
-        {askField && <FieldStep onDone={answered} />}
-        {field && <FieldAnswer sectors={field.sectors} />}
+        {!s && <p style={{ color: 'var(--sd-fg-4, #778)', fontSize: 13 }}>Checking your setup…</p>}
 
-        {askField === false && <>
+        {s && <>
           {/* By id: the server finds them by their profile, since two connections can share a name. */}
           {pick?.person.id === pickId && (
             <ScanOne
@@ -252,7 +285,7 @@ function SetupInner() {
                   {net.second > 0 && <>, plus {net.second.toLocaleString()} people in their circles</>}
                   {net.third > 0 && <> and {net.third.toLocaleString()} from company scans</>}
                   .{' '}
-                  <span style={{ color: '#9aa' }}>Your galaxy is ready.</span>
+                  <span style={{ color: 'var(--sd-fg-3, #9aa)' }}>Your galaxy is ready.</span>
                 </div>
                 <Link href="/" style={{
                   padding: '9px 18px', borderRadius: 7, fontSize: 13.5, fontWeight: 700,
@@ -263,6 +296,11 @@ function SetupInner() {
             </Box>
           )}
 
+          {/* Your field, once, now that there are people to rank with it (it used to
+              stand in front of step 1); then a line saying what it did. */}
+          {askField && <FieldStep onDone={answered} />}
+          {field && <FieldAnswer sectors={field.sectors} />}
+
           {/* Photos an older version kept as links to LinkedIn. The app shows
               only photos saved here (lib/photos.js), so until then those people
               show initials. Every scan saves them at its end; this is the way
@@ -272,14 +310,14 @@ function SetupInner() {
               <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
                 <div style={{ flex: 1, minWidth: 200 }}>
                   <b>{s.photosWaiting.toLocaleString()} {s.photosWaiting === 1 ? 'photo isn’t' : 'photos aren’t'} saved on this computer yet.</b>{' '}
-                  <span style={{ color: '#9aa' }}>
+                  <span style={{ color: 'var(--sd-fg-3, #9aa)' }}>
                     An older version kept them as links to LinkedIn. The app doesn’t load
                     photos from LinkedIn while you browse, so those people show initials until
                     the photos are saved here: now, or at the end of your next scan. An expired
                     link can’t be saved; that person’s photo comes back when they’re next scanned.
                   </span>
                   {s && !c.dependencies && (
-                    <div style={{ color: '#8b9a9a', fontSize: 12.5, marginTop: 6 }}>Set up the scanner first (step 1 below): it saves them.</div>
+                    <div style={{ color: 'var(--sd-fg-3, #8b9a9a)', fontSize: 12.5, marginTop: 6 }}>Set up the scanner first (step 1 below): it saves them.</div>
                   )}
                 </div>
                 <Btn onClick={() => run('photos')} disabled={busy || !c.dependencies}>Save photos</Btn>
@@ -292,31 +330,20 @@ function SetupInner() {
               <b>The last run stopped before it finished.</b>
               {failReason && (
                 <div style={{
-                  marginTop: 6, color: '#e8c4c4', whiteSpace: 'pre-wrap',
+                  marginTop: 6, color: 'var(--sd-fg-2, #e8c4c4)', whiteSpace: 'pre-wrap',
                   fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 12.5,
                 }}>{failReason}</div>
               )}
-              <div style={{ color: '#9aa', marginTop: 6 }}>The full log is below.</div>
+              <div style={{ color: 'var(--sd-fg-3, #9aa)', marginTop: 6 }}>The full log is below.</div>
             </Box>
           )}
 
           {notFound && (
             <Box tone="bad">
               <b>Can’t find the scanner files.</b><br />
-              <span style={{ color: '#9aa' }}>
-                Expected <code style={code}>scripts/scrape.py</code> next to the app. If you
-                downloaded a zip, run the app from inside the project folder.
-              </span>
-            </Box>
-          )}
-
-          {needsChrome && (
-            <Box tone="bad">
-              <b>Google Chrome isn’t installed.</b><br />
-              <span style={{ color: '#9aa' }}>
-                The scanner drives your real Chrome. Install it from{' '}
-                <a href="https://www.google.com/chrome/" target="_blank" rel="noreferrer"
-                   style={{ color: '#3498DB' }}>google.com/chrome</a>, then reload this page.
+              <span style={{ color: 'var(--sd-fg-3, #9aa)' }}>
+                This copy of Six Degrees is missing part of its scanner. Download it again from
+                sixdegreesapp.com and put the new copy in place of this one.
               </span>
             </Box>
           )}
@@ -333,22 +360,37 @@ function SetupInner() {
                displayed with the line following"): every step shown at once, down a line that turns
                green as each is done, the one you're on lit, one button each. Everything else waits
                in Fine-tune. ---- */}
+          {s && !riskOk && <RiskCard onAccept={acceptRisk} busy={busy} />}
+
           <div role="list" aria-label="Scanning, step by step" style={{ margin: '4px 0 8px' }}>
           <style>{JOURNEY_CSS}</style>
           <StepRow n={1} label="Get ready" state={stateOf(1, step1.done)}>
             <Mission title="Get your scanner ready" time="A minute or two, once" done={step1.done} body={s ? step1.text : 'Checking…'}
               launch={s && step1.button && (
                 <Launch onClick={() => run(step1.button.action)} disabled={busy || running}>{step1.button.label}</Launch>
+              )}
+              // No Chrome: the way to get it. The step turns done by itself once
+              // it's installed, since the page keeps asking.
+              more={s && step1.chrome && (
+                <Launch href={step1.chrome.href} quiet={Boolean(step1.button)}>{step1.chrome.label}</Launch>
               )} />
           </StepRow>
           <StepRow n={2} label="Sign in" state={stateOf(2, !!c.signedIn)}>
             <Mission title="Sign in to LinkedIn, once" time="You do this part" done={!!c.signedIn}
               body={c.signedIn
                 ? 'Signed in on this Mac. If LinkedIn ever asks for a security check, or a scan says you were signed out, open LinkedIn here and finish it by hand.'
-                : 'A Chrome window opens. Sign in with your email and password there: the scanner never sees them. (“Continue with Google” can’t work in it, because Google blocks its sign-in in automated browsers.)'}
+                : <>
+                  A Chrome window opens. Sign in with your email and password there: the scanner never sees them.
+                  {/* TRAPS §12: Google and Apple block their sign-in in automated browsers, so the fix is a password. */}
+                  <span style={{ display: 'block', marginTop: 6 }}>
+                    Sign in to LinkedIn with Google or Apple? That can&rsquo;t work in this window, so set a LinkedIn
+                    password first: on LinkedIn&rsquo;s sign-in page, <b>Forgot password</b> emails you a link to make one.
+                  </span>
+                </>}
               launch={c.dependencies && (
                 // Shown after sign-in too: a security check survives the session cookie (TRAPS §35).
-                <Launch onClick={() => run('login')} disabled={busy || running || current < 2} quiet={!!c.signedIn}>
+                // Never without Chrome: the server would refuse it (lib/scanner-setup.js CHROME_REFUSAL).
+                <Launch onClick={() => run('login')} disabled={busy || running || current < 2 || !riskOk || needsChrome} quiet={!!c.signedIn}>
                   {running && s.action === 'login' ? 'Waiting for you…' : c.signedIn ? 'Open LinkedIn again' : 'Open LinkedIn'}
                 </Launch>
               )} />
@@ -364,14 +406,22 @@ function SetupInner() {
                 </Launch>
               )}
               more={mapped > 0 && (
-                <Btn onClick={() => run('refresh')} disabled={!canSearch || current < 3} primary>
-                  {running && s.action === 'refresh' ? 'Checking…' : '↻ Check for new'}
+                <Btn onClick={() => run('refresh')} disabled={!canSearch || current < 3} primary cluster active={Boolean(running && s.action === 'refresh')}>
+                  <ClusterSpinner size={13} live={Boolean(running && s.action === 'refresh')} />
+                  {running && s.action === 'refresh' ? 'Checking…' : 'Check for new'}
                 </Btn>
               )} />
           </StepRow>
           <StepRow n={4} label="Who they know" state={stateOf(4, false)} last>
-            <Mission title="Map who they know" time="A small batch a day, slowly"
-              body={<>It opens your connections one at a time and reads who <i>they</i> know: that fills Degrees, Separation and Outlink. Every round picks up where the last one stopped.</>}>
+            {/* Honest about time (the 1.0 first-run list): a circle shows in minutes, a
+                network in days, because every page is a search and the budget caps a day's. */}
+            <Mission title="Map who they know" time={`First circle in ${firstCircle}`}
+              body={<>
+                It opens your connections one at a time and reads who <i>they</i> know: that fills Degrees, Separation
+                and Outlink. The first circle shows up in {firstCircle}. The rest fills in over days, a round at a time:
+                every page is a LinkedIn search, and {li?.limits?.daily ? <>your budget allows {li.limits.daily} a day</>
+                  : <>a day&rsquo;s searches are best kept few</>}. Every round picks up where the last one stopped.
+              </>}>
               <CooldownBanner
                 cooldown={li?.cooldown}
                 disabled={busy}
@@ -385,21 +435,21 @@ function SetupInner() {
                   scanning={Boolean(running && s?.action?.startsWith('auto-bridge'))}
                   disabled={!canSearch || (order === 'score' && !tiers.length)}
                   label={running && s?.action === 'auto-bridge' ? 'Mapping…' : 'Map 2nd degree'}
-                  sublabel={batch ? `${batch} people` : 'everyone'}
+                  sublabel={running ? (batch ? `${batch} people` : 'everyone') : `first circle in ${firstCircle}`}
                   onScan={() => run('auto-bridge', { maxBridges: batch, tiers: order === 'score' ? tiers : [], order, maxPages: pages, deeper: finish, experimental })}
                   onPace={busy ? undefined : (pace) => run('set-limits', { ...(li?.limits || {}), pace })}
                 />
                 <div style={{ flex: '1 1 230px', display: 'flex', flexDirection: 'column', gap: 12 }}>
-                  <label style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13, color: '#cfd8d8' }}>
+                  <label style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13, color: 'var(--sd-fg-2, #cfd8d8)' }}>
                     This round
                     <select value={batch} onChange={(e) => setBatch(Number(e.target.value))} disabled={running} style={selectStyle}>
                       <option value={5}>5 people</option>
                       <option value={10}>10 people</option>
                       <option value={25}>25 people</option>
-                      <option value={0}>everyone — not advised</option>
+                      <option value={0}>everyone (not advised)</option>
                     </select>
                   </label>
-                  <label style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13, color: '#cfd8d8' }}>
+                  <label style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13, color: 'var(--sd-fg-2, #cfd8d8)' }}>
                     Start with
                     <select value={order} onChange={(e) => setOrder(e.target.value)} disabled={running} style={selectStyle}>
                       <option value="newest">Newest connections</option>
@@ -407,7 +457,7 @@ function SetupInner() {
                     </select>
                   </label>
                 {order === 'score' && <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
-                  <span style={{ fontSize: 12, color: '#8b9a9a' }}>Work through</span>
+                  <span style={{ fontSize: 12, color: 'var(--sd-fg-3, #8b9a9a)' }}>Work through</span>
                   {['S', 'A', 'B', 'C', 'D'].map((t) => {
                     const on = tiers.includes(t);
                     return (
@@ -418,18 +468,18 @@ function SetupInner() {
                         style={{
                           width: 30, height: 28, borderRadius: 7, fontSize: 12, fontWeight: 700,
                           cursor: running ? 'not-allowed' : 'pointer', border: LINE,
-                          background: on ? 'rgba(52,152,219,0.22)' : 'rgba(255,255,255,0.05)',
-                          color: on ? '#cfe6f7' : '#667',
+                          background: on ? 'rgba(52,152,219,0.22)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.05)',
+                          color: on ? 'var(--sd-fg-1, #cfe6f7)' : 'var(--sd-fg-4, #667)',
                         }}
                       >{t}</button>
                     );
                   })}
-                  <span style={{ fontSize: 11.5, color: '#667' }}>
+                  <span style={{ fontSize: 11.5, color: 'var(--sd-fg-4, #667)' }}>
                     {tiers.length ? '' : 'pick at least one'}
                   </span>
                 </div>}
                 {order === 'newest' && (
-                  <div style={{ fontSize: 12, color: '#8b9a9a', lineHeight: 1.6 }}>
+                  <div style={{ fontSize: 12, color: 'var(--sd-fg-3, #8b9a9a)', lineHeight: 1.6 }}>
                     Goes by the date you connected, newest first, across every tier. Run
                     {' '}<b>Check for new</b> first so your latest connections are in the list.
                   </div>
@@ -437,6 +487,18 @@ function SetupInner() {
                   <WhySlow />
                 </div>
               </div>
+              {/* The circle being read, on the map: Bridge Chains looks again every 20
+                  seconds while it fills in (app/page.js NetworkRefresh). */}
+              {running && s?.mapping?.id && (
+                <div style={{ marginTop: 14, fontSize: 13.5 }}>
+                  <Link href={`/?chain=${encodeURIComponent(s.mapping.id)}`} style={{ color: 'var(--sd-green, #00ff88)', fontWeight: 700 }}>
+                    Watch it fill in →
+                  </Link>
+                  <span style={{ color: 'var(--sd-fg-3, #8b9a9a)', marginLeft: 8 }}>
+                    {s.mapping.name ? `${s.mapping.name}’s circle, ` : ''}saved every 10 pages.
+                  </span>
+                </div>
+              )}
             </Mission>
           </StepRow>
           </div>
@@ -450,10 +512,10 @@ function SetupInner() {
             }}>
               <Spinner />
               <div style={{ flex: 1, fontSize: 13.5 }}>
-                <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 1.2, color: '#00ff88', marginBottom: 2 }}>YOUR SCANNER IS WORKING</div>
+                <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 1.2, color: 'var(--sd-green, #00ff88)', marginBottom: 2 }}>YOUR SCANNER IS WORKING</div>
                 <b>{ACTION_LABELS[s.action] || 'Working'}</b>
                 {s.progress && <Progress p={s.progress} action={s.action} />}
-                <div style={{ color: '#8b9a9a', fontSize: 12.5, marginTop: 2 }}>
+                <div style={{ color: 'var(--sd-fg-3, #8b9a9a)', fontSize: 12.5, marginTop: 2 }}>
                   Stopping closes the browser cleanly and keeps everything found so far.
                 </div>
               </div>
@@ -462,14 +524,14 @@ function SetupInner() {
           )}
 
           {/* Everything you might want to change, out of the way until you do */}
-          <details style={{ margin: '18px 0 4px', borderRadius: 10, border: LINE, background: 'rgba(255,255,255,0.02)' }}>
-            <summary style={{ padding: '12px 16px', cursor: 'pointer', fontSize: 13.5, fontWeight: 650, color: '#cfd8d8' }}>
+          <details style={{ margin: '18px 0 4px', borderRadius: 10, border: LINE, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.02)' }}>
+            <summary style={{ padding: '12px 16px', cursor: 'pointer', fontSize: 13.5, fontWeight: 650, color: 'var(--sd-fg-2, #cfd8d8)' }}>
               Fine-tune the scanner
-              <span style={{ fontWeight: 500, color: '#778', marginLeft: 8 }}>daily budget, how much of each list, the hidden window, paused lists</span>
+              <span style={{ fontWeight: 500, color: 'var(--sd-fg-4, #778)', marginLeft: 8 }}>daily budget, how much of each list, the hidden window, paused lists</span>
             </summary>
             <div style={{ padding: '4px 16px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
                 <BudgetBox li={li} disabled={busy} onSetLimits={(l) => run('set-limits', l)} />
-              <label style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 12.5, color: '#cfd8d8' }}>
+              <label style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 12.5, color: 'var(--sd-fg-2, #cfd8d8)' }}>
                 Read up to
                 <select value={pages} onChange={(e) => setPages(Number(e.target.value))} disabled={running} style={selectStyle}>
                   <option value={100}>every page, to the end of their list</option>
@@ -478,26 +540,26 @@ function SetupInner() {
                   <option value={10}>10 pages (~100 people) each</option>
                 </select>
               </label>
-              <label style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 12.5, color: '#cfd8d8', cursor: running ? 'not-allowed' : 'pointer' }}>
+              <label style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 12.5, color: 'var(--sd-fg-2, #cfd8d8)', cursor: running ? 'not-allowed' : 'pointer' }}>
                 <input type="checkbox" checked={finish} onChange={(e) => setFinish(e.target.checked)} disabled={running} />
                 Also finish people already mapped, from the page each one stopped at
               </label>
-              <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12.5, color: '#b8c4c4', cursor: running ? 'default' : 'pointer' }}>
+              <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12.5, color: 'var(--sd-fg-2, #b8c4c4)', cursor: running ? 'default' : 'pointer' }}>
                 <input type="checkbox" checked={experimental} disabled={running} style={{ marginTop: 3 }}
                   onChange={(e) => { setExperimental(e.target.checked); window.dispatchEvent(new Event('six-degrees:experimental')); }} />
                 <span>
-                  <b style={{ color: '#FFD700' }}>Experimental:</b> all-day pacing. Up to 8 pages in a sitting,
+                  <b style={{ color: 'var(--sd-gold, #FFD700)' }}>Experimental:</b> all-day pacing. Up to 8 pages in a sitting,
                   then an hour&rsquo;s rest; searches only from 9:00 to 18:00; never more than 40 searches in a day
                   or 200 in a week, however high your budget; two days&rsquo; rest after any check from LinkedIn; at
                   the budget it waits instead of stopping; and it saves every page. It also reads LinkedIn&rsquo;s own data beside
                   the page text, to fill gaps and measure how the two compare. It keeps running while the app is open.
                 </span>
               </label>
-              <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12.5, color: '#b8c4c4', cursor: running ? 'default' : 'pointer' }}>
+              <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12.5, color: 'var(--sd-fg-2, #b8c4c4)', cursor: running ? 'default' : 'pointer' }}>
                 <input type="checkbox" checked={hideChrome} disabled={running} style={{ marginTop: 3 }}
                   onChange={(e) => setHideChrome(e.target.checked)} />
                 <span>
-                  <b style={{ color: '#FFD700' }}>Hide the Chrome window while scanning.</b> Every scan runs with no
+                  <b style={{ color: 'var(--sd-gold, #FFD700)' }}>Hide the Chrome window while scanning.</b> Every scan runs with no
                   window popping up; the status bar still shows what it&rsquo;s doing, and Stop still works. Signing
                   in always opens the window.
                   <span style={{ display: 'block', marginTop: 4, color: '#e0a080' }}>
@@ -509,7 +571,7 @@ function SetupInner() {
                   </span>
                 </span>
               </label>
-              <div style={{ fontSize: 12, color: '#FFD700', lineHeight: 1.6 }}>
+              <div style={{ fontSize: 12, color: 'var(--sd-gold, #FFD700)', lineHeight: 1.6 }}>
                 Every page is a LinkedIn search, so at {paceOf(li?.limits?.pace).label} it rests{' '}
                 {paceOf(li?.limits?.pace).pagePause} seconds before each one and{' '}
                 {paceOf(li?.limits?.pace).chunkCooldown / 60 === 1 ? 'a minute' : `${paceOf(li?.limits?.pace).chunkCooldown / 60} minutes`} after every 10, and a long list can take
@@ -522,7 +584,7 @@ function SetupInner() {
                 <Btn onClick={() => run('auto-bridge-retry', { maxBridges: batch, tiers: order === 'score' ? tiers : [], order, maxPages: pages, deeper: finish })} disabled={!canSearch || (order === 'score' && !tiers.length)}>
                   Retry hidden ones
                 </Btn>
-                <span style={{ fontSize: 12, color: '#8b9a9a', marginLeft: 10 }}>People whose list was hidden last time, in case they&rsquo;ve opened it.</span>
+                <span style={{ fontSize: 12, color: 'var(--sd-fg-3, #8b9a9a)', marginLeft: 10 }}>People whose list was hidden last time, in case they&rsquo;ve opened it.</span>
               </div>
               <PausedList
                 paused={s?.paused || []}
@@ -540,15 +602,15 @@ function SetupInner() {
             <details open={failed} style={{ marginTop: 20 }}>
               <summary style={{
                 display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
-                margin: '8px 0', fontSize: 12, color: '#788', textTransform: 'uppercase', letterSpacing: 0.6,
+                margin: '8px 0', fontSize: 12, color: 'var(--sd-fg-3, #788)', textTransform: 'uppercase', letterSpacing: 0.6,
               }}>
                 {running && <Spinner />}
                 {running ? 'What it’s doing (the log)' : 'The last run’s log'}
               </summary>
               <pre ref={logRef} style={{
-                background: 'rgba(0,0,0,0.45)', border: LINE, borderRadius: 8,
+                background: 'rgba(var(--sd-shade, 0, 0, 0), 0.45)', border: LINE, borderRadius: 8,
                 padding: 14, maxHeight: 280, overflow: 'auto', margin: 0,
-                fontSize: 12.5, lineHeight: 1.7, color: '#b9c6c6',
+                fontSize: 12.5, lineHeight: 1.7, color: 'var(--sd-fg-2, #b9c6c6)',
                 fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
                 whiteSpace: 'pre-wrap', wordBreak: 'break-word',
               }}>{s.log.join('\n')}</pre>
@@ -556,17 +618,6 @@ function SetupInner() {
           )}
         </>}
 
-        <div style={{ marginTop: 32, paddingTop: 20, borderTop: LINE, fontSize: 13.5, color: '#8b9a9a' }}>
-          Checking for updates has moved to{' '}
-          <Link href="/settings#updates" style={{ color: '#3498DB' }}>Settings →</Link>
-        </div>
-
-        <p style={{ color: '#667', fontSize: 12.5, lineHeight: 1.7, marginTop: 32 }}>
-          Automating LinkedIn may go against its User Agreement, and accounts have been
-          restricted for it. This runs locally against your own account, at your own risk.
-          LinkedIn’s own CSV export is the supported route and needs none of this —{' '}
-          <Link href="/import" style={{ color: '#3498DB' }}>import a CSV instead</Link>.
-        </p>
       </div>
 
       <style>{`@keyframes spin { to { transform: rotate(360deg) } }
@@ -589,35 +640,35 @@ function ScanOne({ pick, pages, setPages, li, running, s, canSearch, busy, onSta
       margin: '16px 0', padding: '16px 18px', borderRadius: 10, fontSize: 13.5, lineHeight: 1.6,
       background: 'rgba(0,255,136,0.05)', border: '1px solid rgba(0,255,136,0.3)',
     }}>
-      <div style={{ fontSize: 11, fontWeight: 700, color: '#00ff88', letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 4 }}>
+      <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--sd-green, #00ff88)', letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 4 }}>
         Scan one circle
       </div>
       <div style={{ fontSize: 16, fontWeight: 700 }}>
         {person.name} <span style={{ fontSize: 12, color: TIER[person.tier] || '#888' }}>{person.tier}-tier</span>
       </div>
       {person.unlocked_from_name && (
-        <div style={{ fontSize: 12.5, color: '#9aa' }}>Was in {person.unlocked_from_name}&rsquo;s circle</div>
+        <div style={{ fontSize: 12.5, color: 'var(--sd-fg-3, #9aa)' }}>Was in {person.unlocked_from_name}&rsquo;s circle</div>
       )}
       {theirs ? (
         <div style={{ marginTop: 10 }}>
           <b>Scanning {first}&rsquo;s circle.</b> It saves every 10 pages, and{' '}
-          <Link href={`/?chain=${encodeURIComponent(person.id)}`} style={{ color: '#00ff88' }}>Bridge Chains shows it filling in →</Link>
+          <Link href={`/?chain=${encodeURIComponent(person.id)}`} style={{ color: 'var(--sd-green, #00ff88)' }}>Bridge Chains shows it filling in →</Link>
         </div>
       ) : (
         <>
-          <div style={{ color: '#b8c4c4', marginTop: 10 }}>
+          <div style={{ color: 'var(--sd-fg-2, #b8c4c4)', marginTop: 10 }}>
             It costs <b>{cost.profileViews} profile view</b> to find their list, then <b>one LinkedIn search for
             every page</b> of it: up to {cost.searches} {cost.searches === 1 ? 'page' : 'pages'}, about {cost.minutes} minutes.
             {li?.leftToday != null && <> <b>{li.leftToday}</b> of your {li.limits?.daily} searches a day are left{short ? '; the scan stops when they run out, and can carry on from that page later' : ''}.</>}
           </div>
           {circle === 'scanned' && (
-            <div style={{ color: '#FFD700', fontSize: 12.5, marginTop: 6 }}>
+            <div style={{ color: 'var(--sd-gold, #FFD700)', fontSize: 12.5, marginTop: 6 }}>
               Their circle is already scanned. This reads their whole list again from page 1; to carry on
               from where a read stopped, use Resume on their card or in the Paused list below.
             </div>
           )}
           {circle === 'hidden' && (
-            <div style={{ color: '#FFD700', fontSize: 12.5, marginTop: 6 }}>
+            <div style={{ color: 'var(--sd-gold, #FFD700)', fontSize: 12.5, marginTop: 6 }}>
               Their list was hidden last time it was tried. Trying again costs a profile view.
             </div>
           )}
@@ -633,7 +684,7 @@ function ScanOne({ pick, pages, setPages, li, running, s, canSearch, busy, onSta
             <Btn onClick={onUnpick}>Not now</Btn>
           </div>
           {!canSearch && (
-            <div style={{ fontSize: 12.5, color: '#8b9a9a', marginTop: 8 }}>
+            <div style={{ fontSize: 12.5, color: 'var(--sd-fg-3, #8b9a9a)', marginTop: 8 }}>
               {running ? 'Something else is running. One scan at a time: this one can start when it finishes.'
                 : li?.cooldown ? 'Scanning is paused for now (see below).'
                 : 'The scanner isn’t ready yet: finish the steps below first.'}
@@ -665,10 +716,9 @@ function useRemembered(key, fallback) {
   return [value, set];
 }
 
-const code = { background: 'rgba(255,255,255,0.08)', padding: '1px 5px', borderRadius: 4 };
 const selectStyle = {
   padding: '9px 10px', borderRadius: 7, fontSize: 13.5, fontWeight: 600,
-  background: 'rgba(255,255,255,0.08)', color: '#fff', border: LINE,
+  background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', color: 'var(--sd-fg-1, #fff)', border: LINE,
 };
 
 const JOURNEY_CSS = `
@@ -695,26 +745,26 @@ function StepRow({ n, label, state, last = false, children }) {
         <span className={now ? 'journey-now' : undefined} aria-hidden="true" style={{
           position: 'relative', zIndex: 1, width: 38, height: 38, borderRadius: '50%', display: 'grid', placeItems: 'center',
           fontSize: 15, fontWeight: 800,
-          background: done ? 'rgba(0,255,136,0.16)' : now ? 'linear-gradient(135deg, #00ff88, #1abc9c)' : '#12142a',
-          color: done ? '#00ff88' : now ? '#04140c' : '#778',
-          border: `2px solid ${done ? 'rgba(0,255,136,0.55)' : now ? 'transparent' : 'rgba(255,255,255,0.14)'}`,
+          background: done ? 'rgba(0,255,136,0.16)' : now ? 'linear-gradient(135deg, #00ff88, #1abc9c)' : 'var(--sd-card, #12142a)',
+          color: done ? 'var(--sd-green, #00ff88)' : now ? '#04140c' : 'var(--sd-fg-4, #778)',
+          border: `2px solid ${done ? 'rgba(0,255,136,0.55)' : now ? 'transparent' : 'rgba(var(--sd-ink, 255, 255, 255), 0.14)'}`,
         }}>{done ? '✓' : n}</span>
         {!last && (
           <span aria-hidden="true" style={{
             position: 'absolute', top: 40, bottom: 0, left: '50%', width: 2, marginLeft: -1, borderRadius: 1,
-            background: done ? 'linear-gradient(rgba(0,255,136,0.75), rgba(0,255,136,0.3))' : 'rgba(255,255,255,0.1)',
+            background: done ? 'linear-gradient(rgba(0,255,136,0.75), rgba(0,255,136,0.3))' : 'rgba(var(--sd-ink, 255, 255, 255), 0.1)',
           }} />
         )}
       </div>
       <div style={{ minWidth: 0, paddingBottom: last ? 0 : 16, opacity: state === 'next' ? 0.75 : 1 }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: 10, minHeight: 38, marginBottom: 6 }}>
-          <span style={{ fontSize: 12, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase', color: done ? '#00ff88' : now ? '#fff' : '#889' }}>
+          <span style={{ fontSize: 12, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase', color: done ? 'var(--sd-green, #00ff88)' : now ? 'var(--sd-fg-1, #fff)' : 'var(--sd-fg-3, #889)' }}>
             Step {n} · {label}
           </span>
           <span style={{
             fontSize: 10.5, fontWeight: 800, padding: '2px 8px', borderRadius: 10,
-            color: done ? '#00ff88' : now ? '#04140c' : '#889',
-            background: done ? 'rgba(0,255,136,0.12)' : now ? '#00ff88' : 'rgba(255,255,255,0.06)',
+            color: done ? 'var(--sd-green, #00ff88)' : now ? '#04140c' : 'var(--sd-fg-3, #889)',
+            background: done ? 'rgba(0,255,136,0.12)' : now ? '#00ff88' : 'rgba(var(--sd-ink, 255, 255, 255), 0.06)',
           }}>{done ? 'Done' : now ? 'Now' : 'Next'}</span>
         </div>
         {children}
@@ -728,40 +778,57 @@ function Mission({ title, time, body, launch, more, done = false, children }) {
   return (
     <div style={{
       padding: done ? '14px 18px' : '18px 20px', borderRadius: 14,
-      background: done ? 'rgba(0,255,136,0.03)' : 'rgba(255,255,255,0.035)',
-      border: `1px solid ${done ? 'rgba(0,255,136,0.18)' : 'rgba(255,255,255,0.1)'}`,
+      background: done ? 'rgba(0,255,136,0.03)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.035)',
+      border: `1px solid ${done ? 'rgba(0,255,136,0.18)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.1)'}`,
     }}>
       <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
         <span style={{ fontSize: done ? 16 : 19, fontWeight: 800 }}>{title}</span>
-        {time && !done && <span style={{ fontSize: 12, color: '#8fd9b6', marginLeft: 'auto' }}>⏱ {time}</span>}
+        {time && !done && <span style={{ fontSize: 12, color: 'var(--sd-fg-2, #8fd9b6)', marginLeft: 'auto' }}>⏱ {time}</span>}
       </div>
-      <div style={{ fontSize: done ? 13 : 14, color: '#9fb0bb', lineHeight: 1.6, margin: done ? '6px 0 10px' : '8px 0 14px', maxWidth: 600 }}>{body}</div>
+      <div style={{ fontSize: done ? 13 : 14, color: 'var(--sd-fg-3, #9fb0bb)', lineHeight: 1.6, margin: done ? '6px 0 10px' : '8px 0 14px', maxWidth: 600 }}>{body}</div>
       {children}
       {(launch || more) && <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>{launch}{more}</div>}
     </div>
   );
 }
 
-/** The big go button. `quiet` once that step is done, so the next thing to do stands out. */
-function Launch({ children, onClick, disabled, quiet = false }) {
+/**
+ * The big go button. `quiet` once that step is done, so the next thing to do
+ * stands out. With `href`, a link that looks the same, opened outside the app
+ * (the desktop app sends it to the browser): Chrome's download.
+ */
+function Launch({ children, onClick, disabled, quiet = false, href }) {
+  if (href) {
+    return (
+      <a className="launch-go" href={href} target="_blank" rel="noreferrer" style={{
+        ...launchLook(false, quiet), textDecoration: 'none',
+      }}>
+        <span aria-hidden="true" style={{ fontSize: quiet ? 11 : 13 }}>▶</span>{children}
+      </a>
+    );
+  }
   return (
-    <button type="button" className="launch-go" onClick={onClick} disabled={disabled} style={{
-      display: 'inline-flex', alignItems: 'center', gap: 10, padding: quiet ? '10px 18px' : '13px 26px', borderRadius: 12,
-      fontSize: quiet ? 14 : 16, fontWeight: 800, cursor: disabled ? 'not-allowed' : 'pointer',
-      color: disabled ? '#667' : quiet ? '#cfe8dc' : '#04140c', border: quiet ? '1px solid rgba(0,255,136,0.35)' : 'none',
-      background: disabled ? 'rgba(255,255,255,0.06)' : quiet ? 'rgba(0,255,136,0.08)' : 'linear-gradient(135deg, #00ff88, #1abc9c)',
-      boxShadow: disabled || quiet ? 'none' : '0 4px 22px rgba(0,255,136,0.25)',
-    }}>
+    <button type="button" className="launch-go" onClick={onClick} disabled={disabled} style={launchLook(disabled, quiet)}>
       <span aria-hidden="true" style={{ fontSize: quiet ? 11 : 13 }}>▶</span>{children}
     </button>
   );
 }
 
+function launchLook(disabled, quiet) {
+  return {
+    display: 'inline-flex', alignItems: 'center', gap: 10, padding: quiet ? '10px 18px' : '13px 26px', borderRadius: 12,
+    fontSize: quiet ? 14 : 16, fontWeight: 800, cursor: disabled ? 'not-allowed' : 'pointer',
+    color: disabled ? 'var(--sd-fg-4, #667)' : quiet ? 'var(--sd-fg-1, #cfe8dc)' : '#04140c', border: quiet ? '1px solid rgba(0,255,136,0.35)' : 'none',
+    background: disabled ? 'rgba(var(--sd-ink, 255, 255, 255), 0.06)' : quiet ? 'rgba(0,255,136,0.08)' : 'linear-gradient(135deg, #00ff88, #1abc9c)',
+    boxShadow: disabled || quiet ? 'none' : '0 4px 22px rgba(0,255,136,0.25)',
+  };
+}
+
 /** Why the second degree goes slowly: one tap away, not in the way. */
 function WhySlow() {
   return (
-    <details style={{ fontSize: 12.5, color: '#8b9a9a', lineHeight: 1.6 }}>
-      <summary style={{ cursor: 'pointer', color: '#aab7c4', fontWeight: 600 }}>Why so slow?</summary>
+    <details style={{ fontSize: 12.5, color: 'var(--sd-fg-3, #8b9a9a)', lineHeight: 1.6 }}>
+      <summary style={{ cursor: 'pointer', color: 'var(--sd-fg-2, #aab7c4)', fontWeight: 600 }}>Why so slow?</summary>
       <div style={{ marginTop: 6 }}>
         This is the part LinkedIn notices. While this app was being built, a real account was
         restricted for a while after roughly <b>19 people in one sitting</b>. So: a small batch, a day&rsquo;s
@@ -773,25 +840,54 @@ function WhySlow() {
   );
 }
 
-function Btn({ children, onClick, disabled, primary, tone }) {
+// `cluster`: its first child is a ClusterSpinner, built on hover (app/components/ClusterSpinner.js).
+// `active`: its own job is running, so it stays lit (and can't be pressed again).
+function Btn({ children, onClick, disabled, primary, tone, cluster = false, active = false }) {
   const bg = tone === 'bad' ? 'rgba(255,80,80,0.15)'
     : primary ? 'linear-gradient(135deg, #9B59B6, #3498DB)'
-    : 'rgba(255,255,255,0.08)';
+    : 'rgba(var(--sd-ink, 255, 255, 255), 0.08)';
   return (
-    <button onClick={onClick} disabled={disabled} style={{
+    <button onClick={onClick} disabled={disabled} className={cluster ? 'cluster-host' : undefined} style={{
       padding: '9px 18px', borderRadius: 7, fontSize: 13.5, fontWeight: 650,
-      color: disabled ? '#667' : '#fff', background: disabled ? 'rgba(255,255,255,0.05)' : bg,
-      border: LINE, cursor: disabled ? 'not-allowed' : 'pointer',
+      // White on the purple gradient in every look; the theme's words elsewhere.
+      color: disabled && !active ? 'var(--sd-fg-4, #667)' : primary ? '#fff' : 'var(--sd-fg-1, #fff)', background: disabled && !active ? 'rgba(var(--sd-ink, 255, 255, 255), 0.05)' : bg,
+      border: LINE, cursor: active ? 'progress' : disabled ? 'not-allowed' : 'pointer',
+      ...(cluster ? { display: 'inline-flex', alignItems: 'center', gap: 8 } : {}),
     }}>{children}</button>
   );
 }
 
+// Before the first scan, once: what scanning does and risks, and an explicit
+// "I understand" (lib/scan-risk.js). The CSV stays one click away for anyone
+// who would rather not.
+function RiskCard({ onAccept, busy }) {
+  return (
+    <div role="region" aria-label="Before your first scan" style={{
+      margin: '6px 0 18px', padding: '16px 18px', borderRadius: 12,
+      border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.14)',
+      background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)',
+    }}>
+      <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--sd-fg-1, #fff)', marginBottom: 8 }}>Before your first scan</div>
+      <ul style={{ margin: '0 0 14px', paddingLeft: 18, color: 'var(--sd-fg-2, #c8d0d0)', fontSize: 13.5, lineHeight: 1.65 }}>
+        {RISK_POINTS.map((p) => <li key={p} style={{ marginBottom: 4 }}>{p}</li>)}
+      </ul>
+      <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
+        <Btn onClick={onAccept} disabled={busy} primary>I understand</Btn>
+        <span style={{ fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)' }}>
+          Rather not? LinkedIn’s own CSV export needs none of this:{' '}
+          <Link href="/import" style={{ color: 'var(--sd-blue, #3498DB)' }}>import a CSV instead</Link>.
+        </span>
+      </div>
+    </div>
+  );
+}
+
 function Box({ children, tone }) {
   return (
     <div style={{
       margin: '16px 0', padding: '14px 16px', borderRadius: 8, fontSize: 13.5, lineHeight: 1.6,
-      background: tone === 'bad' ? 'rgba(255,80,80,0.08)' : 'rgba(255,255,255,0.05)',
-      border: `1px solid ${tone === 'bad' ? 'rgba(255,80,80,0.3)' : 'rgba(255,255,255,0.12)'}`,
+      background: tone === 'bad' ? 'rgba(255,80,80,0.08)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.05)',
+      border: `1px solid ${tone === 'bad' ? 'rgba(255,80,80,0.3)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.12)'}`,
     }}>{children}</div>
   );
 }
@@ -805,15 +901,15 @@ function Progress({ p, action }) {
     return (
       <div style={{ margin: '8px 0 6px' }}>
         <div role="progressbar" aria-label="Saving" style={{
-          height: 8, borderRadius: 4, overflow: 'hidden', background: 'rgba(255,255,255,0.08)', marginBottom: 6,
+          height: 8, borderRadius: 4, overflow: 'hidden', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', marginBottom: 6,
         }}>
           <div style={{
             width: '35%', height: '100%', borderRadius: 4,
             background: 'linear-gradient(90deg, #9B59B6, #3498DB)', animation: 'slide 1.2s ease-in-out infinite',
           }} />
         </div>
-        <div style={{ fontSize: 12.5, color: '#cfe6f7' }}>
-          Saving to your network and fetching photos — this can take a minute or two.
+        <div style={{ fontSize: 12.5, color: 'var(--sd-fg-1, #cfe6f7)' }}>
+          Saving to your network and fetching photos. This can take a minute or two.
         </div>
       </div>
     );
@@ -822,7 +918,7 @@ function Progress({ p, action }) {
   let text;
   if (p.kind === 'download') text = `Downloading Python: ${p.done.toFixed(1)} of ${p.total.toFixed(1)} MB · ${pct}%`;
   else if (p.kind === 'batch') text = `Person ${p.current} of ${p.total}`;
-  else if (action === 'refresh') text = `Looked at ${p.done.toLocaleString()} so far — stops once it reaches people already saved`;
+  else if (action === 'refresh') text = `Looked at ${p.done.toLocaleString()} so far, and stops once it reaches people already saved`;
   else text = `${p.done.toLocaleString()} of ${p.total.toLocaleString()} connections · ${pct}%`;
 
   return (
@@ -836,7 +932,7 @@ function Progress({ p, action }) {
           aria-label={text}
           style={{
             height: 8, borderRadius: 4, overflow: 'hidden',
-            background: 'rgba(255,255,255,0.08)', marginBottom: 6,
+            background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', marginBottom: 6,
           }}
         >
           <div style={{
@@ -846,7 +942,7 @@ function Progress({ p, action }) {
           }} />
         </div>
       )}
-      <div style={{ fontSize: 12.5, color: '#cfe6f7' }}>{text}</div>
+      <div style={{ fontSize: 12.5, color: 'var(--sd-fg-1, #cfe6f7)' }}>{text}</div>
     </div>
   );
 }
@@ -854,7 +950,7 @@ function Progress({ p, action }) {
 function Spinner() {
   return <span style={{
     width: 11, height: 11, borderRadius: '50%', display: 'inline-block',
-    border: '2px solid rgba(255,255,255,0.2)', borderTopColor: '#3498DB',
+    border: '2px solid rgba(var(--sd-ink, 255, 255, 255), 0.2)', borderTopColor: '#3498DB',
     animation: 'spin 0.8s linear infinite',
   }} />;
 }