body { font-family: 'Noto Sans SC', sans-serif; color: #333; line-height: 1.6;
} .container { max-width: 1200px; margin: 0 auto; padding: 20px; min-height: 100vh; display: flex; flex-direction: column;
} .header { text-align: center; margin-bottom: 40px; color: #333;
} .logo { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 10px;
} .logo-img { width: 50px; height: 50px; margin-right: 12px;
} .logo h1 { font-size: 2.5rem; font-weight: 600; color: #2c3e50;
} .tagline { font-size: 1.1rem; color: #7f8c8d; font-weight: 400; margin-top: 8px;
} .main-content { flex: 1; display: flex; flex-direction: column;
} .quote-card { background: white; border-radius: 12px; padding: 40px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-align: center; max-width: 800px; margin: 0 auto 40px; border: 1px solid #e9ecef;
} .quote-content { font-size: 1.4rem; line-height: 1.8; margin-bottom: 30px; color: #555; font-weight: 500;
} .quote-actions { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;
} .btn { padding: 10px 20px; border: none; border-radius: 6px; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease;
} .btn-primary { background: #2c3e50; color: white;
} .btn-primary:hover { background: #34495e; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);
} .btn-secondary { background: #f8f9fa; color: #666; border: 2px solid #e9ecef;
} .btn-secondary:hover { background: #e9ecef; transform: translateY(-2px);
} .btn-tertiary { background: transparent; color: #2c3e50; border: 2px solid #2c3e50;
} .btn-tertiary:hover { background: #2c3e50; color: white; transform: translateY(-2px);
} /* 功能介绍区域 */
.intro-section { max-width: 800px; margin: 0 auto 40px; padding: 30px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;
} .intro-section h2 { font-size: 1.5rem; margin-bottom: 16px; color: #2c3e50; font-weight: 600;
} .intro-section p { margin-bottom: 12px; line-height: 1.7; color: #555;
} .intro-section p:last-child { margin-bottom: 0;
} /* 使用步骤 */
.steps-section { max-width: 800px; margin: 0 auto 40px; padding: 30px;
} .steps-section h2 { font-size: 1.5rem; margin-bottom: 24px; color: #2c3e50; font-weight: 600;
} .steps-list { list-style: none; counter-reset: step-counter; padding-left: 0;
} .steps-list li { counter-increment: step-counter; margin-bottom: 20px; padding-left: 40px; position: relative; line-height: 1.7; color: #555;
} .steps-list li::before { content: counter(step-counter); position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: #2c3e50; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.9rem;
} .steps-list li strong { color: #2c3e50; font-weight: 600;
} /* 示例区域 */
.examples-section { max-width: 800px; margin: 0 auto 40px; padding: 30px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;
} .examples-section h2 { font-size: 1.5rem; margin-bottom: 24px; color: #2c3e50; font-weight: 600;
} .example-box { margin-bottom: 30px; padding: 20px; background: white; border-radius: 6px; border-left: 3px solid #2c3e50;
} .example-box:last-child { margin-bottom: 0;
} .example-box h3 { font-size: 1.1rem; margin-bottom: 12px; color: #2c3e50; font-weight: 600;
} .example-box p { margin-bottom: 12px; line-height: 1.7; color: #555;
} .example-quote { margin: 16px 0; padding: 16px 20px; background: #f8f9fa; border-left: 3px solid #95a5a6; font-style: italic; color: #555; line-height: 1.6;
} /* FAQ区域 */
.faq-section { max-width: 800px; margin: 0 auto 40px; padding: 30px;
} .faq-section h2 { font-size: 1.5rem; margin-bottom: 24px; color: #2c3e50; font-weight: 600;
} .faq-item { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #e9ecef;
} .faq-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none;
} .faq-item h3 { font-size: 1.1rem; margin-bottom: 10px; color: #2c3e50; font-weight: 600;
} .faq-item p { line-height: 1.7; color: #555;
} .footer { text-align: center; margin-top: 60px; padding-top: 30px; border-top: 1px solid #e9ecef; color: #7f8c8d; font-size: 0.9rem;
} .footer-links a:hover { color: #34495e; text-decoration: underline;
} .loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; color: white;
} .loading.show { display: flex;
} .spinner { width: 50px; height: 50px; border: 4px solid rgba(255, 255, 255, 0.3); border-top: 4px solid #2c3e50; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px;
} @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
} .notification { position: fixed; top: 20px; right: 20px; background: #4CAF50; color: white; padding: 15px 25px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s ease; z-index: 1000;
} .notification.show { transform: translateX(0);
} .notification.error { background: #f44336;
} @media (max-width: 768px) { .container { padding: 15px; } .logo h1 { font-size: 2rem; } .quote-card { padding: 30px 20px; margin: 0 10px 30px; } .quote-content { font-size: 1.2rem; } .quote-actions { flex-direction: column; align-items: center; } .btn { width: 200px; } .intro-section, .steps-section, .examples-section, .faq-section { padding: 20px; margin-bottom: 30px; } .steps-list li { padding-left: 35px; }
} @media (max-width: 480px) { .logo { flex-direction: column; gap: 10px; } .logo h1 { font-size: 1.8rem; } .quote-content { font-size: 1.1rem; } .intro-section, .steps-section, .examples-section, .faq-section { padding: 15px; } .example-box { padding: 15px; }
}