Upgrade: STAR method coaching, ideal answers, follow-up questions, detailed scoring

.gitignore

@@ -1,4 +1,4 @@
 node_modules/
-.env
 dist/
+.env
 .DS_Store

backend/public/assets/index-33lJK7Fm.css

@@ -0,0 +1 @@
+*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0a1a;--bg-card: #131332;--bg-card-alt: #1a1a40;--accent: #6c5ce7;--accent-light: #a29bfe;--success: #00b894;--warning: #fdcb6e;--danger: #e17055;--text: #eee;--text-dim: #999;--border: #2d2d5e}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}.app{max-width:860px;margin:0 auto;padding:2rem 1.5rem}.header{text-align:center;margin-bottom:2rem}.header h1{font-size:2.2rem;font-weight:800;background:linear-gradient(135deg,#6c5ce7,#a29bfe,#00b894);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header p{color:var(--text-dim);margin-top:.4rem}.setup-card{background:var(--bg-card);border-radius:16px;padding:2rem}.form-group{margin-bottom:1.2rem}.form-group label{display:block;font-size:.85rem;color:var(--text-dim);margin-bottom:.4rem}.form-group input,.form-group select{width:100%;padding:.7rem 1rem;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:1rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.btn-primary{width:100%;padding:1rem;margin-top:1rem;background:linear-gradient(135deg,#6c5ce7,#a29bfe);border:none;border-radius:12px;color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;transition:transform .2s}.btn-primary:hover{transform:translateY(-1px)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.progress-bar{display:flex;align-items:center;gap:.8rem;margin-bottom:1.5rem;padding:.8rem 1rem;background:var(--bg-card);border-radius:12px}.progress-track{flex:1;height:8px;background:var(--border);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#6c5ce7,#00b894);transition:width .5s ease;border-radius:4px}.progress-text{font-size:.85rem;color:var(--text-dim);white-space:nowrap}.question-card{background:var(--bg-card);border-radius:16px;padding:1.5rem;margin-bottom:1.5rem;border-left:4px solid var(--accent)}.question-card .q-label{font-size:.8rem;color:var(--accent-light);text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}.question-card .q-text{font-size:1.15rem;line-height:1.5}.question-card .q-hint{margin-top:.8rem;font-size:.85rem;color:var(--text-dim);font-style:italic}.answer-area textarea{width:100%;min-height:150px;padding:1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:1rem;resize:vertical;line-height:1.5}.answer-area textarea:focus{outline:none;border-color:var(--accent)}.char-count{text-align:right;font-size:.8rem;color:var(--text-dim);margin-top:.3rem}.eval-card{background:var(--bg-card);border-radius:16px;padding:1.5rem;margin:1rem 0;animation:slideIn .4s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.eval-score{font-size:2rem;font-weight:800;text-align:center;margin-bottom:.5rem}.eval-score.good{color:var(--success)}.eval-score.ok{color:var(--warning)}.eval-score.bad{color:var(--danger)}.eval-feedback{color:var(--text-dim);line-height:1.5;margin-bottom:1rem;text-align:center}.eval-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem;border-bottom:1px solid var(--border);padding-bottom:.8rem}.eval-tab{padding:.4rem .8rem;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text-dim);cursor:pointer;font-size:.8rem;transition:all .2s}.eval-tab:hover{border-color:var(--accent);color:var(--text)}.eval-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}.eval-tab-content{min-height:100px}.eval-section{margin-top:.8rem}.eval-section h4{font-size:.9rem;margin-bottom:.4rem}.eval-section ul{list-style:none;padding:0}.eval-section li{padding:.3rem 0 .3rem 1.2rem;position:relative;color:var(--text-dim);font-size:.9rem}.eval-section li:before{position:absolute;left:0}.eval-section.strengths li:before{content:"✓";color:var(--success);font-weight:700}.eval-section.improvements li:before{content:"→";color:var(--warning)}.sample-answer{margin-top:1rem;padding:1rem;background:#00b89414;border-radius:8px;border-left:3px solid var(--success)}.sample-answer h4{color:var(--success);margin-bottom:.4rem;font-size:.9rem}.sample-answer p{color:var(--text-dim);font-size:.9rem;line-height:1.5}.star-analysis h4{margin-bottom:.5rem;color:var(--accent-light)}.star-desc{color:var(--text-dim);font-size:.85rem;margin-bottom:1rem}.star-item{padding:.8rem 1rem;margin-bottom:.6rem;border-radius:10px;border-left:4px solid var(--border)}.star-item-present{background:#00b8940f;border-left-color:var(--success)}.star-item-missing{background:#e170550f;border-left-color:var(--danger)}.star-item-header{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}.star-item-letter{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:50%;font-weight:800;font-size:.85rem}.star-item-name{font-weight:600;font-size:.95rem}.star-badge{font-size:.7rem;padding:.15rem .5rem;border-radius:10px;font-weight:600;margin-left:auto}.star-present{background:#00b89433;color:var(--success)}.star-missing{background:#e1705533;color:var(--danger)}.star-item-feedback{color:var(--text-dim);font-size:.85rem;line-height:1.5}.detailed-scores h4{margin-bottom:1rem;color:var(--accent-light)}.score-bar-row{display:flex;align-items:center;gap:.8rem;margin-bottom:.7rem}.score-bar-label{width:140px;font-size:.85rem;color:var(--text-dim);flex-shrink:0}.score-bar-track{flex:1;height:8px;background:var(--border);border-radius:4px;overflow:hidden}.score-bar-fill{height:100%;border-radius:4px;transition:width .5s ease}.score-bar-fill.good{background:var(--success)}.score-bar-fill.ok{background:var(--warning)}.score-bar-fill.bad{background:var(--danger)}.score-bar-value{width:40px;text-align:right;font-size:.85rem;font-weight:700;flex-shrink:0}.score-bar-value.good{color:var(--success)}.score-bar-value.ok{color:var(--warning)}.score-bar-value.bad{color:var(--danger)}.language-check h4{color:var(--accent-light);margin-bottom:.5rem}.language-section{margin-bottom:1.2rem}.tag-list{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}.tag{padding:.25rem .7rem;border-radius:14px;font-size:.8rem;font-weight:600}.tag-warning{background:#fdcb6e26;color:var(--warning)}.language-tip{color:var(--text-dim);font-size:.82rem;font-style:italic;margin-top:.4rem}.vague-list{list-style:none;padding:0}.vague-list li{padding:.3rem 0}.vague-quote{color:var(--danger);font-style:italic;font-size:.9rem}.language-clean{text-align:center;padding:2rem;color:var(--success)}.clean-icon{font-size:2rem;display:block;margin-bottom:.5rem}.followup-section h4{color:var(--accent-light);margin-bottom:.3rem}.followup-desc{color:var(--text-dim);font-size:.85rem;margin-bottom:1rem}.followup-list{padding-left:1.2rem}.followup-list li{padding:.5rem 0;color:var(--text);font-size:.95rem;line-height:1.5;border-bottom:1px solid rgba(45,45,94,.5)}.followup-list li:last-child{border-bottom:none}.ideal-answer-section h4{color:var(--accent-light);margin-bottom:.3rem}.ideal-desc{color:var(--text-dim);font-size:.85rem;margin-bottom:1rem}.ideal-answer-box{padding:1.2rem;background:#00b8940f;border-left:4px solid var(--success);border-radius:8px}.ideal-answer-box p{color:var(--text-dim);line-height:1.6;font-size:.92rem}.rewrite-section h4{color:var(--accent-light);margin-bottom:.3rem}.rewrite-desc{color:var(--text-dim);font-size:.85rem;margin-bottom:1rem}.rewrite-box{padding:1.2rem;background:#6c5ce714;border-left:4px solid var(--accent);border-radius:8px}.rewrite-box p{color:var(--text-dim);line-height:1.6;font-size:.92rem}.delivery-section h4{color:var(--accent-light);margin-bottom:.8rem}.delivery-list{list-style:none;padding:0}.delivery-list li{padding:.6rem .8rem .6rem 2rem;position:relative;color:var(--text-dim);font-size:.9rem;line-height:1.5;margin-bottom:.4rem;background:#6c5ce70d;border-radius:8px}.delivery-list li:before{content:"▶";position:absolute;left:.8rem;color:var(--accent-light);font-size:.7rem}.report{animation:slideIn .5s ease}.report-header{text-align:center;padding:2rem;background:var(--bg-card);border-radius:16px;margin-bottom:1.5rem}.report-score{font-size:4rem;font-weight:800}.report-score.good{color:var(--success)}.report-score.ok{color:var(--warning)}.report-score.bad{color:var(--danger)}.verdict{display:inline-block;padding:.3rem 1rem;border-radius:20px;font-weight:700;font-size:.9rem;margin-top:.5rem}.verdict.STRONG_HIRE{background:#00b89433;color:var(--success)}.verdict.HIRE{background:#00b89426;color:var(--success)}.verdict.MAYBE{background:#fdcb6e33;color:var(--warning)}.verdict.NO_HIRE{background:#e1705533;color:var(--danger)}.report-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.5rem}.report-tab{padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;color:var(--text-dim);cursor:pointer;font-size:.85rem;font-weight:500;transition:all .2s}.report-tab:hover{border-color:var(--accent);color:var(--text)}.report-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.report-tab-content{min-height:150px}.report-card{background:var(--bg-card);border-radius:16px;padding:1.5rem;margin-bottom:1rem}.report-card h3{margin-bottom:.8rem}.report-card ul{list-style:none;padding:0}.report-card li{padding:.4rem 0 .4rem 1.5rem;position:relative;color:var(--text-dim)}.report-card li:before{position:absolute;left:0}.report-card.strengths li:before{content:"✓";color:var(--success);font-weight:700}.report-card.improve li:before{content:"→";color:var(--warning)}.report-summary{color:var(--text-dim);line-height:1.6;margin-top:.5rem}.readiness{text-align:center;margin-top:.8rem;font-size:1.1rem}.section-desc{color:var(--text-dim);font-size:.85rem;margin-bottom:1rem}.comm-scores{margin-top:.5rem}.pattern-trajectory{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem;padding:.8rem 1rem;background:var(--bg);border-radius:10px}.trajectory-label{color:var(--text-dim);font-size:.9rem}.trajectory-value{font-weight:700;font-size:.95rem;padding:.2rem .8rem;border-radius:12px}.trajectory-improving{background:#00b89426;color:var(--success)}.trajectory-stable{background:#fdcb6e26;color:var(--warning)}.trajectory-declining{background:#e1705526;color:var(--danger)}.pattern-section{margin-bottom:1rem}.pattern-section h4{font-size:.9rem;margin-bottom:.4rem;color:var(--text)}.pattern-list{list-style:none;padding:0}.pattern-list li{padding:.35rem 0 .35rem 1.3rem;position:relative;color:var(--text-dim);font-size:.9rem}.pattern-list li:before{position:absolute;left:0}.pattern-strengths li:before{content:"✓";color:var(--success);font-weight:700}.pattern-weaknesses li:before{content:"✗";color:var(--danger)}.action-item{padding:1rem;margin-bottom:.8rem;background:var(--bg);border-radius:10px;border-left:4px solid var(--border)}.action-header{display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem}.priority-badge{font-size:.7rem;padding:.15rem .6rem;border-radius:10px;font-weight:700;letter-spacing:.5px}.priority-high{background:#e1705533;color:var(--danger)}.priority-medium{background:#fdcb6e33;color:var(--warning)}.priority-low{background:#00b89426;color:var(--success)}.action-timeframe{color:var(--text-dim);font-size:.8rem}.action-text{color:var(--text-dim);font-size:.9rem;line-height:1.5}.qa-breakdown-item{padding:1rem 0;border-bottom:1px solid var(--border)}.qa-breakdown-item:last-child{border-bottom:none}.qa-question{font-weight:600;margin-bottom:.3rem;font-size:.95rem}.qa-answer{color:var(--text-dim);font-size:.85rem;margin-bottom:.3rem}.qa-score-line{font-size:.85rem;color:var(--text-dim)}.qa-score{font-weight:700}.qa-score.good{color:var(--success)}.qa-score.ok{color:var(--warning)}.qa-score.bad{color:var(--danger)}.tips-list{list-style:none;padding:0}.tips-list li{padding:.7rem 1rem .7rem 2rem;position:relative;color:var(--text-dim);font-size:.9rem;line-height:1.5;margin-bottom:.4rem;background:#6c5ce70d;border-radius:8px}.tips-list li:before{content:"★";position:absolute;left:.8rem;color:var(--accent-light)}.btn-secondary{display:block;margin:2rem auto 0;padding:.8rem 2rem;background:transparent;border:2px solid var(--accent);border-radius:12px;color:var(--accent);font-size:1rem;cursor:pointer}.btn-secondary:hover{background:var(--accent);color:#fff}.loading{text-align:center;padding:2rem}.spinner{width:40px;height:40px;border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:600px){.form-row{grid-template-columns:1fr}.header h1{font-size:1.6rem}.eval-tabs,.report-tabs{gap:.3rem}.eval-tab,.report-tab{font-size:.72rem;padding:.3rem .5rem}.score-bar-label{width:100px;font-size:.78rem}.star-item-header{flex-wrap:wrap}}

backend/public/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AI Interview Coach</title>
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎤</text></svg>" />
+  <script type="module" crossorigin src="/assets/index-DabwDG1k.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-33lJK7Fm.css">
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

backend/routes/interview.js

@@ -125,7 +125,9 @@ router.get('/report/:sessionId', async (req, res) => {
         question: a.question,
         answer: a.answer,
         score: a.score,
-        feedback: a.evaluation.feedback
+        feedback: a.evaluation.feedback,
+        detailedScores: a.evaluation.detailedScores,
+        starAnalysis: a.evaluation.starAnalysis
       })),
       meta: {
         role: session.role,

backend/services/ai.js

@@ -8,7 +8,7 @@ async function callAI(prompt) {
     const res = await fetch('https://api.groq.com/openai/v1/chat/completions', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${GROQ_API_KEY}` },
-      body: JSON.stringify({ model: GROQ_MODEL, messages: [{ role: 'user', content: prompt }], temperature: 0.7 }),
+      body: JSON.stringify({ model: GROQ_MODEL, messages: [{ role: 'user', content: prompt }], temperature: 0.7, max_tokens: 4096 }),
     });
     if (res.ok) { const data = await res.json(); return data.choices[0].message.content; }
     console.warn('Groq failed, falling back to Ollama...');
@@ -24,7 +24,14 @@ async function callAI(prompt) {
 
 function parseJSON(text) {
   try { return JSON.parse(text.trim()); }
-  catch { const m = text.match(/\{[\s\S]*\}/); if (m) return JSON.parse(m[0]); throw new Error('Failed to parse AI response'); }
+  catch {
+    const m = text.match(/\{[\s\S]*\}/);
+    if (m) {
+      try { return JSON.parse(m[0]); }
+      catch { /* fall through */ }
+    }
+    throw new Error('Failed to parse AI response');
+  }
 }
 
 const DIFFICULTY_MAP = {
@@ -51,29 +58,100 @@ Return ONLY JSON, no markdown.`);
 }
 
 async function evaluateAnswer(role, question, answer, difficulty) {
-  const text = await callAI(`You are an expert interviewer evaluating a candidate for a ${role} position.
+  const text = await callAI(`You are an elite interview coach who has served on Google's hiring committee and trained thousands of candidates. You evaluate with precision and depth.
+
+ROLE: ${role}
+DIFFICULTY: ${difficulty}
 QUESTION: ${question}
 CANDIDATE'S ANSWER: ${answer}
-DIFFICULTY: ${difficulty}
 
-Return ONLY valid JSON:
-{"score":<1-10>,"feedback":"<2-3 sentences>","strengths":["<strength>"],"improvements":["<suggestion 1>","<suggestion 2>"],"sampleAnswer":"<strong example answer>"}
+Perform a comprehensive evaluation across multiple dimensions:
 
-Return ONLY JSON, no markdown.`);
+1. STAR METHOD: Did the candidate use Situation-Task-Action-Result? Identify which elements are present/missing.
+2. CONTENT QUALITY: Evaluate specificity (concrete examples vs vague claims), relevance, and technical depth.
+3. COMMUNICATION: Detect filler words or vague language ("stuff", "things", "basically", "kind of", "sort of", "I think", "maybe"). Evaluate clarity.
+4. CONFIDENCE: Does the answer show ownership ("I led", "I decided") or deflection ("we just", "they told me to")?
+5. SCORING: Use a Google hiring committee rubric - score each dimension independently.
+6. FOLLOW-UP QUESTIONS: What would a skilled interviewer ask next?
+7. IDEAL ANSWER: Write the answer a top candidate would give.
+8. DELIVERY TIPS: Body language, pacing, presentation improvements.
+9. REWRITTEN ANSWER: Rewrite their answer to be significantly stronger while keeping their core content.
+
+Return ONLY valid JSON (no markdown, no code fences):
+{
+  "score": <1-10 overall>,
+  "feedback": "<2-3 sentence overall assessment>",
+  "strengths": ["<strength 1>", "<strength 2>"],
+  "improvements": ["<specific improvement 1>", "<specific improvement 2>"],
+  "starAnalysis": {
+    "situation": {"present": true, "feedback": "<what they said or what is missing>"},
+    "task": {"present": false, "feedback": "<what they said or what is missing>"},
+    "action": {"present": true, "feedback": "<what they said or what is missing>"},
+    "result": {"present": false, "feedback": "<what they said or what is missing>"}
+  },
+  "detailedScores": {
+    "relevance": <1-10>,
+    "specificity": <1-10>,
+    "structure": <1-10>,
+    "communication": <1-10>,
+    "confidence": <1-10>,
+    "technicalDepth": <1-10>
+  },
+  "fillerWords": ["<detected filler word or phrase>"],
+  "vagueStatements": ["<vague statement from their answer>"],
+  "followUpQuestions": ["<follow-up Q1>", "<follow-up Q2>", "<follow-up Q3>"],
+  "idealAnswer": "<the ideal answer a top candidate would give>",
+  "rewrittenAnswer": "<their answer rewritten to be much stronger>",
+  "deliveryTips": ["<tip 1>", "<tip 2>", "<tip 3>"],
+  "sampleAnswer": "<brief strong example answer>"
+}
+
+Use true/false booleans for present fields. Be thorough and actionable. Return ONLY JSON.`);
   return parseJSON(text);
 }
 
 async function generateFinalReport(role, questionsAndAnswers) {
-  const qaPairs = questionsAndAnswers.map((qa, i) => `Q${i+1}: ${qa.question}\nAnswer: ${qa.answer}\nScore: ${qa.score}/10`).join('\n\n');
-  const text = await callAI(`You are an expert interviewer writing a final assessment for a ${role} candidate.
+  const qaPairs = questionsAndAnswers.map((qa, i) =>
+    `Q${i+1}: ${qa.question}\nAnswer: ${qa.answer}\nScore: ${qa.score}/10`
+  ).join('\n\n');
+
+  const text = await callAI(`You are an elite interview coach writing a comprehensive final assessment for a ${role} candidate. You have evaluated candidates for top tech companies.
 
 INTERVIEW TRANSCRIPT:
 ${qaPairs}
 
-Return ONLY valid JSON:
-{"overallScore":<1-100>,"verdict":"<STRONG_HIRE|HIRE|MAYBE|NO_HIRE>","summary":"<3-4 sentences>","topStrengths":["<s1>","<s2>","<s3>"],"areasToImprove":["<a1>","<a2>","<a3>"],"recommendation":"<2-3 sentences>","readinessLevel":"<Not Ready|Getting There|Almost Ready|Interview Ready>"}
+Provide a thorough final report. Analyze patterns across all answers.
 
-Return ONLY JSON, no markdown.`);
+Return ONLY valid JSON (no markdown, no code fences):
+{
+  "overallScore": <1-100>,
+  "verdict": "<STRONG_HIRE|HIRE|MAYBE|NO_HIRE>",
+  "summary": "<4-5 sentence comprehensive summary>",
+  "topStrengths": ["<strength 1>", "<strength 2>", "<strength 3>"],
+  "areasToImprove": ["<area 1>", "<area 2>", "<area 3>"],
+  "recommendation": "<3-4 sentences of specific next steps>",
+  "readinessLevel": "<Not Ready|Getting There|Almost Ready|Interview Ready>",
+  "communicationProfile": {
+    "clarity": <1-10>,
+    "conciseness": <1-10>,
+    "confidence": <1-10>,
+    "storytelling": <1-10>,
+    "technicalArticulation": <1-10>
+  },
+  "interviewPatterns": {
+    "consistentStrengths": ["<pattern 1>", "<pattern 2>"],
+    "consistentWeaknesses": ["<pattern 1>", "<pattern 2>"],
+    "trajectory": "<improving|stable|declining>"
+  },
+  "actionPlan": [
+    {"priority": "high", "action": "<specific action item>", "timeframe": "<e.g., 1 week>"},
+    {"priority": "medium", "action": "<specific action item>", "timeframe": "<e.g., 2 weeks>"},
+    {"priority": "low", "action": "<specific action item>", "timeframe": "<e.g., 1 month>"}
+  ],
+  "mockInterviewTips": ["<tip 1>", "<tip 2>", "<tip 3>"]
+}
+
+Return ONLY JSON.`);
   return parseJSON(text);
 }
 

frontend/src/components/Interview.jsx

@@ -6,18 +6,53 @@ function scoreClass(score) {
   return 'bad';
 }
 
+function StarBadge({ present }) {
+  return (
+    <span className={`star-badge ${present ? 'star-present' : 'star-missing'}`}>
+      {present ? 'Present' : 'Missing'}
+    </span>
+  );
+}
+
+function ScoreBar({ label, value, max = 10 }) {
+  const pct = (value / max) * 100;
+  const cls = value >= 7 ? 'good' : value >= 4 ? 'ok' : 'bad';
+  return (
+    <div className="score-bar-row">
+      <span className="score-bar-label">{label}</span>
+      <div className="score-bar-track">
+        <div className={`score-bar-fill ${cls}`} style={{ width: `${pct}%` }} />
+      </div>
+      <span className={`score-bar-value ${cls}`}>{value}/{max}</span>
+    </div>
+  );
+}
+
 export default function Interview({ question, progress, onSubmit, evaluation, loading }) {
   const [answer, setAnswer] = useState('');
+  const [activeTab, setActiveTab] = useState('overview');
 
   const handleSubmit = () => {
     if (answer.trim().length >= 10) {
       onSubmit(answer.trim());
       setAnswer('');
+      setActiveTab('overview');
     }
   };
 
   const pct = (progress.answered / progress.total) * 100;
 
+  const tabs = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'star', label: 'STAR Analysis' },
+    { id: 'scores', label: 'Detailed Scores' },
+    { id: 'language', label: 'Language Check' },
+    { id: 'followup', label: 'Follow-ups' },
+    { id: 'ideal', label: 'Ideal Answer' },
+    { id: 'rewrite', label: 'Rewritten' },
+    { id: 'delivery', label: 'Delivery Tips' },
+  ];
+
   return (
     <div className="interview-panel">
       <div className="progress-bar">
@@ -40,26 +75,152 @@ export default function Interview({ question, progress, onSubmit, evaluation, lo
           </div>
           <p className="eval-feedback">{evaluation.feedback}</p>
 
-          {evaluation.strengths?.length > 0 && (
-            <div className="eval-section strengths">
-              <h4>Strengths</h4>
-              <ul>{evaluation.strengths.map((s, i) => <li key={i}>{s}</li>)}</ul>
-            </div>
-          )}
-
-          {evaluation.improvements?.length > 0 && (
-            <div className="eval-section improvements">
-              <h4>How to improve</h4>
-              <ul>{evaluation.improvements.map((s, i) => <li key={i}>{s}</li>)}</ul>
-            </div>
-          )}
-
-          {evaluation.sampleAnswer && (
-            <div className="sample-answer">
-              <h4>Strong answer example</h4>
-              <p>{evaluation.sampleAnswer}</p>
-            </div>
-          )}
+          <div className="eval-tabs">
+            {tabs.map(tab => (
+              <button
+                key={tab.id}
+                className={`eval-tab ${activeTab === tab.id ? 'active' : ''}`}
+                onClick={() => setActiveTab(tab.id)}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          <div className="eval-tab-content">
+            {activeTab === 'overview' && (
+              <>
+                {evaluation.strengths?.length > 0 && (
+                  <div className="eval-section strengths">
+                    <h4>Strengths</h4>
+                    <ul>{evaluation.strengths.map((s, i) => <li key={i}>{s}</li>)}</ul>
+                  </div>
+                )}
+                {evaluation.improvements?.length > 0 && (
+                  <div className="eval-section improvements">
+                    <h4>How to Improve</h4>
+                    <ul>{evaluation.improvements.map((s, i) => <li key={i}>{s}</li>)}</ul>
+                  </div>
+                )}
+                {evaluation.sampleAnswer && (
+                  <div className="sample-answer">
+                    <h4>Strong Answer Example</h4>
+                    <p>{evaluation.sampleAnswer}</p>
+                  </div>
+                )}
+              </>
+            )}
+
+            {activeTab === 'star' && evaluation.starAnalysis && (
+              <div className="star-analysis">
+                <h4>STAR Method Breakdown</h4>
+                <p className="star-desc">The STAR method (Situation-Task-Action-Result) is the gold standard for structuring interview answers.</p>
+                {['situation', 'task', 'action', 'result'].map(key => {
+                  const item = evaluation.starAnalysis[key];
+                  if (!item) return null;
+                  return (
+                    <div key={key} className={`star-item ${item.present ? 'star-item-present' : 'star-item-missing'}`}>
+                      <div className="star-item-header">
+                        <span className="star-item-letter">{key.charAt(0).toUpperCase()}</span>
+                        <span className="star-item-name">{key.charAt(0).toUpperCase() + key.slice(1)}</span>
+                        <StarBadge present={item.present} />
+                      </div>
+                      <p className="star-item-feedback">{item.feedback}</p>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+
+            {activeTab === 'scores' && evaluation.detailedScores && (
+              <div className="detailed-scores">
+                <h4>Google Hiring Committee Rubric</h4>
+                <ScoreBar label="Relevance" value={evaluation.detailedScores.relevance} />
+                <ScoreBar label="Specificity" value={evaluation.detailedScores.specificity} />
+                <ScoreBar label="Structure" value={evaluation.detailedScores.structure} />
+                <ScoreBar label="Communication" value={evaluation.detailedScores.communication} />
+                <ScoreBar label="Confidence" value={evaluation.detailedScores.confidence} />
+                <ScoreBar label="Technical Depth" value={evaluation.detailedScores.technicalDepth} />
+              </div>
+            )}
+
+            {activeTab === 'language' && (
+              <div className="language-check">
+                {evaluation.fillerWords?.length > 0 && (
+                  <div className="language-section">
+                    <h4>Filler Words Detected</h4>
+                    <div className="tag-list">
+                      {evaluation.fillerWords.map((w, i) => (
+                        <span key={i} className="tag tag-warning">{w}</span>
+                      ))}
+                    </div>
+                    <p className="language-tip">Eliminate these to sound more confident and polished.</p>
+                  </div>
+                )}
+                {evaluation.vagueStatements?.length > 0 && (
+                  <div className="language-section">
+                    <h4>Vague Statements</h4>
+                    <ul className="vague-list">
+                      {evaluation.vagueStatements.map((v, i) => (
+                        <li key={i}><span className="vague-quote">"{v}"</span></li>
+                      ))}
+                    </ul>
+                    <p className="language-tip">Replace these with specific numbers, names, or concrete outcomes.</p>
+                  </div>
+                )}
+                {(!evaluation.fillerWords || evaluation.fillerWords.length === 0) &&
+                 (!evaluation.vagueStatements || evaluation.vagueStatements.length === 0) && (
+                  <div className="language-clean">
+                    <span className="clean-icon">&#10003;</span>
+                    <p>Clean language! No filler words or vague statements detected.</p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {activeTab === 'followup' && evaluation.followUpQuestions?.length > 0 && (
+              <div className="followup-section">
+                <h4>Likely Follow-up Questions</h4>
+                <p className="followup-desc">An interviewer would probably ask these next. Prepare answers for each.</p>
+                <ol className="followup-list">
+                  {evaluation.followUpQuestions.map((q, i) => (
+                    <li key={i}>{q}</li>
+                  ))}
+                </ol>
+              </div>
+            )}
+
+            {activeTab === 'ideal' && evaluation.idealAnswer && (
+              <div className="ideal-answer-section">
+                <h4>Ideal Answer (Top Candidate)</h4>
+                <p className="ideal-desc">This is what a top-performing candidate would say. Compare with your answer to identify gaps.</p>
+                <div className="ideal-answer-box">
+                  <p>{evaluation.idealAnswer}</p>
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'rewrite' && evaluation.rewrittenAnswer && (
+              <div className="rewrite-section">
+                <h4>Your Answer, Upgraded</h4>
+                <p className="rewrite-desc">Here is your core answer rewritten to be significantly stronger while preserving your key points.</p>
+                <div className="rewrite-box">
+                  <p>{evaluation.rewrittenAnswer}</p>
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'delivery' && evaluation.deliveryTips?.length > 0 && (
+              <div className="delivery-section">
+                <h4>Body Language &amp; Delivery Tips</h4>
+                <ul className="delivery-list">
+                  {evaluation.deliveryTips.map((tip, i) => (
+                    <li key={i}>{tip}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
         </div>
       )}
 

frontend/src/components/Report.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 function scoreClass(score) {
   if (score >= 70) return 'good';
@@ -6,8 +6,36 @@ function scoreClass(score) {
   return 'bad';
 }
 
+function ScoreBar({ label, value, max = 10 }) {
+  const pct = (value / max) * 100;
+  const cls = value >= 7 ? 'good' : value >= 4 ? 'ok' : 'bad';
+  return (
+    <div className="score-bar-row">
+      <span className="score-bar-label">{label}</span>
+      <div className="score-bar-track">
+        <div className={`score-bar-fill ${cls}`} style={{ width: `${pct}%` }} />
+      </div>
+      <span className={`score-bar-value ${cls}`}>{value}/{max}</span>
+    </div>
+  );
+}
+
+function PriorityBadge({ priority }) {
+  return <span className={`priority-badge priority-${priority}`}>{priority.toUpperCase()}</span>;
+}
+
 export default function Report({ data, onReset }) {
   const { report, details, meta } = data;
+  const [activeSection, setActiveSection] = useState('overview');
+
+  const sections = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'communication', label: 'Communication Profile' },
+    { id: 'patterns', label: 'Interview Patterns' },
+    { id: 'actionplan', label: 'Action Plan' },
+    { id: 'breakdown', label: 'Q&A Breakdown' },
+    { id: 'tips', label: 'Next Steps' },
+  ];
 
   return (
     <div className="report">
@@ -16,46 +44,142 @@ export default function Report({ data, onReset }) {
           {report.overallScore}
         </div>
         <div className="score-label" style={{ color: 'var(--text-dim)' }}>Overall Score</div>
-        <div className={`verdict ${report.verdict}`}>{report.verdict.replace('_', ' ')}</div>
+        <div className={`verdict ${report.verdict}`}>{report.verdict.replace(/_/g, ' ')}</div>
         <div className="readiness">{report.readinessLevel}</div>
       </div>
 
-      <div className="report-card">
-        <h3>Summary</h3>
-        <p className="report-summary">{report.summary}</p>
+      <div className="report-tabs">
+        {sections.map(sec => (
+          <button
+            key={sec.id}
+            className={`report-tab ${activeSection === sec.id ? 'active' : ''}`}
+            onClick={() => setActiveSection(sec.id)}
+          >
+            {sec.label}
+          </button>
+        ))}
       </div>
 
-      <div className="report-card strengths">
-        <h3>Top Strengths</h3>
-        <ul>{report.topStrengths.map((s, i) => <li key={i}>{s}</li>)}</ul>
-      </div>
+      <div className="report-tab-content">
+        {activeSection === 'overview' && (
+          <>
+            <div className="report-card">
+              <h3>Summary</h3>
+              <p className="report-summary">{report.summary}</p>
+            </div>
 
-      <div className="report-card improve">
-        <h3>Areas to Improve</h3>
-        <ul>{report.areasToImprove.map((a, i) => <li key={i}>{a}</li>)}</ul>
-      </div>
+            <div className="report-card strengths">
+              <h3>Top Strengths</h3>
+              <ul>{report.topStrengths?.map((s, i) => <li key={i}>{s}</li>)}</ul>
+            </div>
 
-      <div className="report-card">
-        <h3>Recommendation</h3>
-        <p className="report-summary">{report.recommendation}</p>
-      </div>
+            <div className="report-card improve">
+              <h3>Areas to Improve</h3>
+              <ul>{report.areasToImprove?.map((a, i) => <li key={i}>{a}</li>)}</ul>
+            </div>
 
-      <div className="report-card">
-        <h3>Question-by-Question Breakdown</h3>
-        {details.map((d, i) => (
-          <div key={i} style={{ marginTop: '1rem', paddingTop: '1rem', borderTop: i > 0 ? '1px solid var(--border)' : 'none' }}>
-            <p style={{ fontWeight: 600, marginBottom: '0.3rem' }}>Q{i + 1}: {d.question}</p>
-            <p style={{ color: 'var(--text-dim)', fontSize: '0.9rem', marginBottom: '0.3rem' }}>
-              Your answer: {d.answer.substring(0, 150)}{d.answer.length > 150 ? '...' : ''}
-            </p>
-            <p style={{ fontSize: '0.9rem' }}>
-              Score: <span style={{ fontWeight: 700, color: d.score >= 7 ? 'var(--success)' : d.score >= 4 ? 'var(--warning)' : 'var(--danger)' }}>
-                {d.score}/10
+            <div className="report-card">
+              <h3>Recommendation</h3>
+              <p className="report-summary">{report.recommendation}</p>
+            </div>
+          </>
+        )}
+
+        {activeSection === 'communication' && report.communicationProfile && (
+          <div className="report-card">
+            <h3>Communication Profile</h3>
+            <p className="section-desc">How you come across in an interview setting, scored across five key dimensions.</p>
+            <div className="comm-scores">
+              <ScoreBar label="Clarity" value={report.communicationProfile.clarity} />
+              <ScoreBar label="Conciseness" value={report.communicationProfile.conciseness} />
+              <ScoreBar label="Confidence" value={report.communicationProfile.confidence} />
+              <ScoreBar label="Storytelling" value={report.communicationProfile.storytelling} />
+              <ScoreBar label="Technical Articulation" value={report.communicationProfile.technicalArticulation} />
+            </div>
+          </div>
+        )}
+
+        {activeSection === 'patterns' && report.interviewPatterns && (
+          <div className="report-card">
+            <h3>Interview Patterns</h3>
+            <p className="section-desc">Patterns observed across all your answers.</p>
+
+            <div className="pattern-trajectory">
+              <span className="trajectory-label">Performance Trajectory:</span>
+              <span className={`trajectory-value trajectory-${report.interviewPatterns.trajectory}`}>
+                {report.interviewPatterns.trajectory === 'improving' ? 'Improving' :
+                 report.interviewPatterns.trajectory === 'declining' ? 'Declining' : 'Stable'}
               </span>
-              {' - '}{d.feedback}
-            </p>
+            </div>
+
+            {report.interviewPatterns.consistentStrengths?.length > 0 && (
+              <div className="pattern-section">
+                <h4>Consistent Strengths</h4>
+                <ul className="pattern-list pattern-strengths">
+                  {report.interviewPatterns.consistentStrengths.map((p, i) => <li key={i}>{p}</li>)}
+                </ul>
+              </div>
+            )}
+
+            {report.interviewPatterns.consistentWeaknesses?.length > 0 && (
+              <div className="pattern-section">
+                <h4>Consistent Weaknesses</h4>
+                <ul className="pattern-list pattern-weaknesses">
+                  {report.interviewPatterns.consistentWeaknesses.map((p, i) => <li key={i}>{p}</li>)}
+                </ul>
+              </div>
+            )}
           </div>
-        ))}
+        )}
+
+        {activeSection === 'actionplan' && report.actionPlan?.length > 0 && (
+          <div className="report-card">
+            <h3>Personalized Action Plan</h3>
+            <p className="section-desc">Your prioritized roadmap to interview readiness.</p>
+            <div className="action-plan">
+              {report.actionPlan.map((item, i) => (
+                <div key={i} className="action-item">
+                  <div className="action-header">
+                    <PriorityBadge priority={item.priority} />
+                    <span className="action-timeframe">{item.timeframe}</span>
+                  </div>
+                  <p className="action-text">{item.action}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {activeSection === 'breakdown' && (
+          <div className="report-card">
+            <h3>Question-by-Question Breakdown</h3>
+            {details.map((d, i) => (
+              <div key={i} className="qa-breakdown-item">
+                <p className="qa-question">Q{i + 1}: {d.question}</p>
+                <p className="qa-answer">
+                  Your answer: {d.answer.substring(0, 200)}{d.answer.length > 200 ? '...' : ''}
+                </p>
+                <p className="qa-score-line">
+                  Score: <span className={`qa-score ${d.score >= 7 ? 'good' : d.score >= 4 ? 'ok' : 'bad'}`}>
+                    {d.score}/10
+                  </span>
+                  {' '}{d.feedback}
+                </p>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {activeSection === 'tips' && (
+          <div className="report-card">
+            <h3>Tips for Your Next Practice Session</h3>
+            {report.mockInterviewTips?.length > 0 && (
+              <ul className="tips-list">
+                {report.mockInterviewTips.map((tip, i) => <li key={i}>{tip}</li>)}
+              </ul>
+            )}
+          </div>
+        )}
       </div>
 
       <button className="btn-secondary" onClick={onReset}>

frontend/src/styles/global.css

@@ -3,6 +3,7 @@
 :root {
   --bg: #0a0a1a;
   --bg-card: #131332;
+  --bg-card-alt: #1a1a40;
   --accent: #6c5ce7;
   --accent-light: #a29bfe;
   --success: #00b894;
@@ -20,7 +21,7 @@ body {
   min-height: 100vh;
 }
 
-.app { max-width: 800px; margin: 0 auto; padding: 2rem 1.5rem; }
+.app { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem; }
 
 .header { text-align: center; margin-bottom: 2rem; }
 .header h1 {
@@ -170,13 +171,41 @@ body {
 
 .eval-feedback { color: var(--text-dim); line-height: 1.5; margin-bottom: 1rem; text-align: center; }
 
+/* Evaluation Tabs */
+.eval-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-bottom: 1.2rem;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 0.8rem;
+}
+.eval-tab {
+  padding: 0.4rem 0.8rem;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 0.8rem;
+  transition: all 0.2s;
+}
+.eval-tab:hover { border-color: var(--accent); color: var(--text); }
+.eval-tab.active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: white;
+}
+
+.eval-tab-content { min-height: 100px; }
+
 .eval-section { margin-top: 0.8rem; }
 .eval-section h4 { font-size: 0.9rem; margin-bottom: 0.4rem; }
 .eval-section ul { list-style: none; padding: 0; }
 .eval-section li { padding: 0.3rem 0; padding-left: 1.2rem; position: relative; color: var(--text-dim); font-size: 0.9rem; }
 .eval-section li::before { position: absolute; left: 0; }
-.eval-section.strengths li::before { content: "✅"; }
-.eval-section.improvements li::before { content: "💡"; }
+.eval-section.strengths li::before { content: "\2713"; color: var(--success); font-weight: bold; }
+.eval-section.improvements li::before { content: "\2192"; color: var(--warning); }
 
 .sample-answer {
   margin-top: 1rem;
@@ -188,6 +217,160 @@ body {
 .sample-answer h4 { color: var(--success); margin-bottom: 0.4rem; font-size: 0.9rem; }
 .sample-answer p { color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; }
 
+/* STAR Analysis */
+.star-analysis h4 { margin-bottom: 0.5rem; color: var(--accent-light); }
+.star-desc { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 1rem; }
+.star-item {
+  padding: 0.8rem 1rem;
+  margin-bottom: 0.6rem;
+  border-radius: 10px;
+  border-left: 4px solid var(--border);
+}
+.star-item-present { background: rgba(0, 184, 148, 0.06); border-left-color: var(--success); }
+.star-item-missing { background: rgba(225, 112, 85, 0.06); border-left-color: var(--danger); }
+.star-item-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
+.star-item-letter {
+  width: 28px; height: 28px;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--accent);
+  color: white;
+  border-radius: 50%;
+  font-weight: 800;
+  font-size: 0.85rem;
+}
+.star-item-name { font-weight: 600; font-size: 0.95rem; }
+.star-badge {
+  font-size: 0.7rem;
+  padding: 0.15rem 0.5rem;
+  border-radius: 10px;
+  font-weight: 600;
+  margin-left: auto;
+}
+.star-present { background: rgba(0,184,148,0.2); color: var(--success); }
+.star-missing { background: rgba(225,112,85,0.2); color: var(--danger); }
+.star-item-feedback { color: var(--text-dim); font-size: 0.85rem; line-height: 1.5; }
+
+/* Score Bars */
+.detailed-scores h4 { margin-bottom: 1rem; color: var(--accent-light); }
+.score-bar-row {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  margin-bottom: 0.7rem;
+}
+.score-bar-label {
+  width: 140px;
+  font-size: 0.85rem;
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+.score-bar-track {
+  flex: 1;
+  height: 8px;
+  background: var(--border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.score-bar-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.5s ease;
+}
+.score-bar-fill.good { background: var(--success); }
+.score-bar-fill.ok { background: var(--warning); }
+.score-bar-fill.bad { background: var(--danger); }
+.score-bar-value {
+  width: 40px;
+  text-align: right;
+  font-size: 0.85rem;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.score-bar-value.good { color: var(--success); }
+.score-bar-value.ok { color: var(--warning); }
+.score-bar-value.bad { color: var(--danger); }
+
+/* Language Check */
+.language-check h4 { color: var(--accent-light); margin-bottom: 0.5rem; }
+.language-section { margin-bottom: 1.2rem; }
+.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
+.tag {
+  padding: 0.25rem 0.7rem;
+  border-radius: 14px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+.tag-warning { background: rgba(253,203,110,0.15); color: var(--warning); }
+.language-tip { color: var(--text-dim); font-size: 0.82rem; font-style: italic; margin-top: 0.4rem; }
+.vague-list { list-style: none; padding: 0; }
+.vague-list li { padding: 0.3rem 0; }
+.vague-quote { color: var(--danger); font-style: italic; font-size: 0.9rem; }
+.language-clean {
+  text-align: center;
+  padding: 2rem;
+  color: var(--success);
+}
+.clean-icon { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
+
+/* Follow-up Questions */
+.followup-section h4 { color: var(--accent-light); margin-bottom: 0.3rem; }
+.followup-desc { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 1rem; }
+.followup-list {
+  padding-left: 1.2rem;
+}
+.followup-list li {
+  padding: 0.5rem 0;
+  color: var(--text);
+  font-size: 0.95rem;
+  line-height: 1.5;
+  border-bottom: 1px solid rgba(45,45,94,0.5);
+}
+.followup-list li:last-child { border-bottom: none; }
+
+/* Ideal Answer */
+.ideal-answer-section h4 { color: var(--accent-light); margin-bottom: 0.3rem; }
+.ideal-desc { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 1rem; }
+.ideal-answer-box {
+  padding: 1.2rem;
+  background: rgba(0, 184, 148, 0.06);
+  border-left: 4px solid var(--success);
+  border-radius: 8px;
+}
+.ideal-answer-box p { color: var(--text-dim); line-height: 1.6; font-size: 0.92rem; }
+
+/* Rewrite */
+.rewrite-section h4 { color: var(--accent-light); margin-bottom: 0.3rem; }
+.rewrite-desc { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 1rem; }
+.rewrite-box {
+  padding: 1.2rem;
+  background: rgba(108, 92, 231, 0.08);
+  border-left: 4px solid var(--accent);
+  border-radius: 8px;
+}
+.rewrite-box p { color: var(--text-dim); line-height: 1.6; font-size: 0.92rem; }
+
+/* Delivery Tips */
+.delivery-section h4 { color: var(--accent-light); margin-bottom: 0.8rem; }
+.delivery-list { list-style: none; padding: 0; }
+.delivery-list li {
+  padding: 0.6rem 0.8rem;
+  padding-left: 2rem;
+  position: relative;
+  color: var(--text-dim);
+  font-size: 0.9rem;
+  line-height: 1.5;
+  margin-bottom: 0.4rem;
+  background: rgba(108, 92, 231, 0.05);
+  border-radius: 8px;
+}
+.delivery-list li::before {
+  content: "\25B6";
+  position: absolute;
+  left: 0.8rem;
+  color: var(--accent-light);
+  font-size: 0.7rem;
+}
+
 /* Report */
 .report { animation: slideIn 0.5s ease; }
 .report-header {
@@ -215,6 +398,34 @@ body {
 .verdict.MAYBE { background: rgba(253,203,110,0.2); color: var(--warning); }
 .verdict.NO_HIRE { background: rgba(225,112,85,0.2); color: var(--danger); }
 
+/* Report Tabs */
+.report-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-bottom: 1.5rem;
+}
+.report-tab {
+  padding: 0.5rem 1rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+.report-tab:hover { border-color: var(--accent); color: var(--text); }
+.report-tab.active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: white;
+  font-weight: 600;
+}
+
+.report-tab-content { min-height: 150px; }
+
 .report-card {
   background: var(--bg-card);
   border-radius: 16px;
@@ -225,11 +436,112 @@ body {
 .report-card ul { list-style: none; padding: 0; }
 .report-card li { padding: 0.4rem 0; padding-left: 1.5rem; position: relative; color: var(--text-dim); }
 .report-card li::before { position: absolute; left: 0; }
-.report-card.strengths li::before { content: "💪"; }
-.report-card.improve li::before { content: "📈"; }
+.report-card.strengths li::before { content: "\2713"; color: var(--success); font-weight: bold; }
+.report-card.improve li::before { content: "\2192"; color: var(--warning); }
 
 .report-summary { color: var(--text-dim); line-height: 1.6; margin-top: 0.5rem; }
 .readiness { text-align: center; margin-top: 0.8rem; font-size: 1.1rem; }
+.section-desc { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 1rem; }
+
+/* Communication Profile */
+.comm-scores { margin-top: 0.5rem; }
+
+/* Patterns */
+.pattern-trajectory {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  margin-bottom: 1.2rem;
+  padding: 0.8rem 1rem;
+  background: var(--bg);
+  border-radius: 10px;
+}
+.trajectory-label { color: var(--text-dim); font-size: 0.9rem; }
+.trajectory-value {
+  font-weight: 700;
+  font-size: 0.95rem;
+  padding: 0.2rem 0.8rem;
+  border-radius: 12px;
+}
+.trajectory-improving { background: rgba(0,184,148,0.15); color: var(--success); }
+.trajectory-stable { background: rgba(253,203,110,0.15); color: var(--warning); }
+.trajectory-declining { background: rgba(225,112,85,0.15); color: var(--danger); }
+
+.pattern-section { margin-bottom: 1rem; }
+.pattern-section h4 { font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--text); }
+.pattern-list { list-style: none; padding: 0; }
+.pattern-list li {
+  padding: 0.35rem 0;
+  padding-left: 1.3rem;
+  position: relative;
+  color: var(--text-dim);
+  font-size: 0.9rem;
+}
+.pattern-list li::before { position: absolute; left: 0; }
+.pattern-strengths li::before { content: "\2713"; color: var(--success); font-weight: bold; }
+.pattern-weaknesses li::before { content: "\2717"; color: var(--danger); }
+
+/* Action Plan */
+.action-plan { }
+.action-item {
+  padding: 1rem;
+  margin-bottom: 0.8rem;
+  background: var(--bg);
+  border-radius: 10px;
+  border-left: 4px solid var(--border);
+}
+.action-header {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  margin-bottom: 0.5rem;
+}
+.priority-badge {
+  font-size: 0.7rem;
+  padding: 0.15rem 0.6rem;
+  border-radius: 10px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
+.priority-high { background: rgba(225,112,85,0.2); color: var(--danger); }
+.priority-medium { background: rgba(253,203,110,0.2); color: var(--warning); }
+.priority-low { background: rgba(0,184,148,0.15); color: var(--success); }
+.action-timeframe { color: var(--text-dim); font-size: 0.8rem; }
+.action-text { color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; }
+
+/* Q&A Breakdown */
+.qa-breakdown-item {
+  padding: 1rem 0;
+  border-bottom: 1px solid var(--border);
+}
+.qa-breakdown-item:last-child { border-bottom: none; }
+.qa-question { font-weight: 600; margin-bottom: 0.3rem; font-size: 0.95rem; }
+.qa-answer { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.3rem; }
+.qa-score-line { font-size: 0.85rem; color: var(--text-dim); }
+.qa-score { font-weight: 700; }
+.qa-score.good { color: var(--success); }
+.qa-score.ok { color: var(--warning); }
+.qa-score.bad { color: var(--danger); }
+
+/* Tips */
+.tips-list { list-style: none; padding: 0; }
+.tips-list li {
+  padding: 0.7rem 1rem;
+  padding-left: 2rem;
+  position: relative;
+  color: var(--text-dim);
+  font-size: 0.9rem;
+  line-height: 1.5;
+  margin-bottom: 0.4rem;
+  background: rgba(108, 92, 231, 0.05);
+  border-radius: 8px;
+}
+.tips-list li::before {
+  content: "\2605";
+  position: absolute;
+  left: 0.8rem;
+  color: var(--accent-light);
+}
 
 .btn-secondary {
   display: block;
@@ -259,4 +571,8 @@ body {
 @media (max-width: 600px) {
   .form-row { grid-template-columns: 1fr; }
   .header h1 { font-size: 1.6rem; }
+  .eval-tabs, .report-tabs { gap: 0.3rem; }
+  .eval-tab, .report-tab { font-size: 0.72rem; padding: 0.3rem 0.5rem; }
+  .score-bar-label { width: 100px; font-size: 0.78rem; }
+  .star-item-header { flex-wrap: wrap; }
 }