vipcare 0.2.0 → 0.3.0

package/bin/vip.js

@@ -3,6 +3,7 @@
 import { Command } from 'commander';
 import fs from 'fs';
 import os from 'os';
+import readline from 'readline/promises';
 import { execFileSync } from 'child_process';
 import { checkTool, getProfilesDir, loadConfig, saveConfig } from '../lib/config.js';
 import { deleteProfile, getProfilePath, listProfiles, loadProfile, profileExists, saveProfile, searchProfiles, slugify } from '../lib/profile.js';
@@ -75,7 +76,7 @@ try {
 } catch {}
 
 const program = new Command();
-program.name('vip').description('VIP Profile Builder - Auto-build VIP person profiles from public data').version('0.2.0');
+program.name('vip').description('VIP Profile Builder - Auto-build VIP person profiles from public data').version('0.3.0');
 
 // --- add ---
 program.command('add')
@@ -178,8 +179,21 @@ program.command('add')
 program.command('list')
   .description('List all VIP profiles')
   .option('--json', 'Output as JSON')
+  .option('--tag <tag>', 'Filter by tag')
   .action((opts) => {
-    const profiles = listProfiles();
+    let profiles = listProfiles();
+
+    if (opts.tag) {
+      profiles = profiles.filter(p => {
+        const content = loadProfile(p.slug);
+        if (!content) return false;
+        const tagsMatch = content.match(/## Tags\n([\s\S]*?)(?=\n##|\n---|$)/);
+        if (!tagsMatch) return false;
+        const tags = tagsMatch[1].split('\n').filter(l => l.match(/^- /)).map(l => l.replace(/^- /, '').trim());
+        return tags.includes(opts.tag);
+      });
+    }
+
     if (opts.json) {
       const data = profiles.map(p => ({ slug: p.slug, name: p.name, summary: p.summary, updated: p.updated, path: p.path }));
       console.log(JSON.stringify(data, null, 2));
@@ -500,6 +514,226 @@ mon.command('run').description('Run monitoring now').option('-v, --verbose', 'Ve
   } else console.log(c.dim('No significant changes detected.'));
 });
 
+// --- compare ---
+program.command('compare')
+  .description('Compare two VIP profiles side by side')
+  .argument('<name1>', 'First profile name')
+  .argument('<name2>', 'Second profile name')
+  .option('--json', 'Output as JSON')
+  .action((name1, name2, opts) => {
+    const content1 = loadProfile(name1);
+    if (!content1) { console.error(c.red(`Profile not found: ${name1}`)); process.exit(1); }
+    const content2 = loadProfile(name2);
+    if (!content2) { console.error(c.red(`Profile not found: ${name2}`)); process.exit(1); }
+
+    function parseProfile(content) {
+      const vip = extractVipData(content);
+      if (vip) return vip;
+
+      const nameMatch = content.match(/^# (.+)$/m);
+      const titleMatch = content.match(/\*\*Title:\*\*\s*(.+)/);
+      const companyMatch = content.match(/\*\*Company:\*\*\s*(.+)/);
+      const locationMatch = content.match(/\*\*Location:\*\*\s*(.+)/);
+      const discMatch = content.match(/\*\*DISC:\*\*\s*(.+)/);
+      const mbtiMatch = content.match(/\*\*MBTI:\*\*\s*(.+)/);
+      const industryMatch = content.match(/\*\*Industry:\*\*\s*(.+)/);
+
+      // Parse tags from ## Tags section
+      const tags = [];
+      const tagsMatch = content.match(/## Tags\n([\s\S]*?)(?=\n##|\n---|$)/);
+      if (tagsMatch) {
+        for (const line of tagsMatch[1].split('\n')) {
+          const m = line.match(/^- (.+)/);
+          if (m) tags.push(m[1].trim());
+        }
+      }
+      if (industryMatch && !tags.length) tags.push(industryMatch[1].trim());
+
+      return {
+        name: nameMatch ? nameMatch[1] : '',
+        title: titleMatch ? titleMatch[1].trim() : '',
+        company: companyMatch ? companyMatch[1].trim() : '',
+        location: locationMatch ? locationMatch[1].trim() : '',
+        disc: discMatch ? discMatch[1].trim() : '',
+        mbti: mbtiMatch ? mbtiMatch[1].trim() : '',
+        tags,
+      };
+    }
+
+    const p1 = parseProfile(content1);
+    const p2 = parseProfile(content2);
+
+    const name1Display = p1.name || name1;
+    const name2Display = p2.name || name2;
+
+    const tags1 = (p1.tags || []).map(t => t.toLowerCase());
+    const tags2 = (p2.tags || []).map(t => t.toLowerCase());
+    const shared = tags1.filter(t => tags2.includes(t));
+    const unique1 = tags1.filter(t => !tags2.includes(t));
+    const unique2 = tags2.filter(t => !tags1.includes(t));
+
+    if (opts.json) {
+      console.log(JSON.stringify({
+        profile1: { name: name1Display, title: p1.title, company: p1.company, location: p1.location, disc: p1.disc, mbti: p1.mbti, tags: p1.tags },
+        profile2: { name: name2Display, title: p2.title, company: p2.company, location: p2.location, disc: p2.disc, mbti: p2.mbti, tags: p2.tags },
+        shared,
+        uniqueToFirst: unique1,
+        uniqueToSecond: unique2,
+      }, null, 2));
+      return;
+    }
+
+    const col1W = Math.max(20, name1Display.length + 4);
+    const col2W = Math.max(20, name2Display.length + 4);
+    const labelW = 16;
+
+    console.log();
+    console.log(c.bold(c.cyan(`${name1Display} vs ${name2Display}`)));
+    console.log('═'.repeat(labelW + col1W + col2W));
+
+    console.log(`${''.padEnd(labelW)}${c.bold(name1Display.padEnd(col1W))}${c.bold(name2Display.padEnd(col2W))}`);
+
+    const fields = [
+      ['Title:', p1.title, p2.title],
+      ['Company:', p1.company, p2.company],
+      ['Location:', p1.location, p2.location],
+      ['DISC:', p1.disc, p2.disc],
+      ['MBTI:', p1.mbti, p2.mbti],
+    ];
+
+    for (const [label, v1, v2] of fields) {
+      if (!v1 && !v2) continue;
+      console.log(`${c.dim(label.padEnd(labelW))}${(v1 || c.dim('—')).toString().padEnd(col1W)}${(v2 || c.dim('—')).toString().padEnd(col2W)}`);
+    }
+
+    console.log();
+    if (shared.length) console.log(`${c.green('Shared interests:')} ${shared.join(', ')}`);
+    if (unique1.length) console.log(`${c.cyan(`Unique to ${name1Display}:`)} ${unique1.join(', ')}`);
+    if (unique2.length) console.log(`${c.cyan(`Unique to ${name2Display}:`)} ${unique2.join(', ')}`);
+    if (!shared.length && !unique1.length && !unique2.length) console.log(c.dim('No tags to compare.'));
+    console.log();
+  });
+
+// --- tag ---
+program.command('tag')
+  .description('Add a tag to a profile')
+  .argument('<name>', 'Profile name')
+  .argument('<tag>', 'Tag to add')
+  .action((name, tag) => {
+    let content = loadProfile(name);
+    if (!content) { console.error(c.red(`Profile not found: ${name}`)); process.exit(1); }
+
+    const tagLine = `- ${tag}`;
+    const tagsMatch = content.match(/## Tags\n([\s\S]*?)(?=\n##|\n---|$)/);
+
+    if (tagsMatch) {
+      const existingTags = tagsMatch[1].split('\n').filter(l => l.match(/^- /)).map(l => l.replace(/^- /, '').trim());
+      if (existingTags.includes(tag)) {
+        console.log(c.yellow(`Tag '${tag}' already exists on ${name}.`));
+        return;
+      }
+      content = content.replace(tagsMatch[0], tagsMatch[0].trimEnd() + '\n' + tagLine);
+    } else if (content.includes('\n---\n')) {
+      content = content.replace('\n---\n', `\n## Tags\n${tagLine}\n\n---\n`);
+    } else {
+      content = content.trimEnd() + `\n\n## Tags\n${tagLine}\n`;
+    }
+
+    saveProfile(name, content);
+    console.log(c.green(`Tagged ${name} with '${tag}'.`));
+  });
+
+// --- untag ---
+program.command('untag')
+  .description('Remove a tag from a profile')
+  .argument('<name>', 'Profile name')
+  .argument('<tag>', 'Tag to remove')
+  .action((name, tag) => {
+    let content = loadProfile(name);
+    if (!content) { console.error(c.red(`Profile not found: ${name}`)); process.exit(1); }
+
+    const tagsMatch = content.match(/## Tags\n([\s\S]*?)(?=\n##|\n---|$)/);
+    if (!tagsMatch) {
+      console.log(c.yellow(`No tags found on ${name}.`));
+      return;
+    }
+
+    const lines = tagsMatch[1].split('\n').filter(l => l.match(/^- /));
+    const remaining = lines.filter(l => l.replace(/^- /, '').trim() !== tag);
+
+    if (remaining.length === lines.length) {
+      console.log(c.yellow(`Tag '${tag}' not found on ${name}.`));
+      return;
+    }
+
+    if (remaining.length === 0) {
+      // Remove the entire Tags section
+      content = content.replace(/\n?## Tags\n[\s\S]*?(?=\n##|\n---|$)/, '');
+    } else {
+      content = content.replace(tagsMatch[0], '## Tags\n' + remaining.join('\n'));
+    }
+
+    saveProfile(name, content);
+    console.log(c.green(`Removed tag '${tag}' from ${name}.`));
+  });
+
+// --- tags ---
+program.command('tags')
+  .description('List tags across profiles or for a specific profile')
+  .argument('[name]', 'Profile name (optional)')
+  .option('--json', 'Output as JSON')
+  .action((name, opts) => {
+    function parseTags(content) {
+      const tags = [];
+      const tagsMatch = content.match(/## Tags\n([\s\S]*?)(?=\n##|\n---|$)/);
+      if (tagsMatch) {
+        for (const line of tagsMatch[1].split('\n')) {
+          const m = line.match(/^- (.+)/);
+          if (m) tags.push(m[1].trim());
+        }
+      }
+      return tags;
+    }
+
+    if (name) {
+      const content = loadProfile(name);
+      if (!content) { console.error(c.red(`Profile not found: ${name}`)); process.exit(1); }
+
+      const tags = parseTags(content);
+      if (opts.json) {
+        console.log(JSON.stringify(tags, null, 2));
+        return;
+      }
+      if (!tags.length) { console.log(c.dim(`No tags on ${name}.`)); return; }
+      console.log(c.bold(c.cyan(`Tags for ${name}:\n`)));
+      for (const t of tags) console.log(`  - ${t}`);
+      console.log();
+    } else {
+      const profiles = listProfiles();
+      const counts = {};
+      for (const p of profiles) {
+        const content = loadProfile(p.slug);
+        if (!content) continue;
+        for (const t of parseTags(content)) {
+          counts[t] = (counts[t] || 0) + 1;
+        }
+      }
+
+      if (opts.json) {
+        console.log(JSON.stringify(counts, null, 2));
+        return;
+      }
+
+      const entries = Object.entries(counts).sort((a, b) => b[1] - a[1]);
+      if (!entries.length) { console.log(c.dim('No tags found across any profiles.')); return; }
+      console.log(c.bold(c.cyan('All tags:\n')));
+      for (const [tag, count] of entries) {
+        console.log(`  ${tag.padEnd(30)} ${c.dim(`(${count})`)}`);
+      }
+      console.log();
+    }
+  });
+
 // --- config ---
 program.command('config')
   .description('View/edit settings')
@@ -512,6 +746,58 @@ program.command('config')
     console.log(`  AI backend: ${(() => { const b = getBackendName(); return b !== 'none' ? c.green(b) : c.red('not found'); })()}`);
   });
 
+// --- init ---
+program.command('init')
+  .description('Interactive first-time setup for VIPCare')
+  .action(async () => {
+    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+
+    try {
+      console.log(c.bold(c.cyan('\nWelcome to VIPCare!\n')));
+
+      const defaultDir = path.join(os.homedir(), 'Projects', 'vip-crm', 'profiles');
+      const profilesAnswer = await rl.question(`Where should profiles be stored?\n  (default: ${defaultDir}) > `);
+      const profilesDir = profilesAnswer.trim() || defaultDir;
+
+      console.log(`\n${c.cyan('AI backend preference:')}`);
+      console.log('  1. Auto-detect (recommended)');
+      console.log('  2. Claude CLI');
+      console.log('  3. Anthropic API');
+      console.log('  4. GitHub Copilot CLI');
+      const backendAnswer = await rl.question('  > ');
+      const backendChoice = backendAnswer.trim() || '1';
+
+      const backendMap = { '1': 'auto', '2': 'claude-cli', '3': 'anthropic-api', '4': 'github-copilot' };
+      const aiBackend = backendMap[backendChoice] || 'auto';
+
+      const config = {
+        profiles_dir: profilesDir.replace(/^~/, os.homedir()),
+        ai_backend: aiBackend,
+      };
+
+      if (aiBackend === 'anthropic-api') {
+        const apiKey = await rl.question('\nAnthropic API key: ');
+        if (apiKey.trim()) {
+          config.anthropic_api_key = apiKey.trim();
+        }
+      }
+
+      // Merge with existing config to preserve other settings
+      let existing = {};
+      try {
+        const { loadConfig: lc } = await import('../lib/config.js');
+        existing = lc();
+      } catch {}
+      saveConfig({ ...existing, ...config });
+
+      const { CONFIG_FILE: cfgPath } = await import('../lib/config.js');
+      console.log(c.green(`\nConfig saved to ${cfgPath}`));
+      console.log(`You're ready! Try: ${c.cyan('vip add "Sam Altman" --company "OpenAI"')}\n`);
+    } finally {
+      rl.close();
+    }
+  });
+
 // --- export ---
 program.command('export')
   .description('Export all profiles as JSON')
@@ -587,4 +873,146 @@ program.command('import')
     console.log(`\nDone: ${imported} imported, ${skipped} skipped.`);
   });
 
+// --- stats ---
+program.command('stats')
+  .description('Show dashboard overview')
+  .option('--json', 'Output as JSON')
+  .action((opts) => {
+    const profiles = listProfiles();
+    const activity = readChangelog(7);
+    const backend = getBackendName();
+    const birdAvailable = checkTool('bird');
+
+    // Find most recently updated profile
+    let lastUpdated = null;
+    let lastUpdatedName = null;
+    for (const p of profiles) {
+      if (!lastUpdated || p.updated > lastUpdated) {
+        lastUpdated = p.updated;
+        lastUpdatedName = p.name;
+      }
+    }
+
+    if (opts.json) {
+      const data = {
+        profileCount: profiles.length,
+        lastUpdated: lastUpdated ? { date: lastUpdated, name: lastUpdatedName } : null,
+        aiBackend: backend,
+        birdCli: birdAvailable ? 'available' : 'not found',
+        recentActivity: activity.map(e => ({
+          date: (e.timestamp || '').slice(0, 10),
+          name: e.name,
+          type: e.type,
+          summary: e.summary,
+        })),
+      };
+      console.log(JSON.stringify(data, null, 2));
+      return;
+    }
+
+    console.log(c.bold(c.cyan('\nVIPCare Stats')));
+    console.log('─'.repeat(15));
+    console.log(`  Profiles:     ${c.green(String(profiles.length))}`);
+    if (lastUpdated) {
+      console.log(`  Last updated: ${c.green(lastUpdated)} (${lastUpdatedName})`);
+    } else {
+      console.log(`  Last updated: ${c.dim('n/a')}`);
+    }
+    console.log(`  AI backend:   ${backend !== 'none' ? c.green(backend) : c.dim('not found')}`);
+    console.log(`  Bird CLI:     ${birdAvailable ? c.green('available') : c.dim('not found')}`);
+
+    if (activity.length) {
+      console.log(`\n  Recent activity (7 days):`);
+      for (const e of activity) {
+        const date = (e.timestamp || '').slice(0, 10);
+        const label = e.summary || (e.type === 'created' ? 'Profile created' : 'Profile updated');
+        console.log(`    [${date}] ${e.name} — ${label}`);
+      }
+    } else {
+      console.log(`\n  ${c.dim('No recent activity (7 days)')}`);
+    }
+    console.log();
+  });
+
+// --- regenerate ---
+program.command('regenerate')
+  .description('Re-synthesize all profiles with current AI template')
+  .option('--dry-run', 'Show what would be regenerated without doing it')
+  .option('--no-ai', 'Skip AI synthesis (raw data only)')
+  .action(async (opts) => {
+    const profiles = listProfiles();
+    if (!profiles.length) {
+      console.log(c.dim('No profiles to regenerate. Use "vip add" to create one.'));
+      return;
+    }
+
+    if (opts.dryRun) {
+      console.log(c.cyan('Dry run — would regenerate:\n'));
+      profiles.forEach((p, i) => {
+        console.log(`  [${i + 1}/${profiles.length}] ${p.name}`);
+      });
+      console.log(`\n${profiles.length} profile(s) would be regenerated.`);
+      return;
+    }
+
+    console.log(c.cyan('Regenerating all profiles with current template...'));
+    let count = 0;
+
+    for (let i = 0; i < profiles.length; i++) {
+      const p = profiles[i];
+      const prefix = `  [${i + 1}/${profiles.length}] ${p.name}`;
+      const stop = spinner(`${prefix}...`);
+
+      try {
+        const content = loadProfile(p.slug);
+        if (!content) {
+          stop();
+          console.log(`${prefix}... ${c.yellow('skipped (not found)')}`);
+          continue;
+        }
+
+        const { extractMetadata } = await import('../lib/monitor.js');
+        const meta = extractMetadata(content);
+        const personName = meta.name || p.name;
+
+        const person = resolveFromName(personName);
+        if (meta.twitterHandle) person.twitterHandle = person.twitterHandle || meta.twitterHandle;
+        if (meta.linkedinUrl) person.linkedinUrl = person.linkedinUrl || meta.linkedinUrl;
+
+        const [rawData, sources] = gatherData(person);
+        if (!rawData.trim()) {
+          stop();
+          console.log(`${prefix}... ${c.yellow('skipped (no data)')}`);
+          continue;
+        }
+
+        let profile;
+        if (opts.ai === false) {
+          profile = `# ${personName}\n\n## Raw Data\n\n${rawData}`;
+        } else {
+          profile = await synthesizeProfile(rawData, sources);
+        }
+
+        saveProfile(personName, profile);
+        stop();
+        console.log(`${prefix}... ${c.green('done')}`);
+
+        appendChangelog({
+          timestamp: new Date().toISOString(),
+          name: personName,
+          slug: p.slug,
+          type: 'updated',
+          summary: `Profile regenerated with current template`,
+        });
+
+        count++;
+      } catch (e) {
+        stop();
+        console.log(`${prefix}... ${c.red(`error: ${e.message}`)}`);
+      }
+    }
+
+    console.log(`\n${count} profile(s) regenerated.`);
+  });
+
 program.parseAsync();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vipcare",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Auto-build VIP person profiles from Twitter/LinkedIn public data",
   "type": "module",
   "bin": {

package/web/index.html

@@ -6,9 +6,10 @@
 <title>VIPCare - Baseball Cards</title>
 <style>
 * { margin: 0; padding: 0; box-sizing: border-box; }
-body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; padding: 20px; }
+html { scroll-behavior: smooth; }
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; padding: 20px; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
 h1 { text-align: center; font-size: 1.8em; margin: 20px 0 30px; color: #38bdf8; }
-.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; }
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; }
 
 .card {
   background: linear-gradient(145deg, #1e293b, #334155);
@@ -19,8 +20,11 @@ h1 { text-align: center; font-size: 1.8em; margin: 20px 0 30px; color: #38bdf8;
   transition: transform 0.2s, box-shadow 0.2s;
   position: relative;
   overflow: hidden;
+  min-height: 44px;
+  -webkit-tap-highlight-color: transparent;
 }
 .card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(56,189,248,0.15); }
+.card:active { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(56,189,248,0.1); }
 .card::before {
   content: '';
   position: absolute;
@@ -33,17 +37,17 @@ h1 { text-align: center; font-size: 1.8em; margin: 20px 0 30px; color: #38bdf8;
 .card-name { font-size: 1.4em; font-weight: 700; color: #f1f5f9; }
 .card-role { font-size: 0.85em; color: #94a3b8; margin-top: 2px; }
 .card-badges { display: flex; gap: 6px; }
-.badge { padding: 3px 8px; border-radius: 6px; font-size: 0.7em; font-weight: 700; }
+.badge { padding: 4px 10px; border-radius: 6px; font-size: 0.75em; font-weight: 700; min-height: 28px; display: inline-flex; align-items: center; }
 .badge-disc { background: #38bdf8; color: #0f172a; }
 .badge-mbti { background: #818cf8; color: #0f172a; }
 
 .card-quote { font-style: italic; color: #94a3b8; font-size: 0.8em; margin: 10px 0; padding: 8px 12px; border-left: 3px solid #475569; }
 
 .radar-container { display: flex; justify-content: center; margin: 16px 0; }
-.radar { width: 200px; height: 200px; }
+.radar { width: 200px; height: 200px; max-width: 100%; }
 
 .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
-.tag { background: #1e3a5f; color: #38bdf8; padding: 3px 10px; border-radius: 12px; font-size: 0.75em; }
+.tag { background: #1e3a5f; color: #38bdf8; padding: 4px 12px; border-radius: 12px; font-size: 0.75em; min-height: 28px; display: inline-flex; align-items: center; }
 
 .expertise { margin: 10px 0; }
 .expertise-title { font-size: 0.75em; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
@@ -51,7 +55,7 @@ h1 { text-align: center; font-size: 1.8em; margin: 20px 0 30px; color: #38bdf8;
 .superpower { color: #fbbf24; font-weight: 600; font-size: 0.85em; margin: 6px 0; }
 
 .tips { margin-top: 12px; border-top: 1px solid #475569; padding-top: 12px; }
-.tip-row { display: flex; gap: 4px; font-size: 0.8em; margin: 4px 0; color: #cbd5e1; }
+.tip-row { display: flex; gap: 4px; font-size: 0.8em; margin: 4px 0; color: #cbd5e1; min-height: 44px; align-items: center; }
 .tip-icon { width: 20px; text-align: center; }
 .tip-label { color: #64748b; min-width: 55px; }
 
@@ -61,11 +65,32 @@ h1 { text-align: center; font-size: 1.8em; margin: 20px 0 30px; color: #38bdf8;
 .modal {
   background: #1e293b; border-radius: 16px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 32px;
   border: 1px solid #475569;
+  -webkit-overflow-scrolling: touch;
 }
-.modal-close { float: right; background: none; border: none; color: #94a3b8; font-size: 1.5em; cursor: pointer; }
+.modal-close { float: right; background: none; border: none; color: #94a3b8; font-size: 1.5em; cursor: pointer; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
 .modal h2 { color: #38bdf8; margin: 16px 0 8px; font-size: 1.1em; }
 .modal p, .modal li { color: #cbd5e1; font-size: 0.9em; line-height: 1.6; }
 .modal ul { padding-left: 20px; }
+
+/* Mobile: screens < 480px */
+@media (max-width: 480px) {
+  body { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
+  h1 { font-size: 1.5em; margin: 12px 0 20px; }
+  .grid { grid-template-columns: 1fr; gap: 16px; }
+  .card { padding: 18px; }
+  .card-name { font-size: 1.25em; }
+  .card-role { font-size: 0.9em; }
+  .card-quote { font-size: 0.85em; }
+  .tip-row { font-size: 0.85em; }
+  .radar { width: 180px; height: 180px; }
+  .badge { font-size: 0.8em; padding: 5px 12px; }
+  .tag { font-size: 0.8em; padding: 5px 14px; }
+
+  .modal-overlay { padding: 0; align-items: stretch; }
+  .modal { max-width: 100%; max-height: 100vh; height: 100%; border-radius: 0; padding: 20px; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
+  .modal h2 { font-size: 1.15em; }
+  .modal p, .modal li { font-size: 0.95em; line-height: 1.7; }
+}
 </style>
 </head>
 <body>
@@ -116,10 +141,10 @@ function radarSvg(scores, size = 200) {
     const y = cy + r * Math.sin(angle);
     axes += `<line x1="${cx}" y1="${cy}" x2="${x}" y2="${y}" stroke="#334155" stroke-width="0.5"/>`;
 
-    const lx = cx + (r + 18) * Math.cos(angle);
-    const ly = cy + (r + 18) * Math.sin(angle);
+    const lx = cx + (r + 22) * Math.cos(angle);
+    const ly = cy + (r + 22) * Math.sin(angle);
     const label = SCORE_LABELS[keys[i]] || keys[i];
-    labels += `<text x="${lx}" y="${ly}" text-anchor="middle" dominant-baseline="middle" fill="#64748b" font-size="7">${label}</text>`;
+    labels += `<text x="${lx}" y="${ly}" text-anchor="middle" dominant-baseline="middle" fill="#64748b" font-size="9">${label}</text>`;
 
     const val = (scores[keys[i]] || 0) / 5;
     const dx = cx + r * val * Math.cos(angle);