feat: 样式统一 + 月份下拉框扩展

- 品牌色统一为天机阁标准 #4A6CF7，tailwind.config 扩展完整色阶
- styles.css 新增 :root CSS 变量层（brand 色阶、语义色、圆角/阴影 token）
- 全项目 hex/Tailwind 类统一替换为 brand-* CSS 变量（115 处引用）
- border-radius/box-shadow 统一使用 token 变量
- 预留 :root[data-theme="dark"] 暗色主题变量占位
- 所有月份下拉框范围从 3 年/15 月扩展至 2020-2027（8 年 96 月）

templates/index.html

@@ -11,10 +11,32 @@
           extend: {
             colors: {
               brand: {
-                50: '#eff6ff',
-                600: '#2563eb',
-                700: '#1d4ed8'
+                50: '#f0f3ff',
+                100: '#dbe3fe',
+                200: '#b9c7fd',
+                300: '#93a9fc',
+                400: '#748bf9',
+                500: '#5670f6',
+                600: '#4A6CF7',
+                700: '#3b53c8',
+                800: '#2d3d9d',
+                900: '#1f2a72',
+                950: '#141b4d'
               }
+            },
+            fontFamily: {
+              sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"PingFang SC"', '"Microsoft YaHei"', 'sans-serif']
+            },
+            borderRadius: {
+              sm: '6px',
+              md: '8px',
+              lg: '12px',
+              xl: '16px'
+            },
+            boxShadow: {
+              card: '0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)',
+              drawer: '-18px 0 45px rgba(15, 23, 42, 0.14)',
+              overlay: '0 20px 60px rgba(0,0,0,0.12)'
             }
           }
         }
@@ -30,7 +52,7 @@
       <!-- 左侧工作台切换栏 -->
       <aside class="w-[72px] bg-slate-900 flex flex-col items-center py-6 gap-1 shrink-0 sticky top-0 h-screen overflow-y-auto" id="workspaceSidebar">
         <div class="flex flex-col items-center mb-2 cursor-pointer" onclick="document.getElementById('userAvatar').click()">
-          <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center text-white font-bold text-sm hover:ring-2 hover:ring-blue-400 transition-all" id="userAvatar" title=""></div>
+          <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center text-white font-bold text-sm hover:ring-2 hover:ring-brand-400 transition-all" id="userAvatar" title=""></div>
           <span class="text-[10px] text-slate-400 mt-1.5 max-w-[64px] truncate text-center" id="userDisplayName" title=""></span>
         </div>
         <!-- 分隔线 -->
@@ -84,17 +106,17 @@
     <header class="topbar border-b border-slate-200 bg-white px-8 py-5">
       <div class="flex items-center gap-3 w-full">
         <div class="flex-1">
-          <p class="eyebrow text-xs font-semibold uppercase tracking-[0.18em] text-blue-700">OPC Manager <span class="ml-2 text-xs font-normal text-slate-400 tracking-normal">v1.2.0.41</span></p>
+          <p class="eyebrow text-xs font-semibold uppercase tracking-[0.18em] text-brand-700">OPC Manager <span class="ml-2 text-xs font-normal text-slate-400 tracking-normal">v1.2.0.41</span></p>
           <div class="flex items-center gap-4 mt-1">
             <h1 class="text-2xl font-semibold" id="workspaceTitle">科普 OPC 工作台</h1>
-            <div class="hidden sm:flex items-center gap-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-100 rounded-full px-4 py-1.5">
-              <i data-lucide="sparkles" class="text-blue-500" style="width:14px;height:14px"></i>
-              <span class="text-xs text-blue-700 font-medium tracking-wide">真看病，看真病，用学术会议，科普，科研，患者管理，帮助医生与患者提升临床治疗</span>
+            <div class="hidden sm:flex items-center gap-1.5 bg-gradient-to-r from-brand-50 to-indigo-50 border border-brand-100 rounded-full px-4 py-1.5">
+              <i data-lucide="sparkles" class="text-brand-500" style="width:14px;height:14px"></i>
+              <span class="text-xs text-brand-700 font-medium tracking-wide">真看病，看真病，用学术会议，科普，科研，患者管理，帮助医生与患者提升临床治疗</span>
             </div>
           </div>
         </div>
-        <button onclick="document.getElementById('opcLetterModal').classList.remove('hidden')" class="ml-auto flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-full bg-blue-50 border border-blue-200 hover:bg-blue-100 transition-colors" title="OPC 来信">
-          <i data-lucide="mail" class="text-blue-500" style="width:18px;height:18px"></i>
+        <button onclick="document.getElementById('opcLetterModal').classList.remove('hidden')" class="ml-auto flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-full bg-brand-50 border border-brand-200 hover:bg-brand-100 transition-colors" title="OPC 来信">
+          <i data-lucide="mail" class="text-brand-500" style="width:18px;height:18px"></i>
         </button>
       </div>
     </header>