/* 基础样式 */ 
 * { 
     margin: 0; 
     padding: 0; 
     box-sizing: border-box; 
 } 
 
 
 body { 
     font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; 
     line-height: 1.6; 
     color: #333; 
     background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); 
     min-height: 100vh; 
     padding-bottom: 60px; /* 为固定底部的页脚留出空间 */ 
 } 
 
 
 /* 页眉样式 */ 
 .header-container { 
     background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 100%); 
     color: white; 
     padding: 1.5rem 0; 
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
 } 
 
 
 .header-content { 
     max-width: 1200px; 
     margin: 0 auto; 
 } 
 
 
 /* 主内容区域样式 */ 
 .main-container { 
     max-width: 1200px; 
     margin: 2rem auto; 
     padding: 0 1rem; 
 } 
 
 
 .card { 
     background: white; 
     padding: 2rem; 
     margin-bottom: 2rem; 
     border-radius: 12px; 
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); 
     transition: transform 0.3s ease; 
 } 
 
 
 .card:hover { 
     transform: translateY(-5px); 
 } 
 
 
 h2 { 
     color: #4CAF50; 
     margin-bottom: 1.5rem; 
     font-size: 1.5rem; 
 } 
 
 
 .ip-address { 
     font-weight: bold; 
     color: #e74c3c; 
     word-break: break-all; 
 } 
 
 
 .btn { 
     background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 100%); 
     color: white; 
     border: none; 
     padding: 0.75rem 1.5rem; 
     border-radius: 6px; 
     cursor: pointer; 
     margin-top: 1rem; 
     font-weight: 600; 
     transition: all 0.3s ease; 
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
 } 
 
 
 .btn:hover { 
     transform: translateY(-2px); 
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); 
 } 
 
 
 .feedback { 
     margin-top: 0.5rem; 
     padding: 0.5rem; 
     border-radius: 4px; 
     display: none; 
 } 
 
 
 .feedback.show { 
     display: block; 
     animation: fadeInOut 3s ease; 
 } 
 
 
 @keyframes fadeInOut { 
     0% { opacity: 0; } 
     20% { opacity: 1; } 
     80% { opacity: 1; } 
     100% { opacity: 0; } 
 } 
 
 
 .feature-list { 
     list-style-type: none; 
     padding-left: 0; 
 } 
 
 
 .feature-list li { 
     position: relative; 
     padding-left: 2rem; 
     margin-bottom: 0.75rem; 
 } 
 
 
 .feature-list li::before { 
     content: "✓"; 
     color: #4CAF50; 
     font-weight: bold; 
     position: absolute; 
     left: 0; 
 } 
 
 
 /* 页脚样式 */ 
 .footer-container { 
     background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 100%); 
     color: white; 
     text-align: center; 
     padding: 1rem 0; 
     position: fixed; 
     bottom: 0; 
     width: 100%; 
     box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); 
 } 
 
 
 .footer-content { 
     max-width: 1200px; 
     margin: 0 auto; 
 }