diff --git a/src/reports/templates/retro_futurism/image_template.html b/src/reports/templates/retro_futurism/image_template.html
index 3cda588..843e90f 100644
--- a/src/reports/templates/retro_futurism/image_template.html
+++ b/src/reports/templates/retro_futurism/image_template.html
@@ -150,9 +150,11 @@
 
         .header-brief {
             max-width: 500px;
-            color: rgba(24, 24, 24, 0.7);
+            color: rgba(24, 24, 24, 0.8);
             line-height: 1.6;
             margin-bottom: 24px;
+            font-size: 0.95rem;
+            font-weight: 400;
         }
 
         .header-meta-row {
@@ -167,7 +169,8 @@
 
         .meta-label {
             font-family: var(--font-mono);
-            font-size: 0.7rem;
+            font-size: 0.75rem;
+            font-weight: 500;
             letter-spacing: 0.15rem;
             text-transform: uppercase;
             color: rgba(24, 24, 24, 0.5);
@@ -178,7 +181,8 @@
             margin-top: 4px;
             color: var(--c-text);
             font-family: var(--font-mono);
-            font-size: 0.85rem;
+            font-size: 0.9rem;
+            font-weight: 400;
         }
 
         /* CRT Console */
@@ -194,15 +198,30 @@
             grid-column: span 12;
         }
 
-        .crt-console::before {
-            content: "CRT_CHANNEL // PEAK_ACTIVITY";
-            display: block;
-            border-bottom: 1px solid #444;
-            padding-bottom: 8px;
-            margin-bottom: 12px;
-            color: var(--c-accent);
+        .crt-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 16px;
+        }
+
+        .crt-btn {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            flex-shrink: 0;
+        }
+
+        .crt-btn-1 { background: var(--c-dec-1); }
+        .crt-btn-2 { background: var(--c-dec-2); }
+        .crt-btn-3 { background: var(--c-dec-3); }
+
+        .crt-title {
+            margin-left: 12px;
             font-size: 0.65rem;
             letter-spacing: 0.2rem;
+            color: var(--c-accent);
+            text-transform: uppercase;
         }
 
         .crt-label {
@@ -279,7 +298,8 @@
 
         .stat-label {
             font-family: var(--font-mono);
-            font-size: 0.75rem;
+            font-size: 0.8rem;
+            font-weight: 500;
             text-transform: uppercase;
             color: var(--c-dec-1);
             margin-bottom: 10px;
@@ -295,9 +315,10 @@
         }
 
         .stat-note {
-            font-size: 0.8rem;
-            color: rgba(24, 24, 24, 0.6);
+            font-size: 0.85rem;
+            color: rgba(24, 24, 24, 0.7);
             margin-top: 8px;
+            font-weight: 400;
         }
 
         /* Content Box (for topics, titles, quotes) */
@@ -305,7 +326,7 @@
             grid-column: span 12;
             border: 1px solid var(--c-text);
             padding: 24px;
-            background: #fff;
+            background: rgba(255, 255, 255, 0.5);
             position: relative;
         }
 
@@ -323,7 +344,7 @@
         /* Activity Chart */
         .activity-wrapper {
             font-family: var(--font-mono);
-            font-size: 0.8rem;
+            font-size: 0.85rem;
         }
 
         .activity-row {
@@ -331,7 +352,7 @@
             grid-template-columns: 60px 1fr 50px;
             align-items: center;
             gap: 12px;
-            padding: 6px 0;
+            padding: 8px 0;
             border-bottom: 1px solid var(--c-grid);
         }
 
@@ -366,48 +387,94 @@
         .topic-list {
             display: flex;
             flex-direction: column;
-            gap: 20px;
+            gap: 16px;
+            padding: 0;
+            max-width: 1200px;
+            margin: 0 auto;
         }
 
         .topic-item {
             display: grid;
-            grid-template-columns: 50px 1fr;
-            gap: 20px;
-            padding-bottom: 16px;
-            border-bottom: 1px solid var(--c-grid);
+            grid-template-columns: 16px 1fr;
+            gap: 16px;
+            padding: 16px;
+            padding-left: 20px;
+            background: rgba(255, 255, 255, 0.5);
+            border: 1px solid var(--c-text);
+            position: relative;
         }
 
-        .topic-item:last-child {
-            border-bottom: none;
-            padding-bottom: 0;
+        .topic-item::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: var(--c-dec-1);
         }
 
-        .topic-index {
-            font-family: var(--font-mono);
-            font-size: 1rem;
-            letter-spacing: 0.2rem;
-            color: rgba(24, 24, 24, 0.3);
+        .topic-item::after {
+            content: '';
+            position: absolute;
+            left: 4px;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: var(--c-dec-2);
+        }
+
+        .topic-item .color-third {
+            position: absolute;
+            left: 8px;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: var(--c-dec-3);
+        }
+
+        .topic-icon {
+            width: 16px;
+            height: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .topic-icon svg {
+            width: 14px;
+            height: 14px;
+            fill: var(--c-accent);
+        }
+
+        .topic-content {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
         }
 
         .topic-title {
-            margin: 0 0 6px;
-            font-size: 1.1rem;
+            margin: 0;
+            font-size: 1.15rem;
+            font-weight: 500;
             letter-spacing: 0.05rem;
             color: var(--c-text);
         }
 
         .topic-meta {
             font-family: var(--font-mono);
-            font-size: 0.7rem;
+            font-size: 0.75rem;
+            font-weight: 500;
             letter-spacing: 0.15rem;
             color: rgba(24, 24, 24, 0.5);
-            margin-bottom: 8px;
+            text-transform: uppercase;
         }
 
         .topic-detail {
-            color: rgba(24, 24, 24, 0.7);
+            color: rgba(24, 24, 24, 0.8);
             line-height: 1.6;
-            font-size: 0.9rem;
+            font-size: 0.95rem;
+            font-weight: 400;
         }
 
         /* User Title Grid */
@@ -424,26 +491,6 @@
             background: rgba(255, 255, 255, 0.5);
         }
 
-        .title-item::before {
-            content: '';
-            position: absolute;
-            top: 4px;
-            left: 4px;
-            width: 24px;
-            height: 4px;
-            background: var(--c-dec-1);
-        }
-
-        .title-item::after {
-            content: '';
-            position: absolute;
-            top: 4px;
-            left: 32px;
-            width: 24px;
-            height: 4px;
-            background: var(--c-dec-2);
-        }
-
         .title-header {
             display: flex;
             align-items: center;
@@ -451,6 +498,12 @@
             margin-bottom: 12px;
         }
 
+        .title-info {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
         .title-avatar {
             width: 52px;
             height: 52px;
@@ -482,32 +535,43 @@
 
         .title-name {
             font-weight: 600;
-            font-size: 1rem;
+            font-size: 1.1rem;
+        }
+
+        .title-badges {
+            display: flex;
+            gap: 8px;
+            align-items: center;
         }
 
         .title-mbti {
             font-family: var(--font-mono);
-            font-size: 0.65rem;
+            font-size: 0.75rem;
+            font-weight: 600;
             letter-spacing: 0.15rem;
             background: rgba(24, 24, 24, 0.08);
-            padding: 2px 8px;
-            margin-left: 8px;
+            padding: 3px 10px;
+            border-radius: 3px;
         }
 
         .title-role {
             font-family: var(--font-mono);
-            letter-spacing: 0.2rem;
+            font-weight: 600;
+            letter-spacing: 0.15rem;
             text-transform: uppercase;
             color: var(--c-accent);
-            margin: 8px 0;
-            font-size: 0.8rem;
+            background: rgba(178, 101, 59, 0.15);
+            padding: 3px 10px;
+            font-size: 0.75rem;
+            border-radius: 3px;
         }
 
         .title-reason {
-            margin: 0;
-            font-size: 0.85rem;
-            color: rgba(24, 24, 24, 0.7);
+            margin: 8px 0 0;
+            font-size: 0.95rem;
+            color: rgba(24, 24, 24, 0.8);
             line-height: 1.5;
+            font-weight: 400;
         }
 
         /* Quote List */
@@ -515,42 +579,87 @@
             display: flex;
             flex-direction: column;
             gap: 16px;
+            padding: 0;
+            max-width: 1200px;
+            margin: 0 auto;
         }
 
         .quote-item {
-            border: 1px dashed var(--c-text);
-            padding: 20px;
+            display: grid;
+            grid-template-columns: 16px 1fr;
+            gap: 16px;
+            padding: 16px;
+            padding-left: 20px;
+            background: rgba(255, 255, 255, 0.5);
+            border: 1px solid var(--c-text);
             position: relative;
-            background: rgba(255, 255, 255, 0.3);
         }
 
         .quote-item::before {
-            content: '"';
-            font-family: var(--font-display);
-            font-size: 2rem;
-            color: var(--c-accent);
-            opacity: 0.5;
-            line-height: 1;
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: var(--c-dec-1);
+        }
+
+        .quote-item::after {
+            content: '';
+            position: absolute;
+            left: 4px;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: var(--c-dec-2);
+        }
+
+        .quote-item .color-third {
+            position: absolute;
+            left: 8px;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: var(--c-dec-3);
+        }
+
+        .quote-icon {
+            width: 16px;
+            height: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .quote-icon svg {
+            width: 14px;
+            height: 14px;
+            fill: var(--c-accent);
         }
 
         .quote-content {
-            font-size: 1rem;
+            font-size: 1.05rem;
             color: var(--c-text);
-            margin: 8px 0;
+            margin: 0 0 8px;
             line-height: 1.6;
+            font-weight: 400;
         }
 
         .quote-author {
             font-family: var(--font-mono);
             font-size: 0.75rem;
+            font-weight: 500;
             letter-spacing: 0.15rem;
-            color: rgba(24, 24, 24, 0.6);
+            color: rgba(24, 24, 24, 0.5);
+            text-transform: uppercase;
         }
 
         .quote-note {
-            font-size: 0.8rem;
-            color: rgba(24, 24, 24, 0.7);
+            font-size: 0.9rem;
+            color: rgba(24, 24, 24, 0.75);
             margin-top: 8px;
+            font-weight: 400;
         }
 
         /* Token Strip */
@@ -577,6 +686,9 @@
             padding-top: 16px;
             display: flex;
             justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 20px;
             font-family: var(--font-mono);
             font-size: 0.7rem;
             text-transform: uppercase;
@@ -584,6 +696,11 @@
             color: rgba(24, 24, 24, 0.6);
         }
 
+        .footer-tokens {
+            display: flex;
+            gap: 24px;
+        }
+
         /* CRT Overlay */
         .crt-overlay {
             position: fixed;
@@ -697,6 +814,12 @@
         <!-- CRT Console -->
         <div class="grid-container">
             <div class="crt-console">
+                <div class="crt-header">
+                    <span class="crt-btn crt-btn-1"></span>
+                    <span class="crt-btn crt-btn-2"></span>
+                    <span class="crt-btn crt-btn-3"></span>
+                    <span class="crt-title">CRT_CHANNEL // PEAK_ACTIVITY</span>
+                </div>
                 <div class="crt-label">Peak Activity Window</div>
                 <div class="crt-value">{{most_active_period}}</div>
                 <div class="crt-sub">活跃序列 SCAN // 消息流强度 {{message_count}}</div>
@@ -719,12 +842,8 @@
         <div class="section-label">
             Thread Matrix <span>TOPICS_MODULE</span>
         </div>
-        <div class="grid-container">
-            <div class="content-box">
-                <div class="topic-list">
-                    {{topics_html}}
-                </div>
-            </div>
+        <div class="topic-list">
+            {{topics_html}}
         </div>
 
         <!-- Titles -->
@@ -743,25 +862,17 @@
         <div class="section-label">
             Golden Lines <span>QUOTES_MODULE</span>
         </div>
-        <div class="grid-container">
-            <div class="content-box">
-                <div class="quote-list">
-                    {{quotes_html}}
-                </div>
-            </div>
-        </div>
-
-        <!-- Token Strip -->
-        <div class="grid-container">
-            <div class="token-strip">
-                <div><span class="token-label">Total Tokens //</span> {{total_tokens}}</div>
-                <div><span class="token-label">Prompt //</span> {{prompt_tokens}}</div>
-                <div><span class="token-label">Completion //</span> {{completion_tokens}}</div>
-            </div>
+        <div class="quote-list">
+            {{quotes_html}}
         </div>
 
         <footer>
             <div>CRT_EXPORT_CHANNEL // QQ群日常分析</div>
+            <div class="footer-tokens">
+                <span>Total Tokens // {{total_tokens}}</span>
+                <span>Prompt // {{prompt_tokens}}</span>
+                <span>Completion // {{completion_tokens}}</span>
+            </div>
             <div>END_OF_LINE_</div>
         </footer>
     </div>
diff --git a/src/reports/templates/retro_futurism/pdf_template.html b/src/reports/templates/retro_futurism/pdf_template.html
index 3528ee0..33425f0 100644
--- a/src/reports/templates/retro_futurism/pdf_template.html
+++ b/src/reports/templates/retro_futurism/pdf_template.html
@@ -228,15 +228,31 @@
             position: relative;
         }
 
-        .crt-console::before {
-            content: "CRT CHANNEL";
-            position: absolute;
-            top: 12px;
-            right: 16px;
+        .crt-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 20px;
+        }
+
+        .crt-btn {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            flex-shrink: 0;
+        }
+
+        .crt-btn-1 { background: var(--c-accent-1); }
+        .crt-btn-2 { background: var(--c-accent-2); }
+        .crt-btn-3 { background: var(--c-accent-3); }
+
+        .crt-title {
+            margin-left: 12px;
             font-family: var(--font-mono);
             letter-spacing: 0.22rem;
             font-size: 0.68rem;
-            color: rgba(245, 237, 220, 0.6);
+            color: var(--c-main);
+            text-transform: uppercase;
         }
 
         .crt-label {
@@ -290,7 +306,8 @@
 
         .stat-label {
             font-family: var(--font-mono);
-            font-size: 0.78rem;
+            font-size: 0.8rem;
+            font-weight: 500;
             letter-spacing: 0.2rem;
             text-transform: uppercase;
             color: rgba(24, 24, 24, 0.55);
@@ -305,8 +322,9 @@
         }
 
         .stat-note {
-            font-size: 0.9rem;
-            color: rgba(24, 24, 24, 0.7);
+            font-size: 0.95rem;
+            color: rgba(24, 24, 24, 0.75);
+            font-weight: 400;
         }
 
         .module {
@@ -406,43 +424,91 @@
         .topic-stack {
             display: flex;
             flex-direction: column;
-            gap: 18px;
-            margin-top: 12px;
+            gap: 16px;
         }
 
         .topic-card {
             display: grid;
-            grid-template-columns: 90px 1fr;
-            gap: 20px;
-            padding-bottom: 18px;
-            border-bottom: 1px solid rgba(24, 24, 24, 0.08);
+            grid-template-columns: 16px 1fr;
+            gap: 16px;
+            padding: 16px;
+            padding-left: 20px;
+            background: rgba(255, 255, 255, 0.9);
+            border: 1px solid rgba(24, 24, 24, 0.12);
+            position: relative;
         }
 
-        .topic-index {
-            font-family: var(--font-mono);
-            font-size: 1.2rem;
-            letter-spacing: 0.35rem;
-            color: rgba(24, 24, 24, 0.35);
+        .topic-card::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: var(--c-accent-1);
+        }
+
+        .topic-card::after {
+            content: '';
+            position: absolute;
+            left: 4px;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: var(--c-accent-2);
+        }
+
+        .topic-card .color-third {
+            position: absolute;
+            left: 8px;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: var(--c-accent-3);
+        }
+
+        .topic-icon {
+            width: 16px;
+            height: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .topic-icon svg {
+            width: 14px;
+            height: 14px;
+            fill: var(--c-main);
+        }
+
+        .topic-content {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
         }
 
         .topic-title {
             margin: 0;
-            font-size: 1.2rem;
+            font-size: 1.15rem;
+            font-weight: 500;
             letter-spacing: 0.04rem;
             color: var(--c-dark);
         }
 
         .topic-meta {
             font-family: var(--font-mono);
-            font-size: 0.8rem;
+            font-size: 0.75rem;
+            font-weight: 500;
             letter-spacing: 0.16rem;
             color: rgba(24, 24, 24, 0.5);
-            margin: 6px 0;
+            text-transform: uppercase;
         }
 
         .topic-detail {
-            color: rgba(24, 24, 24, 0.75);
+            color: rgba(24, 24, 24, 0.8);
             line-height: 1.6;
+            font-size: 0.95rem;
+            font-weight: 400;
         }
 
         .title-grid {
@@ -457,32 +523,11 @@
             grid-template-columns: 72px 1fr;
             column-gap: 18px;
             padding: 18px;
-            border: 1px solid rgba(24, 24, 24, 0.08);
-            background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 237, 220, 0.6));
+            border: 1px solid rgba(24, 24, 24, 0.12);
+            background: rgba(255, 255, 255, 0.9);
             position: relative;
         }
 
-        .title-card::before,
-        .title-card::after {
-            content: "";
-            position: absolute;
-            top: 12px;
-            height: 4px;
-            border-radius: 2px;
-        }
-
-        .title-card::before {
-            left: 12px;
-            width: 32px;
-            background: var(--c-accent-1);
-        }
-
-        .title-card::after {
-            left: 48px;
-            width: 32px;
-            background: var(--c-accent-2);
-        }
-
         .title-avatar {
             width: 72px;
             height: 72px;
@@ -515,102 +560,147 @@
 
         .title-header {
             display: flex;
-            justify-content: space-between;
             align-items: center;
+            gap: 14px;
+            margin-bottom: 12px;
             grid-column: 2;
         }
 
+        .title-info {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
         .title-name {
             font-weight: 600;
+            font-size: 1.1rem;
+        }
+
+        .title-badges {
+            display: flex;
+            gap: 8px;
+            align-items: center;
         }
 
         .title-mbti {
             font-family: var(--font-mono);
             font-size: 0.75rem;
-            letter-spacing: 0.18rem;
+            font-weight: 600;
+            letter-spacing: 0.15rem;
             background: rgba(24, 24, 24, 0.08);
-            padding: 2px 10px;
+            padding: 3px 10px;
+            border-radius: 3px;
         }
 
         .title-role {
-            grid-column: 2;
             font-family: var(--font-mono);
-            letter-spacing: 0.3rem;
+            font-weight: 600;
+            letter-spacing: 0.15rem;
             text-transform: uppercase;
             color: var(--c-main);
-            margin: 8px 0;
+            background: rgba(178, 101, 59, 0.15);
+            padding: 3px 10px;
+            font-size: 0.75rem;
+            border-radius: 3px;
         }
 
         .title-reason {
             grid-column: 2;
-            margin: 0;
-            font-size: 0.92rem;
-            color: rgba(24, 24, 24, 0.75);
+            margin: 8px 0 0;
+            font-size: 0.95rem;
+            color: rgba(24, 24, 24, 0.8);
             line-height: 1.5;
+            font-weight: 400;
         }
 
         .quote-stack {
             display: flex;
             flex-direction: column;
-            gap: 18px;
-            margin-top: 16px;
+            gap: 16px;
         }
 
         .quote-card {
-            padding: 24px;
-            border: 1px dashed rgba(24, 24, 24, 0.15);
-            background: #fff8ee;
+            display: grid;
+            grid-template-columns: 16px 1fr;
+            gap: 16px;
+            padding: 16px;
+            padding-left: 20px;
+            background: rgba(255, 255, 255, 0.9);
+            border: 1px solid rgba(24, 24, 24, 0.12);
             position: relative;
         }
 
-        .quote-card::after {
-            content: "";
+        .quote-card::before {
+            content: '';
             position: absolute;
-            top: -6px;
-            right: 40px;
-            width: 90px;
-            height: 6px;
-            background: var(--c-dark);
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: var(--c-accent-1);
         }
 
-        .quote-glyph {
-            font-size: 2.5rem;
-            color: rgba(178, 101, 59, 0.4);
-            margin: 0;
+        .quote-card::after {
+            content: '';
+            position: absolute;
+            left: 4px;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: var(--c-accent-2);
+        }
+
+        .quote-card .color-third {
+            position: absolute;
+            left: 8px;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: var(--c-accent-3);
+        }
+
+        .quote-icon {
+            width: 16px;
+            height: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .quote-icon svg {
+            width: 14px;
+            height: 14px;
+            fill: var(--c-main);
         }
 
         .quote-content {
             font-size: 1.05rem;
             color: var(--c-dark);
-            margin: 12px 0;
+            margin: 0 0 8px;
             line-height: 1.6;
+            font-weight: 400;
         }
 
         .quote-author {
             font-family: var(--font-mono);
-            font-size: 0.85rem;
+            font-size: 0.75rem;
+            font-weight: 500;
             letter-spacing: 0.2rem;
-            color: rgba(24, 24, 24, 0.6);
+            color: rgba(24, 24, 24, 0.5);
+            text-transform: uppercase;
         }
 
         .quote-note {
             font-size: 0.9rem;
-            color: rgba(24, 24, 24, 0.7);
-            margin-top: 10px;
+            color: rgba(24, 24, 24, 0.75);
+            margin-top: 8px;
+            font-weight: 400;
         }
 
-        .token-strip {
-            padding: 0 64px;
-            margin-top: 20px;
-        }
-
-        .token-panel {
-            border-top: 1px solid rgba(24, 24, 24, 0.15);
-            padding: 16px 0 8px;
+        .footer-tokens {
             display: flex;
-            gap: 30px;
-            font-family: var(--font-mono);
-            letter-spacing: 0.15rem;
+            gap: 24px;
         }
 
         footer {
@@ -621,6 +711,9 @@
             letter-spacing: 0.25rem;
             display: flex;
             justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 20px;
             color: rgba(24, 24, 24, 0.65);
         }
 
@@ -634,8 +727,11 @@
                 margin: 24px auto 60px;
             }
 
-            .section-shell,
-            .token-strip {
+            .section-shell {
+                padding: 0 32px;
+            }
+
+            footer {
                 padding: 0 32px;
             }
 
@@ -695,6 +791,12 @@
                 </div>
             </div>
             <div class="crt-console">
+                <div class="crt-header">
+                    <span class="crt-btn crt-btn-1"></span>
+                    <span class="crt-btn crt-btn-2"></span>
+                    <span class="crt-btn crt-btn-3"></span>
+                    <span class="crt-title">CRT CHANNEL</span>
+                </div>
                 <div class="crt-label">Peak Window</div>
                 <div class="crt-value">{{most_active_period}}</div>
                 <div class="crt-sub">活跃序列 SCAN</div>
@@ -746,18 +848,14 @@
             {{quotes_html}}
         </div>
 
-        <section class="token-strip">
-            <div class="module-kicker">Token Monitor</div>
-            <div class="token-panel">
-                <div>Total Tokens // {{total_tokens}}</div>
-                <div>Prompt Tokens // {{prompt_tokens}}</div>
-                <div>Completion Tokens // {{completion_tokens}}</div>
-            </div>
-        </section>
-
         <footer>
-            <span>CRT EXPORT CHANNEL</span>
-            <span>END OF LINE</span>
+            <span>CRT_EXPORT_CHANNEL // QQ群日常分析</span>
+            <div class="footer-tokens">
+                <span>Total Tokens // {{total_tokens}}</span>
+                <span>Prompt // {{prompt_tokens}}</span>
+                <span>Completion // {{completion_tokens}}</span>
+            </div>
+            <span>END_OF_LINE_</span>
         </footer>
     </main>
 </body>
diff --git a/src/reports/templates/retro_futurism/quote_item.html b/src/reports/templates/retro_futurism/quote_item.html
index f333471..9e93300 100644
--- a/src/reports/templates/retro_futurism/quote_item.html
+++ b/src/reports/templates/retro_futurism/quote_item.html
@@ -1,10 +1,17 @@
 {% if quotes %}
 {% for quote in quotes %}
 <article class="quote-item">
-    <div class="quote-glyph">"</div>
-    <p class="quote-content">{{ quote.content }}</p>
-    <div class="quote-author">— {{ quote.sender }}</div>
-    <p class="quote-note">{{ quote.reason }}</p>
+    <span class="color-third"></span>
+    <div class="quote-icon">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
+        </svg>
+    </div>
+    <div>
+        <p class="quote-content">{{ quote.content }}</p>
+        <div class="quote-author">— {{ quote.sender }}</div>
+        <p class="quote-note">{{ quote.reason }}</p>
+    </div>
 </article>
 {% endfor %}
 {% endif %}
diff --git a/src/reports/templates/retro_futurism/topic_item.html b/src/reports/templates/retro_futurism/topic_item.html
index c33568a..78ba10a 100644
--- a/src/reports/templates/retro_futurism/topic_item.html
+++ b/src/reports/templates/retro_futurism/topic_item.html
@@ -1,8 +1,13 @@
 {% if topics %}
 {% for topic in topics %}
 <article class="topic-item">
-    <div class="topic-index">{{ "%02d"|format(topic.index) }}</div>
-    <div>
+    <span class="color-third"></span>
+    <div class="topic-icon">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
+        </svg>
+    </div>
+    <div class="topic-content">
         <h3 class="topic-title">{{ topic.topic.topic }}</h3>
         <p class="topic-meta">PARTICIPANTS: {{ topic.contributors }}</p>
         <p class="topic-detail">{{ topic.topic.detail }}</p>
diff --git a/src/reports/templates/retro_futurism/user_title_item.html b/src/reports/templates/retro_futurism/user_title_item.html
index 293f5db..88e490f 100644
--- a/src/reports/templates/retro_futurism/user_title_item.html
+++ b/src/reports/templates/retro_futurism/user_title_item.html
@@ -9,12 +9,14 @@
             <div class="title-avatar-fallback">CRT</div>
             {% endif %}
         </div>
-        <div>
+        <div class="title-info">
             <span class="title-name">{{ title.name }}</span>
-            <span class="title-mbti">{{ title.mbti }}</span>
+            <div class="title-badges">
+                <span class="title-mbti">{{ title.mbti }}</span>
+                <span class="title-role">{{ title.title }}</span>
+            </div>
         </div>
     </div>
-    <div class="title-role">{{ title.title }}</div>
     <p class="title-reason">{{ title.reason }}</p>
 </article>
 {% endfor %}