[CRITICAL FIX] iPad深色模式对比度与竖屏完整体验修复

深色模式对比度问题修复：
- 卡片背景色：#161b22 → #21262d（提升对比度）
- 表面层级重构：#21262d → #30363d → #484f58（清晰层次）
- 文字在深色卡片上现在清晰可见

iPad Air竖屏完整体验：
- 断点策略调整：768px以上显示双栏布局（替代880px）
- iPad Air竖屏(768px)：直接双栏，无需抽屉
- 手机(<768px)：抽屉+快速dock模式

技术细节：
- CSS断点：768px双栏临界点，消除iPad竖屏功能缺失
- JavaScript同步：所有断点逻辑统一为767px
- 响应式优化：iPad专用栅格列宽300-350px，间距优化

用户体验：
✅ iPad Air深色模式：卡片文字清晰可见
✅ iPad Air竖屏：完整双栏专业界面
✅ 手机：抽屉+dock双重交互模式

遵循最小修改原则，精确修复用户反馈的核心问题

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

static/script.js

@@ -1879,15 +1879,15 @@ function closeDrawer() {
     overlay.classList.remove('show');
     document.body.style.overflow = '';
 
-    // Restore quick dock visibility on narrow screens
-    if (quickDock && window.innerWidth <= 880) {
+    // Restore quick dock visibility on narrow screens only
+    if (quickDock && window.innerWidth <= 767) {
         quickDock.style.display = 'flex';
     }
 }
 
-// Auto-show drawer on first visit for narrow screens
+// Auto-show drawer on first visit for narrow screens only
 document.addEventListener('DOMContentLoaded', () => {
-    if (window.innerWidth <= 880 && !localStorage.getItem('seenDrawer')) {
+    if (window.innerWidth <= 767 && !localStorage.getItem('seenDrawer')) {
         setTimeout(() => {
             openDrawer();
             localStorage.setItem('seenDrawer', '1');

static/style.css

@@ -76,11 +76,11 @@
 
 @media (prefers-color-scheme: dark) {
     :root {
-        /* Dark mode professional colors */
+        /* Dark mode professional colors - Enhanced contrast */
         --bg: #0d1117;
-        --surface: #161b22;
-        --surface-secondary: #21262d;
-        --surface-tertiary: #30363d;
+        --surface: #21262d;
+        --surface-secondary: #30363d;
+        --surface-tertiary: #484f58;
 
         /* Dark text hierarchy - WCAG AA compliant */
         --text-primary: #f6f8fa;
@@ -977,12 +977,30 @@ label, .meta {
 /* Container query fallback using viewport queries */
 
 /* Enhanced breakpoints for different screen sizes */
-/* Use 880px breakpoint for better iPad portrait support */
-@media (max-width: 880px) {
+/* iPad Air portrait (768px) and larger keep dual-pane for complete experience */
+@media (min-width: 768px) {
+    .app-container {
+        grid-template-columns: minmax(280px, 380px) 1fr;
+        gap: clamp(12px, 1.5vw, 24px);
+    }
+
+    /* Ensure sidebar toggle is hidden on larger screens */
+    .sidebar-toggle {
+        display: none;
+    }
+
+    /* Hide quick dock on larger screens */
+    .quick-dock {
+        display: none !important;
+    }
+}
+
+/* Only narrow mobile screens (< 768px) use drawer mode */
+@media (max-width: 767px) {
     .app-container {
         grid-template-columns: 1fr;
-        gap: 0; /* Remove gap in mobile */
-        padding: var(--spacing-4);
+        gap: 0;
+        padding: var(--spacing-3);
     }
 
     /* Only hide main layout left panel, not drawer content */
@@ -1000,15 +1018,22 @@ label, .meta {
     }
 
     .right-panel {
-        min-height: calc(100vh - 2 * var(--spacing-4));
+        min-height: calc(100vh - 2 * var(--spacing-3));
     }
 }
 
-/* iPad and medium screens keep dual-pane layout */
-@media (min-width: 881px) and (max-width: 1024px) {
+/* Tablet optimizations for iPad Air portrait */
+@media (min-width: 768px) and (max-width: 1024px) {
     .app-container {
-        grid-template-columns: minmax(280px, 350px) 1fr;
-        gap: clamp(12px, 1.5vw, 20px);
+        grid-template-columns: minmax(300px, 350px) 1fr;
+        gap: clamp(16px, 2vw, 20px);
+        padding: var(--spacing-4);
+    }
+
+    /* Optimize history grid for tablet */
+    .history-grid {
+        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+        gap: var(--spacing-3);
     }
 }
 
@@ -1886,8 +1911,8 @@ select:focus-visible,
     transform: translateY(-1px);
 }
 
-/* Show quick dock only on narrow screens */
-@media (max-width: 880px) {
+/* Show quick dock only on very narrow screens */
+@media (max-width: 767px) {
     .quick-dock {
         display: flex;
     }