diff --git a/apps/desktop/src/components/InteractiveInput.tsx b/apps/desktop/src/components/InteractiveInput.tsx
index 594bf60..25b8a28 100644
--- a/apps/desktop/src/components/InteractiveInput.tsx
+++ b/apps/desktop/src/components/InteractiveInput.tsx
@@ -163,13 +163,12 @@ export const InteractiveInput: React.FC<InteractiveInputProps> = ({
           disabled={disabled}
           maxLength={maxLength}
           className={`
-            block w-full rounded-lg border
+            block w-full rounded-lg border 
             ${getStatusColor()}
             ${icon && iconPosition === 'left' || type === 'search' ? 'pl-10' : 'pl-3'}
             ${showClearButton || showPasswordToggle || getStatusIcon() || (icon && iconPosition === 'right') ? 'pr-10' : 'pr-3'}
             py-2.5 text-sm
             placeholder-gray-400
-            focus:outline-none 
             disabled:bg-gray-50 disabled:text-gray-500 disabled:cursor-not-allowed
             ${isFocused ? 'shadow-sm' : ''}
             ${error ? 'animate-error-shake' : ''}
@@ -209,11 +208,6 @@ export const InteractiveInput: React.FC<InteractiveInputProps> = ({
             <span className="text-gray-400 w-4 h-4">{icon}</span>
           )}
         </div>
-
-        {/* 焦点指示器 */}
-        {isFocused && (
-          <div className="absolute inset-0 rounded-lg border-2 border-primary-500 pointer-events-none animate-pulse" />
-        )}
       </div>
 
       {/* 底部信息 */}
@@ -285,147 +279,3 @@ export const SearchInput: React.FC<SearchInputProps> = ({
     />
   );
 };
-
-/**
- * 交互式文本区域组件
- */
-interface InteractiveTextareaProps {
-  value?: string;
-  onChange?: (value: string) => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-  placeholder?: string;
-  label?: string;
-  error?: string;
-  success?: string;
-  hint?: string;
-  required?: boolean;
-  disabled?: boolean;
-  rows?: number;
-  maxLength?: number;
-  className?: string;
-  textareaClassName?: string;
-}
-
-export const InteractiveTextarea: React.FC<InteractiveTextareaProps> = ({
-  value = '',
-  onChange,
-  onFocus,
-  onBlur,
-  placeholder,
-  label,
-  error,
-  success,
-  hint,
-  required = false,
-  disabled = false,
-  rows = 4,
-  maxLength,
-  className = '',
-  textareaClassName = '',
-}) => {
-  const [isFocused, setIsFocused] = useState(false);
-  const [internalValue, setInternalValue] = useState(value);
-
-  useEffect(() => {
-    setInternalValue(value);
-  }, [value]);
-
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const newValue = e.target.value;
-    setInternalValue(newValue);
-    onChange?.(newValue);
-  };
-
-  const handleFocus = () => {
-    setIsFocused(true);
-    onFocus?.();
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-    onBlur?.();
-  };
-
-  const getStatusColor = () => {
-    if (error) return 'border-red-300 focus:border-red-500 focus:ring-red-500';
-    if (success) return 'border-green-300 focus:border-green-500 focus:ring-green-500';
-    return 'border-gray-300 focus:border-primary-500 focus:ring-primary-500';
-  };
-
-  return (
-    <div className={`space-y-1 ${className}`}>
-      {/* 标签 */}
-      {label && (
-        <label className="block text-sm font-medium text-gray-700">
-          {label}
-          {required && <span className="text-red-500 ml-1">*</span>}
-        </label>
-      )}
-
-      {/* 文本区域容器 */}
-      <div className="relative">
-        <textarea
-          value={internalValue}
-          onChange={handleChange}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          placeholder={placeholder}
-          disabled={disabled}
-          rows={rows}
-          maxLength={maxLength}
-          className={`
-            block w-full rounded-lg border transition-all duration-200
-            ${getStatusColor()}
-            px-3 py-2.5 text-sm
-            placeholder-gray-400
-            focus:outline-none focus:ring-2 focus:ring-opacity-50
-            disabled:bg-gray-50 disabled:text-gray-500 disabled:cursor-not-allowed
-            resize-none
-            ${isFocused ? 'shadow-sm' : ''}
-            ${error ? 'animate-error-shake' : ''}
-            ${textareaClassName}
-          `}
-        />
-
-        {/* 焦点指示器 */}
-        {isFocused && (
-          <div className="absolute inset-0 rounded-lg border-2 border-primary-500 pointer-events-none animate-pulse" />
-        )}
-      </div>
-
-      {/* 底部信息 */}
-      <div className="flex justify-between items-start">
-        <div className="space-y-1">
-          {/* 错误信息 */}
-          {error && (
-            <p className="text-sm text-red-600 flex items-center gap-1 animate-slide-in-up">
-              <AlertCircle className="w-3 h-3" />
-              {error}
-            </p>
-          )}
-
-          {/* 成功信息 */}
-          {success && !error && (
-            <p className="text-sm text-green-600 flex items-center gap-1 animate-slide-in-up">
-              <CheckCircle className="w-3 h-3" />
-              {success}
-            </p>
-          )}
-
-          {/* 提示信息 */}
-          {hint && !error && !success && (
-            <p className="text-sm text-gray-500">{hint}</p>
-          )}
-        </div>
-
-        {/* 字符计数 */}
-        {maxLength && (
-          <p className={`text-xs ${internalValue.length > maxLength * 0.8 ? 'text-orange-500' : 'text-gray-400'}`}>
-            {internalValue.length}/{maxLength}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/apps/desktop/src/styles/design-system.css b/apps/desktop/src/styles/design-system.css
index c7af150..4701d7f 100644
--- a/apps/desktop/src/styles/design-system.css
+++ b/apps/desktop/src/styles/design-system.css
@@ -755,6 +755,241 @@ main::-webkit-scrollbar-thumb:hover {
   scroll-behavior: smooth;
 }
 
+/* ===== 视觉层次系统 ===== */
+
+/* 字体层次 */
+.text-display-1 {
+  font-size: 3.5rem;
+  line-height: 1.1;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.text-display-2 {
+  font-size: 3rem;
+  line-height: 1.15;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+}
+
+.text-display-3 {
+  font-size: 2.5rem;
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.text-heading-1 {
+  font-size: 2rem;
+  line-height: 1.25;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+}
+
+.text-heading-2 {
+  font-size: 1.75rem;
+  line-height: 1.3;
+  font-weight: 600;
+}
+
+.text-heading-3 {
+  font-size: 1.5rem;
+  line-height: 1.35;
+  font-weight: 600;
+}
+
+.text-heading-4 {
+  font-size: 1.25rem;
+  line-height: 1.4;
+  font-weight: 600;
+}
+
+.text-heading-5 {
+  font-size: 1.125rem;
+  line-height: 1.45;
+  font-weight: 600;
+}
+
+.text-heading-6 {
+  font-size: 1rem;
+  line-height: 1.5;
+  font-weight: 600;
+}
+
+.text-body-large {
+  font-size: 1.125rem;
+  line-height: 1.6;
+  font-weight: 400;
+}
+
+.text-body {
+  font-size: 1rem;
+  line-height: 1.6;
+  font-weight: 400;
+}
+
+.text-body-small {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+.text-caption {
+  font-size: 0.75rem;
+  line-height: 1.4;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+}
+
+.text-overline {
+  font-size: 0.75rem;
+  line-height: 1.4;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+/* 颜色层次 */
+.text-primary {
+  color: rgb(var(--color-primary-600));
+}
+
+.text-primary-light {
+  color: rgb(var(--color-primary-500));
+}
+
+.text-primary-dark {
+  color: rgb(var(--color-primary-700));
+}
+
+.text-emphasis {
+  color: rgb(var(--color-gray-900));
+  font-weight: 600;
+}
+
+.text-high-emphasis {
+  color: rgb(var(--color-gray-900));
+}
+
+.text-medium-emphasis {
+  color: rgb(var(--color-gray-700));
+}
+
+.text-low-emphasis {
+  color: rgb(var(--color-gray-500));
+}
+
+.text-disabled {
+  color: rgb(var(--color-gray-400));
+}
+
+.text-success {
+  color: rgb(var(--color-green-600));
+}
+
+.text-warning {
+  color: rgb(var(--color-yellow-600));
+}
+
+.text-error {
+  color: rgb(var(--color-red-600));
+}
+
+.text-info {
+  color: rgb(var(--color-blue-600));
+}
+
+/* 间距层次 */
+.space-xs { margin: 0.25rem; }
+.space-sm { margin: 0.5rem; }
+.space-md { margin: 1rem; }
+.space-lg { margin: 1.5rem; }
+.space-xl { margin: 2rem; }
+.space-2xl { margin: 3rem; }
+.space-3xl { margin: 4rem; }
+
+.gap-xs { gap: 0.25rem; }
+.gap-sm { gap: 0.5rem; }
+.gap-md { gap: 1rem; }
+.gap-lg { gap: 1.5rem; }
+.gap-xl { gap: 2rem; }
+.gap-2xl { gap: 3rem; }
+.gap-3xl { gap: 4rem; }
+
+.padding-xs { padding: 0.25rem; }
+.padding-sm { padding: 0.5rem; }
+.padding-md { padding: 1rem; }
+.padding-lg { padding: 1.5rem; }
+.padding-xl { padding: 2rem; }
+.padding-2xl { padding: 3rem; }
+.padding-3xl { padding: 4rem; }
+
+/* 阴影层次 */
+.shadow-subtle {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.shadow-soft {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+.shadow-medium {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.shadow-strong {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.shadow-intense {
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.shadow-dramatic {
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+/* 边框层次 */
+.border-subtle {
+  border: 1px solid rgb(var(--color-gray-200));
+}
+
+.border-soft {
+  border: 1px solid rgb(var(--color-gray-300));
+}
+
+.border-medium {
+  border: 2px solid rgb(var(--color-gray-300));
+}
+
+.border-strong {
+  border: 2px solid rgb(var(--color-gray-400));
+}
+
+.border-primary {
+  border: 2px solid rgb(var(--color-primary-500));
+}
+
+.border-success {
+  border: 2px solid rgb(var(--color-green-500));
+}
+
+.border-warning {
+  border: 2px solid rgb(var(--color-yellow-500));
+}
+
+.border-error {
+  border: 2px solid rgb(var(--color-red-500));
+}
+
+/* 圆角层次 */
+.rounded-subtle { border-radius: 0.25rem; }
+.rounded-soft { border-radius: 0.5rem; }
+.rounded-medium { border-radius: 0.75rem; }
+.rounded-strong { border-radius: 1rem; }
+.rounded-intense { border-radius: 1.5rem; }
+.rounded-dramatic { border-radius: 2rem; }
+
 /* ===== 页面布局优化 ===== */
 
 /* 固定导航栏布局 */
@@ -841,3 +1076,825 @@ main::-webkit-scrollbar-thumb:hover {
 .scroll-indicator.has-more::after {
   opacity: 1;
 }
+
+/* ===== 高级视觉效果 ===== */
+
+/* 渐变背景 */
+.bg-gradient-primary {
+  background: linear-gradient(135deg, rgb(var(--color-primary-500)), rgb(var(--color-primary-600)));
+}
+
+.bg-gradient-secondary {
+  background: linear-gradient(135deg, rgb(var(--color-gray-100)), rgb(var(--color-gray-200)));
+}
+
+.bg-gradient-success {
+  background: linear-gradient(135deg, rgb(var(--color-green-500)), rgb(var(--color-green-600)));
+}
+
+.bg-gradient-warning {
+  background: linear-gradient(135deg, rgb(var(--color-yellow-500)), rgb(var(--color-yellow-600)));
+}
+
+.bg-gradient-error {
+  background: linear-gradient(135deg, rgb(var(--color-red-500)), rgb(var(--color-red-600)));
+}
+
+.bg-gradient-info {
+  background: linear-gradient(135deg, rgb(var(--color-blue-500)), rgb(var(--color-blue-600)));
+}
+
+/* 玻璃态效果 */
+.glass-effect {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.glass-effect-dark {
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* 发光效果 */
+.glow-primary {
+  box-shadow: 0 0 20px rgba(var(--color-primary-500), 0.3);
+}
+
+.glow-success {
+  box-shadow: 0 0 20px rgba(var(--color-green-500), 0.3);
+}
+
+.glow-warning {
+  box-shadow: 0 0 20px rgba(var(--color-yellow-500), 0.3);
+}
+
+.glow-error {
+  box-shadow: 0 0 20px rgba(var(--color-red-500), 0.3);
+}
+
+/* 状态指示器 */
+.status-indicator {
+  position: relative;
+}
+
+.status-indicator::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 2px solid white;
+}
+
+.status-indicator.status-online::before {
+  background-color: rgb(var(--color-green-500));
+}
+
+.status-indicator.status-busy::before {
+  background-color: rgb(var(--color-red-500));
+}
+
+.status-indicator.status-away::before {
+  background-color: rgb(var(--color-yellow-500));
+}
+
+.status-indicator.status-offline::before {
+  background-color: rgb(var(--color-gray-400));
+}
+
+/* 进度指示器 */
+.progress-bar {
+  width: 100%;
+  height: 4px;
+  background-color: rgb(var(--color-gray-200));
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.progress-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, rgb(var(--color-primary-500)), rgb(var(--color-primary-600)));
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+.progress-bar-animated .progress-bar-fill {
+  background-size: 20px 20px;
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+  animation: progress-stripes 1s linear infinite;
+}
+
+@keyframes progress-stripes {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 20px 0;
+  }
+}
+
+/* 徽章和标签 */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 0.375rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.badge-primary {
+  background-color: rgb(var(--color-primary-100));
+  color: rgb(var(--color-primary-800));
+}
+
+.badge-secondary {
+  background-color: rgb(var(--color-gray-100));
+  color: rgb(var(--color-gray-800));
+}
+
+.badge-success {
+  background-color: rgb(var(--color-green-100));
+  color: rgb(var(--color-green-800));
+}
+
+.badge-warning {
+  background-color: rgb(var(--color-yellow-100));
+  color: rgb(var(--color-yellow-800));
+}
+
+.badge-error {
+  background-color: rgb(var(--color-red-100));
+  color: rgb(var(--color-red-800));
+}
+
+.badge-info {
+  background-color: rgb(var(--color-blue-100));
+  color: rgb(var(--color-blue-800));
+}
+
+/* 分割线 */
+.divider {
+  border: none;
+  height: 1px;
+  background: linear-gradient(
+    to right,
+    transparent,
+    rgb(var(--color-gray-300)),
+    transparent
+  );
+  margin: 1rem 0;
+}
+
+.divider-vertical {
+  width: 1px;
+  height: 100%;
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    rgb(var(--color-gray-300)),
+    transparent
+  );
+  margin: 0 1rem;
+}
+
+/* 卡片变体 */
+.card-elevated {
+  background: white;
+  border-radius: 1rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border: 1px solid rgb(var(--color-gray-100));
+}
+
+.card-outlined {
+  background: white;
+  border-radius: 1rem;
+  border: 2px solid rgb(var(--color-gray-200));
+}
+
+.card-filled {
+  background: rgb(var(--color-gray-50));
+  border-radius: 1rem;
+  border: 1px solid rgb(var(--color-gray-200));
+}
+
+.card-interactive {
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.card-interactive:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* 焦点状态 */
+.focus-ring {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus-ring:focus {
+  outline: 2px solid rgb(var(--color-primary-500));
+  outline-offset: 2px;
+}
+
+.focus-ring-inset:focus {
+  outline: 2px solid rgb(var(--color-primary-500));
+  outline-offset: -2px;
+}
+
+/* ===== 移动端优化 ===== */
+
+/* 触摸友好的交互元素 */
+@media (max-width: 768px) {
+  /* 最小触摸目标 44px */
+  .touch-target {
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  /* 移动端按钮优化 */
+  .btn {
+    min-height: 44px;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+  }
+
+  .btn-sm {
+    min-height: 40px;
+    padding: 0.625rem 0.875rem;
+    font-size: 0.875rem;
+  }
+
+  .btn-lg {
+    min-height: 48px;
+    padding: 0.875rem 1.25rem;
+    font-size: 1.125rem;
+  }
+
+  /* 移动端输入框优化 */
+  .form-input,
+  .form-textarea,
+  .form-select {
+    min-height: 44px;
+    padding: 0.75rem;
+    font-size: 1rem;
+    border-radius: 0.5rem;
+  }
+
+  /* 移动端导航优化 */
+  .nav-mobile {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: white;
+    border-top: 1px solid rgb(var(--color-gray-200));
+    padding: 0.5rem;
+    z-index: 50;
+  }
+
+  .nav-mobile-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.5rem;
+    min-height: 44px;
+    border-radius: 0.5rem;
+    transition: all 0.2s ease;
+  }
+
+  .nav-mobile-item:hover {
+    background-color: rgb(var(--color-gray-100));
+  }
+
+  .nav-mobile-item.active {
+    background-color: rgb(var(--color-primary-100));
+    color: rgb(var(--color-primary-700));
+  }
+
+  /* 移动端模态框优化 */
+  .modal-mobile {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    padding: 1rem;
+  }
+
+  .modal-mobile .modal-content {
+    width: 100%;
+    max-height: calc(100vh - 2rem);
+    margin: auto;
+    border-radius: 1rem;
+    overflow: hidden;
+  }
+
+  /* 移动端卡片优化 */
+  .card-mobile {
+    border-radius: 1rem;
+    padding: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  /* 移动端表格优化 */
+  .table-mobile {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  .table-mobile thead {
+    display: none;
+  }
+
+  .table-mobile tbody,
+  .table-mobile tr,
+  .table-mobile td {
+    display: block;
+  }
+
+  .table-mobile tr {
+    border: 1px solid rgb(var(--color-gray-200));
+    border-radius: 0.5rem;
+    margin-bottom: 0.5rem;
+    padding: 0.75rem;
+  }
+
+  .table-mobile td {
+    border: none;
+    padding: 0.25rem 0;
+    position: relative;
+    padding-left: 30%;
+  }
+
+  .table-mobile td:before {
+    content: attr(data-label);
+    position: absolute;
+    left: 0;
+    width: 25%;
+    padding-right: 0.5rem;
+    white-space: nowrap;
+    font-weight: 600;
+    color: rgb(var(--color-gray-700));
+  }
+
+  /* 移动端间距调整 */
+  .container {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .section-padding {
+    padding: 2rem 0;
+  }
+
+  .card-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  /* 移动端字体调整 */
+  .text-display-1 { font-size: 2.5rem; }
+  .text-display-2 { font-size: 2rem; }
+  .text-display-3 { font-size: 1.75rem; }
+  .text-heading-1 { font-size: 1.5rem; }
+  .text-heading-2 { font-size: 1.25rem; }
+  .text-heading-3 { font-size: 1.125rem; }
+
+  /* 移动端滚动优化 */
+  .scroll-mobile {
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+  }
+
+  /* 移动端手势支持 */
+  .swipe-container {
+    touch-action: pan-x;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+  }
+
+  .swipe-item {
+    scroll-snap-align: start;
+    flex-shrink: 0;
+  }
+}
+
+/* 平板端优化 */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .btn {
+    min-height: 40px;
+  }
+
+  .form-input,
+  .form-textarea,
+  .form-select {
+    min-height: 40px;
+  }
+
+  .card-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+  }
+
+  .container {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+/* 大屏幕优化 */
+@media (min-width: 1920px) {
+  .container {
+    max-width: 1600px;
+  }
+
+  .card-grid {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+  }
+
+  .text-display-1 { font-size: 4rem; }
+  .text-display-2 { font-size: 3.5rem; }
+  .text-display-3 { font-size: 3rem; }
+}
+
+/* 触摸设备专用样式 */
+@media (hover: none) and (pointer: coarse) {
+  /* 移除悬停效果 */
+  .hover\:bg-gray-50:hover {
+    background-color: inherit;
+  }
+
+  .hover\:shadow-md:hover {
+    box-shadow: inherit;
+  }
+
+  /* 增强点击反馈 */
+  .btn:active {
+    transform: scale(0.98);
+    transition: transform 0.1s ease;
+  }
+
+  .card-interactive:active {
+    transform: scale(0.99);
+    transition: transform 0.1s ease;
+  }
+
+  /* 触摸友好的链接 */
+  a {
+    -webkit-tap-highlight-color: rgba(var(--color-primary-500), 0.3);
+  }
+}
+
+/* 高对比度模式支持 */
+@media (prefers-contrast: high) {
+  .border-subtle {
+    border-color: rgb(var(--color-gray-900));
+  }
+
+  .text-low-emphasis {
+    color: rgb(var(--color-gray-700));
+  }
+
+  .bg-gradient-primary {
+    background: rgb(var(--color-primary-600));
+  }
+}
+
+/* 减少动画偏好 */
+@media (prefers-reduced-motion: reduce) {
+  .card-interactive:hover {
+    transform: none;
+  }
+
+  .btn:active {
+    transform: none;
+  }
+
+  .swipe-container {
+    scroll-behavior: auto;
+  }
+}
+
+/* ===== 可访问性优化 ===== */
+
+/* 键盘导航 */
+.keyboard-navigation {
+  outline: none;
+}
+
+.keyboard-navigation:focus-visible {
+  outline: 2px solid rgb(var(--color-primary-500));
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+
+/* 跳转链接 */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 6px;
+  background: rgb(var(--color-primary-600));
+  color: white;
+  padding: 8px;
+  text-decoration: none;
+  border-radius: 0.25rem;
+  z-index: 1000;
+}
+
+.skip-link:focus {
+  top: 6px;
+}
+
+/* 屏幕阅读器专用 */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.sr-only-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: inherit;
+  margin: inherit;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+/* 高对比度指示器 */
+.high-contrast-border {
+  border: 2px solid transparent;
+}
+
+@media (prefers-contrast: high) {
+  .high-contrast-border {
+    border-color: currentColor;
+  }
+}
+
+/* 焦点陷阱 */
+.focus-trap {
+  position: relative;
+}
+
+.focus-trap::before,
+.focus-trap::after {
+  content: '';
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* ARIA 状态指示 */
+[aria-expanded="true"] .expand-icon {
+  transform: rotate(180deg);
+}
+
+[aria-selected="true"] {
+  background-color: rgb(var(--color-primary-100));
+  color: rgb(var(--color-primary-900));
+}
+
+[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+[aria-invalid="true"] {
+  border-color: rgb(var(--color-red-500));
+  box-shadow: 0 0 0 1px rgb(var(--color-red-500));
+}
+
+/* 实时区域 */
+.live-region {
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+/* ===== 性能优化 ===== */
+
+/* GPU 加速 */
+.gpu-accelerated {
+  transform: translateZ(0);
+  will-change: transform;
+}
+
+/* 内容可见性优化 */
+.content-visibility-auto {
+  content-visibility: auto;
+  contain-intrinsic-size: 200px;
+}
+
+/* 图片懒加载优化 */
+.lazy-image {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.lazy-image.loaded {
+  opacity: 1;
+}
+
+.lazy-image-placeholder {
+  background: linear-gradient(
+    90deg,
+    rgb(var(--color-gray-200)) 25%,
+    rgb(var(--color-gray-300)) 50%,
+    rgb(var(--color-gray-200)) 75%
+  );
+  background-size: 200% 100%;
+  animation: loading-shimmer 1.5s infinite;
+}
+
+/* 虚拟滚动优化 */
+.virtual-scroll-container {
+  overflow: auto;
+  height: 100%;
+}
+
+.virtual-scroll-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+/* 防抖动画 */
+.debounced-animation {
+  animation-delay: 0.1s;
+  animation-fill-mode: both;
+}
+
+/* 内存优化 */
+.memory-efficient {
+  contain: layout style paint;
+}
+
+/* 渲染优化 */
+.render-optimized {
+  contain: strict;
+  content-visibility: auto;
+}
+
+/* 滚动性能优化 */
+.scroll-optimized {
+  overflow: auto;
+  overscroll-behavior: contain;
+  scroll-behavior: smooth;
+}
+
+@supports (scroll-timeline: works) {
+  .scroll-optimized {
+    scroll-timeline: --scroll-timeline block;
+  }
+}
+
+/* 字体加载优化 */
+.font-display-swap {
+  font-display: swap;
+}
+
+/* 关键资源预加载 */
+.preload-critical {
+  font-display: block;
+}
+
+/* 非关键资源延迟加载 */
+.load-deferred {
+  font-display: optional;
+}
+
+/* ===== 工具类 ===== */
+
+/* 布局工具 */
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-start {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.flex-end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.grid-center {
+  display: grid;
+  place-items: center;
+}
+
+/* 文本工具 */
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.text-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* 间距工具 */
+.space-y-auto > * + * {
+  margin-top: auto;
+}
+
+.space-x-auto > * + * {
+  margin-left: auto;
+}
+
+/* 可见性工具 */
+.visible-on-hover {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.group:hover .visible-on-hover {
+  opacity: 1;
+}
+
+.visible-on-focus {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.group:focus-within .visible-on-focus {
+  opacity: 1;
+}
+
+/* 状态工具 */
+.loading-state {
+  pointer-events: none;
+  opacity: 0.7;
+  cursor: wait;
+}
+
+.error-state {
+  border-color: rgb(var(--color-red-500));
+  background-color: rgb(var(--color-red-50));
+}
+
+.success-state {
+  border-color: rgb(var(--color-green-500));
+  background-color: rgb(var(--color-green-50));
+}
+
+.warning-state {
+  border-color: rgb(var(--color-yellow-500));
+  background-color: rgb(var(--color-yellow-50));
+}