/* ========================================
   基础样式和变量
======================================== */

/* 基础样式 */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

:root {
   --primary: #1a73e8;
   --primary-hover: #1557b0;
   --success: #34a853;
   --text-primary: #202124;
   --text-secondary: #5f6368;
   --bg-primary: #ffffff;
   --bg-secondary: #f8f9fa;
   --border: #e0e0e0;
   --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
   --radius: 8px;
   --transition: all 0.3s ease;
}

body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   color: var(--text-primary);
   background: var(--bg-secondary);
   line-height: 1.6;
   font-size: 16px;
}

.container {
   max-width: 1350px;
   margin: 0 auto;
   padding: 0 20px;
   width: 100%;
   box-sizing: border-box;
}

/* 响应式容器 padding */
@media (max-width: 1400px) {
   .container {
      padding: 0 20px;
   }
}

@media (max-width: 1024px) {
   .container {
      padding: 0 16px;
   }
}

@media (max-width: 768px) {
   .container {
      padding: 0 12px;
   }
}

@media (max-width: 480px) {
   .container {
      padding: 0 10px;
   }
}