* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Microsoft YaHei', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; color: #333; }
        .container { max-width: 1400px; margin: 20px auto; background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); overflow: hidden; }
        .header { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; padding: 25px; text-align: center; }
        .header h1 { font-size: 2rem; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
        .header p { opacity: 0.9; font-size: 1rem; }

        .section { background: #f8fafc; border: 2px solid #e2e8f0; margin: 20px; padding: 25px; border-radius: 12px; transition: all 0.3s ease; }
        .section:hover { border-color: #4facfe; box-shadow: 0 5px 15px rgba(79, 172, 254, 0.1); }
        .section h2 { color: #2d3748; margin-bottom: 15px; font-size: 1.3rem; display: flex; align-items: center; gap: 8px; }
        .section h2::before { content: ''; width: 4px; height: 20px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 2px; }

        .upload-area { border: 2px dashed #cbd5e0; padding: 25px; text-align: center; cursor: pointer; margin: 15px 0; border-radius: 10px; background: white; transition: all 0.3s ease; }
        .upload-area:hover { border-color: #4facfe; background: #f7faff; transform: translateY(-2px); }
        .upload-area.dragover { border-color: #00f2fe; background: #e6f7ff; transform: scale(1.02); }
        .upload-icon { font-size: 2rem; margin-bottom: 10px; color: #4facfe; }
        .upload-text { font-size: 1rem; color: #4a5568; margin-bottom: 5px; font-weight: 500; }
        .upload-hint { font-size: 0.85rem; color: #718096; }

        .btn { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; border: none; padding: 12px 24px; margin: 8px 5px; cursor: pointer; border-radius: 8px; font-size: 0.95rem; font-weight: 500; transition: all 0.3s ease; }
        .btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4); }
        .result { margin: 15px 0; padding: 15px; border-radius: 8px; display: none; font-weight: 500; }
        .success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .input-group { display: flex; align-items: center; gap: 10px; margin: 15px 0; flex-wrap: wrap; }
        .input-group label { color: #4a5568; font-weight: 500; min-width: 100px; }
        input[type="text"], input[type="number"] { padding: 10px 12px; border: 2px solid #e2e8f0; border-radius: 6px; width: 200px; font-size: 0.95rem; transition: border-color 0.3s ease; }
        input[type="text"]:focus, input[type="number"]:focus { outline: none; border-color: #4facfe; box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1); }
        .file-input { display: none; }

        .footer { text-align: center; padding: 20px; color: #718096; font-size: 0.9rem; background: #f8fafc; border-top: 1px solid #e2e8f0; }

        @media (max-width: 768px) {
            .container { margin: 10px; border-radius: 10px; }
            .section { padding: 20px; margin: 10px; }
            .header h1 { font-size: 1.5rem; }
            input[type="text"], input[type="number"] { width: 100%; }
        }